body {
  font-family: "Cairo", sans-serif;
  direction: ltr;
  box-sizing: border-box;
  /* background: #222b32; */
}
/* main colors */
:root {
  --primary: #2631e1;
  --table-header: #273240;
  --required: #ac2022;
  --gold: #655ae6;
  --Nav-bg: #030303;
  --white: #ffffff;
  --black: #000;
  --lavender: #e4ebff;
  --honeydew: #e0f4e5;
  --primary-txt: #1d2939;
  --sec-txt: #667085;
  --third-txt: #7a7a7a;
  --forth-txt: #999999;
  --label-txt: #344054;
}
/* common style */
.cursor-pointer {
  cursor: pointer;
}
img,
a {
  display: inline-block;
}
.login-img img {
  width: 85%;
}
a {
  text-decoration: none;
  color: var(--black);
}
input:focus {
  outline: none;
}
.main-btn {
  background: var(--primary);
  border-radius: 8px;
  color: var(--white);
  padding: 18px 18px 18px 28px;
}
.breadcrumb-item.active {
  color: var(--primary);
}
.pale-bg {
  background: #f3f3f3;
}
.whiteSpace-nowrap {
  white-space: nowrap;
}
/* /common style */

/* nav */
nav.main-nav {
  background: var(--Nav-bg);
  padding: 11px 100px 11px 67px;
  font-weight: 700;
}
.user-icon {
  height: 20px;
}
.viwer-nav {
  margin: 0px 30px !important;
}
/* /nav */
/* login page */
.login-section,
.registration-section {
  margin-left: 64px;
  margin-top: 130px;
}
form label {
  color: var(--label-txt);
  font-weight: 500;
  font-size: 14px;
}
.login-header,
.login-header {
  color: var(--primary-txt);
}
.registration-desc,
.registration-desc {
  color: var(--sec-txt);
  font-weight: 500;
}
/* /login page */
/* footer */
.footer p {
  color: var(--sec-txt);
  font-weight: 500;
}
/* /footer */
/* Violation Report */
.sub-nav-wrapper {
  padding: 16px 100px 16px 56px;
}
.sub-nav-wrapper p {
  color: var(--primary);
}
/* /Violation Report */
/* table-header */
.table-header {
  margin: 0 24px;
  padding: 11.5px 24px;
  background: #f1f3f3;
  border: 1px solid #eaebfc;
  box-shadow: 0px 4px 8.5px 0px rgba(0, 0, 0, 10%);
}
.table-header .time-wrapper {
  color: var(--table-header);
}
.table-header .time-wrapper input,
.table-header .search-wrapper input {
  border: 1px solid #cbd1f3;
  padding: 5px 0px;
  box-shadow: 0px 4px 8.5px 0px rgba(0, 0, 0, 10%);
}
.table-header .search-wrapper i {
  color: #2631e1;
}
.table-header .time-wrapper input {
  width: 100%;
  min-width: 80px;
}
.violations-btn {
  width: 50%;
  min-width: 200px;
}
/* /table-header */
/* table-wrapper */
.table-wrapper {
  margin: 0 24px;
}
.table-wrapper table {
  box-shadow: 0px 4px 8.5px 0px rgba(0, 0, 0, 10%);
}
.table-wrapper thead {
  background-color: rgba(38, 49, 225, 0.16);
  padding: 23px 0;
}

/* Header Cells Border */
.table-wrapper thead th {
  text-align: center;
  padding: 23px 0;
}

/* Data Row Border */
.table-wrapper tbody tr {
  border-bottom: 1px solid rgba(234, 235, 252, 1);
}

/* Data Row Hover Effect */
.table-wrapper tbody tr:hover {
  background-color: rgba(225, 38, 72, 0.12);
}
.table-wrapper tbody tr td {
  text-align: center;
  color: rgba(39, 50, 64, 1);
}
.table-wrapper .pin-icon {
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: 20px;
  top: 24px;
  right: 9px;
}
.table-wrapper .speed-td-wrapper {
  height: 70px;
}
/* /table-wrapper */

/* export-footer */
.export-footer {
  margin: 0 24px;
  padding: 16px 24px;
  background: rgba(38, 49, 225, 0.16);
  border: 1px solid rgba(234, 235, 252, 1);
}
.export-footer .export-btn {
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 8px;
  width: 119px;
  font-size: 14px;
  cursor: pointer;
}
/* /export-footer */

@media (max-width: 47.9375em) {
  nav.main-nav {
    padding: 11px 14px;
    font-weight: 500;
  }
  .mobile-wrap {
    flex-wrap: wrap !important;
    gap: 5px;
  }
  .viwer-nav {
    margin: 5px 20px !important;
  }
  .table-header {
    padding: 11.5px 14px;
  }
  .btn-content {
    white-space: pre-wrap;
  }
  .violations-btn {
    width: 100%;
    min-width: 100%;
    padding: 5px 0px !important;
  }
  .export-footer .export-btn {
    width: 50%;
    min-width: 100px;
  }
  .export-footer {
    margin: 0 14px;
    padding: 16px 14px;
  }
}