.bg-default {
    background-color: whitesmoke;
}

.loader {
  border: 8px solid #ffffff;
  border-radius: 50%;
  border-top: 8px solid #ecbb35;
  width: 32px;
  height: 32px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.tree {
    --spacing     : 1.5rem;
    --radius      : 8px;
    padding-left  : 0;
    width         : 100%;
  }

.tree li {
    display      : block;
    position     : relative;
    padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul{
    margin-left  : calc(var(--radius) - var(--spacing));
    padding-left : 0;
}

.tree ul li{
    border-left : 2px solid #ddd;
  }

.tree ul li:last-child{
    border-color : transparent;
  }

.tree ul li::before{
    content      : '';
    display      : block;
    position     : absolute;
    top          : calc(var(--spacing) / -2);
    left         : -2px;
    width        : calc(var(--spacing) + 2px);
    height       : calc(var(--spacing) + 1px);
    border       : solid #ddd;
    border-width : 0 0 2px 2px;
}

.tree summary{
    display : block;
    cursor  : pointer;
  }
.tree summary:hover{
  border-radius   : 5px;
}
  
.tree summary::marker,
.tree summary::-webkit-details-marker{
  display : none;
}

.tree summary:focus{
  outline : none;
}

.tree summary:focus-visible{
  outline : 1px dotted #000;
}

.tree li::after,
.tree summary::before{
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;
}

.tree summary::before{
    content     : '';
    z-index     : 1;
    background  : #000;
    color       : #fff;
    line-height : calc(2 * var(--radius) - 2px);
    text-align  : center;
  }
  
.tree details[open] > summary::before{
  content     : '';
}

.tree a {
  display         : block;
  justify-content : space-between;
  text-decoration : none;
  color           : #000;
}

.tree li details {
  width: 100%;
}

.tree li details li {
  display         : flex;
}

.tree a:hover, .tree summary:hover {
  background-color: #f7f7f7;
}

.tree li details ul li a {
  width: 100%;
}

.tree li details ul li a:last-child {
  text-align    : center;
  width         : 30px;
  padding-right : 5px;
}

.tree details a:last-child:hover {
  margin-right   : 10px;
}

.tree li a:hover{
  color           : cornflowerblue;
  border-radius   : 5px;
  margin-left    : 5px;
}

.tree i {
  text-align    : center;
  width         : 30px;
}


.tracking-detail {
  padding:3rem 0
 }
 #tracking {
  margin-bottom:1rem
 }
 [class*=tracking-status-] p {
  margin:0;
  font-size:1.1rem;
  color:#fff;
  text-transform:uppercase;
  text-align:center
 }
 [class*=tracking-status-] {
  padding:1.6rem 0
 }
 .tracking-status-intransit {
  background-color:#65aee0
 }
 .tracking-status-outfordelivery {
  background-color:#f5a551
 }
 .tracking-status-deliveryoffice {
  background-color:#f7dc6f
 }
 .tracking-status-delivered {
  background-color:#4cbb87
 }
 .tracking-status-attemptfail {
  background-color:#b789c7
 }
 .tracking-status-error,.tracking-status-exception {
  background-color:#d26759
 }
 .tracking-status-expired {
  background-color:#616e7d
 }
 .tracking-status-pending {
  background-color:#ccc
 }
 .tracking-status-inforeceived {
  background-color:#214977
 }
 .tracking-list {
  border:1px solid #e5e5e5
 }
 .tracking-item {
  border-left:1px solid #e5e5e5;
  position:relative;
  padding:2rem 1.5rem .5rem 2.5rem;
  font-size:.9rem;
  margin-left:3rem;
  min-height:5rem
 }
 .tracking-item:last-child {
  padding-bottom:4rem
 }
 .tracking-item .tracking-date {
  margin-bottom:.5rem
 }
 .tracking-item .tracking-date span {
  color:#888;
  font-size:85%;
  padding-left:.4rem
 }
 .tracking-item .tracking-content {
  padding:.5rem .8rem;
  background-color:#f4f4f4;
  border-radius:.5rem
 }
 .tracking-item .tracking-content span {
  display:block;
  color:#888;
  font-size:85%
 }
 .tracking-item .tracking-icon {
  line-height:2.6rem;
  position:absolute;
  left:-1.3rem;
  width:2.6rem;
  height:2.6rem;
  text-align:center;
  border-radius:50%;
  font-size:1.1rem;
  background-color:#fff;
  color:#fff
 }
 .tracking-item .tracking-icon.status-sponsored {
  background-color:#f68
 }
 .tracking-item .tracking-icon.status-delivered {
  background-color:#4cbb87
 }
 .tracking-item .tracking-icon.status-outfordelivery {
  background-color:#f5a551
 }
 .tracking-item .tracking-icon.status-deliveryoffice {
  background-color:#f7dc6f
 }
 .tracking-item .tracking-icon.status-attemptfail {
  background-color:#b789c7
 }
 .tracking-item .tracking-icon.status-exception {
  background-color:#d26759
 }
 .tracking-item .tracking-icon.status-inforeceived {
  background-color:#214977
 }
 .tracking-item .tracking-icon.status-intransit {
  color:#e5e5e5;
  border:1px solid #e5e5e5;
  font-size:.6rem
 }
 @media(min-width:992px) {
  .tracking-item {
   margin-left:10rem
  }
  .tracking-item .tracking-date {
   position:absolute;
   left:-10rem;
   width:7.5rem;
   text-align:right
  }
  .tracking-item .tracking-date span {
   display:block
  }
  .tracking-item .tracking-content {
   padding:0;
   background-color:transparent
  }
 }