/* Table column headings: same size as the cell text, bold only.
   Some theme/vendor styles were rendering th larger than the body text
   (noticed on Statements/Allocate/Approval Rules tables). */
.table thead th {
    font-size: inherit !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none;
}

.data-placeholder {
    height: 40vh;
}

.th-min-width {
    min-width: 120px;
}


.unpaid-row {
    background-color: #FCE4CD;
    background: #FCE4CD;
    ;
}



.unpaid-row {
    background-color: #FCE4CD;
    background: #FCE4CD;
    ;
}

#upload-area {
 background-color: #f9f9f9;
}

#upload-area:hover {
    background-color: #f1f1f1;
}


/*tbody tr .bg-info-row {*/
/*  background-color: #FCE4CD;*/
/*  background: #FCE4CD;*/
/*}*/


.bg-info-row {
    background-color: #FCE4CD;
    background: #FCE4CD;
}

table tbody tr .bg-info-row {
    background-color: #FCE4CD;
    background: #FCE4CD;
    border-bottom: 1px solid #e8e5e5;
}

tbody tr .bg-info-row {
    background-color: #FCE4CD;
    background: #FCE4CD;
    border-bottom: 1px solid #e8e5e5;
}

tr .bg-info-row {
    background-color: #FCE4CD;
    background: #FCE4CD;
    border-bottom: 1px solid #e8e5e5;
}


tr .bg-success-row {
    background-color: #F0F8FF;
    background: #F0F8FF;
    border-bottom: 1px solid #888888;
}



.auto-height {
    height: 60vh;
}


.shimmerBG {
    animation-duration: 2.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: #ddd;
    background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
    background-size: 1200px 100%;
}


@-webkit-keyframes shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }

    100% {
        background-position: 1200px 0;
    }
}

.media {
    height: 200px;
}

.p-32 {
    padding: 32px;
}

.title-line {
    height: 24px;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 20px;
}

.content-line {
    height: 8px;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 8px;
}

.end {
    width: 40%;
}



.m-t-24 {
    margin-top: 24px;
}



.overlay {
    height: 100vh;
    width: 100vw;
    background-color: rgb(255 255 255 / 72%);
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: hidden;
    left: 0;
    bottom: 0;
    z-index: 9999;
}

.loader {
    height: 110px;
    width: 100%;
    background: transparent;
    margin-top: calc(50vh - 100px);
    align-items: center;
    text-align: center;
}

.input-error {
    font-weight: bold;
}


.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #ed462f;
        width: 3.46rem;
        position: absolute;
        left: 5.5rem;
        top: .6225rem
    }

    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #ed462f;
        width: 3.8125rem;
        position: absolute;
        right: 5.5rem;
        top: .625rem
    }
}

.timeline-steps .timeline-content {
    width: 8rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ed462f
}



#chat1 .form-outline .form-control~.form-notch div {
    pointer-events: none;
    border: 1px solid;
    border-color: #eee;
    box-sizing: border-box;
    background: transparent;
}

#chat1 .form-outline .form-control~.form-notch .form-notch-leading {
    left: 0;
    top: 0;
    height: 100%;
    border-right: none;
    border-radius: .65rem 0 0 .65rem;
}

#chat1 .form-outline .form-control~.form-notch .form-notch-middle {
    flex: 0 0 auto;
    max-width: calc(100% - 1rem);
    height: 100%;
    border-right: none;
    border-left: none;
}

#chat1 .form-outline .form-control~.form-notch .form-notch-trailing {
    flex-grow: 1;
    height: 100%;
    border-left: none;
    border-radius: 0 .65rem .65rem 0;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-left: 0.125rem solid #39c0ed;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading,
#chat1 .form-outline .form-control.active~.form-notch .form-notch-leading {
    border-right: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: #39c0ed;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle,
#chat1 .form-outline .form-control.active~.form-notch .form-notch-middle {
    border-top: none;
    border-right: none;
    border-left: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-right: 0.125rem solid #39c0ed;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing,
#chat1 .form-outline .form-control.active~.form-notch .form-notch-trailing {
    border-left: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus~.form-label {
    color: #39c0ed;
}

#chat1 .form-outline .form-control~.form-label {
    color: #bfbfbf;
}


/* ul.timeline {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: ' ';
    background: #ed2b2c;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li {
    margin: 20px 0;
    padding-left: 20px;
}

ul.timeline>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ed2b2c;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
} */


.chat-icon {
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 10px;
    width: 80px;
}

.chat-icon img {
    cursor: pointer;
}


@media (min-width: 900px) {
    .chat-box {
        position: fixed;
        z-index: 9999;
        right: 20px;
        display: none;
        bottom: 0px;
        background: white;
        width: 400px;
        height: 600px;
        background-clip: padding-box;
        box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
        border-radius: 5px 5px 0px 0px;
    }

    .chat-body {
        height: 509px;
        width: inherit;
        overflow: scroll;
        margin-bottom: 45px;
        background: url('/icons/chat.jpg') no-repeat center center;
    }

}

@media (max-width: 800px) {
    .chat-box {
        position: fixed;
        z-index: 9999;
        right: 20px;
        bottom: 0px;
        background: white;
        width: 98%;
        display: none;
        height: 400px;
        background-clip: padding-box;
        box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
        border-radius: 5px 5px 0px 0px;
    }

    .chat-body {
        height: 400px;
        width: inherit;
        overflow: scroll;
        margin-bottom: 45px;
        background: url('/icons/chat.jpg') no-repeat center center;
    }

}

.chat-head {
    width: inherit;
    height: 45px;
    background: #696cff;
    border-radius: 10px 10px 0px 0px;
}

.chat-head h4 {
    color: white;
    padding: 8px;
    display: inline-block;
}

.chat-head img {
    cursor: pointer;
    float: right;
    width: 25px;
    margin: 10px;
}


.msg-insert {
    height: auto;
    /*overflow: scroll;*/
}

.btn-chat-inactive {
    color: #fff;
    background-color: #696cff;
    border-color: #fcfdfd;
    border-right-color: rgb(252, 253, 253);
    border-left-color: rgb(252, 253, 253);
    box-shadow: 0 0.125rem 0.25rem 0 rgb(168, 181, 181);
    border-right: rgb(252, 253, 253);
}

.chat-text {
    position: fixed;
    bottom: 2px;
    height: 45px;
    width: inherit;
}

.chat-text textarea {
    width: inherit;
    height: inherit;
    box-sizing: border-box;
    /*border: 1px solid #bdc3c7;*/
    padding: 10px;
    resize: none;
}

/*.chat-text textarea:active, .chat-text textarea:focus, .chat-text textarea:hover{*/
/*border-color: royalblue;*/
/*}*/
.msg-send {
    background: #dffec2;
}

.msg-send p {
    color: #282727;
    font-size: 18px;
    line-height: 24px;
}


.msg-receive {
    background: #fafafa;
}

.msg-receive-tag {
    background: #fffdea;
    ;
}

.msg-receive p {
    color: #282727;
    font-size: 14px;
    line-height: 20px;
}

.msg-receive-tag {
    color: #282727;
    font-size: 14px;
    line-height: 20px;
}

.msg-send,
.msg-receive small {
    color: #282727;
    font-size: 14px;
}

.msg-receive-tag small {
    color: #282727;
    font-size: 14px;
}

.msg-send,
.msg-receive {
    width: 340px;
    height: auto;
    padding: 8px 8px 8px 10px;
    margin: 10px auto;
    border-radius: 8px;
    line-height: 18px;
    position: relative;
}

.msg-receive-tag {
    width: 340px;
    height: auto;
    padding: 8px 8px 8px 10px;
    margin: 10px auto;
    border-radius: 8px;
    line-height: 18px;
    position: relative;
}

.msg-receive:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    border: 15px solid;
    border-color: transparent #fafafa transparent transparent;
    left: -29px;
    top: 3px;
}

.msg-receive-tag:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    border: 15px solid;
    border-color: transparent #fffdea transparent transparent;
    left: -29px;
    top: 3px;
}

