﻿.font-weight-hairline {
    font-weight: 100 !important
}

.font-weight-thin {
    font-weight: 200 !important
}

.font-weight-medium {
    font-weight: 500 !important
}

.font-weight-semibold {
    font-weight: 600 !important
}

.font-weight-extrabold {
    font-weight: 800 !important
}

.font-weight-black {
    font-weight: 900 !important
}

.font-style-italic {
    font-style: italic !important
}

.font-style-normal {
    font-style: normal !important
}

.letter-spacing-initial {
    letter-spacing: initial !important
}

.text-transform-capitalize {
    text-transform: capitalize !important
}

.text-transform-initial {
    text-transform: initial !important
}

.text-transform-lowercase {
    text-transform: lowercase !important
}

.text-transform-uppercase {
    text-transform: uppercase !important
}

.text-center {
    text-align: center !important
}

.text-end {
    text-align: end !important
}

.text-initial {
    text-align: initial !important
}

.text-justify {
    text-align: justify !important
}

.text-start {
    text-align: start !important
}

.overflow-hidden {
    overflow: hidden !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.position-relative {
    position: relative !important
}

.position-static {
    position: static !important
}

.position-sticky {
    position: sticky !important
}

.w-5 {
    width: 5%
}

.w-10 {
    width: 10%
}

.w-15 {
    width: 15%
}

.w-20 {
    width: 20%
}

.w-25 {
    width: 25%
}

.w-30 {
    width: 30%
}

.w-35 {
    width: 35%
}

.w-40 {
    width: 40%
}

.w-45 {
    width: 45%
}

.w-50 {
    width: 50%
}

.w-55 {
    width: 55%
}

.w-60 {
    width: 60%
}

.w-65 {
    width: 65%
}

.w-70 {
    width: 70%
}

.w-75 {
    width: 75%
}

.w-80 {
    width: 80%
}

.w-85 {
    width: 85%
}

.w-90 {
    width: 90%
}

.w-95 {
    width: 95%
}

.w-100 {
    width: 100%
}

.figgers-tracking {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    align-items: center;
    min-height: 100vh;
    background-color: #fbfbfb;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

body.admin-bar .figgers-tracking {
    min-height: calc(100vh - 2rem)
}

.tracking-wrapper {
    text-align: center
}

    .tracking-wrapper .tracking-title {
        margin-top: -10rem
    }

.tracking-title {
    font-size: 2.5rem;
    color: #242424
}

.tracking-wrapper > form {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem !important;
    display: inline-block;
    position: relative;
    max-width: 42.1875rem;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px solid #bebfd8;
    width: 100%;
    -webkit-box-shadow: 0 5px 3rem 0 rgba(0,0,0,.18);
    box-shadow: 0 5px 3rem 0 rgba(0,0,0,.18);
    padding-right: 10rem
}

    .tracking-wrapper > form .el-form-item {
        margin-bottom: 0;
        width: 100%
    }

        .tracking-wrapper > form .el-form-item input {
            border: 0;
            background-color: transparent;
            -webkit-border-radius: 0;
            border-radius: 0;
            height: 4.6875rem;
            color: #9da2c9 !important;
            font-size: 1.25rem;
            padding: 10px 1.25rem;
            float: left
        }

    .tracking-wrapper > form button {
        position: absolute;
        right: 6.5px;
        top: 6.5px;
        bottom: 6.5px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        font-size: 1.5rem;
        background-color: #878787;
        border: 0;
        padding: 10px 2.75rem
    }

        .tracking-wrapper > form button:hover, .tracking-wrapper > form button:focus {
            background-color: var(--color1)
        }

    .tracking-wrapper > form .el-form-item .el-form-item__error {
        font-size: 1rem;
        margin-top: 8px
    }

    .tracking-wrapper > form .el-form-item .el-input__suffix {
        display: none
    }

.tracking-info > table tr.date th {
    background-color: #dbdcdd;
    color: #606266;
    font-size: 1.125rem;
    padding: 0;
    text-align: center;
    font-weight: 500
}

.tracking-info > table tr.date {
    background-color: transparent;
    border: 0
}

.tracking-info > table tr td span + span {
    margin-left: 1.25rem
}

.track-status-right-panel > a button.back-btn {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    border: 0;
    background-color: #606266;
    padding: 0;
    height: 1.875rem;
    width: 1.875rem;
    font-weight: 700;
    opacity: .7;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.track-status-right-panel {
    position: relative
}

    .track-status-right-panel > a button.back-btn:hover, .track-status-right-panel > a button.back-btn:focus {
        opacity: 1
    }

.track-status-box {
    position: relative;
    padding-top: 43px
}

    .track-status-box > button {
        position: absolute;
        top: 0;
        background-color: #fff;
        color: #606266;
        padding: 13px 1.25rem;
        font-size: .9375rem;
        border-radius: 0;
        z-index: 2;
        border: 2px solid #c7defa6b;
        border-bottom: 0;
        border-left-width: 1px;
        border-right-width: 1px;
        width: 50%;
        -webkit-transition: all .3s linear;
        transition: all .3s linear
    }

        .track-status-box > button:first-of-type {
            left: 0;
            border-left-width: 2px;
            -webkit-border-top-left-radius: 5px;
            border-top-left-radius: 5px
        }

        .track-status-box > button.btn-1 {
            left: 0;
            border-left-width: 2px;
            -webkit-border-top-left-radius: 5px;
            border-top-left-radius: 5px
        }

        .track-status-box > button.btn-2 {
            left: 50%
        }

        .track-status-box > button:last-of-type {
            border-right-width: 2px;
            -webkit-border-top-right-radius: 5px;
            border-top-right-radius: 5px
        }

        .track-status-box > button:hover, .track-status-box > button:focus, .track-status-box > button.active {
            color: #fff;
            background-color: #df614a;
            border-color: #df614a
        }

    .track-status-box .el-button + .el-button {
        margin-left: 0
    }

.tracking-status-inner {
    background-color: #fbfbfb;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh
}

.track-status-left-panel {
    background-color: #df614a;
    background-image: url(/assets/images/tracking-status-left-panel-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 25%;
    max-width: 25%
}

    .track-status-left-panel > ul {
        padding: 3.5rem 3.125rem;
        list-style: none;
        margin: 0;
        width: 100%;
        position: sticky
    }

        .track-status-left-panel > ul li {
            display: flex;
            flex-wrap: wrap;
            color: #fff;
            font-size: 1.125rem;
            position: relative;
            padding: 3rem 0 3rem 3.125rem
        }

            .track-status-left-panel > ul li:before {
                content: "";
                width: 2px;
                background-color: rgba(255,255,255,.5);
                position: absolute;
                top: 0;
                bottom: 0;
                left: 12px
            }

.InitialState {
    position: absolute;
    left: 0;
    font-size: 1.5625rem;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 1.359375rem;
    width: 1.359375rem;
    background-color: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 3px
}

    .InitialState:before {
        content: "";
        -webkit-border-radius: inherit;
        border-radius: inherit;
        height: 10px;
        width: 10px;
        background-color: #78b3ff;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

.addition {
    font-size: 1.5625rem !important;
    background-color: transparent !important
}

    .addition:before {
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        background-color: transparent !important
    }

.track-status-left-panel > ul li svg {
    fill: #fff;
    height: 3.5rem;
    width: 3.9rem;
    text-align: center;
    margin-right: 10px
}

.track-status-left-panel > ul li:first-child:before {
    top: 50%
}

.track-status-left-panel > ul li:last-child:before {
    bottom: 50%
}

.track-status-right-panel {
    flex: 0 0 75%;
    max-width: 75%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5rem 2.5rem 13rem;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat
}

.delivered {
    background-image: url(/assets/images/shipment/Delivered.gif)
}

.enroute {
    background-image: url(/assets/images/shipment/In-Rout.gif)
}

.shipped {
    background-image: url(/assets/images/shipment/Shipped.gif)
}

.processed {
    background-image: url(/assets/images/shipment/OrderProcessed.gif)
}

.tracking-info {
    max-width: 37.5rem;
    min-width: 37.5rem;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 2px solid #c7defa6b;
    background-color: #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

    .tracking-info > h3 {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 400;
        padding: 1.125rem;
        color: #606266
    }

    .tracking-info > table {
        border-collapse: collapse;
        width: 100%;
        display: table;
        border: 0;
        margin-bottom: 0
    }

.track-info > table tr {
    border-top: 1px solid #dfe8f3;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}

.tracking-info > table tr td {
    color: #606266;
    font-size: 1rem;
    padding: 13px 1.25rem;
    line-height: 1.188
}

    .tracking-info > table tr td:first-child {
        min-width: 190px
    }

body.scrn-2 .figgers-tracking {
    background-image: none !important
}

.tracking-info > table tr.location {
    background-color: #f1f1f1
}

.tracking-info > table tr.activity {
    border-top: 1px solid #f1f1f1
}

    .tracking-info > table tr.activity td {
        color: #777;
        font-size: 13px;
        padding-top: 10px;
        padding-bottom: 10px
    }

        .tracking-info > table tr.activity td:first-child {
            padding-left: 2rem
        }

.tracking-info > table tr.date th span {
    position: relativefiggers-tracking;
    display: block;
    padding: 13px 1.25rem
}

    .tracking-info > table tr.date th span:before {
        content: "";
        position: absolute;
        left: 25%;
        right: 25%;
        height: 1px;
        top: 0;
        background-image: -webkit-linear-gradient(left,rgba(172,212,255,0) 0%,rgba(172,212,255,1) 20%,rgba(172,212,255,1) 22%,rgba(172,212,255,1) 78%,rgba(172,212,255,1) 80%,rgba(172,212,255,0) 100%);
        background-image: linear-gradient(to right,rgba(172,212,255,0) 0%,rgba(172,212,255,1) 20%,rgba(172,212,255,1) 22%,rgba(172,212,255,1) 78%,rgba(172,212,255,1) 80%,rgba(172,212,255,0) 100%)
    }

.tracking-wrapper .el-loading-mask .el-loading-spinner {
    display: none
}

body.tracking-page .wrapper {
    padding: 0;
    max-width: 100%;
    width: 100%;
    background-color: #fbfbfb
}

    body.tracking-page .wrapper .single-post-wrapper {
        min-width: 100%;
        margin: 0;
        padding: 0;
        background-color: transparent
    }

body.tracking-page .tracking-status-inner {
    margin-top: 124px
}

body.tracking-page footer {
    margin-top: 0;
    padding-top: 50px
}

    body.tracking-page footer .subs_info {
        display: none
    }

body.tracking-page .wrapper .single-post-wrapper .entry-container {
    max-width: 100%
}

body.tracking-page .track-status-left-panel > ul li {
    color: #fff
}

.track-status-left-panel {
    padding-top: 6rem
}

.track-status-right-panel {
    padding-top: 10rem
}

    .track-status-right-panel > a button.back-btn {
        top: 6.5rem
    }

@media (min-width:1926px) {
    .tracking-title {
        font-size: 5rem
    }

    .tracking-wrapper > form {
        max-width: 55rem
    }

        .tracking-wrapper > form .el-form-item input {
            height: 6.125rem;
            font-size: 1.5rem
        }

        .tracking-wrapper > form .el-form-item .el-form-item__error {
            font-size: 1.6rem;
            margin-top: 1.5rem
        }

    .track-status-right-panel {
        padding-bottom: 25rem
    }

    .track-status-box {
        padding-top: 82px
    }

        .track-status-box > button {
            font-size: 1.875rem;
            padding: 1.5rem 1.875rem
        }

    .tracking-info {
        max-width: 70rem;
        min-width: 70rem
    }

        .tracking-info > h3 {
            font-size: 2.75rem;
            padding: 2rem
        }

        .tracking-info > table tr.date th {
            font-size: 2rem
        }

            .tracking-info > table tr.date th span {
                padding: 1.325rem 1.25rem
            }

        .tracking-info > table tr td {
            font-size: 1.75rem;
            padding: 1.125rem 1.25rem
        }

        .tracking-info > table tr.activity td {
            padding-top: 1.125rem;
            padding-bottom: 1.125rem;
            font-size: 1.5rem
        }

    .track-status-left-panel > ul li {
        font-size: 1.875rem
    }
}

@media (max-width:1610px) {
    .tracking-wrapper > form .el-form-item input {
        height: 3.75rem;
        font-size: 1.125rem
    }

    .tracking-wrapper > form button {
        font-size: 1.125rem;
        padding: 10px 2.5rem
    }

    .track-status-left-panel > ul li {
        padding: 2rem 0 2rem 3.125rem
    }

    .tracking-info > h3 {
        font-size: 1.25rem
    }

    .tracking-info > table tr.date th, .tracking-info > table tr td {
        font-size: 14px
    }

    .tracking-info > table tr td {
        padding: 13px 1rem
    }

        .tracking-info > table tr td:first-child {
            min-width: 160px
        }
}

@media (max-width:1370px) {
    .tracking-title {
        font-size: 2rem
    }

    .tracking-wrapper form {
        margin-top: 1.5rem
    }

    .tracking-wrapper > form {
        max-width: 35rem
    }

    .TrackingStyle {
        max-width: 35rem !important
    }

    .tracking-wrapper > form .el-form-item input {
        height: 3rem;
        font-size: 1rem
    }

    .tracking-wrapper > form button {
        font-size: 1rem;
        padding: 10px 1.75rem
    }

    .track-status-left-panel > ul {
        padding: 2.5rem 2rem
    }

        .track-status-left-panel > ul li {
            font-size: 1rem
        }

    .tracking-info > table tr td {
        font-size: 1rem;
        padding: 1rem
    }
}

@media (max-width:1030px) {
    .container {
        padding: 0 .9375rem
    }

    .track-status-left-panel > ul {
        padding: 2rem 1.5rem
    }

        .track-status-left-panel > ul li {
            padding: 1rem 0 1rem 2.5rem;
            font-size: 14px
        }

            .track-status-left-panel > ul li svg {
                -webkit-transform: scale(.5);
                transform: scale(.5);
                margin: -1rem 0 -1rem -1rem
            }

    .addition {
        font-size: 1rem !important;
        left: 6px !important
    }

    InitialState {
        height: 1rem !important;
        width: 1rem !important;
        left: 5px !important
    }

        InitialState:before {
            height: 5px !important;
            width: 5px !important
        }

    .tracking-info > h3 {
        font-size: 1rem;
        padding: 1rem
    }

    .tracking-info > table tr td {
        font-size: 13px;
        padding: 14px
    }

    .track-status-right-panel {
        padding-bottom: 9rem
    }
}

@media (max-width:996px) {
    .track-status-left-panel {
        display: none
    }

    .track-status-right-panel {
        flex: 0 0 100%;
        max-width: 100%
    }

    body.tracking-page .tracking-status-inner {
        margin-top: 0
    }

    .track-status-right-panel {
        padding-top: 5rem
    }

        .track-status-right-panel > a button.back-btn {
            top: 1.25rem
        }
}

@media (max-width:850px) {
    .track-status-box {
        width: 100%
    }

    .tracking-info {
        max-width: initial;
        min-width: initial
    }
}

@media (max-width:576px) {
    .tracking-wrapper {
        padding: 0 1.25rem
    }

    .tracking-title {
        font-size: 1.5rem
    }

    .tracking-wrapper > form .el-form-item input {
        font-size: .9375rem;
        height: 2.75rem
    }

    .tracking-wrapper > form {
        max-width: 100%;
        padding-right: 5rem
    }

    .TrackingStyle {
        max-width: 100% !important;
        padding-right: 5rem !important
    }

    .tracking-wrapper > form button {
        font-size: .9375rem;
        padding: 5px 1.5rem;
        top: 2px;
        right: 2px;
        bottom: 2px
    }

    .track-status-right-panel {
        padding: 1.5rem 1.5rem 5rem
    }

    .track-status-box {
        margin-top: 2.25rem
    }

        .track-status-box > button {
            font-size: 13px;
            padding: 12px .9375rem
        }

            .track-status-box > button + .tracking-info {
                margin-top: -7px
            }

            .track-status-box > button:hover, .track-status-box > button:focus, .track-status-box > button.active {
                border-color: #263ea5 !important;
                background-color: #263ea5 !important
            }

    .tracking-info > table tr td:first-child {
        min-width: 130px
    }

    .tracking-info > table tr.date th {
        font-size: 13px
    }

        .tracking-info > table tr.date th span {
            padding: 14px
        }
}
