@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary-color:#0E0C4E;
  --dark-800:#3F2309;
  --skyblue:#487EF0;
  --blue-500:#264B9A;
  --blue-50:#A1BFFF;
  --black:#000;
  --white:#fff;
  --gray-100:#F6F6F6;
  --gray-150:#EDEDED;
  --gray-50:#F2F2F2;
  --gray-170:#DFDFDF;
  --gray-300:#828181;
  --gray-400:#797878;
  --gray-50:#EEECEC;
  --brown-700:#D2A53E;
}
body{
  font-family: "Public Sans", sans-serif;
  font-optical-sizing: auto;
}
.bg-primary, .nav .nav-item .active{
  background-color: var(--primary-color) !important;
}
.text-primary{
  color: var(--primary-color) !important;
}
.nav .nav-item .active, .aside ul li a{
  border-radius: 0 !important;
}
.aside{
    width: 280px;
    box-shadow: 6px 10px 28.6px rgba(0, 0, 0, 0.06);
    height: calc(100vh - 85px);
}
.w-22px{width: 22px;}
.ml-280{
  margin-left: 280px;
}
.aside ul li a span i{
  background:url(../img/ic-dashboard.png) no-repeat 0 0 transparent;
  background-size: 100%;
  width: 22px;
  height: 22px;
}
.aside ul li a{
  padding: 12px 18px;
}
.aside ul li a:hover{
  background-color: var(--primary-color);
  color: var(--white) !important;
}
.aside ul li a:hover span i, .aside ul li a.active span i, .aside ul li a.nav-selected span i {
  background-image:url(../img/ic-dashboard-white.png);
}

.ic-courier-listing{
  background-image:url(../img/ic-courier-listing.png) !important;
  width: 20px !important;
  height: 22px !important;  
}
.ic-courier-booking{
  background-image:url(../img/ic-courier-booking.png) !important;
  width: 18px !important;
  height: 18px !important;
}
.ic-track-trace{
  background-image:url(../img/ic-track-trace.png) !important;
  width: 19px !important;
  height: 18px !important;
}
.ic-address-book{
  background-image:url(../img/ic-address-book.png) !important;
  width: 14px !important;
  height: 19px !important;
}
.ic-report{
  background-image:url(../img/ic-report.png) !important;
  width: 20px !important;
  height: 18px !important;
}
.ic-help{
  background-image:url(../img/ic-help.png) !important;
  width: 13px !important;
  height: 19px !important;
}
.ic-setting{
  background-image:url(../img/ic-setting.png) !important;
  width: 19px !important;
  height: 19px !important;
}