.msg-send:after {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    border: 15px solid;
    border-color: transparent transparent transparent #dffec2;
    right: -29px;
    top: 7px;
}

.msg-receive:hover,
.msg-send:hover {
    opacity: .9;
}

.msg-receive-tag:hover {
    opacity: .9;
}

/*timeline*/




.timeline-container {
    position: relative;
    padding-top: 4px;
    margin-bottom: 32px
}

.timeline-container:last-child {
    margin-bottom: 0
}

.timeline-container:before {
    content: "";
    display: block;
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    border: 1px solid #E2E3E7;
    background-color: #E7EAEF;
    width: 4px;
    border-width: 0 1px
}

.timeline-container:first-child:before {
    border-top-width: 1px
}

.timeline-container:last-child:before {
    border-bottom-width: 1px
}

.timeline-item {
    position: relative;
    margin-bottom: 8px
}

.timeline-item .widget-box {
    background-color: #f6f6f6;
    color: #56697e;
}

.timeline-item .transparent.widget-box {
    border-left: 3px solid #DAE1E5
}

.timeline-item .transparent .widget-header {
    background-color: #ECF1F4;
    border-bottom-width: 0
}

.timeline-item .transparent .widget-header>.widget-title {
    margin-left: 8px
}

.timeline-item:nth-child(even) .widget-box {
    background-color: #F3F3F3;
    color: #616161
}

.timeline-item:nth-child(even) .widget-box.transparent {
    border-left-color: #DBDBDB !important
}

.timeline-item:nth-child(even) .widget-box.transparent .widget-header {
    background-color: #EEE !important
}

.timeline-item .widget-box {
    margin: 0 0 0 60px;
    position: relative;
    max-width: none
}

.timeline-item .widget-main {
    margin: 0;
    position: relative;
    max-width: none;
    border-bottom-width: 0
}

.timeline-item .widget-body {
    background-color: transparent
}

.timeline-item .widget-toolbox {
    padding: 4px 8px 0 !important;
    background-color: transparent !important;
    border-width: 0 !important;
    margin: 0 !important
}

.timeline-info {
    float: left;
    width: 60px;
    text-align: center;
    position: relative
}

.timeline-info img {
    border-radius: 100%;
    max-width: 42px
}

.timeline-info .badge,
.timeline-info .label {
    font-size: 12px
}

.timeline-container:not(.timeline-style2) .timeline-indicator {
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    font-size: 16px;
    height: 36px;
    line-height: 30px;
    width: 36px;
    text-align: center;
    text-shadow: none !important;
    padding: 0;
    cursor: default;
    border: 3px solid #FFF !important
}

.timeline-label {
    display: block;
    clear: both;
    margin: 0 0 18px 34px
}

.timeline-item img {
    border: 1px solid #AAA;
    padding: 2px;
    background-color: #FFF
}

.timeline-style2:before {
    display: none
}

.timeline-style2 .timeline-item {
    padding-bottom: 22px;
    margin-bottom: 0
}

.timeline-style2 .timeline-item:last-child {
    padding-bottom: 0
}

.timeline-style2 .timeline-item:before {
    content: "";
    display: block;
    position: absolute;
    left: 90px;
    top: 5px;
    bottom: -5px;
    border-width: 0;
    background-color: #DDD;
    width: 2px;
    max-width: 2px
}

.timeline-style2 .timeline-item:last-child:before {
    display: none
}

.timeline-style2 .timeline-item:first-child:before {
    display: block
}

.timeline-style2 .timeline-item .transparent .widget-header {
    background-color: transparent !important
}

.timeline-style2 .timeline-item .transparent.widget-box {
    background-color: transparent !important;
    border-left: none !important
}

.timeline-style2 .timeline-info {
    width: 100px
}

.timeline-style2 .timeline-indicator {
    font-size: 0;
    height: 12px;
    line-height: 12px;
    width: 12px;
    border-width: 1px !important;
    background-color: #FFF !important;
    position: absolute;
    left: 85px;
    top: 3px;
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    padding: 0
}

.timeline-style2 .timeline-date {
    display: inline-block;
    width: 72px;
    text-align: right;
    margin-right: 25px;
    color: #777
}

.timeline-style2 .timeline-item .widget-box {
    margin-left: 112px
}

.timeline-style2 .timeline-label {
    width: 75px;
    margin-left: 0;
    margin-bottom: 10px;
    text-align: right;
    color: #666;
    font-size: 14px
}

.timeline-time {
    text-align: center;
    position: static
}


.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC
}

@media only screen and (max-width:767px) {
    .widget-box {
        margin-top: 7px;
        margin-bottom: 7px
    }
}

.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #f7f7f7;
    background-image: -webkit-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #EEE 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #669FC7;
    border-bottom: 1px solid #DDD;
    padding-left: 12px
}

.widget-box.transparent>.widget-header,
.widget-header-flat {
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-header:after,
.widget-header:before {
    content: "";
    display: table;
    line-height: 0
}

.widget-header:after {
    clear: right
}

.widget-box.collapsed>.widget-header {
    border-bottom-width: 0
}

.collapsed.fullscreen>.widget-header {
    border-bottom-width: 1px
}

.collapsed>.widget-body {
    display: none
}

.widget-header-flat {
    background: #F7F7F7
}

.widget-header-large {
    min-height: 49px;
    padding-left: 18px
}

.widget-header-small {
    min-height: 31px;
    padding-left: 10px
}

.widget-header>.widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline
}

.widget-header>.widget-title>.ace-icon {
    margin-right: 5px;
    font-weight: 400;
    display: inline-block
}

.infobox .infobox-content:first-child,
.infobox>.badge,
.infobox>.stat,
.percentage {
    font-weight: 700
}

.widget-header-large>.widget-title {
    line-height: 48px
}

.widget-header-small>.widget-title {
    line-height: 30px
}

.widget-toolbar {
    display: inline-block;
    padding: 0 10px;
    line-height: 37px;
    float: right;
    position: relative
}

.widget-header-large>.widget-toolbar {
    line-height: 48px
}

.widget-header-small>.widget-toolbar {
    line-height: 29px
}

.widget-toolbar.no-padding {
    padding: 0
}

.widget-toolbar.padding-5 {
    padding: 0 5px
}

.widget-toolbar:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -1px;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0
}

.popover-notitle+.popover .popover-title,
.popover.popover-notitle .popover-title,
.widget-toolbar.no-border:before {
    display: none
}

.widget-header-large>.widget-toolbar:before {
    top: 6px;
    bottom: 6px
}

[class*=widget-color-]>.widget-header>.widget-toolbar:before {
    border-color: #EEE
}

.widget-color-orange>.widget-header>.widget-toolbar:before {
    border-color: #FEA
}

.widget-color-dark>.widget-header>.widget-toolbar:before {
    border-color: #222;
    box-shadow: -1px 0 0 rgba(255, 255, 255, .2), inset 1px 0 0 rgba(255, 255, 255, .1)
}

.widget-toolbar label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0
}

.widget-toolbar>.widget-menu>a,
.widget-toolbar>a {
    font-size: 14px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px
}

.widget-toolbar>.widget-menu>a:hover,
.widget-toolbar>a:hover {
    text-decoration: none
}

.widget-header-large>.widget-toolbar>.widget-menu>a,
.widget-header-large>.widget-toolbar>a {
    font-size: 15px;
    margin: 0 1px
}

.widget-toolbar>.btn {
    line-height: 27px;
    margin-top: -2px
}

.widget-toolbar>.btn.smaller {
    line-height: 26px
}

.widget-toolbar>.btn.bigger {
    line-height: 28px
}

.widget-toolbar>.btn-sm {
    line-height: 24px
}

.widget-toolbar>.btn-sm.smaller {
    line-height: 23px
}

.widget-toolbar>.btn-sm.bigger {
    line-height: 25px
}

.widget-toolbar>.btn-xs {
    line-height: 22px
}

.widget-toolbar>.btn-xs.smaller {
    line-height: 21px
}

.widget-toolbar>.btn-xs.bigger {
    line-height: 23px
}

