@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    scroll-behavior: smooth;
}

body {
    font-family: "Lexend", sans-serif;
    background: #ebeef650;
    color: #444444;
    overflow-x: hidden;
}

body.user {
    background: #f4f4f4;
}

.lx {
    font-family: "Lexend", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lexend", sans-serif;
}

a {
    text-decoration: none !important;
}

p {
    margin-bottom: 0px !important;
}

li {
    list-style: none !important;
}

/* Font Sizes */

.fs-5 {
    font-size: 5px !important;
}

.fs-6 {
    font-size: 6px !important;
}

.fs-8 {
    font-size: 8px !important;
}

.fs-9 {
    font-size: 9px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-21 {
    font-size: 21px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-40 {
    font-size: 40px !important;
}

/* Font Weights */

.fw-300 {
    font-weight: 300 !important;
}

.fw-350 {
    font-weight: 350 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-450 {
    font-weight: 450 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-550 {
    font-weight: 550 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-650 {
    font-weight: 650 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-750 {
    font-weight: 750 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

/* Line Heights */

.lh-8 {
    line-height: 8px !important;
}

.lh-9 {
    line-height: 9px !important;
}

.lh-10 {
    line-height: 10px !important;
}

.lh-11 {
    line-height: 11px !important;
}

.lh-12 {
    line-height: 12px !important;
}

.lh-13 {
    line-height: 13px !important;
}

.lh-14 {
    line-height: 14px !important;
}

.lh-15 {
    line-height: 15px !important;
}

.lh-16 {
    line-height: 16px !important;
}

.lh-17 {
    line-height: 17px !important;
}

.lh-18 {
    line-height: 18px !important;
}

.lh-19 {
    line-height: 19px !important;
}

.lh-20 {
    line-height: 20px !important;
}

.lh-21 {
    line-height: 21px !important;
}

.lh-22 {
    line-height: 22px !important;
}

.lh-23 {
    line-height: 23px !important;
}

.lh-24 {
    line-height: 24px !important;
}

.lh-25 {
    line-height: 25px !important;
}

.lh-26 {
    line-height: 26px !important;
}

.lh-27 {
    line-height: 27px !important;
}

.lh-28 {
    line-height: 28px !important;
}

.lh-29 {
    line-height: 29px !important;
}

.lh-30 {
    line-height: 30px !important;
}

.lh-32 {
    line-height: 32px !important;
}

/* Letter Spaces */

.ls-1 {
    letter-spacing: 1px !important;
}

.ls-2 {
    letter-spacing: 2px !important;
}

/* Opacity */

.op-0 {
    opacity: 0 !important;
}

.op-10 {
    opacity: 0.1 !important;
}

.op-20 {
    opacity: 0.2 !important;
}

.op-30 {
    opacity: 0.3 !important;
}

.op-40 {
    opacity: 0.4 !important;
}

.op-50 {
    opacity: 0.5 !important;
}

.op-60 {
    opacity: 0.6 !important;
}

.op-70 {
    opacity: 0.7 !important;
}

.op-80 {
    opacity: 0.8 !important;
}

.op-90 {
    opacity: 0.9 !important;
}

/* Border Radius */

.br-0 {
    border-radius: 0px !important;
}

.br-2 {
    border-radius: 2px !important;
}

.br-3 {
    border-radius: 3px !important;
}

.br-4 {
    border-radius: 4px !important;
}

.br-5 {
    border-radius: 5px !important;
}

.br-7 {
    border-radius: 7px !important;
}

.br-8 {
    border-radius: 8px !important;
}

.br-10 {
    border-radius: 10px !important;
}

.br-12 {
    border-radius: 12px !important;
}

.br-15 {
    border-radius: 15px !important;
}

.br-20 {
    border-radius: 20px !important;
}

.br-25 {
    border-radius: 25px !important;
}

.br-50 {
    border-radius: 50px !important;
}

.br-100 {
    border-radius: 100px !important;
}

.br-200 {
    border-radius: 200px !important;
}

/* Borders */

.b0 {
    border: none !important;
}

.b05 {
    border: 0.5px solid !important;
}

.b1 {
    border: 1px solid !important;
}

.b15 {
    border: 1.5px solid !important;
}

.b05-t {
    border-top: 1px solid !important;
}

.b05-b {
    border-bottom: 1px solid !important;
}

.b05-l {
    border-left: 1px solid !important;
}

.b05-r {
    border-right: 1px solid !important;
}

.b1-t {
    border-top: 1px solid !important;
}

.b1-b {
    border-bottom: 1px solid !important;
}

.b1-l {
    border-left: 1px solid !important;
}

.b1-r {
    border-right: 1px solid !important;
}

.b1-dotted {
    border: 1px dotted !important;
}

.bc-grey2 {
    border-color: rgba(115, 113, 112, 1) !important;
}

.bc-grey3 {
    border-color: rgba(153, 152, 151, 0.7) !important;
}

.bc-grey4 {
    border-color: rgba(153, 152, 151, 0.25) !important;
}

.bc-lightblue {
    border-color: #ebeef6 !important;
}

.bc-lightblue2 {
    border-color: #e1e5f1 !important;
}

.bc-lightblue3 {
    border-color: #c0cae3 !important;
}


/* Objects and Texts */

.white-wrap {
    white-space: nowrap !important;
}

.text-ellipsis {
    text-overflow: ellipsis !important;
}

.text-capital {
    text-transform: capitalize !important;
}

.object-cover {
    object-fit: cover !important;
}

.object-contain {
    object-fit: contain !important;
}

.object-center {
    object-position: center !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.break-word {
    overflow-wrap: break-word !important;
}

/* Transistions */

.trans-02 {
    transition: all 0.2s;
}

.trans-03 {
    transition: all 0.3s;
}

.trans-05 {
    transition: all 0.5s;
}

.trans-07 {
    transition: all 0.7s;
}

/* Width */

.width-max {
    width: max-content !important;
}

.width-auto {
    width: auto !important;
}

.width-0 {
    width: 0 !important;
}

.width-100 {
    width: 100% !important;
}

.height-calc {
    height: calc(100% - 30px);
}

/* Colors */

.text-lightblue1 {
    color: #ebeef6 !important;
}

.text-lightblue2 {
    color: #e1e5f1 !important;
}

.text-lightblue3 {
    color: #c0cae3 !important;
}

.text-blue {
    color: #3454a4 !important;
}

.text-darkblue {
    color: #17264A !important;
}

.text-darkblue {
    color: #273f7b !important;
}

.text-green {
    color: rgba(48, 190, 130, 1) !important;
}

.text-lightgreen {
    color: rgba(224, 245, 236, 1) !important;
}

.text-red {
    color: #ff304d !important;
}

.text-lightred {
    color: #ffeaed !important;
}

.text-dark {
    color: rgba(37, 36, 36, 1) !important;
}

.text-dark2 {
    color: rgba(62, 61, 61, 1) !important;
}

.text-grey {
    color: rgba(82, 81, 81, 1) !important;
}

.text-grey2 {
    color: rgba(115, 113, 112, 1) !important;
}

.text-grey3 {
    color: rgba(153, 152, 151, 1) !important;
}

.text-grey4 {
    color: rgba(153, 152, 151, 0.25) !important;
}

/* BackGround Colors */

.bg-lightblue1 {
    background-color: #ebeef6 !important;
}

.bg-lightblue2 {
    background-color: #e1e5f1 !important;
}

.bg-lightblue3 {
    background-color: #c0cae3 !important;
}

.bg-blue {
    background-color: #3454a4 !important;
}

.bg-darkblue {
    background-color: #17264A !important;
}

.bg-lightgreen {
    background-color: rgba(224, 245, 236, 1) !important;
}

.bg-lightred {
    background-color: #ffeaed !important;
}

.bg-light {
    background-color: rgb(255, 255, 255) !important;
}

.bg-dark1 {
    background-color: rgba(37, 36, 36, 1) !important;
}

.bg-lightdark1 {
    background-color: rgba(230, 227, 225, 0.8) !important;
}

.bg-lightdark2 {
    background-color: rgba(153, 152, 151, 0.25) !important;
}

.bg-dark2 {
    background-color: rgba(62, 61, 61, 1.5) !important;
}

/* Hover Color */

.hover-darkblue:hover {
    color: #273f7b !important;
}

/* Filter */

.filter {
    filter: saturate(0);
}

/* Form Control */

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: rgba(var(--bs-body-color-rgb), .65);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    font-weight: 350;
}

.form-control:focus,
.form-select:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 0.5px solid #3454a4 !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem #3454a415 !important;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: light-dark(rgb(254, 241, 235), rgba(254, 241, 235, 0.4)) !important;
    color: fieldtext !important;
}

.form-control,
.form-select {
    height: 40px;
    font-size: 14px;
    color: #252424;
}

.label-transform+input,
.label-transform+select {
    border: 0.5px solid #3454a4 !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem #3454a415 !important;
}

.label-transform {
    transform: translateX(-15%) translateY(-150%) scale(0.85) !important;
    color: #3454a4 !important;
    font-weight: 400 !important;
    display: block !important;
}

.col-md-8 .label-transform {
    transform: translateX(-10%) translateY(-140%) scale(0.85) !important
}

.textarea .label-transform {
    transform: translateX(-15%) translateY(-60%) scale(0.85) !important;
    color: #3454a4 !important;
    font-weight: 400 !important;
    display: block !important;
}

.label-transform+input[type="date"] {
    color: #252424 !important;
}

.need-focus input[type="date"].form-control {
    color: transparent;
}

.btn-darkblue {
    color: #fff;
    background-color: #3454a4;
    border-color: #3454a4 !important;
    transition: all 0.4s;
}

.btn-darkblue:hover {
    color: #fff !important;
    border-color: #2f4c94 !important;
    background-color: #2f4c94 !important;
    box-shadow: 0px 0px 5px 0px #2f4c94;
}

/* Export CSV */

.csv-btn {
    padding: 10px 15px;
    transition: all 0.4s;
}

.csv-btn:hover {
    border-color: rgba(37, 36, 36, 0.92) !important;
    background-color: rgba(37, 36, 36, 0.92) !important;
    box-shadow: 0px 0px 5px 0px rgba(37, 36, 36, 1);
}

.csv-btn span {
    transition: 0.4s;
}

.csv-btn span:after {
    content: "\f6dd";
    position: absolute;
    top: 0;
    right: -20px;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    font-family: fontawesome;
    transition: 0.7s;
}

.csv-btn:hover span {
    padding-right: 26px;
}

.csv-btn:hover span:after {
    opacity: 1;
    right: 0;
}

/* Export PDF */
.pdf-btn {
    padding: 10px 15px;
    transition: all 0.4s;
}

.pdf-btn:hover {
    border-color: #2f4c94 !important;
    background-color: #2f4c94 !important;
    box-shadow: 0px 0px 5px 0px #2f4c94;
}

.pdf-btn span {
    transition: 0.4s;
}

.pdf-btn span:after {
    content: "\f1c1";
    position: absolute;
    top: 0;
    right: -20px;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    font-family: fontawesome;
    transition: 0.7s;
}

.pdf-btn:hover span {
    padding-right: 26px;
}

.pdf-btn:hover span:after {
    opacity: 1;
    right: 0;
}

@media (max-width: 1200px) {
    .create-shipment section.create-shipment .wizard-form {
        overflow-x: scroll;
    }
}

/* Admin Dashboard Designing */

#header.header {
    width: 82%;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    box-shadow: none;
    background-color: #ebeef6 !important;
    height: auto;
}

.sidebar {
    top: 0px;
    width: 18%;
    transition: all 0.5s;
    /* box-shadow: none; */
}

.sidebar .sidebar-nav .index-icon .small-icon {
    display: none;
}

.index .header .toggle-sidebar-btn .fa-angle-right,
.index.toggle-sidebar .header .toggle-sidebar-btn .fa-angle-left {
    display: none;
}

.index.toggle-sidebar .header .toggle-sidebar-btn .fa-angle-right {
    display: block;
}

.sidebar .sidebar-nav .nav-link.collapsed {
    color: #3E3D3D;
    background: #fff;
    transition: all 0.3;
}

.sidebar .sidebar-nav .nav-link.collapsed:hover {
    color: #3454a4;
    background: #ebeef6;
    font-weight: 550;
}

.sidebar .sidebar-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: #3454a4;
    transition: all 0.3;
    background: #ebeef6;
    padding: 10px 15px;
    margin: 5px 0px;
    border-radius: 4px;
    width: 100%;
    display: flex;
    align-items: center;
}

.sidebar .sidebar-nav .nav-link span {
    margin-left: 8px;
}

.sidebar .sidebar-nav .nav-link.collapsed .icon .blue-icon,
.sidebar .sidebar-nav .nav-link.collapsed:hover .icon .black-icon,
.sidebar .sidebar-nav .nav-link .icon .black-icon {
    display: none;
}

.sidebar .sidebar-nav .nav-link.collapsed:hover .icon .blue-icon,
.sidebar .sidebar-nav .nav-link.collapsed .icon .black-icon {
    display: block;
}

.sidebar .sidebar-nav .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 5px;
    height: 100%;
    background-color: #3454a4;
    border-radius: 5px 15px 15px 5px;
}

.sidebar .sidebar-nav .nav-link.collapsed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 5px;
    height: 0px;
    background-color: #3454a4;
    border-radius: 5px 15px 15px 5px;
    transition: all 0.4s;
}

.sidebar .sidebar-nav .nav-link.collapsed:hover::before {
    height: 100%;
}

.toggle-sidebar .sidebar a.create-shipment {
    padding-left: 20px !important;
    width: 75% !important;
}

.toggle-sidebar .sidebar a.create-shipment span {
    display: none;
}

#main {
    transition: all 0.5s;
}

#main,
#footer {
    /* width: 83%; */
    left: 0;
    right: auto;
    position: relative;
}

