html {
  scrollbar-width: none;
}

html * {
  scrollbar-width: thin;
}

body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
body *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
body *::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  width: 5px;
  border-radius: 35px;
  -webkit-transition: background-color 0.8s;
  transition: background-color 0.8s;
}
body *::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:focus {
  background-color: rgba(0, 0, 0, 0.5);
}
body *::-webkit-scrollbar-track {
  border-radius: 35px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

button.av-btn, div.av-btn, a.av-btn {
  position: relative;
  background-color: transparent;
  border: transparent;
  outline: 0;
  overflow: hidden;
}
button.av-btn.regular, div.av-btn.regular, a.av-btn.regular {
  background-color: #4594ff;
  color: white;
}
button.av-btn.flex, div.av-btn.flex, a.av-btn.flex {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
button.av-btn.lg, div.av-btn.lg, a.av-btn.lg {
  min-height: 50px;
  min-width: 100px;
}
button.av-btn.b20, div.av-btn.b20, a.av-btn.b20 {
  font-size: 20px;
  font-weight: bold;
}
button.av-btn.w-border, div.av-btn.w-border, a.av-btn.w-border {
  border: 1px solid #4594ff;
}

.form-floating .form-control, .form-floating .form-select {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid #4594ff;
}
.form-floating .form-control:focus, .form-floating .form-select:focus {
  box-shadow: 0px 12px 7px -8px rgba(0, 0, 0, 0.3);
  border: 2px solid #4594ff;
}

html[dir=rtl] aside.menu {
  right: -300px;
  left: initial;
  transition: right 0.2s, box-shadow 0.2s;
}
html[dir=rtl] aside.menu.expanded {
  right: 0;
  box-shadow: -5px 0 15px 2px rgba(0, 0, 0, 0.5);
}
html[dir=rtl] aside.user-menu {
  direction: ltr;
  left: -300px;
  right: initial;
  transition: left 0.2s, box-shadow 0.2s;
}
html[dir=rtl] aside.user-menu.expanded {
  left: 0;
  box-shadow: 5px 0 15px 2px rgba(0, 0, 0, 0.5);
}
html[dir=rtl] aside.user-menu * {
  direction: rtl;
}
html[dir=rtl] .menu > .link-tree > .menu-link .link [data-menu=arrow] {
  position: absolute;
  left: 12px;
  right: initial;
  top: 20px;
  transform: rotate(90deg);
  transition: transform 0.5s;
}
html[dir=rtl] .wrapper {
  width: 100%;
  height: 100%;
}
html[dir=rtl] .wrapper .content .counting-card .cc-title {
  border-radius: 0px 7px 7px 0px;
}
html[dir=rtl] .wrapper .content .counting-card .cc-counters .counter .count {
  border-radius: 5px 5px 0 5px;
}
html[dir=rtl] .moked-modal-overlay .moked-modal-body .forms-grid div input {
  border-top: 2px solid #4594ff;
  border-bottom: 2px solid #4594ff;
  border-left: 2px solid #4594ff;
  border-right: 0;
}

body, html {
  width: 100%;
  height: 100%;
  caret-color: transparent;
  overscroll-behavior-y: contain;
}
body input, html input {
  caret-color: black;
}

nav {
  display: flex;
  width: 100%;
  height: 44px;
  box-shadow: 0 0 5px black;
  position: fixed;
  z-index: 300;
  top: 0;
  background-color: #4594ff;
  z-index: 3;
}
nav .nav-menu {
  width: 44px;
  height: 44px;
  font-size: 22px;
  background-color: transparent;
  border: 0;
  padding: 5px;
  color: white;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  transition: text-shadow 0.1s, color 0.25s;
}
nav .nav-menu:focus, nav .nav-menu:hover, nav .nav-menu:active {
  border-style: 0;
}
nav .nav-menu:active {
  text-shadow: 0px 0px 20px white;
}
nav .nav-menu:hover, nav .nav-menu:focus {
  color: rgba(255, 255, 255, 0.35);
}
nav .nav-menu.usermenu {
  align-self: flex-end;
}
nav .nav-logo {
  max-height: 40px;
  align-self: center;
  margin: 0 auto;
}

aside.user-menu {
  position: fixed;
  display: block;
  width: 300px;
  height: 100vh;
  top: 44px;
  right: -300px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 0 44px 0;
  background-color: #4594ff;
  z-index: 2;
  transition: right 0.2s, box-shadow 0.2s;
  direction: rtl;
}
aside.user-menu.expanded {
  right: 0;
  box-shadow: 5px 0 15px 2px rgba(0, 0, 0, 0.5);
}
aside.user-menu * {
  direction: ltr;
}
aside.user-menu .tool-bar {
  font-size: 22px;
  padding: 7px 0;
}
aside.user-menu .tool-bar .col-4 {
  padding: 5px;
}
aside.user-menu .tool-bar .col-4 .tool {
  position: relative;
  width: 100%;
  background: #1478ff;
  color: white;
  display: block;
  padding: 5px 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  overflow: hidden;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}
aside.user-menu .tool-bar .col-4 .tool:hover, aside.user-menu .tool-bar .col-4 .tool:focus {
  background: white;
  color: #4594ff;
}
aside.user-menu .tool-bar .col-4 .tool * {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
aside.user-menu .tool-bar .col-4 .tool.logout {
  background: red;
}
aside.user-menu .tool-bar .col-4 .tool.logout:hover, aside.user-menu .tool-bar .col-4 .tool.logout:focus {
  background: white;
  color: red;
}
aside.menu {
  position: fixed;
  display: block;
  width: 300px;
  height: 100vh;
  top: 44px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 0 44px 0;
  left: -300px;
  background-color: #4594ff;
  z-index: 2;
  transition: left 0.2s, box-shadow 0.2s;
}
aside.menu.expanded {
  left: 0;
  box-shadow: 5px 0 15px 2px rgba(0, 0, 0, 0.5);
}
aside.menu li, aside.menu ul, aside.menu ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
aside.menu > .link-tree {
  display: block;
}
aside.menu > .link-tree > .menu-link {
  width: 100%;
  display: block;
  color: white;
  background-color: transparent;
}
aside.menu > .link-tree > .menu-link .link {
  padding: 14px 20px;
  display: block;
  cursor: pointer;
  color: white;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}
aside.menu > .link-tree > .menu-link .link:hover, aside.menu > .link-tree > .menu-link .link:focus {
  background-color: white;
  color: #4594ff;
}
aside.menu > .link-tree > .menu-link .link.expanded [data-menu=arrow] {
  transform: rotate(0deg) !important;
}
aside.menu > .link-tree > .menu-link .link * {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
aside.menu > .link-tree > .menu-link .link [data-menu=arrow] {
  position: absolute;
  left: initial;
  right: 12px;
  position: absolute;
  top: 20px;
  transform: rotate(-90deg);
  transition: transform 0.5s;
}
aside.menu > .link-tree > .menu-link .link-tree {
  background-color: #1478ff;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  display: none;
  overflow: hidden;
}
aside.menu > .link-tree > .menu-link .link-tree .link-tree {
  background-color: #003e92;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  display: none;
  overflow: hidden;
}

.wrapper {
  height: 100%;
  width: 100%;
}
.wrapper .content, .wrapper .guard-form {
  display: block;
  padding: 55px 7px;
  width: 100%;
}
.wrapper .content .table-wrapper, .wrapper .content .av-card, .wrapper .guard-form .table-wrapper, .wrapper .guard-form .av-card {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  margin: 10px 10px;
}
@media only screen and (max-width: 500px) {
  .wrapper .content .table-wrapper, .wrapper .content .av-card, .wrapper .guard-form .table-wrapper, .wrapper .guard-form .av-card {
    margin: 10px 0px;
  }
}
.wrapper .content .table-wrapper .title, .wrapper .content .av-card .title, .wrapper .guard-form .table-wrapper .title, .wrapper .guard-form .av-card .title {
  background-color: white;
  color: black;
  padding: 7px 15px;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  justify-content: space-between;
}
.wrapper .content .table-wrapper .title .header, .wrapper .content .av-card .title .header, .wrapper .guard-form .table-wrapper .title .header, .wrapper .guard-form .av-card .title .header {
  font-size: 18px;
  font-weight: 600;
}
.wrapper .content .table-wrapper .title .title-tools, .wrapper .content .av-card .title .title-tools, .wrapper .guard-form .table-wrapper .title .title-tools, .wrapper .guard-form .av-card .title .title-tools {
  display: flex;
  justify-content: end;
  align-items: end;
  color: rgba(0, 0, 0, 0.4);
}
.wrapper .content .table-wrapper .title .title-tools .header-tool, .wrapper .content .av-card .title .title-tools .header-tool, .wrapper .guard-form .table-wrapper .title .title-tools .header-tool, .wrapper .guard-form .av-card .title .title-tools .header-tool {
  cursor: pointer !important;
  margin: 0 24px 0 0;
  transition: color 0.2s, text-shadow 0.2s;
}
.wrapper .content .table-wrapper .title .title-tools .header-tool:hover, .wrapper .content .table-wrapper .title .title-tools .header-tool:focus, .wrapper .content .av-card .title .title-tools .header-tool:hover, .wrapper .content .av-card .title .title-tools .header-tool:focus, .wrapper .guard-form .table-wrapper .title .title-tools .header-tool:hover, .wrapper .guard-form .table-wrapper .title .title-tools .header-tool:focus, .wrapper .guard-form .av-card .title .title-tools .header-tool:hover, .wrapper .guard-form .av-card .title .title-tools .header-tool:focus {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
.wrapper .content .table-wrapper .table-content, .wrapper .content .av-card .table-content, .wrapper .guard-form .table-wrapper .table-content, .wrapper .guard-form .av-card .table-content {
  display: block;
  overflow: auto;
  max-height: 500px;
}
.wrapper .content .table-wrapper .table-content table, .wrapper .content .av-card .table-content table, .wrapper .guard-form .table-wrapper .table-content table, .wrapper .guard-form .av-card .table-content table {
  padding: 0;
  margin: 0;
}
.wrapper .content .table-wrapper .table-content table tr, .wrapper .content .av-card .table-content table tr, .wrapper .guard-form .table-wrapper .table-content table tr, .wrapper .guard-form .av-card .table-content table tr {
  cursor: pointer;
}
.wrapper .content .table-wrapper .table-content table td, .wrapper .content .av-card .table-content table td, .wrapper .guard-form .table-wrapper .table-content table td, .wrapper .guard-form .av-card .table-content table td {
  min-width: 150px;
}
.wrapper .content .table-wrapper .vehicle-info, .wrapper .content .av-card .vehicle-info, .wrapper .guard-form .table-wrapper .vehicle-info, .wrapper .guard-form .av-card .vehicle-info {
  display: block;
}
.wrapper .content .table-wrapper .vehicle-info .head, .wrapper .content .av-card .vehicle-info .head, .wrapper .guard-form .table-wrapper .vehicle-info .head, .wrapper .guard-form .av-card .vehicle-info .head {
  text-align: center;
}
.wrapper .content .table-wrapper .vehicle-info .head .date, .wrapper .content .av-card .vehicle-info .head .date, .wrapper .guard-form .table-wrapper .vehicle-info .head .date, .wrapper .guard-form .av-card .vehicle-info .head .date {
  margin: 0px 0 10px 0;
  font-size: 20px;
  font-weight: 500;
}
.wrapper .content .table-wrapper .vehicle-info .head .plate, .wrapper .content .av-card .vehicle-info .head .plate, .wrapper .guard-form .table-wrapper .vehicle-info .head .plate, .wrapper .guard-form .av-card .vehicle-info .head .plate {
  font-size: 32px;
  background: gold;
  display: block;
  border-radius: 5px;
  width: 230px;
  height: 50px;
  margin: 0 auto 5px;
  font-weight: 600;
  position: relative;
  line-height: 50px;
  cursor: pointer;
}
.wrapper .content .table-wrapper .vehicle-info .head .plate::after, .wrapper .content .av-card .vehicle-info .head .plate::after, .wrapper .guard-form .table-wrapper .vehicle-info .head .plate::after, .wrapper .guard-form .av-card .vehicle-info .head .plate::after {
  position: absolute;
  content: "";
  width: 237px;
  height: 57px;
  background-color: black;
  top: -2px;
  right: -3px;
  z-index: -1;
  border-radius: 5px;
}
.wrapper .content .table-wrapper .vehicle-info .head .plate::before, .wrapper .content .av-card .vehicle-info .head .plate::before, .wrapper .guard-form .table-wrapper .vehicle-info .head .plate::before, .wrapper .guard-form .av-card .vehicle-info .head .plate::before {
  content: "";
  color: white;
  font-size: 12px;
  display: block;
  position: absolute;
  border: none;
  top: 0;
  left: -1px;
  width: 16px;
  height: inherit;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: blue;
}
.wrapper .content .table-wrapper .vehicle-info .information, .wrapper .content .av-card .vehicle-info .information, .wrapper .guard-form .table-wrapper .vehicle-info .information, .wrapper .guard-form .av-card .vehicle-info .information {
  padding: 10px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.wrapper .content .table-wrapper .vehicle-info .information .section, .wrapper .content .av-card .vehicle-info .information .section, .wrapper .guard-form .table-wrapper .vehicle-info .information .section, .wrapper .guard-form .av-card .vehicle-info .information .section {
  display: inline-flex;
  margin: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.wrapper .content .table-wrapper .vehicle-info .information .section span:first-child, .wrapper .content .av-card .vehicle-info .information .section span:first-child, .wrapper .guard-form .table-wrapper .vehicle-info .information .section span:first-child, .wrapper .guard-form .av-card .vehicle-info .information .section span:first-child {
  color: white;
  font-size: 24px;
  background-color: #4594ff;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.wrapper .content .table-wrapper .vehicle-info .information .section span:nth-child(2), .wrapper .content .av-card .vehicle-info .information .section span:nth-child(2), .wrapper .guard-form .table-wrapper .vehicle-info .information .section span:nth-child(2), .wrapper .guard-form .av-card .vehicle-info .information .section span:nth-child(2) {
  display: inline-flex;
  font-size: 18px;
  color: black;
  padding: 0 10px;
  border-bottom: 2px solid #4594ff;
  font-weight: 600;
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information, .wrapper .content .av-card .vehicle-info .expanded-information, .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information, .wrapper .guard-form .av-card .vehicle-info .expanded-information {
  display: none;
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid, .wrapper .content .av-card .vehicle-info .expanded-information .grid, .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid, .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid .section, .wrapper .content .av-card .vehicle-info .expanded-information .grid .section, .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid .section, .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid .section {
  padding: 0 10px;
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid .section:nth-child(-n+3), .wrapper .content .av-card .vehicle-info .expanded-information .grid .section:nth-child(-n+3), .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid .section:nth-child(-n+3), .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid .section:nth-child(-n+3) {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid .section:nth-child(n), .wrapper .content .av-card .vehicle-info .expanded-information .grid .section:nth-child(n), .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid .section:nth-child(n), .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid .section:nth-child(n) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid .section:nth-child(3n+2), .wrapper .content .av-card .vehicle-info .expanded-information .grid .section:nth-child(3n+2), .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid .section:nth-child(3n+2), .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid .section:nth-child(3n+2) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid .section .stitle, .wrapper .content .av-card .vehicle-info .expanded-information .grid .section .stitle, .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid .section .stitle, .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid .section .stitle {
  font-size: 16px;
  font-weight: 600;
}
.wrapper .content .table-wrapper .vehicle-info .expanded-information .grid .section .value, .wrapper .content .av-card .vehicle-info .expanded-information .grid .section .value, .wrapper .guard-form .table-wrapper .vehicle-info .expanded-information .grid .section .value, .wrapper .guard-form .av-card .vehicle-info .expanded-information .grid .section .value {
  font-size: 13px;
}
.wrapper .content .table-wrapper .vehicle-info .expansion-btn, .wrapper .content .av-card .vehicle-info .expansion-btn, .wrapper .guard-form .table-wrapper .vehicle-info .expansion-btn, .wrapper .guard-form .av-card .vehicle-info .expansion-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.wrapper .content .table-wrapper .vehicle-info .expansion-btn i, .wrapper .content .av-card .vehicle-info .expansion-btn i, .wrapper .guard-form .table-wrapper .vehicle-info .expansion-btn i, .wrapper .guard-form .av-card .vehicle-info .expansion-btn i {
  color: rgba(0, 0, 0, 0.4);
  transition: color 0.2s, text-shadow 0.2s;
  cursor: pointer;
}
.wrapper .content .table-wrapper .vehicle-info .expansion-btn i:hover, .wrapper .content .table-wrapper .vehicle-info .expansion-btn i:focus, .wrapper .content .av-card .vehicle-info .expansion-btn i:hover, .wrapper .content .av-card .vehicle-info .expansion-btn i:focus, .wrapper .guard-form .table-wrapper .vehicle-info .expansion-btn i:hover, .wrapper .guard-form .table-wrapper .vehicle-info .expansion-btn i:focus, .wrapper .guard-form .av-card .vehicle-info .expansion-btn i:hover, .wrapper .guard-form .av-card .vehicle-info .expansion-btn i:focus {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
.wrapper .content .table-wrapper .av-card-body .btn-float-fix, .wrapper .content .av-card .av-card-body .btn-float-fix, .wrapper .guard-form .table-wrapper .av-card-body .btn-float-fix, .wrapper .guard-form .av-card .av-card-body .btn-float-fix {
  display: flex;
  justify-content: end;
  -webkit-justify-content: flex-end;
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid, .wrapper .content .av-card .av-card-body .drivers-grid, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid, .wrapper .guard-form .av-card .av-card-body .drivers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
}
@media only screen and (max-width: 500px) {
  .wrapper .content .table-wrapper .av-card-body .drivers-grid, .wrapper .content .av-card .av-card-body .drivers-grid, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid, .wrapper .guard-form .av-card .av-card-body .drivers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid .driver-item, .wrapper .content .av-card .av-card-body .drivers-grid .driver-item, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid .driver-item, .wrapper .guard-form .av-card .av-card-body .drivers-grid .driver-item {
  /*
      text-align: center;
      background-color: blue;
      border:1px solid black;
      box-shadow: 0 0 2px rgba(0,0,0,0.5);
      padding:10px;
      cursor:pointer;
      transition: box-shadow 0.1s ease-in-out 0s;
          &:hover, &:focus{
              box-shadow: 0 0 5px vars.$c-regular;
          }
      img{
          height:100px;
          width:100px;
      }
  */
  padding: 10px;
  position: relative;
  overflow: hidden;
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid .driver-item *, .wrapper .content .av-card .av-card-body .drivers-grid .driver-item *, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid .driver-item *, .wrapper .guard-form .av-card .av-card-body .drivers-grid .driver-item * {
  pointer-events: none;
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid .driver-item img, .wrapper .content .av-card .av-card-body .drivers-grid .driver-item img, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid .driver-item img, .wrapper .guard-form .av-card .av-card-body .drivers-grid .driver-item img {
  height: 100px;
  width: 100px;
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid .add-item, .wrapper .content .av-card .av-card-body .drivers-grid .add-item, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid .add-item, .wrapper .guard-form .av-card .av-card-body .drivers-grid .add-item {
  padding: 20px 0 0 0;
  position: relative;
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid .add-item *, .wrapper .content .av-card .av-card-body .drivers-grid .add-item *, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid .add-item *, .wrapper .guard-form .av-card .av-card-body .drivers-grid .add-item * {
  pointer-events: none;
}
.wrapper .content .table-wrapper .av-card-body .drivers-grid .add-item i, .wrapper .content .av-card .av-card-body .drivers-grid .add-item i, .wrapper .guard-form .table-wrapper .av-card-body .drivers-grid .add-item i, .wrapper .guard-form .av-card .av-card-body .drivers-grid .add-item i {
  font-size: 30px;
}
.wrapper .content .counting-card, .wrapper .guard-form .counting-card {
  position: relative;
  display: flex;
  margin: 10px 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  border-radius: 7px;
}
.wrapper .content .counting-card .cc-title, .wrapper .guard-form .counting-card .cc-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  text-align: center;
  padding: 10px;
  background-color: #4594ff;
  border-radius: 7px 0px 0px 7px;
  color: white;
}
.wrapper .content .counting-card .cc-title i, .wrapper .guard-form .counting-card .cc-title i {
  font-size: 26px;
  line-height: 25px;
  margin: 0 7px;
}
.wrapper .content .counting-card .cc-title p, .wrapper .guard-form .counting-card .cc-title p {
  font-weight: bold;
  font-size: 16px;
  padding: 0;
  margin: 0;
}
.wrapper .content .counting-card .cc-counters, .wrapper .guard-form .counting-card .cc-counters {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  padding: 7px 10px;
  margin: 0 auto;
  justify-content: center;
}
.wrapper .content .counting-card .cc-counters *, .wrapper .guard-form .counting-card .cc-counters * {
  white-space: nowrap;
}
.wrapper .content .counting-card .cc-counters .counter, .wrapper .guard-form .counting-card .cc-counters .counter {
  display: flex;
  margin: 5px;
  font-size: 18px;
  font-weight: bold;
}
.wrapper .content .counting-card .cc-counters .counter .date, .wrapper .guard-form .counting-card .cc-counters .counter .date {
  border-bottom: 2px solid #4594ff;
  padding: 0 7px;
}
.wrapper .content .counting-card .cc-counters .counter .count, .wrapper .guard-form .counting-card .cc-counters .counter .count {
  background-color: #4594ff;
  padding: 0 7px;
  color: white;
  border-radius: 5px 5px 5px 0px;
}
.wrapper .content .gates, .wrapper .guard-form .gates {
  position: relative;
}
.wrapper .content .gates .road, .wrapper .guard-form .gates .road {
  display: flex;
  position: relative;
  background-color: grey;
  min-height: 200px;
  border: 5px dashed white;
}
.wrapper .content .gates .road:after, .wrapper .guard-form .gates .road:after {
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 6px dashed white;
  top: 50%;
}
.wrapper .content .gates .road-map, .wrapper .guard-form .gates .road-map {
  width: 100%;
  position: absolute;
  top: 34%;
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
}
.wrapper .content .gates .road-map .gate, .wrapper .guard-form .gates .road-map .gate {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.wrapper .content .gates .road-map .gate .icon, .wrapper .guard-form .gates .road-map .gate .icon {
  background-color: grey;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  font-size: 40px;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 3px solid white;
  color: white;
}
.wrapper .content .gates .road-map .gate .icon.open, .wrapper .guard-form .gates .road-map .gate .icon.open {
  background-color: green;
}
.wrapper .content .gates .road-map .gate .icon.closed, .wrapper .guard-form .gates .road-map .gate .icon.closed {
  background-color: red;
}
.wrapper .content .gates .road-map .gate .icon i, .wrapper .guard-form .gates .road-map .gate .icon i {
  pointer-events: none;
}
.wrapper .content .gates .road-map .gate .title, .wrapper .guard-form .gates .road-map .gate .title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: transparent !important;
  display: block !important;
  padding: 0;
  justify-content: unset;
  border-bottom: unset;
}
.search-container {
  display: flex;
}
.search-container:first-child {
  max-width: 250px;
  margin: 0.25rem auto;
}
.search-container .img {
  display: block;
}
.search-container .img img {
  width: 100%;
  height: auto;
}
.search-container .highlight {
  background-color: #4594ff;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
.search-container .highlight span {
  display: block;
  padding: 0 10px;
}
.search-container .highlight span:first-child {
  color: white;
}
.search-container .highlight span:nth-child(2) {
  background-color: white;
  border: 1px solid #4594ff;
}
.search-container .extra-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.search-container .extra-info .section {
  background-color: #565656;
  margin: 0.25rem 0;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  min-width: 275px;
}
.search-container .extra-info .section span {
  display: block;
  padding: 0 10px;
}
.search-container .extra-info .section span:first-child {
  color: white;
}
.search-container .extra-info .section span:nth-child(2) {
  background-color: white;
  border: 1px solid #565656;
}
.search-container .loading.fullsize {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.25);
  min-height: 300px;
}
.search-container .loading span {
  width: 100px;
  height: 100px;
}
.search-container .loading span i {
  font-size: 100px;
  margin: 0 auto;
  color: white;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  -webkit-animation: rotating 1.25s linear infinite;
  animation: rotating 1.25s linear infinite;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  -webkit-animation: ripple 600ms linear;
          animation: ripple 600ms linear;
  background-color: #4594ff;
  z-index: 300;
  pointer-events: none;
}

span.ripple-red {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  -webkit-animation: ripple 600ms linear;
          animation: ripple 600ms linear;
  background-color: red;
  z-index: 300;
  pointer-events: none;
}

span.ripple-white {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  -webkit-animation: ripple 600ms linear;
          animation: ripple 600ms linear;
  background-color: white;
  z-index: 300;
  pointer-events: none;
}

.custom-file-wrapper input {
  display: none;
}
.custom-file-wrapper label {
  position: relative;
  overflow: hidden;
  display: flex;
  background-color: white;
  color: #4594ff;
  padding: 1rem 0;
  font-weight: 600;
  height: clamp(58px, 460px, 3rem);
  align-items: center;
  justify-content: center;
  border: 2px solid #4594ff;
}

.waiting-data {
  display: none;
  text-align: center;
  padding: 25px 0;
}
.waiting-data img {
  min-width: 300px;
  max-width: 560px;
  width: 370px;
  height: auto;
}

.spinner {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}
.spinner .path {
  stroke: #93bfec;
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.loading-overlay {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 900;
  background-color: white;
  align-items: center;
  justify-content: center;
}
.loading-overlay .loaderX img {
  display: block;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 24px;
  left: 25px;
  z-index: 5000;
}
.loading-overlay .loaderX .loader,
.loading-overlay .loaderX .loader:before,
.loading-overlay .loaderX .loader:after {
  border-radius: 50%;
}
.loading-overlay .loaderX .loader {
  color: #4594ff;
  font-size: 12px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 0.7em;
  transform: translateZ(0);
}
.loading-overlay .loaderX .loader:before,
.loading-overlay .loaderX .loader:after {
  position: absolute;
  content: "";
}
.loading-overlay .loaderX .loader:before {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.loading-overlay .loaderX .loader:after {
  width: 5.2em;
  height: 10.2em;
  background: white;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.moked-modal-grid {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 4px;
  grid-template-areas: "picture picture picture" ". . . " ". . . ";
}
.moked-modal-grid .item {
  border-bottom: 2px solid #4594ff;
  word-break: break-word;
}
.moked-modal-grid .item * {
  padding: 3px 5px;
}
.moked-modal-grid .item .item-title {
  font-weight: 700;
}
.moked-modal-grid .item .item-title.driver {
  color: #4594ff;
}
.moked-modal-grid .item .item-title.vehicle {
  color: rgba(0, 0, 0, 0.45);
}
.moked-modal-grid .item .value {
  align-content: end;
}
.moked-modal-grid .picture {
  grid-area: picture;
  width: 100%;
  height: auto;
  justify-self: center;
  cursor: pointer;
}

.login-box {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.login-box .centerize {
  max-width: 360px;
  min-width: 300px;
  height: auto;
  padding: 15px 15px 5.5rem 15px;
}
.login-box .login-logo {
  min-width: 300px;
  max-width: 360px;
  height: auto;
  margin: 0.5rem auto;
  text-align: center;
}
.login-box .login-card-body {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}
.login-box label {
  font-weight: 700;
  color: #4594ff;
}
.login-box label span {
  margin: 0 0.2rem;
}

.counters-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  justify-items: center;
  grid-template-areas: "counterdate counterdate counterdate" ". . .";
  padding: 2px 0 10px 0;
}
@media only screen and (max-width: 500px) {
  .counters-grid {
    justify-items: unset;
  }
}
.counters-grid .counter-date {
  display: block;
  grid-area: counterdate;
  text-align: center;
  padding: 0 10px;
}
.counters-grid .counter-item {
  display: flex;
  font-size: calc(0.7em + 0.5vw);
}
.counters-grid .counter-item .counter-title {
  background-color: #4594ff;
  padding: 0 5px;
  border-bottom: 1px solid #4594ff;
  border-right: 1px solid #4594ff;
  border-top: 1px solid #4594ff;
  color: white;
  font-weight: bold;
}
.counters-grid .counter-item .counter-value {
  padding: 0 5px;
  border-bottom: 1px solid #4594ff;
  border-top: 1px solid #4594ff;
  border-left: 1px solid #4594ff;
  font-weight: bold;
  color: #4594ff;
}
@media only screen and (max-width: 500px) {
  .counters-grid .counter-item {
    text-align: center;
  }
  .counters-grid .counter-item .counter-title {
    padding: 0;
    width: 50%;
  }
  .counters-grid .counter-item .counter-value {
    padding: 0;
    width: 50%;
  }
}

.moked-modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 900;
  top: 0;
  right: -100%;
  overflow: auto;
  transition: right 0.15s ease-in;
}
.moked-modal-overlay.show {
  right: 0;
}
.moked-modal-overlay .mmo-tools {
  display: flex;
  justify-content: flex-end;
}
.moked-modal-overlay .mmo-tools .closer {
  font-size: 32px;
  padding: 0 0.5em;
  color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: color 0.15s;
}
.moked-modal-overlay .mmo-tools .closer:hover, .moked-modal-overlay .mmo-tools .closer:focus {
  color: rgba(0, 0, 0, 0.8);
}
.moked-modal-overlay .moked-modal-body {
  padding: 0.2em 0.5em;
  overflow: auto;
}
.moked-modal-overlay .moked-modal-body.guard-form {
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
  position: relative;
}
.moked-modal-overlay .moked-modal-body .forms-grid {
  display: grid;
  margin: 15px 0;
  grid-gap: 5px 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 500px) {
  .moked-modal-overlay .moked-modal-body .forms-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.moked-modal-overlay .moked-modal-body .forms-grid div {
  display: flex;
  justify-content: space-between;
}
.moked-modal-overlay .moked-modal-body .forms-grid div input {
  display: flex;
  border: 0;
  outline: 0;
  border-top: 2px solid #4594ff;
  border-bottom: 2px solid #4594ff;
  border-right: 2px solid #4594ff;
  border-left: 0;
  transition: box-shadow 0.15s ease-in-out;
  direction: rtl;
}
.moked-modal-overlay .moked-modal-body .forms-grid div input:hover, .moked-modal-overlay .moked-modal-body .forms-grid div input:focus {
  box-shadow: 0 0px 5px #4594ff;
}
.moked-modal-overlay .moked-modal-body .forms-grid div label {
  display: flex;
  width: 100%;
  border: 2px solid #4594ff;
  margin: 0;
  background: #4594ff;
  color: white;
  font-weight: 700;
  justify-content: center;
}
.moked-modal-overlay .moked-modal-body .plate-grid input {
  display: block;
  outline: 0;
  border: 0;
  border-bottom: 2px solid #4594ff;
  height: 50px;
  transition: border-bottom 0.5s;
  font-size: 30px;
  width: 100%;
  padding: 0 0.5rem;
  text-align: center;
  caret-color: black;
}
.moked-modal-overlay .moked-modal-body .plate-grid .buttons-group {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}

.driver-search-body {
  display: block;
}
.driver-search-body .last-visit, .driver-search-body .car-only {
  display: block;
}
.driver-search-body .last-visit .dsb-img, .driver-search-body .car-only .dsb-img {
  text-align: center;
  max-width: 700px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
.driver-search-body .last-visit h3, .driver-search-body .car-only h3 {
  text-align: center;
}
.driver-search-body .last-visit .dsb-dri-img, .driver-search-body .car-only .dsb-dri-img {
  max-width: 120px;
  display: block;
  margin: 0 auto;
}
.driver-search-body .last-visit .dsb-info, .driver-search-body .car-only .dsb-info {
  margin: 20px 0;
  display: grid;
  grid-gap: 7px;
  grid-template-columns: repeat(3, 1fr);
  word-break: break-word;
}
.driver-search-body .last-visit .dsb-info .item, .driver-search-body .car-only .dsb-info .item {
  border-bottom: 2px solid #4594ff;
}
.driver-search-body .last-visit .dsb-info .item div:first-child, .driver-search-body .car-only .dsb-info .item div:first-child {
  font-weight: 700;
}
.driver-search-body .last-visit .dsb-info .item .dri, .driver-search-body .car-only .dsb-info .item .dri {
  color: #4594ff;
}
.driver-search-body .last-visit .dsb-info .item .veh, .driver-search-body .car-only .dsb-info .item .veh {
  color: rgba(0, 0, 0, 0.55);
}

[data-inputmask-binder=phone] {
  direction: ltr !important;
}

.chart-window {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 900;
  top: 0;
  right: -100%;
  overflow: auto;
  transition: right 0.15s ease-in;
}
.chart-window.show {
  right: 0;
}
.chart-window .mmo-tools {
  display: flex;
  justify-content: flex-end;
}
.chart-window .mmo-tools .closer {
  font-size: 32px;
  padding: 0 0.5em;
  color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: color 0.15s;
}
.chart-window .mmo-tools .closer:hover, .chart-window .mmo-tools .closer:focus {
  color: rgba(0, 0, 0, 0.8);
}

.usergates .button-wrapper {
  display: block;
  text-align: center;
}
.usergates .button-wrapper * {
  margin: 10px auto;
}
.usergates .button-wrapper .gate-button {
  background: #4594ff;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.usergates .button-wrapper .gate-button span {
  pointer-events: none;
  font-size: 22px;
  font-weight: 600;
  color: white;
}