.widget-toolbar>.btn-minier {
    line-height: 18px
}

.widget-toolbar>.btn-minier.smaller {
    line-height: 17px
}

.widget-toolbar>.btn-minier.bigger {
    line-height: 19px
}

.widget-toolbar>.btn-lg {
    line-height: 36px
}

.widget-toolbar>.btn-lg.smaller {
    line-height: 34px
}

.widget-toolbar>.btn-lg.bigger {
    line-height: 38px
}

.widget-toolbar-dark {
    background: #444
}

.widget-toolbar-light {
    background: rgba(255, 255, 255, .85)
}

.widget-toolbar>.widget-menu {
    display: inline-block;
    position: relative
}

.widget-toolbar>.widget-menu>a[data-action],
.widget-toolbar>a[data-action] {
    -webkit-transition: transform .1s;
    -o-transition: transform .1s;
    transition: transform .1s
}

.widget-toolbar>.widget-menu>a[data-action]>.ace-icon,
.widget-toolbar>a[data-action]>.ace-icon {
    margin-right: 0
}

.widget-toolbar>.widget-menu>a[data-action]:focus,
.widget-toolbar>a[data-action]:focus {
    text-decoration: none;
    outline: 0
}

.widget-toolbar>.widget-menu>a[data-action]:hover,
.widget-toolbar>a[data-action]:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.widget-body {
    background-color: #FFF
}

.widget-main {
    padding: 12px
}

.widget-main.padding-32 {
    padding: 32px
}

.widget-main.padding-30 {
    padding: 30px
}

.widget-main.padding-28 {
    padding: 28px
}

.widget-main.padding-26 {
    padding: 26px
}

.widget-main.padding-24 {
    padding: 24px
}

.widget-main.padding-22 {
    padding: 22px
}

.widget-main.padding-20 {
    padding: 20px
}

.widget-main.padding-18 {
    padding: 18px
}

.widget-main.padding-16 {
    padding: 16px
}

.widget-main.padding-14 {
    padding: 14px
}

.widget-main.padding-12 {
    padding: 12px
}

.widget-main.padding-10 {
    padding: 10px
}

.widget-main.padding-8 {
    padding: 8px
}

.widget-main.padding-6 {
    padding: 6px
}

.widget-main.padding-4 {
    padding: 4px
}

.widget-main.padding-2 {
    padding: 2px
}

.widget-main.no-padding,
.widget-main.padding-0 {
    padding: 0
}

.widget-toolbar .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0
}

.widget-toolbar>.dropdown,
.widget-toolbar>.dropup {
    display: inline-block
}

.widget-toolbox.toolbox-vertical,
.widget-toolbox.toolbox-vertical+.widget-main {
    display: table-cell;
    vertical-align: top
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-box>.widget-header>.widget-toolbar>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #99CADB
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-box>.widget-header>.widget-toolbar>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #ACD392
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-box>.widget-header>.widget-toolbar>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #AAA
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-box>.widget-header>.widget-toolbar>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=close] {
    color: #E09E96
}

.widget-box[class*=widget-color-]>.widget-header {
    color: #FFF;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-color-blue {
    border-color: #307ECC
}

.widget-color-blue>.widget-header {
    background: #307ECC;
    border-color: #307ECC
}

.widget-color-blue2 {
    border-color: #5090C1
}

.widget-color-blue2>.widget-header {
    background: #5090C1;
    border-color: #5090C1
}

.widget-color-blue3 {
    border-color: #6379AA
}

.widget-color-blue3>.widget-header {
    background: #6379AA;
    border-color: #6379AA
}

.widget-color-green {
    border-color: #82AF6F
}

.widget-color-green>.widget-header {
    background: #82AF6F;
    border-color: #82AF6F
}

.widget-color-green2 {
    border-color: #2E8965
}

.widget-color-green2>.widget-header {
    background: #2E8965;
    border-color: #2E8965
}

.widget-color-green3 {
    border-color: #4EBC30
}

.widget-color-green3>.widget-header {
    background: #4EBC30;
    border-color: #4EBC30
}

.widget-color-red {
    border-color: #E2755F
}

.widget-color-red>.widget-header {
    background: #E2755F;
    border-color: #E2755F
}

.widget-color-red2 {
    border-color: #E04141
}

.widget-color-red2>.widget-header {
    background: #E04141;
    border-color: #E04141
}

.widget-color-red3 {
    border-color: #D15B47
}

.widget-color-red3>.widget-header {
    background: #D15B47;
    border-color: #D15B47
}

.widget-color-purple {
    border-color: #7E6EB0
}

.widget-color-purple>.widget-header {
    background: #7E6EB0;
    border-color: #7E6EB0
}

.widget-color-pink {
    border-color: #CE6F9E
}

.widget-color-pink>.widget-header {
    background: #CE6F9E;
    border-color: #CE6F9E
}

.widget-color-orange {
    border-color: #E8B10D
}

.widget-color-orange>.widget-header {
    color: #855D10 !important;
    border-color: #E8B10D;
    background: #FFC657
}

.widget-color-dark {
    border-color: #5a5a5a
}

.widget-color-dark>.widget-header {
    border-color: #666;
    background: #404040
}

.widget-color-grey {
    border-color: #9e9e9e
}

.widget-color-grey>.widget-header {
    border-color: #aaa;
    background: #848484
}

.widget-box.transparent {
    border-width: 0
}

.widget-box.transparent>.widget-header {
    background: 0 0;
    border-width: 0;
    border-bottom: 1px solid #DCE8F1;
    color: #4383B4;
    padding-left: 3px
}

.widget-box.transparent>.widget-header-large {
    padding-left: 5px
}

.widget-box.transparent>.widget-header-small {
    padding-left: 1px
}

.widget-box.transparent>.widget-body {
    border-width: 0;
    background-color: transparent
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2)
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #D3E4ED
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #DEEAD3
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #E2E2E2
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=close] {
    color: #FFD9D5
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: none
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #559AAB
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #7CA362
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #777
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=close] {
    color: #A05656
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen) {
    border-width: 0
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-header {
    border: 1px solid;
    border-color: inherit
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-body {
    border: 1px solid #D6D6D6;
    border-width: 0 1px 1px
}

.widget-box.no-border {
    border-width: 0
}

.widget-box.fullscreen {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    border-width: 3px;
    z-index: 1040 !important
}

.widget-box.fullscreen:not([class*=widget-color-]) {
    border-color: #AAA
}

.widget-body .table {
    border-top: 1px solid #E5E5E5
}

.widget-body .table thead:first-child tr {
    background: #FFF
}


.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
    }
}


.overlay {
    height: 100vh;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0.71);
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: hidden;
    left: 0;
    bottom: 0;
    z-index: 9999;
}

.loader {
    height: 110px;
    width: 100%;
    background: transparent;
    margin-top: calc(50vh - 100px);
    align-items: center;
    text-align: center;
}

.input-error {
    font-weight: bold;
}

/*
ul.timeline {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: ' ';
    background: #ed2b2c;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li {
    margin: 20px 0;
    padding-left: 20px;
}

ul.timeline>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ed2b2c;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
} */




.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .25rem dotted #ed462f;
        width: 3.46rem;
        position: absolute;
        left: 5.5rem;
        top: .6225rem
    }

    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .25rem dotted #ed462f;
        width: 3.8125rem;
        position: absolute;
        right: 5.5rem;
        top: .625rem
    }
}

.timeline-steps .timeline-content {
    width: 8rem;
    text-align: center
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ed462f
}



#chat1 .form-outline .form-control~.form-notch div {
    pointer-events: none;
    border: 1px solid;
    border-color: #eee;
    box-sizing: border-box;
    background: transparent;
}

#chat1 .form-outline .form-control~.form-notch .form-notch-leading {
    left: 0;
    top: 0;
    height: 100%;
    border-right: none;
    border-radius: .65rem 0 0 .65rem;
}

#chat1 .form-outline .form-control~.form-notch .form-notch-middle {
    flex: 0 0 auto;
    max-width: calc(100% - 1rem);
    height: 100%;
    border-right: none;
    border-left: none;
}