.aside ul li a:hover span i.ic-courier-listing, .aside ul li a.nav-selected span i.ic-courier-listing {
  background-image:url(../img/ic-courier-listing-white.png) !important;
}
.aside ul li a:hover span i.ic-courier-booking, .aside ul li a.nav-selected span i.ic-courier-booking {
  background-image:url(../img/ic-courier-booking-white.png) !important;
}
.aside ul li a:hover span i.ic-track-trace, .aside ul li a.nav-selected span i.ic-track-trace {
  background-image:url(../img/ic-track-trace-white.png) !important;
}
.aside ul li a:hover span i.ic-address-book, .aside ul li a.nav-selected span i.ic-address-book {
  background-image:url(../img/ic-address-book-white.png) !important;
}
.aside ul li a:hover span i.ic-report, .aside ul li a.nav-selected span i.ic-report {
  background-image:url(../img/ic-report-white.png) !important;
}
.aside ul li a:hover span i.ic-help, .aside ul li a.nav-selected span i.ic-help {
  background-image:url(../img/ic-help-white.png) !important;
}
.aside ul li a:hover span i.ic-setting, .aside ul li a.nav-selected span i.ic-setting {
  background-image:url(../img/ic-setting-white.png) !important;
}
.box-light-blue{
  background-color: var(--skyblue);
}
.fs-18{
  font-size: 1.125rem;
}
.fs-40{
  font-size: 40px;
}
.fs-32{
  font-size: 2rem;
}
.fs-12{
  font-size: 12px;
}
.fs-26{
  font-size: 1.625rem;
}
.btn-action{
  right: -20px;
  top: 50%;
  transform: translate(0, -50%);
}
.card{
  border-radius: 18px;
  background-color: var(--gray-100);
}
.table-custom tr td, .table-custom tr th{
  background-color: transparent;
  border-bottom: 0;
  border-right: 1px solid var(--gray-150);
}
.table-custom tr th span{
  border-bottom: 1px solid var(--gray-170);
}
.table-custom tr th{
  color: var(--primary-color);
}
.table-custom tr td{
  color: var(--black);
}
.table-custom tr td:last-child, .table-custom tr th:last-child{
  border: none;
}
.border-170{
  border-bottom: 1px solid var(--gray-170);
}
.border-gray-100{
  border-color: var(--gray-100);
}
.bg-brown-700{
  background-color: var(--brown-700);
}
.bg-gray-100{
  background-color: var(--gray-100);
}
.text-brown-700{
  color: var(--brown-700);
}
.text-blue-500{
  color: var(--blue-500);
}
.text-skyblue{
  color: var(--skyblue);
}
.text-gray-300{
  color: var(--gray-300);
}
.text-gray-50{
  color: var(--gray-50);
}
.text-dark-800{
  color: var(--dark-800);
}
.text-gray-400{
  color: var(--gray-400);
}
.fs-20{
  font-size: 20px;
}
.fs-48{
  font-size: 48px;
}
.fs-96{
  font-size: 96px;
}
.mw-100{
  min-width: 100px;
}
.m-120{
  width: 120px !important;
}
.list-shadow{
  box-shadow: 0px 3px 10.5px 0px rgba(0, 0, 0, 0.04);
}
.w-18{
  width: 18%;
}
.w-20{
  width: 20%;
}
.w-10{
  width: 10%;
}
.w-15{
  width: 15%;
}
.booklist-shadow{
  box-shadow: 0px 9px 14.5px 0px rgba(0, 0, 0, 0.06);
}
.bg-gray-50{
  background-color: var(--gray-50);
}
.shipping-process{
  list-style: none;
  width: 340px;
  padding: 0;
  position: relative;
}
.shipping-process li{
  position: relative;
  z-index: 2;
  padding:0 .2rem;
  background-color: var(--gray-50);
}
.shipping-process span.line{
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}
.shipping-process a{
  background:url(../img/ic-cart.svg) no-repeat 0 0 transparent;
  width: 24px;
  height: 24px;
  display: block;
  background-size: 100%;
}
.ic-shipping{
  background-image:url(../img/ic-shiping.svg) !important;
  width: 30px;
  height: 30px;
}
.ic-delever{
  background-image:url(../img/ic-delever.svg) !important;
  width: 30px;
  height: 30px;
}
.shipping-process a:hover, .shipping-process a.active{
  background-image:url(../img/ic-cart-active.svg) !important;
}
.shipping-process a.ic-shipping:hover, .shipping-process a.ic-shipping.active{
  background-image:url(../img/ic-shiping-active.svg) !important;
}
.shipping-process a.ic-delever:hover, .shipping-process a.ic-delever.active{
  background-image:url(../img/ic-delever-active.svg) !important;
}
.my-100{
  margin-top: 100px;
  margin-bottom: 100px;
}
ul.timeline {
  margin-top: 80px;
  max-width: 50%;
  list-style-type: none;
  position: relative;
}
ul.timeline:before {
  content: ' ';
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  left: 34px;
  width: 2px;
  height: 85%;
  z-index: 400;
}
ul.timeline > li {
  margin: 20px 0;
  padding-left: 30px;
}
ul.timeline > li a{
  text-decoration: none;
}
ul.timeline > li:before {
  content: ' ';
  display: inline-block;
  position: absolute;
  background-color: #fff !important;
  z-index: 400;
  background: url(../img/ic-address-gold.svg) no-repeat center center transparent;
  padding: .5rem;
  left: 20px;
  width: 30px;
  height: 27px;
}
ul.timeline > li.selected:before {
  background: url(../img/ic-adress-black.png) no-repeat center center transparent;
}
ul.timeline > li:nth-child(3)::before{
  background-image:url(../img/ic-insurance-gold.svg)
}
ul.timeline > li.selected:nth-child(3)::before{
  background-image:url(../img/ic-insurance-blue.svg)
}
ul.timeline > li:nth-child(4)::before{
  background-image:url(../img/ic-services-gold.svg)
}
ul.timeline > li.selected:nth-child(4)::before{
  background-image:url(../img/ic-service-blue.svg)
}

.right-side{
  margin: -70px 0;
  box-shadow: 5px 12px 13.5px 0px rgba(0, 0, 0, 0.15);
}
.mt-60{
  margin-top: 3.7rem;
}
.h-48{
  height: 48px;
}
.text-blue-50{
  color: var(--blue-50);
}
.form-style{}
.form-style .form-control{
  border: 0;
  border-radius: 0;
  box-shadow: 0px 4.949px 14.682px 0px rgba(0, 0, 0, 0.06);
}


::-ms-input-placeholder { /* Edge 12-18 */
  color: var(--gray-300);
  line-height: 18px;
}

::placeholder {
  line-height: 18px;
  color: var(--gray-300);
}

.text-right {
  text-align: right;
}