/* Mobile Sidebar close btn Css */

.mobile-sideclose {
    right: 20px;
    top: 10px;
    width: 50px;
    height: 50px;
    padding-top: 15px;
    text-align: center;
}

/* Profile Popup */

.header .dropdown-menu.profile {
    max-width: 200px;
}

.header-nav .profile .dropdown-item {
    padding: 12px 16px;
}

.header .dropdown-menu.profile .icon .blue-icon {
    display: none;
}

.header .header-nav .profile .dropdown-item span {
    color: rgba(62, 61, 61, 1);
}

.header .header-nav .profile .dropdown-item:hover span {
    color: #3454a4;
}

.header .header-nav .profile .dropdown-item:hover {
    background-color: #e1e5f1;
}

.header .header-nav .profile .dropdown-item:hover .icon .blue-icon {
    display: block;
}

.header .header-nav .profile .dropdown-item:hover .icon .black-icon {
    display: none;
}

.header .dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    padding: 10px 20px;
}

@media (max-width: 1199px) {

    .header,
    #main {
        width: 100% !important;
    }

    #main {
        margin-top: 90px;
        left: 0px !important;
    }

    .sidebar {
        top: 0px;
        width: 100%;
        z-index: 1000;
        transition: all 0.5s;
        /* box-shadow: none; */
    }

    .toggle-sidebar .sidebar a.create-shipment {
        padding-left: 20px !important;
        width: 100% !important;
    }

    .toggle-sidebar .sidebar a.create-shipment span {
        display: inline;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 90px;
    }

    .toggle-sidebar #header.header {
        width: 94.5%;
    }

    .toggle-sidebar #main {
        width: 92%;
    }

    .toggle-sidebar .sidebar {
        left: 0px;
        width: 5.5%;
        padding-right: 0px;
        padding-left: 20px;
    }

    .toggle-sidebar .sidebar .nav-link {
        padding: 12px 15px;
    }

    .toggle-sidebar .sidebar .nav-link .icon img {
        height: 22px;
    }

    .toggle-sidebar .sidebar .nav-link span {
        display: none;
    }

    .toggle-sidebar .sidebar .sidebar-nav .index-icon .small-icon {
        display: block;
    }

    .toggle-sidebar .sidebar .sidebar-nav .index-icon .main-icon {
        display: none;
    }
}