#chat1 .form-outline .form-control~.form-notch .form-notch-trailing {
    flex-grow: 1;
    height: 100%;
    border-left: none;
    border-radius: 0 .65rem .65rem 0;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-left: 0.125rem solid #39c0ed;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading,
#chat1 .form-outline .form-control.active~.form-notch .form-notch-leading {
    border-right: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: #39c0ed;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle,
#chat1 .form-outline .form-control.active~.form-notch .form-notch-middle {
    border-top: none;
    border-right: none;
    border-left: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-right: 0.125rem solid #39c0ed;
}

#chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing,
#chat1 .form-outline .form-control.active~.form-notch .form-notch-trailing {
    border-left: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus~.form-label {
    color: #39c0ed;
}

#chat1 .form-outline .form-control~.form-label {
    color: #bfbfbf;
}


ul.timeline {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: ' ';
    background: #ed2b2c;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li {
    margin: 20px 0;
    padding-left: 20px;
}

/* ul.timeline>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ed2b2c;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
} */


.chat-icon {
    position: fixed;
    z-index: 99999;
    right: 20px;
    bottom: 10px;
    width: 80px;
}

.chat-icon img {
    cursor: pointer;
}


@media (min-width: 900px) {
    .chat-box {
        position: fixed;
        z-index: 9999;
        right: 20px;
        display: none;
        bottom: 0px;
        background: white;
        width: 400px;
        height: 600px;
        background-clip: padding-box;
        box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
        border-radius: 5px 5px 0px 0px;
    }

    .chat-body {
        height: 509px;
        width: inherit;
        overflow: scroll;
        margin-bottom: 45px;
        background: url('/icons/chat.jpg') no-repeat center center;
    }

}

@media (max-width: 800px) {
    .chat-box {
        position: fixed;
        z-index: 9999;
        right: 20px;
        bottom: 0px;
        background: white;
        width: 98%;
        display: none;
        height: 400px;
        background-clip: padding-box;
        box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
        border-radius: 5px 5px 0px 0px;
    }

    .chat-body {
        height: 400px;
        width: inherit;
        overflow: scroll;
        margin-bottom: 45px;
        background: url('/icons/chat.jpg') no-repeat center center;
    }

}

.chat-head {
    width: inherit;
    height: 45px;
    background: #696cff;
    border-radius: 10px 10px 0px 0px;
}

.chat-head h4 {
    color: white;
    padding: 8px;
    display: inline-block;
}

.chat-head img {
    cursor: pointer;
    float: right;
    width: 25px;
    margin: 10px;
}


.msg-insert {
    height: auto;
    /*overflow: scroll;*/
}

.btn-chat-inactive {
    color: #fff;
    background-color: #696cff;
    border-color: #fcfdfd;
    border-right-color: rgb(252, 253, 253);
    border-left-color: rgb(252, 253, 253);
    box-shadow: 0 0.125rem 0.25rem 0 rgb(168, 181, 181);
    border-right: rgb(252, 253, 253);
}

.chat-text {
    position: fixed;
    bottom: 2px;
    height: 45px;
    width: inherit;
}

.chat-text textarea {
    width: inherit;
    height: inherit;
    box-sizing: border-box;
    /*border: 1px solid #bdc3c7;*/
    padding: 10px;
    resize: none;
}

/*.chat-text textarea:active, .chat-text textarea:focus, .chat-text textarea:hover{*/
/*border-color: royalblue;*/
/*}*/
.msg-send {
    background: #dffec2;
}

.msg-send p {
    color: #282727;
    font-size: 18px;
    line-height: 24px;
}


.msg-receive {
    background: #fafafa;
}

.msg-receive-tag {
    background: #fffdea;
    ;
}

.msg-receive p {
    color: #282727;
    font-size: 18px;
    line-height: 24px;
}

.msg-receive-tag {
    color: #282727;
    font-size: 18px;
    line-height: 24px;
}

.msg-send,
.msg-receive small {
    color: #282727;
    font-size: 14px;
}

.msg-receive-tag small {
    color: #282727;
    font-size: 14px;
}

.msg-send,
.msg-receive {
    width: 340px;
    height: auto;
    padding: 8px 8px 8px 10px;
    margin: 10px auto;
    border-radius: 8px;
    line-height: 18px;
    position: relative;
}

.msg-receive-tag {
    width: 340px;
    height: auto;
    padding: 8px 8px 8px 10px;
    margin: 10px auto;
    border-radius: 8px;
    line-height: 18px;
    position: relative;
}

.msg-receive:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    border: 15px solid;
    border-color: transparent #fafafa transparent transparent;
    left: -29px;
    top: 3px;
}

.msg-receive-tag:before {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    border: 15px solid;
    border-color: transparent #fffdea transparent transparent;
    left: -29px;
    top: 3px;
}

.msg-send:after {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    border: 15px solid;
    border-color: transparent transparent transparent #dffec2;
    right: -29px;
    top: 7px;
}

.msg-receive:hover,
.msg-send:hover {
    opacity: .9;
}

.msg-receive-tag:hover {
    opacity: .9;
}

/*timeline*/




.timeline-container {
    position: relative;
    padding-top: 4px;
    margin-bottom: 32px
}

.timeline-container:last-child {
    margin-bottom: 0
}

.timeline-container:before {
    content: "";
    display: block;
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    border: 1px solid #E2E3E7;
    background-color: #E7EAEF;
    width: 4px;
    border-width: 0 1px
}

.timeline-container:first-child:before {
    border-top-width: 1px
}

.timeline-container:last-child:before {
    border-bottom-width: 1px
}

.timeline-item {
    position: relative;
    margin-bottom: 8px
}

.timeline-item .widget-box {
    background-color: #f6f6f6;
    color: #56697e;
}

.timeline-item .transparent.widget-box {
    border-left: 3px solid #DAE1E5
}

.timeline-item .transparent .widget-header {
    background-color: #ECF1F4;
    border-bottom-width: 0
}

.timeline-item .transparent .widget-header>.widget-title {
    margin-left: 8px
}

.timeline-item:nth-child(even) .widget-box {
    background-color: #F3F3F3;
    color: #616161
}

.timeline-item:nth-child(even) .widget-box.transparent {
    border-left-color: #DBDBDB !important
}

.timeline-item:nth-child(even) .widget-box.transparent .widget-header {
    background-color: #EEE !important
}

.timeline-item .widget-box {
    margin: 0 0 0 60px;
    position: relative;
    max-width: none
}

.timeline-item .widget-main {
    margin: 0;
    position: relative;
    max-width: none;
    border-bottom-width: 0
}

.timeline-item .widget-body {
    background-color: transparent
}

.timeline-item .widget-toolbox {
    padding: 4px 8px 0 !important;
    background-color: transparent !important;
    border-width: 0 !important;
    margin: 0 !important
}

.timeline-info {
    float: left;
    width: 60px;
    text-align: center;
    position: relative
}

.timeline-info img {
    border-radius: 100%;
    max-width: 42px
}

.timeline-info .badge,
.timeline-info .label {
    font-size: 12px
}

.timeline-container:not(.timeline-style2) .timeline-indicator {
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    font-size: 16px;
    height: 36px;
    line-height: 30px;
    width: 36px;
    text-align: center;
    text-shadow: none !important;
    padding: 0;
    cursor: default;
    border: 3px solid #FFF !important
}

.timeline-label {
    display: block;
    clear: both;
    margin: 0 0 18px 34px
}

.timeline-item img {
    border: 1px solid #AAA;
    padding: 2px;
    background-color: #FFF
}

.timeline-style2:before {
    display: none
}

.timeline-style2 .timeline-item {
    padding-bottom: 22px;
    margin-bottom: 0
}

.timeline-style2 .timeline-item:last-child {
    padding-bottom: 0
}

.timeline-style2 .timeline-item:before {
    content: "";
    display: block;
    position: absolute;
    left: 90px;
    top: 5px;
    bottom: -5px;
    border-width: 0;
    background-color: #DDD;
    width: 2px;
    max-width: 2px
}

