html,body{
    background-color:#f9f9f9;
}

.btn-primary {
    color: #fff;
    background-color: #0668AF;
    border-color: #0668AF;
}
.btn-default {
    color: #0668AF;
    text-transform: uppercase; 
}
.btn-link{
    color: #0668AF;
}

.ordernumber_input{
    border: 0;
    border-bottom: 1px solid #0055a4;
    background: transparent;
    max-width: 200px;
    border-radius: 0;
    margin-right: 10px;
}

#ordernumber_label{
    margin-bottom: 0;
}
.trackingnumbers li .btn{
    padding:0rem 0.25rem;
    vertical-align: inherit;
}

.status {
    list-style: none;
}


/* icons icons icons icons */
/* icons icons icons icons */
/* icons icons icons icons */
.status .icon{
    display: block;
    background: url('icon/maintenance.png') center no-repeat; 
    background-size: contain;
    width:40px;
    height:40px;
}
.status .buy .icon{
    background: url('icon/thumbs_up.png') center center no-repeat; 
    background-size: contain;
}
.status .maintenance .icon{
    background: url('icon/refresh.png')  center center no-repeat; 
    background-size: contain;
    
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.status .current .icon{
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.status .currentShipping .icon{
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 100px;
    
    -webkit-animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    -moz-animation:shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(1px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-2px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(2px, 0, 0);
  }
}


.status .closed .icon{
    background: url('icon/check_checkmark_ok.png')  center center no-repeat; 
    background-size: contain;
}
.status .cancelled .icon{
    background: url('icon/cancel.png')  center center no-repeat; 
    background-size: contain;
}
    .status .closed .description{
            color:darkgreen;
            font-weight: bold;
    }
.status .ontheway .icon{
    background: url('icon/truck.png')  center center no-repeat; 
    background-size: contain;
}
.status .delivered .icon{
    background: url('icon/check_checkmark_ok.png')  center center no-repeat; 
    background-size: contain;
}
    .status .delivered .description, .deliveryDate{
        color:darkgreen;
        font-weight: bold;
    }
.status .scheduleddate .icon{
    background: url('icon/clock.png')  center center no-repeat; 
    background-size: contain;
}
    .status .scheduleddate .description{
        /*color:#0055a4;*/
    }
.status .rescheduleddate .icon{
    background: url('icon/attention.png')  center center no-repeat; 
    background-size: contain;
}
    .status .rescheduleddate .description{
        /*color:#0055a4;*/
    }
.status .sent .icon{
    background: url('icon/exit.png')  center center no-repeat; 
    background-size: contain;
}

.status li .inactive div{
    color:lightgray!important;
    opacity: 0.6;
}
.status li .inactive .icon{
    opacity: 0.2;
}