/* Badge */

.badge {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.large-badge {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 450;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

/* Global Dropdowns */

.menu .dropdown-menu-arrow::before {
    display: none;
}

.menu ul.dropdown-menu {
    padding: 0px;
}

.menu .dropdown-menu .dropdown-item:hover {
    background-color: #e1e5f1;
    position: relative;
    color: #3454a4 !important;
}

/* Hover dropitem Before */

.menu .dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    display: none;
    background-color: #3454a4;
    transition: all 0.3s;
}

.menu .dropdown-menu .dropdown-item:hover::before {
    display: block;
}

/* Hover drop-item Orange, black icon Change */
.menu .dropdown-menu .dropdown-item:hover>img.black-icon {
    display: none;
}

.menu .dropdown-menu .dropdown-item:hover>img.orange-icon {
    display: block;
}

/* Data Tables */

.dt-length label,
.dt-search label {
    margin: 6px;
    font-size: 16px;
    font-weight: 320;
    color: rgba(37, 36, 36, 1);
}

div.dt-container .dt-input {
    border: 0.5px solid rgba(37, 36, 36, 0.5);
}

.dt-layout-cell .dt-info {
    margin-left: 5px;
    font-size: 15px;
    font-weight: 320;
    color: rgba(37, 36, 36, 1);
}

div.dt-container select.dt-input {
    color: rgba(37, 36, 36, 1);
    font-size: 14px;
    padding: 5px 8px;
}

div.dt-container .dt-search input {
    border: 0.5px solid rgba(37, 36, 36, 0.5);
    border-radius: 5px;
    color: rgba(37, 36, 36, 1);
    margin-left: 5px;
}

div.dt-container .dt-search input:focus {
    box-shadow: 0 0 0 .25rem rgba(243, 119, 50, .1) !important;
    border-color: #3454a4;
}

table.dataTable thead th,
table.dataTable thead th b,
table.dataTable tfoot th,
table.table {
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    text-align: left !important;
    white-space: nowrap;
    vertical-align: middle;
    padding-bottom: 5px;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
    padding: 15px 10px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #17264A;
}

table.dataTable>tbody>tr>th,
table.dataTable>tbody>tr>td {
    padding: 12px 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 385;
    font-size: 15px;
    color: rgba(37, 36, 36);
    vertical-align: middle;
    text-align: left !important;
    background-color: transparent;
}

.dt-paging-button.first,
.dt-paging-button.last {
    display: none !important;
}

div.dt-container .dt-paging .dt-paging-button.current {
    color: #3454a4 !important;
    border-color: #3454a4 !important;
}

div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: #fff !important;
}