.timeline-style2 .timeline-item:last-child:before {
    display: none
}

.timeline-style2 .timeline-item:first-child:before {
    display: block
}

.timeline-style2 .timeline-item .transparent .widget-header {
    background-color: transparent !important
}

.timeline-style2 .timeline-item .transparent.widget-box {
    background-color: transparent !important;
    border-left: none !important
}

.timeline-style2 .timeline-info {
    width: 100px
}

.timeline-style2 .timeline-indicator {
    font-size: 0;
    height: 12px;
    line-height: 12px;
    width: 12px;
    border-width: 1px !important;
    background-color: #FFF !important;
    position: absolute;
    left: 85px;
    top: 3px;
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    padding: 0
}

.timeline-style2 .timeline-date {
    display: inline-block;
    width: 72px;
    text-align: right;
    margin-right: 25px;
    color: #777
}

.timeline-style2 .timeline-item .widget-box {
    margin-left: 112px
}

.timeline-style2 .timeline-label {
    width: 75px;
    margin-left: 0;
    margin-bottom: 10px;
    text-align: right;
    color: #666;
    font-size: 14px
}

.timeline-time {
    text-align: center;
    position: static
}


.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC
}

@media only screen and (max-width:767px) {
    .widget-box {
        margin-top: 7px;
        margin-bottom: 7px
    }
}

.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #f7f7f7;
    background-image: -webkit-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #EEE 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #669FC7;
    border-bottom: 1px solid #DDD;
    padding-left: 12px
}

.widget-box.transparent>.widget-header,
.widget-header-flat {
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-header:after,
.widget-header:before {
    content: "";
    display: table;
    line-height: 0
}

.widget-header:after {
    clear: right
}

.widget-box.collapsed>.widget-header {
    border-bottom-width: 0
}

.collapsed.fullscreen>.widget-header {
    border-bottom-width: 1px
}

.collapsed>.widget-body {
    display: none
}

.widget-header-flat {
    background: #F7F7F7
}

.widget-header-large {
    min-height: 49px;
    padding-left: 18px
}

.widget-header-small {
    min-height: 31px;
    padding-left: 10px
}

.widget-header>.widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline
}

.widget-header>.widget-title>.ace-icon {
    margin-right: 5px;
    font-weight: 400;
    display: inline-block
}

.infobox .infobox-content:first-child,
.infobox>.badge,
.infobox>.stat,
.percentage {
    font-weight: 700
}

.widget-header-large>.widget-title {
    line-height: 48px
}

.widget-header-small>.widget-title {
    line-height: 30px
}

.widget-toolbar {
    display: inline-block;
    padding: 0 10px;
    line-height: 37px;
    float: right;
    position: relative
}

.widget-header-large>.widget-toolbar {
    line-height: 48px
}

.widget-header-small>.widget-toolbar {
    line-height: 29px
}

.widget-toolbar.no-padding {
    padding: 0
}

.widget-toolbar.padding-5 {
    padding: 0 5px
}

.widget-toolbar:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -1px;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0
}

.popover-notitle+.popover .popover-title,
.popover.popover-notitle .popover-title,
.widget-toolbar.no-border:before {
    display: none
}

.widget-header-large>.widget-toolbar:before {
    top: 6px;
    bottom: 6px
}

[class*=widget-color-]>.widget-header>.widget-toolbar:before {
    border-color: #EEE
}

.widget-color-orange>.widget-header>.widget-toolbar:before {
    border-color: #FEA
}

.widget-color-dark>.widget-header>.widget-toolbar:before {
    border-color: #222;
    box-shadow: -1px 0 0 rgba(255, 255, 255, .2), inset 1px 0 0 rgba(255, 255, 255, .1)
}

.widget-toolbar label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0
}

.widget-toolbar>.widget-menu>a,
.widget-toolbar>a {
    font-size: 14px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px
}

.widget-toolbar>.widget-menu>a:hover,
.widget-toolbar>a:hover {
    text-decoration: none
}

.widget-header-large>.widget-toolbar>.widget-menu>a,
.widget-header-large>.widget-toolbar>a {
    font-size: 15px;
    margin: 0 1px
}

.widget-toolbar>.btn {
    line-height: 27px;
    margin-top: -2px
}

.widget-toolbar>.btn.smaller {
    line-height: 26px
}

.widget-toolbar>.btn.bigger {
    line-height: 28px
}

.widget-toolbar>.btn-sm {
    line-height: 24px
}

.widget-toolbar>.btn-sm.smaller {
    line-height: 23px
}

.widget-toolbar>.btn-sm.bigger {
    line-height: 25px
}

.widget-toolbar>.btn-xs {
    line-height: 22px
}

.widget-toolbar>.btn-xs.smaller {
    line-height: 21px
}

.widget-toolbar>.btn-xs.bigger {
    line-height: 23px
}

.widget-toolbar>.btn-minier {
    line-height: 18px
}

.widget-toolbar>.btn-minier.smaller {
    line-height: 17px
}

.widget-toolbar>.btn-minier.bigger {
    line-height: 19px
}

.widget-toolbar>.btn-lg {
    line-height: 36px
}

.widget-toolbar>.btn-lg.smaller {
    line-height: 34px
}

.widget-toolbar>.btn-lg.bigger {
    line-height: 38px
}

.widget-toolbar-dark {
    background: #444
}

.widget-toolbar-light {
    background: rgba(255, 255, 255, .85)
}

.widget-toolbar>.widget-menu {
    display: inline-block;
    position: relative
}

.widget-toolbar>.widget-menu>a[data-action],
.widget-toolbar>a[data-action] {
    -webkit-transition: transform .1s;
    -o-transition: transform .1s;
    transition: transform .1s
}

.widget-toolbar>.widget-menu>a[data-action]>.ace-icon,
.widget-toolbar>a[data-action]>.ace-icon {
    margin-right: 0
}

.widget-toolbar>.widget-menu>a[data-action]:focus,
.widget-toolbar>a[data-action]:focus {
    text-decoration: none;
    outline: 0
}

.widget-toolbar>.widget-menu>a[data-action]:hover,
.widget-toolbar>a[data-action]:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.widget-body {
    background-color: #FFF
}

.widget-main {
    padding: 12px
}

.widget-main.padding-32 {
    padding: 32px
}

.widget-main.padding-30 {
    padding: 30px
}

.widget-main.padding-28 {
    padding: 28px
}

.widget-main.padding-26 {
    padding: 26px
}

.widget-main.padding-24 {
    padding: 24px
}

.widget-main.padding-22 {
    padding: 22px
}

.widget-main.padding-20 {
    padding: 20px
}

.widget-main.padding-18 {
    padding: 18px
}

.widget-main.padding-16 {
    padding: 16px
}

.widget-main.padding-14 {
    padding: 14px
}

.widget-main.padding-12 {
    padding: 12px
}

.widget-main.padding-10 {
    padding: 10px
}

.widget-main.padding-8 {
    padding: 8px
}

.widget-main.padding-6 {
    padding: 6px
}

.widget-main.padding-4 {
    padding: 4px
}

.widget-main.padding-2 {
    padding: 2px
}

.widget-main.no-padding,
.widget-main.padding-0 {
    padding: 0
}

.widget-toolbar .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0
}

.widget-toolbar>.dropdown,
.widget-toolbar>.dropup {
    display: inline-block
}

.widget-toolbox.toolbox-vertical,
.widget-toolbox.toolbox-vertical+.widget-main {
    display: table-cell;
    vertical-align: top
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-box>.widget-header>.widget-toolbar>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #99CADB
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-box>.widget-header>.widget-toolbar>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #ACD392
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-box>.widget-header>.widget-toolbar>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #AAA
}

.widget-box>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-box>.widget-header>.widget-toolbar>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-dark>.widget-header>.widget-toolbar>[data-action=close] {
    color: #E09E96
}

.widget-box[class*=widget-color-]>.widget-header {
    color: #FFF;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-color-blue {
    border-color: #307ECC
}

.widget-color-blue>.widget-header {
    background: #307ECC;
    border-color: #307ECC
}

.widget-color-blue2 {
    border-color: #5090C1
}

.widget-color-blue2>.widget-header {
    background: #5090C1;
    border-color: #5090C1
}

.widget-color-blue3 {
    border-color: #6379AA
}

.widget-color-blue3>.widget-header {
    background: #6379AA;
    border-color: #6379AA
}

.widget-color-green {
    border-color: #82AF6F
}

.widget-color-green>.widget-header {
    background: #82AF6F;
    border-color: #82AF6F
}

.widget-color-green2 {
    border-color: #2E8965
}

.widget-color-green2>.widget-header {
    background: #2E8965;
    border-color: #2E8965
}

.widget-color-green3 {
    border-color: #4EBC30
}

.widget-color-green3>.widget-header {
    background: #4EBC30;
    border-color: #4EBC30
}

.widget-color-red {
    border-color: #E2755F
}

.widget-color-red>.widget-header {
    background: #E2755F;
    border-color: #E2755F
}

.widget-color-red2 {
    border-color: #E04141
}

.widget-color-red2>.widget-header {
    background: #E04141;
    border-color: #E04141
}

.widget-color-red3 {
    border-color: #D15B47
}

.widget-color-red3>.widget-header {
    background: #D15B47;
    border-color: #D15B47
}

.widget-color-purple {
    border-color: #7E6EB0
}

.widget-color-purple>.widget-header {
    background: #7E6EB0;
    border-color: #7E6EB0
}

.widget-color-pink {
    border-color: #CE6F9E
}

.widget-color-pink>.widget-header {
    background: #CE6F9E;
    border-color: #CE6F9E
}

.widget-color-orange {
    border-color: #E8B10D
}

.widget-color-orange>.widget-header {
    color: #855D10 !important;
    border-color: #E8B10D;
    background: #FFC657
}

.widget-color-dark {
    border-color: #5a5a5a
}

.widget-color-dark>.widget-header {
    border-color: #666;
    background: #404040
}

.widget-color-grey {
    border-color: #9e9e9e
}

.widget-color-grey>.widget-header {
    border-color: #aaa;
    background: #848484
}

.widget-box.transparent {
    border-width: 0
}

.widget-box.transparent>.widget-header {
    background: 0 0;
    border-width: 0;
    border-bottom: 1px solid #DCE8F1;
    color: #4383B4;
    padding-left: 3px
}

.widget-box.transparent>.widget-header-large {
    padding-left: 5px
}

.widget-box.transparent>.widget-header-small {
    padding-left: 1px
}

.widget-box.transparent>.widget-body {
    border-width: 0;
    background-color: transparent
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2)
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #D3E4ED
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #DEEAD3
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #E2E2E2
}

[class*=widget-color-]>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
[class*=widget-color-]>.widget-header>.widget-toolbar>[data-action=close] {
    color: #FFD9D5
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action] {
    text-shadow: none
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=settings],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=settings] {
    color: #559AAB
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=reload],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=reload] {
    color: #7CA362
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=collapse],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=collapse] {
    color: #777
}

.widget-color-orange>.widget-header>.widget-toolbar>.widget-menu>[data-action=close],
.widget-color-orange>.widget-header>.widget-toolbar>[data-action=close] {
    color: #A05656
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen) {
    border-width: 0
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-header {
    border: 1px solid;
    border-color: inherit
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen)>.widget-body {
    border: 1px solid #D6D6D6;
    border-width: 0 1px 1px
}

.widget-box.no-border {
    border-width: 0
}

.widget-box.fullscreen {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    border-width: 3px;
    z-index: 1040 !important
}

.widget-box.fullscreen:not([class*=widget-color-]) {
    border-color: #AAA
}

.widget-body .table {
    border-top: 1px solid #E5E5E5
}

.widget-body .table thead:first-child tr {
    background: #FFF
}


.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
    }
}


@-webkit-keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.spinner-grow {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    vertical-align: -0.125em;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: 0.75s linear infinite spinner-grow;
    animation: 0.75s linear infinite spinner-grow;
}

.spinner-grow-sm {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: reduce) {

    .spinner-border,
    .spinner-grow {
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
    }
}



.active-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;

}

.dash-btn-text {
    font-weight: 600;
}

.dropdown-font {
    font-size: 10px;
}


.table-size-12 {
    font-size: 12px;
}

.active-nav-section {
    opacity: 1;
    color: white;
    border-radius: 10px;
    background-color: var(--falcon-active-bg);
    padding: 0.8rem !important;
}

.dataTable {
    font-size: 12px;
}

.progress-data {
    height: 15px;
    border-radius: 15px;
}

#data_holder {
    overflow-x: scroll;
}

#data_holder {
    overflow-x: scroll;
}

#orders {
    overflow-x: scroll;
}

#users {
    overflow-x: scroll;
}

#data_holder {
    overflow-x: scroll;
}

#data_holder {
    overflow-x: scroll;
}


.daterangepicker {
    color: var(--falcon-body-color);
    word-wrap: break-word;
    background-color: var(--falcon-date-bg);
    background-clip: border-box;
    border: var(--falcon-card-border-width) solid var(--falcon-card-border-color);
    border-radius: var(--falcon-card-border-radius);
    -webkit-box-shadow: var(--falcon-card-box-shadow);
    box-shadow: var(--falcon-card-box-shadow);
}

.daterangepicker .calendar-table {
    color: var(--falcon-body-color);
    word-wrap: break-word;
    background-color: var(--falcon-date-bg);
    background-clip: border-box;
    border: var(--falcon-card-border-width) solid var(--falcon-card-border-color);
    border-radius: var(--falcon-card-border-radius);
    -webkit-box-shadow: var(--falcon-card-box-shadow);
    box-shadow: var(--falcon-card-box-shadow);
}

.daterangepicker td.off,
.daterangepicker td.off.end-date,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date {
    background-color: var(--falcon-date-faint);
    border-color: transparent;
    color: #999;
}

.daterangepicker td.in-range {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff;
}

.daterangepicker td.off,
.daterangepicker td.off.end-date,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date {
    /*background-color: #494545;*/
}



#inputArea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    height: 100px;
    resize: none;
}