div.dt-container .dt-paging .dt-paging-button {
    color: rgba(37, 36, 36, 1) !important;
    transition: all 0.3s;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    color: #fff !important;
    background: #2f4c94 !important;
    border-color: #2f4c94 !important;
}

.table {
    --bs-table-hover-bg: #ebeef685;
}

div.dt-container div.dt-layout-row:not(.dt-layout-table) {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}

div.dt-container div.dt-layout-row .dt-layout-start,
div.dt-container div.dt-layout-row .dt-layout-end {
    transform: scale(0.9);
}

/* Card Bg Remove */

/* .main .card, .main .card .card-body {
    box-shadow: none;
    background: transparent;
}

.datatable tr {
    background: none !important;
} */
 /* From Uiverse.io by vinodjangid07 */
.loader {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

body::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.truckWrapper {
    width: 200px;
    height: 100px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    overflow-x: hidden;
}

/* truck upper body */
.truckBody {
    width: 130px;
    height: fit-content;
    margin-bottom: 6px;
    animation: motion 1s linear infinite;
}

/* truck suspension animation*/
@keyframes motion {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(3px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* truck's tires */
.truckTires {
    width: 130px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px 0px 15px;
    position: absolute;
    bottom: 0;
}

.truckTires svg {
    width: 24px;
}

.road {
    width: 100%;
    height: 1.5px;
    background-color: #282828;
    position: relative;
    bottom: 0;
    align-self: flex-end;
    border-radius: 3px;
}

.road::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 100%;
    background-color: #282828;
    right: -50%;
    border-radius: 3px;
    animation: roadAnimation 1.4s linear infinite;
    border-left: 10px solid white;
}

.road::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    background-color: #282828;
    right: -65%;
    border-radius: 3px;
    animation: roadAnimation 1.4s linear infinite;
    border-left: 4px solid white;
}

.lampPost {
    position: absolute;
    bottom: 0;
    right: -90%;
    height: 90px;
    animation: roadAnimation 1.4s linear infinite;
}

@keyframes roadAnimation {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-350px);
    }
}