.users {
    display: none;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.users li {
    padding: 8px;
    cursor: pointer;
}

.users li:hover {
    background-color: var(--fc-button-hover-bg-color);
}

.notification-body {
    width: 100%;
}

.rc-anchor-light {
    background: var(--falcon-date-bg);
    color: #000;
}

.input-search-width {
    width: 13.75rem;
}

.auth-form-control {
    display: block;
    width: 100%;
    padding: 0.3125rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #222325;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #c2c4c7;
    background-clip: padding-box;
    border: #c2c4c7 solid var(--falcon-gray-300);
    border-radius: var(--falcon-border-radius);
    -webkit-box-shadow: var(--falcon-box-shadow-inset);
    box-shadow: var(--falcon-box-shadow-inset);
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.auth-form-control:focus {
    color: #222325;
    background-color: #c2c4c7;
    border-color: #c2c4c7;
    outline: 0;
    -webkit-box-shadow: var(--falcon-box-shadow-inset), 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
    box-shadow: var(--falcon-box-shadow-inset), 0 0 0 0.25rem rgba(44, 123, 229, 0.25);
}

.auth-form-control::-webkit-input-placeholder {
    color: #9a9ea7;
    opacity: 1;
}

.auth-form-control::-moz-placeholder {
    color: #9a9ea7;
    opacity: 1;
}

.auth-form-control:-ms-input-placeholder {
    color: #9a9ea7;
    opacity: 1;
}

.auth-form-control::-ms-input-placeholder {
    color: #9a9ea7;
    opacity: 1;
}

.auth-form-control::placeholder {
    color: #9a9ea7;
    opacity: 1;
}

/*calendar css*/
.outer-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-day {
    padding: 20px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.calendar-day.active {
    background-color: #003F25;
    color: white;
}



.calendar-day.inactive {
    background-color: #1e1e1edb;
    color: white;
}

.calendar-today {
    background-color: #c85e11db;
    color: white;
}

#data_holder {
    overflow-x: scroll;
}




.timeline-with-icons {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
}

.timeline-with-icons .timeline-item {
    position: relative;
}

.timeline-with-icons .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline-with-icons .timeline-icon {
    position: absolute;
    left: -48px;
    background-color: hsl(217, 88.2%, 90%);
    color: hsl(217, 88.8%, 35.1%);
    border-radius: 50%;
    height: 31px;
    width: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert .btn-close {
    filter: brightness(0) invert(1);
    /* makes the close icon white */
}

.peer-star {
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
}

.peer-star.selected {
    color: gold;
}

.blurred-name {
    filter: blur(4px);
    user-select: none;
}



/* Light mode (Falcon variables for light theme) */
:root,
[data-bs-theme="light"] {
    --table-bg: var(--falcon-gray-100);
    /* #f9fafd */
    --row-border: var(--falcon-gray-300);
    /* #d8e2ef */
    --shimmer-1: var(--falcon-gray-200);
    /* #edf2f9 */
    --shimmer-2: var(--falcon-gray-100);
    /* #f9fafd */
    --shimmer-3: var(--falcon-gray-200);
    /* #edf2f9 */
}

/* Dark mode (Falcon variables for dark theme) */
[data-bs-theme="dark"] {
    --table-bg: var(--falcon-tertiary-bg);
    /* #162231 */
    --row-border: var(--falcon-gray-800);
    /* #4d5969 */
    --shimmer-1: var(--falcon-gray-1000);
    /* #232e3c */
    --shimmer-2: var(--falcon-body-bg);
    /* #0b1727 */
    --shimmer-3: var(--falcon-gray-1000);
    /* #232e3c */
}

/* Shimmer table styles */
.shimmer-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg);
    border-radius: 8px;
    overflow: hidden;
}

.shimmer-table th,
.shimmer-table td {
    padding: 16px;
    border-bottom: 1px solid var(--row-border);
    position: relative;
}

.shimmer-table .shimmer {
    height: 16px;
    width: 100%;
    background: linear-gradient(to right,
            var(--shimmer-1) 0%,
            var(--shimmer-2) 20%,
            var(--shimmer-3) 40%,
            var(--shimmer-3) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.shimmer-table .shimmer.short {
    width: 40%;
}

.shimmer-table .shimmer.medium {
    width: 70%;
}

.shimmer-table .shimmer.long {
    width: 90%;
}



/* AI analyze style */
.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border-radius: 16px;
}

.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    padding: 50px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f9fafb, #eef2ff);
}

.upload-area:hover {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    transform: translateY(-2px);
}

.upload-area.dragging {
    border-color: #4f46e5;
    background: #e0e7ff;
}

.upload-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.modern-textarea {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.modern-textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.dragging {
    border-color: #4f46e5 !important;
    background: #e0e7ff !important;
    transform: scale(1.01);
}

#product-table-container > div {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-select:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}


/* Unresolved items modern card style */
.unresolved-wrapper {
    margin-top: 2rem;
}

.unresolved-card {
    background: rgba(255, 223, 93, 0.15); /* soft amber with opacity */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    backdrop-filter: blur(5px);
    transition: transform 0.2s, box-shadow 0.2s;
}

.unresolved-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.unresolved-card table {
    margin-bottom: 0;
}

.unresolved-card thead th {
    border-bottom: 2px solid rgba(0,0,0,0.1);
    font-weight: 600;
    color: #555;
}

.unresolved-card tbody td {
    vertical-align: middle;
}

.unresolved-select.modern-select {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 0.35rem 0.5rem;
    min-width: 150px;
}

/* Section animation */
.unresolved-wrapper {
    animation: fadeSlide 0.4s ease;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===================================================================
   Note thread (the order "chats")

   The thread used to be two blocks of identical markup whose only
   difference was timeline-item-start / timeline-item-end — classes the
   project's CSS never defined, so both mine and theirs rendered the
   same, each giving half its width to a two-line timestamp. It read as
   a list of cards, not a conversation.

   These rules live here and not in the partial because the thread is
   injected with safeHtmlInto(), which strips <style> tags.
   =================================================================== */

/* Written as hex, not as var(--falcon-gray-*), because Falcon REDEFINES
   its gray scale per theme: --falcon-gray-200 is #edf2f9 under :root and
   #232e3c under [data-bs-theme=dark]. Mapping a bubble's background to
   gray-1000 and its text to gray-200 therefore gave #232e3c on #232e3c in
   dark mode — the messages were there and invisible. */
:root,
[data-bs-theme="light"] {
    --nt-bubble-bg: #edf2f9;
    --nt-bubble-mine-bg: #d4ecff;
    --nt-bubble-fg: #344050;
    --nt-bubble-muted: #5e6e82;
    --nt-divider: #d8e2ef;
    --nt-surface: #fff;
}

[data-bs-theme="dark"] {
    --nt-bubble-bg: #232e3c;
    --nt-bubble-mine-bg: #1c4766;
    --nt-bubble-fg: #e3e6ed;
    --nt-bubble-muted: #9da9bb;
    --nt-divider: #344050;
    --nt-surface: #162231;
}

.nt-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px;
}

/* One message: avatar beside the bubble, both sitting on the same
   baseline so a tall bubble does not drag the avatar up with it. */
.nt-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.nt-msg.nt-mine {
    flex-direction: row-reverse;
}

.nt-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nt-bubble-bg);
}

/* The initials stand in when a user has no profile picture — better
   than a broken image frame, which is what the old markup showed. */
.nt-avatar-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--nt-bubble-muted);
    text-transform: uppercase;
}

.nt-bubble {
    max-width: 74%;
    padding: 7px 11px 5px;
    border-radius: 12px;
    background: var(--nt-bubble-bg);
    color: var(--nt-bubble-fg);
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
}

/* The squared corner points at the speaker, which is what makes the
   side readable at a glance without reading the name. */
.nt-msg:not(.nt-mine) .nt-bubble {
    border-bottom-left-radius: 3px;
}

.nt-msg.nt-mine .nt-bubble {
    background: var(--nt-bubble-mine-bg);
    border-bottom-right-radius: 3px;
}

.nt-who {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--falcon-primary);
}

.nt-msg.nt-mine .nt-who {
    display: none;
    /* No point naming yourself on every message you sent. */
}

.nt-body {
    margin: 0;
}

.nt-body a {
    font-weight: 600;
    text-decoration: underline;
}

/* The time rides along the bottom edge of the bubble instead of taking
   a column of its own. */
.nt-time {
    display: block;
    text-align: right;
    font-size: 9px;
    margin-top: 2px;
    opacity: .65;
}

/* A date, once, where the day changes — rather than on every message. */
.nt-day {
    align-self: center;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--nt-bubble-muted);
    background: var(--nt-bubble-bg);
    border-radius: 10px;
    padding: 2px 10px;
    margin: 6px 0 2px;
}

.nt-empty {
    text-align: center;
    color: var(--nt-bubble-muted);
    font-size: 12px;
    padding: 28px 0;
}

/* The composer. The old one let a right-floated button sit under a
   full-width textarea, so the modal ended with a stray gap. */
/* The textarea runs the full width of the thread above it, with Send
   beneath on the right. Side by side, the button ate ~70px and the box
   you type into was visibly narrower than the messages it produces. */
.nt-composer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.nt-composer > .btn,
.nt-composer > button {
    align-self: flex-end;
}

.nt-composer textarea {
    resize: none;
    font-size: 12px;
    min-height: 42px;
}

/* The @mention list is absolutely positioned so it overlays the thread
   instead of pushing the composer down the modal as you type. */
.nt-mention-wrap {
    position: relative;
    flex: 1 1 auto;
}

.nt-mention-wrap .users {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
    background: var(--nt-surface);
    color: var(--nt-bubble-fg);
    border: 1px solid var(--nt-divider);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    font-size: 12px;
    z-index: 5;
}


/* ===================================================================
   Order progress stepper

   Replaces .timeline-steps for the order page. That one draws both its
   connector lines and its circles in a hardcoded red (#ed462f), so the
   first stage always looked done-and-alarming and the line said nothing
   about progress; the view then set completed stages to bg-danger,
   making "delivered" red and "pending" grey. It is also declared twice
   in this file, at two different places.

   Here a stage carries one of three states, and the line entering a
   stage is green only once that stage is reached.
   =================================================================== */

/* Hex for the same reason as the thread above: Falcon's gray scale is
   redefined per theme, so naming a gray does not name a lightness. */
:root,
[data-bs-theme="light"] {
    --ord-line: #d8e2ef;
    --ord-pending-bg: #edf2f9;
    --ord-pending-fg: #748194;
}

[data-bs-theme="dark"] {
    --ord-line: #344050;
    --ord-pending-bg: #232e3c;
    --ord-pending-fg: #9da9bb;
}

.ord-steps {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: 6px 0 2px;
}

.ord-step {
    flex: 1 1 0;
    min-width: 96px;
    text-align: center;
    position: relative;
}

/* right:50% with width:100% runs from the centre of the previous step
   to the centre of this one, so each step owns the segment arriving at
   it and can colour it by its own state. */
.ord-step::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--ord-line);
    z-index: 0;
}

.ord-step:first-child::before {
    display: none;
}

.ord-step.is-done::before {
    background: var(--falcon-success);
}

.ord-circle {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: var(--ord-pending-bg);
    color: var(--ord-pending-fg);
}

.ord-step.is-done .ord-circle {
    background: var(--falcon-success);
    color: #fff;
}

/* The stage the order is waiting on — the one thing someone opening
   this page is looking for. */
.ord-step.is-current .ord-circle {
    background: var(--falcon-warning);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 159, 67, .22);
}

.ord-step-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 6px;
}

.ord-step-time {
    font-size: 10px;
    color: var(--ord-pending-fg);
}


/* A thread shown on a page rather than in a modal. Full page width makes a
   chat read as a list of banners — a one-line note stretched across 1,400px
   with its avatar marooned at the far edge. Capped and centred it reads as a
   conversation, which is the point of the bubbles. */
/* Width-capped and centred, in BOTH a block and a flex-column parent.

   margin:0 auto alone is not enough: an auto cross-axis margin on a flex
   item switches off align-self:stretch, so once .nt-col made the card
   body a flex column these two collapsed to shrink-to-fit — the thread
   measured 276px instead of 640 and the form measured 0, with its own
   composer overflowing it. width:100% + align-self:center keeps the
   stretch and the centring at once. */
.nt-scroll--page,
.nt-form--page {
    width: 100%;
    max-width: 640px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* One action bar, grouped. Each group keeps its own label and the groups are
   separated by a rule, so "cancel this order" never sits flush against "add
   an item" looking like the same kind of thing. */
.act-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.act-group {
    padding: 0 1rem;
    border-left: 1px solid var(--nt-divider);
}

.act-group:first-child {
    padding-left: 0;
    border-left: 0;
}

.act-group-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--nt-bubble-muted);
    margin-bottom: 6px;
}

.act-group-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Below lg the groups stack, and a left rule on a stacked group points at
   nothing. */
@media (max-width: 991.98px) {
    .act-group {
        flex: 1 1 100%;
        padding: .75rem 0 0;
        border-left: 0;
        border-top: 1px solid var(--nt-divider);
    }

    .act-group:first-child {
        padding-top: 0;
        border-top: 0;
    }
}


/* ===================================================================
   Order audit trail — who did what, and when.

   Replaces a four-column table of label/value/label/value in which the
   words "by" and "Time" were each repeated eight times, every row was
   the same weight, and nothing distinguished a stage that had happened
   from one still waiting. It also carried id="dataTable", a third copy
   of that id on the page, on a table with no <thead> at all.
   =================================================================== */

.trail {
    display: flex;
    flex-direction: column;
}

.trail-row {
    display: grid;
    grid-template-columns: 22px 1.1fr 1.4fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--nt-divider);
    font-size: 12px;
}

.trail-row:last-child {
    border-bottom: 0;
}

/* A stage that has not happened recedes rather than shouting "--Pending--"
   in the same weight as a real name. */
.trail-row.is-waiting {
    opacity: .55;
}

.trail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ord-pending-bg);
    border: 2px solid var(--ord-line);
    justify-self: center;
}

.trail-row.is-done .trail-dot {
    background: var(--falcon-success);
    border-color: var(--falcon-success);
}

.trail-stage {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--nt-bubble-muted);
}

.trail-who {
    font-weight: 600;
    color: var(--nt-bubble-fg);
}

.trail-when {
    text-align: right;
    color: var(--nt-bubble-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.trail-when .trail-ago {
    display: block;
    font-size: 10px;
    opacity: .75;
}

@media (max-width: 575.98px) {
    .trail-row {
        grid-template-columns: 22px 1fr;
        row-gap: 2px;
    }

    .trail-when {
        grid-column: 2;
        text-align: left;
    }
}


/* ===================================================================
   Conversation beside the delivery record.

   The thread had a fixed max-height of 340px, so next to a taller
   column it left dead space below the composer, and on a short one it
   overflowed. Both columns stretch to the row's height and the thread
   takes whatever is left inside its card, which makes the two columns
   end on exactly the same line whatever either contains.
   =================================================================== */

.nt-col {
    display: flex;
}

.nt-col > .card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* min-height:0 on every flex ancestor, or the thread refuses to
       shrink below its content and the card grows instead of scrolling. */
    min-height: 0;
}

.nt-col > .card > .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.nt-col .nt-scroll {
    flex: 1 1 auto;
    min-height: 160px;
}

/* A scrollbar you can see. The default overlay bar appears only once you
   are already scrolling, which is no use for telling you that you can. */
.nt-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--ord-line) transparent;
}

.nt-scroll::-webkit-scrollbar {
    width: 10px;
}

.nt-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.nt-scroll::-webkit-scrollbar-thumb {
    background: var(--ord-line);
    border-radius: 10px;
    /* Inset so the thumb reads as a rail rather than a border on the
       edge of the card. */
    border: 3px solid transparent;
    background-clip: content-box;
}

.nt-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--nt-bubble-muted);
    background-clip: content-box;
}

/* Messages fade as they pass under the top edge, so a thread scrolled to
   the newest message still shows that there is more above it. */
.nt-scroll--faded {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}


/* ===================================================================
   Capping the conversation / delivery pair.

   Making the two columns equal height solved the ragged bottom edge but
   created a worse problem: the delivery record is eight trail rows plus
   a driver card, so the chat stretched to match it and the pair ran well
   past a screen. Nothing capped the row, so "equal height" meant "as
   tall as the taller one", however tall that was.

   The row is capped instead, and each side scrolls within its own card.
   =================================================================== */

/* The delivery column scrolls as one, so the driver card stays at the
   top and the trail runs under it. */
.nt-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Side by side only from lg up; below that the pair stacks and each
   part is free to be as tall as it likes.

   HEIGHT, not max-height. A percentage height — which is what every
   descendant below needs to inherit the cap — resolves against the
   containing block's HEIGHT. When the parent has only a max-height and
   its height is auto, that percentage has nothing to resolve against
   and computes to none, so an earlier version of this block capped the
   row and the columns inside it grew straight past the cap anyway. */
@media (min-width: 992px) {
    .nt-pair {
        height: min(560px, 72vh);
        /* Bootstrap's g-3 puts a 1rem margin-top on every column and
           pulls the row up by the same amount. Combined with height:100%
           below that is 100% + 1rem, which overflows the row by exactly
           the gutter. The horizontal gutter is the one worth keeping, so
           the vertical one goes to zero here. */
        --bs-gutter-y: 0;
    }

    .nt-pair > [class*="col-"] {
        height: 100%;
        min-height: 0;
    }

    .nt-col > .card {
        height: 100%;
        min-height: 0;
        /* Same arithmetic: mb-1 on top of height:100% overflows. */
        margin-bottom: 0 !important;
    }

    .nt-side {
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    .nt-col .nt-scroll {
        max-height: 60vh;
    }
}