/****************************
    EMERGE Z-INDEX COLLECTION
    1. Blue + white header: 800
    2. Question Mark - ITP Overlay Popup: 1040
    3. Modal Background: 1045
    4. Action Menu Top - Dropdown Menu: 1045
    5. Intro JS overlay: 999999
    6. ITP notification: 1000000
    7. SweetAlert2: 1000000 for backdrop, 1000001 for popup
    8. ITP - Trail Bar on header: (old = 1090, new = 1045)
    9. When showing modal in modal, need to override the select2 result list by  z-index: 1060; (refer to .override-zindex class)
    10. Show warning message on the top page when user squeeze the browser to below 1200px width, class: doesnotSupport1200, z-index: 1046

    ONBOARDING Z-INDEX
    11. Emerge Tracker loading: 1060
    12. Emerge Trial bar on top: 1061
    13. Modal fullscreen: 1062
    14. Notification of Emerge app best view screen solution: 1062

****************************/
.emerge-font-error-color {
    color: #f55753 !important;
}
.error-color-not-important {
    color: #f55753;
}
.emerge-font-blur-color {
    color: #9e9e9e !important;
}

.emerge-font-blue-color {
    color: #48B5E4 !important;
}

.emerge-light-green-color {
    color: #10cfbd !important;
}

.emerge-border-color {
    border-color: #48B5E4 !important;
}

.emerge-bg-color {
    background-color: #48B5E4 !important;
}
.emerge-svg-color {
    filter: invert(57%) sepia(95%) saturate(1421%) hue-rotate(174deg) brightness(109%) contrast(79%);
}

.emerge-light-bg {
    background-color: #E0F2FE !important;
}

.emerge-bg-warning {
    background-color: #fffab6 !important;
}

.emerge-dark-bg-warning {
    color: #f9cc4e !important;
}

.datepicker table tr td span.active,
.datepicker table tr td.active,
.datepicker table tr td.selected {
    background: #48B5E4 !important;
}

.emerge-bg-grey {
    background-color: #e6e7e8;
}

.emerge-btn-darkgrey,
.emerge-btn-darkgrey:focus {
    border: 1px solid #c7c7c7;
    color: white;
    background-color: #c7c7c7;
}

    .emerge-btn-darkgrey:hover {
        border: 1px solid transparent;
        color: white;
        background-color: #c7c7c7;
        opacity: 0.8;
    }

.emerge-bg-white {
    background-color: white;
}

.emerge-bg-white--important {
    background-color: white !important;
}

.no-bg {
    color: inherit;
    background-color: transparent;
}

.font15
{
    font-size: 15px;
}

.emerge-light-gray-color {
    color: #c2c2c2
}

.emerge-light-grey-bg {
    background-color: #e6e6e6;
}

.emerge-grey-color {
    color: #e6e7e8;
}

.emerge-opacity-mid {
    opacity: 0.42;
}

    .emerge-opacity-mid:hover {
        opacity: 0.6;
    }

.emerge-opacity-80 {
	opacity: 0.8;
}

.emerge-normal-dark {
    color: #ccc;
}

.emerge-green-bg {
    background-color: #27c24c;
}

.emerge-red-bg {
    background-color: red;
}

.emerge-btn-green-bg {
    background-color: #8cc63f;
}

    .emerge-btn-green-bg:hover {
        background-color: #39b54a;
    }

.emerge-btn-red-bg {
    background-color: #c1272d;
}

    .emerge-btn-red-bg:hover {
        background-color: #97272d;
    }

.blue-info-circle {
    color: #1C75BC;
}

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

.noresize {
    resize: none;
}

.min-height-80 {
    min-height: 80px;
}

.min-height-34 {
    min-height: 34px;
}
/********************START EMERGE TEXT COLOR************************/

/*EMERGE LIGHT BLUE TEXT COLOR */
.emerge-color,
.emerge-light-blue,
.datepicker thead tr .dow,
.datepicker thead tr .next,
.datepicker thead tr .prev,
.datepicker thead tr .next:before,
.datepicker thead tr .prev:before {
    color: #48B5E4;
}

    .emerge-light-blue:hover,
    .emerge-color:hover {
        color: #3CA0DC;
    }

/*EMERGE DARK GREY TEXT COLOR*/
.emerge-dark-grey-color {
    color: #808285;
}

/*EMERGE BLACK TEXT COLOR*/
.emerge-black, .emerge-black-color {
    color: #6F7B8A;
}

.black-color {
    color: black;
}

/*EMERGE GREEN TEXT COLOR*/
.emerge-green-color {
    color: #27c24c;
}

/*EMERGE GREEN BLUE TEXT COLOR*/
.emerge-green-blue-color {
    color: #70E3D8;
}

    .emerge-green-blue-color:hover {
        color: #5FD2C8;
    }

/*EMERGE DARK TEXT COLOR*/
.emerge-dark-blue {
    color: #27326F;
}

    .emerge-dark-blue:hover {
        color: #121B5B;
    }

/*EMERGE DARK TEXT COLOR*/
.emerge-negative {
    color: #B42D2D;
}

    .emerge-negative:hover {
        color: #822D2D;
    }

/*EMERGE DARK TEXT COLOR*/
.emerge-white-color {
    color: white;
}

    .emerge-white-color:hover {
        color: white;
    }

a.emerge-white-color:focus {
    color: white;
}
/*EMERGE DISABLE TEXT COLOR (ALL TYPES)*/
.emerge-text-nonimportant,
.emerge-light-blue:disabled,
.emerge-green-blue-color:disabled,
.emerge-dark-blue:disabled,
.emerge-negative:disabled {
    color: #BCBEC0;
}

/*EMERGE DESCRIPTION TEXT*/
.emerge-description-text {
    color: #999999;
}

/********************END EMERGE TEXT COLOR************************/

/********************START EMERGE ANIMATION************************/
.emerge-fade.ng-enter {
    transition: 0.5s linear all;
    opacity: 0;
}

    .emerge-fade.ng-enter.ng-enter-active {
        opacity: 1;
    }

.emerge-fade.ng-leave {
    transition: 0.5s linear all;
    opacity: 1;
}

    .emerge-fade.ng-leave.ng-leave-active {
        opacity: 0;
    }
/********************END EMERGE ANIMATION************************/

/********************START EMERGE NG-VIEW ANIMATION************************/
.slidedown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .slidedown.ng-enter,
    .slidedown.ng-leave {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
    }

    .slidedown.ng-enter {
        top: -100%;
    }

    .slidedown.ng-enter-active {
        top: 0;
    }

    .slidedown.ng-leave {
        top: 0;
    }

    .slidedown.ng-leave-active {
        top: 100%;
    }

.slideup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

    .slideup.ng-enter,
    .slideup.ng-leave {
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
    }

    .slideup.ng-enter {
        top: 100%;
    }

    .slideup.ng-enter-active {
        top: 0;
    }

    .slideup.ng-leave {
        top: 0;
    }

    .slideup.ng-leave-active {
        top: -100%;
    }
/********************END EMERGE NG-VIEW ANIMATION************************/

/********************START EMERGE GHOST BUTTON************************/

/*For Light Blue button*/
.emerge-btn-light-blue,
.emerge-btn-light-blue:focus {
    border: 1px solid #48B5E4;
    color: #48B5E4;
    background-color: white;
}

    .emerge-btn-light-blue:hover {
        border: 1px solid transparent;
        color: #48B5E4;
        background-color: #DAF0FA;
    }

/*White button*/
.emerge-btn-white {
    border: 1px solid #cccccc;
    background-color: white;
    color: #666666;
}

    .emerge-btn-white :focus {
        background-color: #daf0fa;
    }

/*Green button*/
.emerge-btn-green,
.emerge-btn-green:focus {
    border: 1px solid #70E3D8;
    color: #70E3D8;
}

    .emerge-btn-green:hover {
        border: 1px solid transparent;
        color: #70E3D8;
        background-color: #DAF0FA;
    }

/* Dark blue button */
.emerge-btn-dark-blue,
.emerge-btn-dark-blue:focus {
    border: 1px solid #27326F;
    color: #27326F;
}

    .emerge-btn-dark-blue:hover {
        border: 1px solid transparent;
        color: #27326F;
        background-color: #D4D6E2;
    }

/*For All type of disabled buttons*/
.emerge-btn-light-blue:disabled {
    border: 1px solid #BCBEC0;
    color: #BCBEC0;
}

/********************END EMERGE BUTTON************************/



/********************START EMERGE SOLID BUTTON************************/

/*For Light Blue button*/
.emerge-solid-btn-light-blue {
    border: 1px solid transparent;
    color: white;
    background-color: #48B5E4;
}

    .emerge-solid-btn-light-blue:hover,
    .emerge-solid-btn-light-blue:focus {
        color: white;
        background-color: #3CA0DC;
    }

/*For Green button*/
.emerge-solid-btn-green {
    color: white;
    background-color: #70E3D8;
}

    .emerge-solid-btn-green:hover {
        color: white;
        background-color: #5FD2C8;
    }

    /*For All Disabled types of SOLID buttons*/
    .emerge-solid-btn-green:disabled {
        color: white;
        background-color: #BCBEC0;
    }

/*For White button*/
.emerge-solid-btn-dark,
.emerge-solid-btn-dark:hover {
    color: white;
    background-color: #cccccc;
}

/*For Red button*/
.emerge-solid-btn-red {
    color: white;
    background-color: #B42D2D;
}

    .emerge-solid-btn-red:hover {
        color: white;
        background-color: #822D2D;
    }

.emerge-ghost-btn-red {
    color: #B42D2D;
    background-color: #fff;
    border: 1px solid #B42D2D;
}

    .emerge-ghost-btn-red:hover {
        color: #B42D2D;
        background-color: #d6a6a6;
    }

    .emerge-ghost-btn-red:focus {
        color: #B42D2D;
    }

    .emerge-ghost-btn-red.customized {
        padding: 0px 25px 0px 25px;
    }

/*For DarkGrey button*/
.emerge-ghost-btn-darkgrey {
    color: #c7c7c7;
    background-color: white;
    border: 1px solid #c7c7c7;
}

    .emerge-ghost-btn-darkgrey:hover {
        color: white;
        background-color: #c7c7c7;
    }

    .emerge-ghost-btn-darkgrey:focus {
        color: #c7c7c7;
    }

    .emerge-ghost-btn-darkgrey.customized {
        padding: 0px 25px 0px 25px;
    }
.emerge-solid-btn-dark-blue{
    border: 1px solid transparent;
    color: white;
    background-color: #27326F;
}
    .emerge-solid-btn-dark-blue:hover,
    .emerge-solid-btn-dark-blue:focus {
        color: white;
        background-color: #121B5B;
    }
/********************END EMERGE SOLID BUTTON************************/
.emerge-border-dark-color {
    border-color: #27326e;
}

.emerge-bg-dark-color {
    background-color: #27326e;
}

.emerge-green-blue-color {
    color: #70E3D8;
}

    .emerge-green-blue-color:hover {
        color: #5FD2C8;
    }

    .emerge-green-blue-color.disabled {
        color: #BCBEC0;
    }

.emerge-green-blue-border-color {
    border-color: #70E3D8;
}

    .emerge-green-blue-border-color:hover {
        border-color: #5FD2C8;
    }

    .emerge-green-blue-border-color.disabled {
        border-color: #BCBEC0;
    }

.emerge-green-bg-color {
    background-color: #70E3D8;
}

    .emerge-green-bg-color:hover {
        background-color: #5FD2C8;
    }

    .emerge-green-bg-color.disabled {
        background-color: #BCBEC0;
    }

.emerge-text-light-black {
    color: #626262;
}

.bg-section-blue, table .bg-section-blue > td{
    background-color: #deeff7 !important;
}
.bg-section-blue, table .bg-section-grey > td{
    background-color: #e9e9e9 !important;
}

.custom-btn {
    padding: 8px 5px;
    border-radius: 3px;
    font-weight: 600;
}


/*START - TOP MENU IN LISTING PAGE*/
.headerIncluded .dataTables_paginate.paging_bootstrap.pagination {
    top: 80px !important;
}

.dataTables_paginate.paging_bootstrap.pagination > ul {
    height: 20px;
}

.page-sidebar .sidebar-menu .menu-items > li > a > .title {
    overflow: visible;
}

ul.topMenuListingPage.dropdown-menu {
    background-color: white;
}

ul.topMenuListingPage > li.backgroundHover {
    padding: 5px 0;
}

    ul.topMenuListingPage > li.backgroundHover.no-bg:hover {
        background-color: white;
    }

ul.topMenuListingPage li.backgroundHover:hover {
    background-color: #e6e7e8;
}

ul.topMenuListingPage > li.backgroundHover > ul.dropdown-menu {
    background-color: white;
    width: 300px;
    padding: 5px 0;
}

    ul.topMenuListingPage > li.backgroundHover > ul.dropdown-menu.subMenu > li.backgroundHover {
        padding: 5px 0;
    }

    ul.topMenuListingPage > li.backgroundHover > ul.dropdown-menu.subMenu > li.description-line {
        padding: 0 15px 5px;
    }

    ul.topMenuListingPage > li.backgroundHover > ul.dropdown-menu.subMenu > li.hr-line {
        margin: 10px 0px 20px 0px;
        padding-left: 15px;
        padding-right: 15px;
    }

ul.topMenuListingPage > li.backgroundHover.dropUp {
    position: relative;
}
    ul.topMenuListingPage > li.backgroundHover.dropUp > ul.dropdown-menu {
        top: auto;
        bottom: 0;
    }

/*END - TOP MENU IN LISTING PAGE*/


/*----------START EMERGE TAG WITH REMOVE BUTTON LIGHT BLUE------------*/

.emerge-tag-light-blue {
    background-color: #DAF0FA;
    color: #626262;
    padding: 10px;
    border-radius: 5px;
}


/*----------END EMERGE TAG WITH REMOVE BUTTON LIGHT BLUE------------*/


.introjs-showElement.introjs-relativePosition label,
.introjs-showElement.introjs-relativePosition small {
    color: #48B5E4;
}

    .introjs-showElement.introjs-relativePosition label#noBorderRadiusLabel {
        color: white;
    }

.introjs-showElement.introjs-relativePosition input.ng-dirty.ng-invalid,
.introjs-showElement.introjs-relativePosition textarea.ng-dirty.ng-invalid {
    border-color: #48B5E4;
}

/*Change the CSS of Next button (blue tooltip)*/
.introjs-tooltipbuttons .introjs-button.introjs-nextbutton,
.introjs-tooltipbuttons .introjs-button.introjs-nextbutton:active {
    background-color: white !important;
    color: #27326f !important;
    font-weight: bold;
}

.form-control-dark[disabled] {
    background-color: #e8e8e8 !important;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    color: #626262;
}
/*EMERGE ANGULARJS ANIMATION*/
.custom-emerge-animate {
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
    opacity: 1;
    left: 0;
    margin-left: 0;
}

    .custom-emerge-animate.emerge-animate-slidein-100 {
        opacity: 0;
        left: 100px;
        margin-left: 100px;
    }

.emerge-animate-nghide {
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
    opacity: 1;
}

    .emerge-animate-nghide.ng-hide {
        opacity: 0;
    }

    .emerge-animate-nghide.ng-hide-add,
    .emerge-animate-nghide.ng-hide-remove {
        display: block !important;
    }

.emerge-trial-bar {
    height: 60px;
    width: 100%;
    z-index: 1061;
    position: fixed;
    top: 0;
}

    .emerge-trial-bar .error-wrapper {
        padding: 15px;
        color: #fff;
    }

        .emerge-trial-bar .error-wrapper .error-content {
            display: block;
            background-color: #48B5E4;
        }

            .emerge-trial-bar .error-wrapper .error-content .btn-emerge-subcribe {
                vertical-align: baseline;
                margin-left: 10px;
                margin-right: 10px;
            }

.menu-intro {
    position: fixed;
    font-size: 20px;
    line-height: 20px;
    left: 60px;
    margin: 13px 0;
    z-index: 1;
}

.pos-relative {
    position: relative;
}

span.currency-inside-textbox {
    position: absolute;
    top: 6px;
    left: 5px;
}

input.currency-inside-textbox {
    padding-left: 10px; 
}

.wrapper-popover.relative .intro-questionmark {
    position: relative;
}

.wrapper-popover .popover {
    width: 260px;
    z-index: 1080;
    border: none;
    background: #48B5E4;
}

    .wrapper-popover .popover.bottom > .arrow {
        top: -8px;
        border: none;
    }

        .wrapper-popover .popover.bottom > .arrow:after {
            border-bottom-color: #48B5E4;
            margin-left: 0px;
        }

.popover.right {
    z-index: 9999;
}

.wrapper-popover .popover-title {
    border: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .wrapper-popover .popover-title .close {
        opacity: 1;
    }

        .wrapper-popover .popover-title .close.intro-btnClose {
            color: #fff;
        }
.wrapper-popover .popover-content {
    width: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.wrapper-popover .popover-title, .wrapper-popover .popover-content {
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: transparent;
    color: #fff;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

label, input, button, select, textarea {
    line-height: 11px;
}

.popover label, table label {
    line-height: normal;
}

.form-group .checkbox:first-child {
    margin-top: 0px;
}

.checkbox label {
    line-height: 20px !important;
    font-size: 12px !important;
}

.checkbox[readonly] > label {
    pointer-events: none;
}

.font14.checkbox label {
    font-size: 14px !important;
}

[disabled] label, .radio label[disabled], .checkbox label[disabled]{
    pointer-events: none;
    cursor: none;    
    opacity: .8;
}

.subscription-dropdown .select2-container .select2-choice {
    padding: 6px 15px;
    height: 41px;
}

    .subscription-dropdown .select2-container .select2-choice .select2-arrow {
        margin-top: 6px;
    }

.hide-remove-button .select2-container.select2-allowclear .select2-choice abbr {
    display: none;
}

.select2-search-field input {
    margin-top: -3px !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
    margin: 2px 1px 2px 2px !important;
}

.nav-tabs > li > a {
    padding: 5px;
}

.nav-tabs.nav-tabs-linetriangle > li > a {
    padding: 15px;
    padding-right: 0px;
}

.navbar-nav-sm > li > a {
    padding: 12px;
}
.skeleton-loading {
    animation: loading 1.1s infinite linear;
    background: #dedfe1;
    background-image: -webkit-linear-gradient(to right, #dedfe1 0%, #B2B2B2 20%, #dedfe1 40%, #dedfe1 100%);
    background-image: linear-gradient(to right, #dedfe1 0%, #B2B2B2 20%, #dedfe1 40%, #dedfe1 100%);
    background-repeat: no-repeat;
}
li.skeleton-loading {
    height: 20px;
    width: 65%;
    margin-top: 25px;
    margin-left: 40px;    
    border-radius: 10px;
}
li.menu-title.skeleton-loading {
    height: 15px;
    width: 50%;
    margin-top: 25px;
    margin-left: 30px;    
    border-radius: 10px;
}
li.menu-title.skeleton-loading:first-child {
    margin-top: 15px !important;
}

@keyframes loading {
    0% {
      background-position: -100px;
    }
    100% {
    background-position: 200px;
    }
  }

/** For Action Menu */
.navbar-default .navbar-nav-sm.navbar-nav > li > a.dropdown-toggle {
    line-height: 24px;
    color: #fff;
    background-color: #48B5E4;
}

    .navbar-default .navbar-nav-sm.navbar-nav > li > a.dropdown-toggle:hover {
        background-color: #0099cc;
    }

.navbar-default .main-save-btn span {
    display: block;
}

.modal-save-btn {
    min-width: 78px;
}

.v-align-top {
    vertical-align: top !important;
}

.v-align-middle {
    vertical-align: middle !important;
}
.v-align-bottom {
    vertical-align: bottom !important;
}
.v-align-super {
    vertical-align: super !important;
}

.columns-filter.dropdown-menu {
    background: #fff;
    color: #aaa;
    width: 200px;
    padding: 0 20px;
    left: -150px;
    border: 1px solid #eee;
}

.columns-filter li {
    float: none;
    display: block !important;
}

.columns-filter.dropdown-menu > li > a {
    line-height: normal;
}

.card-header {
    padding: 7px !important;
}

.card .circle {
    right: 8px;
    top: 12px;
}

.timeline-content .event-date {
    padding: 0 !important;
}

.timeline-block {
    margin: 1em 0 !important;
}

.timeline-point {
    top: 0;
    height: 35px;
    width: 35px;
}

    .timeline-point i {
        margin-left: -6px;
        margin-top: -8px;
    }

.ng-hide {
    display: none !important;
}

.container {
    min-height: 100%;
}

.clearfix {
    clear: both;
}

.nvtooltip, .pos-absolute {
    position: absolute;
}
/*Start EMERGECORE-16085 SO Link: Show Backorder info for each item line*/
/*For customize tool tip to looklike popover*/
.tooltip.tooltip-like-popover .tooltip-inner {
    background-color: #fff;
    color: black;
}
.tooltip-like-popover.tooltip.right .tooltip-arrow {
    margin-left: -5px;
    border-right-color: #10cfbd;
}

.tooltip-like-popover.tooltip.right {
    margin-left: 15px;
}
.tooltip-like-popover {
    overflow: visible !important;
    z-index: 9999;
    margin-left: 15px;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0 9px rgb(191 191 191 / 36%);
    max-width: 276px;
    font-weight: 400;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 6px;
}
/*End EMERGECORE-16085 SO Link: Show Backorder info for each item line*/
.tooltip-inner {
    background-color: #10cfbd;
    color: #fff;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #10cfbd;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #10cfbd;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #10cfbd;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #10cfbd;
}
/* For CSS for tooltip in Sales Order Details Qty */
.custom-tooltip-forqty .tooltip-inner {
    background-color: #fafafa;
    color: black;
    border: 1px solid #d1d3d4;
}

.custom-tooltip-forqty .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #d1d3d4;
}

.custom-tooltip-table .tooltip {
    position: fixed !important;
}

.text-md div.tooltip {
    font-weight: normal !important;
}

.tooltip tooltip-inner {
    max-width: 100%;
}

.popover-wrapper .popover.left, .popover-wrapper .popover.right .popover-wrapper .popover.top, .popover-wrapper .popover.bottom {
    z-index: 1050;
}

    .popover-wrapper .popover.left > .arrow::after {
        border-left-color: #fff;
    }

.intelligent-info-popover-wrapper .popover {
    min-width: 750px;
}

.cost-price-popover-wrapper .popover {
    min-width: 300px;
}

.quantity-popover-wrapper .popover {
    min-width: 300px;
}

.overlay-search::-ms-clear {
    display: none;
}

.overlay-close {
    font-size: 30px !important;
}

table {
    border-collapse: collapse;
}

.select2-searching, .select2-no-results {
    margin-top: 10px;
}

.navbar {
    height: 30px;
}

tr.no-border > th, tr.no-border > td {
    border: none !important;
}

.is-trial {
    margin-top: 60px;
}

.page-sidebar.is-trial.introjs-fixParent {
    z-index: 1030 !important;
}



.chart-sales svg, .chart-products svg {
    height: 300px !important;
    overflow: visible;
}

.grid.simple .grid-body.no-border {
    border: 1px solid #DDD;
    color: #6F7B8A;
    background-color: #FFF;
}

.page-content .content-wrapper {
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 78px;
}

.page-content .content-header {
    height: 60px;
    padding: 9px;
    background-color: #fff;
    position: fixed;
    z-index: 99;
    padding-right: 260px;
    width: 100%;
    padding-left: 30px;
}

.select2-container.select2-allowclear .select2-choice abbr {
    height: 20px;
}

#nav, #content, #sidebar {
    margin-bottom: -9999px;
    padding-bottom: 9999px;
    overflow: hidden;
    background: none repeat scroll 0% 0% #FFF;
}

#nav, #content, #sidebar-right {
    overflow: hidden;
}

.nav.nav-pills {
    margin-left: 5px;
}

.select2-container.form-control {
    border: none;
}

.select2-drop-active, .datepicker.dropdown-menu {
    z-index: 1100;
}

.select2-drop.select2-with-searchbox {
    max-width: calc(27% + -26px);
}

#support-case-dropdown .select2-with-searchbox {
    max-width: 100%;
}
/* Hard code for support case page */
.select2-container .select2-choice abbr {
    top: 1px;
}

.m-b-n {
    margin-bottom: 0;
}

.p-t-none {
    padding-top: 0;
}

.no-border {
    border: none !important;
}
.no-border-top {
    border-top: none !important;
}


.b-b-double {
    border-bottom: 4px double #999;
}

tr.b-t-n td, tr.b-t-n th {
    border-top: none !important;
}

tr.b-b-n td, tr.b-b.n th {
    border-bottom: none !important;
}

.b-b-n {
    border-bottom: none !important;
}

tr.b-none td, tr.b-none th {
    border: none !important;
}

.tab-container .tab-content {
    clear: both;
}

.custom .tab-content {
    border-left: 1px solid #e2e8ea;
    border-right: 1px solid #e2e8ea;
    border-bottom: 1px solid #e2e8ea;
}

.pos-abt {
    position: absolute;
  }
  
.form-group {
    margin-bottom: 10px;
}
.margin-bottom-20 {
    margin-bottom: 10px;
}

.ta-editor.ta-html, .ta-scroll-window.form-control, .ta-scroll-window > .ta-bind {
    min-height: 100px;
}

input.ng-invalid, textarea.ng-invalid {
    border-width: 0px 0px 1px 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.bg-white {
    background-color: #ffffff !important;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
}

.text-link {
    text-decoration: underline;
}

.text-yellow {
    color: #fbd800;
}

.text-link-red,
.text-link-red:hover,
.text-link-red:focus {
    text-decoration: underline;
    color: red;
}

    .text-link-red:hover {
        text-decoration: none;
    }

.media-xs {
    min-width: 50px;
}

.media-sm {
    min-width: 80px;
}

.media-md {
    min-width: 90px;
}

.media-lg {
    min-width: 120px;
}

.media-100 {
    min-width: 100px;
}

.thumb {
    width: 64px;
    display: inline-block;
}

.thumb-lg {
    display: inline-block;
}

.thumb-md {
    width: 90px;
    display: inline-block;
}

.thumb-xs {
    width: 18px;
    display: inline-block;
}

.thumb-sm {
    width: 36px;
    display: inline-block;
}

    .thumb img,
    .thumb-xs img,
    .thumb-sm img,
    .thumb-md img,
    .thumb-lg img {
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }

div.thumb-md {
    /*height:90px;*/
    overflow: hidden;
}

div.thumb-lg {
    height: 100px;
    overflow: hidden;
}

.defaultImage {
    position: relative;
}

    .defaultImage:before {
        content: 'Default';
        font-size: 11px;
        float: left;
        position: absolute;
        right: 0;
        top: 9px;
        background: yellow;
        padding: 3px 5px;
        opacity: 0.9;
        -moz-opacity: 0.9;
    }

.user-disabled-role,
.user-disabled-role .i-switch {
    opacity: 0.5;
}

.i-switch {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 35px;
    height: 20px;
    border-radius: 30px;
    background-color: #27c24c;
    margin: 0;
}

    .i-switch input {
        position: absolute;
        opacity: 0;
        filter: alpha(opacity=0);
    }

        .i-switch input:checked + i:before {
            top: 50%;
            bottom: 50%;
            left: 50%;
            right: 5px;
            border-width: 0;
            border-radius: 5px;
        }

        .i-switch input:checked + i:after {
            margin-left: 16px;
        }

    .i-switch i:before {
        content: "";
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: -1px;
        right: -1px;
        background-color: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 30px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
    }

    .i-switch i:after {
        content: "";
        position: absolute;
        background-color: #fff;
        width: 18px;
        top: 1px;
        bottom: 1px;
        border-radius: 50%;
        -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
        box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
        -webkit-transition: margin-left 0.3s;
        transition: margin-left 0.3s;
    }

.i-switch-md {
    width: 40px;
    height: 24px;
}

    .i-switch-md input:checked + i:after {
        margin-left: 17px;
    }

    .i-switch-md i:after {
        width: 22px;
    }

.i-switch-lg {
    width: 50px;
    height: 30px;
}

    .i-switch-lg input:checked + i:after {
        margin-left: 21px;
    }

    .i-switch-lg i:after {
        width: 28px;
    }
.small-logo {
    max-height: 20px !important;
}
.logo {
    max-height: 35px !important;
}
.user-avatar {
    max-height: 50px !important;
}
.app-aside-folded .logo {
    max-height: 15px !important;
}

.app-aside-folded .hidden-nav-xs {
    display: none;
}

.ui-select2 {
    width: 100%;
}

.form-group .ui-select2 {
    padding-bottom: 1.5px;
    padding-top: 1.5px;
}

.ui-select2-no-pading .ui-select2 {
    padding-bottom: 0px;
    padding-top: 0px;
}

.box-shadow-none {
    box-shadow: none;
}

.overlayContainer {
    display: none;
}

.form-control {
    border-color: #FFF #FFF #E0E0E0;
    border-radius: 5px;
}

    .form-control.border {
        border-color: #EEE !important;
    }

    .form-control:focus {
        border-color: #FFF #FFF #66afe9;
        outline: 0;
    }

input:focus {
    outline: none;
}

input.ng-dirty.ng-invalid, textarea.ng-dirty.ng-invalid {
    border: 1px solid #b94a48;
    border-bottom: 1px solid #b94a48 !important;
    border-width: 0px 0px 1px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
 
input.ng-valid {
    border-width: 0px 0px 1px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.emerge-checkbox-checked
{
    accent-color:#92cf5c;
}
input.ng-dirty.ng-valid {
    border: 1px solid #92cf5c;
    border-width: 0px 0px 1px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input.ng-dirty.ng-valid.has-error {
        border-color: #f55753;
}
.custom-tooltip-forqty input.has-error {
    border: 1px solid #b94a48;
    border-bottom: 1px solid #b94a48 !important;
    border-width: 0px 0px 1px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.companySettingControl input.has-error {
    border-color: #f55753;
    border-width: 0px 0px 1px 0px;
}

.select2-input, .select2-default {
    height: 27px !important;
    min-height: 27px !important;
    font-size: 12px;
}

textarea.elastic {
    max-height: 150px;
    min-height: 30px;
}

textarea.description::-webkit-input-placeholder::before {
    font-family: fontAwesome;
    content: '\f075 ';
}

textarea.description::-moz-placeholder::before {
    font-family: fontAwesome;
    content: '\f075 ';
}
/* firefox 19+ */
textarea.description:-ms-input-placeholder::before {
    font-family: fontAwesome;
    content: '\f075 ';
}
/* ie */
textarea.description.input:-moz-placeholder::before {
    font-family: fontAwesome;
    content: '\f075 ';
}

#nav {
    background-color: #41586E;
    color: #FFF;
}

.nav-brand {
    background-color: #25313E;
    color: #FFF;
}

.bg-dark .nav li > a {
    font-size: 13px;
    color: #ADBECE;
}

#nav .footer {
    background-color: #374B5E;
}

.emerge-blug-inputgroup.input-group .input-group-addon {
    background-color: #48B5E4;
    border: 1px solid #48B5E4;
    color: #fff;
    padding: 5px 9px;
}

    .emerge-blug-inputgroup.input-group .input-group-addon .arrow {
        color: #48B5E4;
    }

    .emerge-blug-inputgroup.input-group .input-group-addon i {
        width: 14px;
    }

.emerge-blug-inputgroup.input-group input {
    padding: 3px 15px;
    border-top: 1px solid transparent;
}

.emerge-blug-inputgroup.input-group .select2-container a.select2-choice {
    padding-left: 15px;
}

.transparent .input-group-addon {
    background-color: #eeeeee;
    color: #555;
    padding: 6px 13px 6px 13px;
}

.overlayBackground {
    top: 53px;
    padding-left: 100px;
    position: absolute;
    z-index: 1000;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.5;
    -moz-opacity: 0.5;
}

.overlayContent {
    position: absolute;
    border: 1px solid #000;
    background-color: #fff;
    font-weight: bold;
    height: 100px;
    width: 300px;
    z-index: 1000;
    text-align: center;
}

.progress-indicator {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    /* IE filter */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5; /* Mozilla extension */
    -khtml-opacity: 0.5; /* Safari/Conqueror extension */
    opacity: 0.5; /* CSS3 */
    z-index: 1000;
    background-color: white;
    display: none;
}

    .progress-indicator img {
        margin-top: 75px;
    }

pre.debug-message {
    height: 1px;
    padding: 10px 30px;
    overflow: hidden;
}

    pre.debug-message:hover {
        height: 500px;
        width: 98%;
        overflow: auto;
    }

.debug-window {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    height: 30px;
    width: 500px;
    z-index: 99999;
    padding: 0;
    margin: 0;
}

    .debug-window:hover {
        height: 98%;
    }

    .debug-window pre {
        height: 98% !important;
        padding: 3px 10px;
        overflow: hidden;
    }

        .debug-window pre:hover {
            height: 98%;
            width: 98%;
            overflow: auto;
        }

.modal .modal-dialog {
    transition: all .6s !important;
}

.modal-header {
    padding: 15px;
}

.modal-x-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.modal-preview .modal-dialog {
    border: none;
}

.xx-dialog .modal-dialog {
    width: 60%;
    min-width: 800px;
    border: none;
}

.modal-dialog.modal-xlg {
    width: 70%;
    min-width: 1000px;
    border: none;
}

.modal-dialog.modal-xxlg {
    min-width: 1200px;
    border: none;
}

/*.modal-dialog.modal-lg {    
    width: 60%;
    min-width: 800px;
    border: none;
}*/
.modal-dialog.modal-emergeCart {
    min-width: 900px;
    border: none;
}

.modal-dialog.modal-sales-production-order {
    min-width: 1250px;
    border: none;
}

    .modal-dialog.modal-sales-production-order .stepContainer .step-content {
        width: 1250px;
    }

    .modal-dialog.modal-sales-production-order .custom-proposePurchase li a {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-dialog.modal-sales-production-order .custom-proposePurchase > li {
        width: 200px;
    }

.modal-dialog.modal-importSoDetails {
    width: 70%;
    min-width: 1000px;
    border: none;
}

.modal-lg .modal-dialog {
    width: 60%;
    min-width: 800px;
    border: none;
}

.modal-md .modal-dialog {
    width: 40%;
    min-width: 600px;
    border: none;
}

.modal-dialog .nav-tabs.receive-payment-tabs {
    margin-right: 0px;
}

    .modal-dialog .nav-tabs.receive-payment-tabs li {
        min-width: 180px;
        max-width: 230px;
    }
    .modal-dialog .nav-tabs.receive-payment-tabs li a{
        width: auto !important;
    }

.modal-dialog .tab-content.receive-payment-content {
    padding-left: 0px;
}


#taTextElement {
    height: 100% !important;
}

.modal .modal-body, .modal-body {
    overflow-y: auto;
    padding: 15px;
}

    .modal-body iframe {
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

.pagination .disabled a {
    color: #ccc;
    background-color: #fafafa;
}

.cfp-hotkeys-container, .select2-hidden-accessible {
    display: none !important;
}

.navbar-brand {
    float: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    height: auto;
    line-height: 50px;
    display: inline-block;
    padding: 0 50px;
}

    .navbar-brand:hover {
        text-decoration: none;
    }

    .navbar-brand img {
        max-height: 20px;
        margin-top: -4px;
        vertical-align: middle;
    }

.bg-black {
    background-color: #323237;
    color: #B2B2B2;
    display: block;
}

    .bg-black.lt,
    .bg-black .lt {
        background-color: #263845;
    }

    .bg-black.lter,
    .bg-black .lter {
        background-color: #3C3C41;
    }

    .bg-black.dk,
    .bg-black .dk {
        background-color: #3C3C41;
    }

    .bg-black.dker,
    .bg-black .dker {
        background-color: #0a1015;
    }

    .bg-black.bg,
    .bg-black .bg {
        background-color: #1c2b36;
    }

    .bg-black a {
        color: #8dadc4;
    }

        .bg-black a:hover {
            color: #fff;
        }

        .bg-black a.list-group-item:hover,
        .bg-black a.list-group-item:focus {
            background-color: inherit;
        }

    .bg-black .nav > li:hover > a,
    .bg-black .nav > li:focus > a,
    .bg-black .nav > li.active > a {
        color: #fff;
        background-color: #3C3C41;
    }

    .bg-black .nav > li > a {
        color: #B2B2B2;
    }

        .bg-black .nav > li > a:hover,
        .bg-black .nav > li > a:focus {
            background-color: #3C3C41;
        }

    .bg-black .nav .open > a {
        background-color: #3C3C41;
    }

    .bg-black .caret {
        border-top-color: #6b94b3;
        border-bottom-color: #6b94b3;
    }

    .bg-black.navbar .nav > li.active > a {
        color: #fff;
        background-color: #3C3C41;
    }

    .bg-black .open > a,
    .bg-black .open > a:hover,
    .bg-black .open > a:focus {
        color: #fff;
    }

    .bg-black .text-muted {
        color: #707070 !important;
    }

    .bg-black .text-lt {
        color: #bfd1de !important;
    }

    .bg-black.auto .list-group-item,
    .bg-black .auto .list-group-item {
        border-color: #131e25 !important;
        background-color: transparent;
    }

        .bg-black.auto .list-group-item:hover,
        .bg-black.auto .list-group-item:focus,
        .bg-black.auto .list-group-item:active,
        .bg-black.auto .list-group-item.active,
        .bg-black .auto .list-group-item:hover,
        .bg-black .auto .list-group-item:focus,
        .bg-black .auto .list-group-item:active,
        .bg-black .auto .list-group-item.active {
            background-color: #3C3C41 !important;
        }

.dataTables_wrapper .pagination ul {
    box-shadow: none;
    font-size: 14px;
    padding: 0;
}

    .dataTables_wrapper .pagination ul > li {
        display: inline-block;
        padding-left: 0px;
    }

        .dataTables_wrapper .pagination ul > li > a {
            padding: 5px 10px;
        }

        .dataTables_wrapper .pagination ul > li.next > a:hover {
            background-color: #ffffff;
            color: #000;
        }

        .dataTables_wrapper .pagination ul > li.next.disabled > a:hover {
            color: #C2C6CB;
            opacity: 0.65;
            background-color: #ffffff;
        }

        .dataTables_wrapper .pagination ul > li.prev > a:hover {
            background-color: #ffffff;
            color: #000;
        }

        .dataTables_wrapper .pagination ul > li.prev.disabled > a:hover {
            color: #C2C6CB;
            opacity: 0.65;
            background-color: #ffffff;
        }

        .dataTables_wrapper .pagination ul > li > a,
        .pagination ul > li > span {
            border: none;
            box-shadow: none;
            border-radius: 3px;
            color: #6F7B8A;
        }

    .dataTables_wrapper .pagination ul > .disabled > span,
    .pagination ul > .disabled > a,
    .pagination ul > .disabled > a:hover,
    .pagination ul > .disabled > a:focus {
        color: #C2C6CB !important;
        opacity: 0.65 !important;
    }

    .dataTables_wrapper .pagination ul > .active > a,
    .pagination ul > .active > span {
        background-color: #F3F6F9;
        font-weight: 600;
    }

    .dataTables_wrapper .pagination ul > li > a:hover,
    .pagination ul > li > a:focus,
    .pagination ul > .active > a,
    .pagination ul > .active > span {
        background-color: #e8edf3;
    }

    .dataTables_wrapper .pagination ul > li.disabled > a > span {
        font-weight: bold;
        color: #000000;
        font-size: 16px;
    }

.pagination-inventory-list ul.pagination > li {
    padding-left: 0px;
    display: inline;
}

/*For Integration*/
#integration-table .dataTables_wrapper {
    margin-top: 30px;
}

.integration-item img {
    margin-top: 20px; 
    border-radius: 20px 20px;
}

@media print {
    /*print css*/
    .page {
        width: 21cm;
        height: 29.7cm;
        min-height: 29.7cm;
        padding: 1cm;
        margin-left: 2cm;
        background: white;
        border: none !important;
        page-break-after: always;
        page-break-inside: avoid;
        page-break-before: always;
    }

    .subpage {
        width: 100%;
        height: 256mm;
        min-height: 256mm;
        padding: 1px;
        margin-left: 0.5cm;
        border: none !important;
        page-break-after: always;
        page-break-inside: avoid;
        page-break-before: always;
    }

    .print_footer {
        width: 100%;
        position: absolute;
        bottom: 10px;
        overflow: auto;
        vertical-align: bottom;
        border: none !important;
    }

    * {
        width: 100%;
        margin: 0 auto;
        overflow: auto !important;
    }

    .panel {
        border: none !important;
        page-break-after: always;
        page-break-before: always;
    }

    table {
        border: 1px solid #e0e4e8;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    .page {
        margin: 0;
        border: none !important;
        width: initial;
        min-height: initial;
        background: initial;
        page-break-after: always;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: always;
    }
}

.bg-custom-waring > td {
    background-color: #FCF8E3 !important;
}

.bg-custom-white > td {
    background-color: white !important;
}

.b-t-custom {
    border-top: 2px dashed;
}

.tab-custom > li {
    background-color: transparent !important;
}

    .tab-custom > li > a {
        background-color: transparent !important;
    }

    .tab-custom > li.active:first-of-type > a, .tab-custom > li:first-of-type > a:hover {
        border-left-color: transparent;
        border-top-left-radius: 0;
        /*border-bottom-color: transparent;*/
    }

    .tab-custom > li.active:last-of-type > a, .tab-custom > li:last-of-type > a:hover {
        border-right-color: transparent;
        border-top-right-radius: 0;
        /*border-bottom-color: transparent;*/
    }

    .tab-custom > li.active > a {
        font-weight: bold;
    }

.custom-heading {
    background-color: transparent !important;
}

.cursor {
    cursor: pointer;
}

.default-cursor {
    cursor: default;
}

.no-outline {
    outline: none;
}

.only-m-r {
    padding: 0 2px 0 0;
}

.navi ul.nav li > .customNav {
    display: none;
}

.navi ul.nav li.active > .customNav {
    display: block;
}

    .navi ul.nav li.active > .customNav > li.active {
        margin-left: 10px;
    }

.ng-table th {
    text-align: left;
}

.cus-padding {
    padding: 10px 20px 10px 20px;
}

.scrollable-y {
    overflow-y: auto !important;
}
.scrollable-x {
    overflow-x: auto !important;
}

.custom-tabContent > .tab-content {
    background-color: #ffffff !important;
    padding: 15px !important;
}

.tab-content {
    margin-bottom: 30px;
}

.menuError {
    border-radius: 10px;
}

    .menuError > a {
        color: red !important;
        font-weight: bold;
    }

.custom-radio {
    border: none !important;
    background-color: transparent !important;
}

.project-action {
    font-size: 17px;
    padding-top: 8px;
}

.custom-quantity {
    margin: 0 auto;
    position: relative;
    top: 49px;
    left: 155px;
}

.custom-ul-li {
    list-style-type: none;
    padding: 5px 0;
}

.custom-removeSign {
    position: relative;
    top: 21px;
    left: -15px;
}

    .custom-panel .panel-heading {
        padding-bottom: 0px;
    }

        .custom-panel .panel-heading h3 {
            margin-top: 0px;
        }

    .custom-panel .panel-body {
        padding-top: 0px;
    }

.min-width-150 {
    min-width: 150px;
}
.min-width-300 {
    min-width: 300px;
}
.min-width-50 {
    min-width: 50px;
}

ul.custom-ul-tab li.active a {
    font-weight: bold;
}

.role-checkbox.checkbox label {
    padding-left: 0px !important;
}

    .role-checkbox.checkbox label:before {
        position: static;
    }

.invisible {
    opacity: 0;
}

.visible {
    opacity: 1;
}

.v-line {
    vertical-align: middle;
}
.v-align-sub {
    vertical-align: sub;
}

.v-line-override {
    vertical-align: middle !important;
}

.b-gray {
    border: 1px solid #ccc;
}

.search-listing li.active a {
    font-weight: 500;
    cursor: pointer;
}

.search-listing li input {
    background-color: #f5f5f5;
    border: none;
}

#search-box {
    border-width: 1px !important;
}
.search-box {
    border-width: 1px !important;
}

.w-sm {
    width: 200px;
}

.w-md {
    width: 250px;
}

.w-lg {
    width: 300px;
}
/*handle string too long .truncate + .w (w-lg, w-sm..) to set width for string*/
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*additional css*/
.w-20-percent {
    width: 20%;
}

.w-100-percent {
    width: 100%;
}

.max-w-70 {
    max-width: 70px;
}

.max-w-100 {
    max-width: 100px;
}

.max-w-120 {
    max-width: 120px;
}

.max-w-150 {
    max-width: 150px;
}

.max-w-180 {
    max-width: 180px;
}

.max-w-300 {
    max-width: 300px;
}

.max-w-200 {
    max-width: 200px;
}

.max-w-250 {
    max-width: 250px;
}

.min-w-400 {
    min-width: 400px;
}

.min-w-300 {
    min-width: 300px;
}

.min-w-200 {
    min-width: 200px;
}

.min-w-180 {
    min-width: 180px;
}
.min-w-50 {
    min-width: 50px;
}
.max-w-100percent {
    max-width: 100%;
}

.table.table-condensed thead tr th, .table.table-condensed tbody tr td, .table.table-condensed tbody tr td * {
    white-space: normal;
}

    .table.table-condensed tbody tr td.remove-text-ellipsis * {
        text-overflow: unset;
    }

    .table.table-condensed tbody tr td .checkbox {
        text-overflow: unset;
    }

.footer-widget {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px;
    background-color: #22262e;
    width: 100%;
    clear: both;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

select {
    /*margin-top:-7px !important;*/
    padding: 0 5px !important;
}

.table.table-condensed tbody tr td, .table.table-condensed thead tr th {
    padding: 8px !important;
}

/*Start Tasks and Notes UI*/
div#tasksAndNotes .table.table-condensed tbody tr td {
    padding: 0 !important;
}

div#tasksAndNotes .table.table-condensed tbody tr td div#tasksAndNotes-Cell{
    padding: 4px !important;
    min-height: 48px;
    max-height: 62px;
    cursor: pointer;
}

div#tasksAndNotes .table.table-condensed tbody tr td div#cellText{    
    padding: 4px;
    min-height: 48px;
}

div#tasksDashBoard .row-item div#task-description {
    cursor: pointer;
}
/*End Tasks and Notes UI*/

div#tasksDashBoard .row-item .emerge-light-green-color {
    cursor: pointer;
}
/*End Tasks and Notes UI*/

.tablePricingInfo tbody tr td {
    padding: 12px 0px;
}

.table tbody tr td {
    padding: 8px;
}

    .table tbody tr td > .btn {
        margin-bottom: 10px !important;
    }

.btn-shortcut {
    padding: 10px 10px;
}

.nav > li.disabled > a {
    color: #e0e0e0 !important;
}

    .nav > li.disabled > a .badge {
        background: #ccc !important;
    }

.nav-tabs > li span.badge {
    display: inline;
    margin-left: 5px;
    padding-bottom: 2px;
}

.nav-tabs > li.active span.badge {
    color: white;
    font-weight: bold;
}

.sub-menu > li {
    line-height: 20px !important;
    width: 100%;
}

.page-sidebar .sidebar-menu .menu-items > li ul.sub-menu {
    padding-top: 10px;
}

.page-sidebar .sidebar-menu .menu-items > li > ul.sub-menu > li ul.sub-menu .icon-thumbnail {
    margin-left: 5px;
}

ul > li,
ol > li {
    padding-left: 3px;
    line-height: 17px !important;
}

.page-sidebar .sidebar-menu .menu-items > .menu-title {
    padding: 5px 25px !important;
    font-size: 11px;
}

.popover-content {
    overflow: auto;
}
.popover-content button.btn {
    margin-bottom: 0 !important;
}

.popover-content select {
    margin-top: 0 !important;
}

.popover-title {
    font-size: 13px !important;
}

.fa-1x {
    font-size: 20px !important;
}

.fa-5x {
    font-size: 5em !important;
}

.fa-7x {
    font-size: 7em !important;
}

.fa-status {
    padding-top: 4px;
    padding-right: 4px;
}

.wrapper-xs {
    padding: 5px;
}

.wrapper-sm {
    padding: 10px;
}

.wrapper {
    padding: 15px;
}

.wrapper-md {
    padding: 20px;
}

.wrapper-lg {
    padding: 30px;
}

.wrapper-xl {
    padding: 50px;
}

.padder-lg {
    padding-right: 30px;
    padding-left: 30px;
}

.padder-md {
    padding-right: 20px;
    padding-left: 20px;
}

.padder {
    padding-right: 15px;
    padding-left: 15px;
}

.padder-v {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padder-xs {
    padding-right: 5px;
    padding-left: 5px;
}

.no-padder {
    padding: 0 !important;
}

.no-padder-v {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.no-padder-h {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pull-in {
    margin-right: -15px;
    margin-left: -15px;
}

.pull-out {
    margin: -10px -15px;
}

.p-t-13 {
    padding-top: 13px;
}
.p-l-2 {
    padding-left: 2px;
}

.p-l-4 {
    padding-left: 4px;
}


.p-l-8 {
    padding-left: 8px;
}

.p-l-10 {
    padding-left: 10px;
}

.p-l-15 {
    padding-left: 15px;
}

.p-l-18 {
    padding-left: 18px;
}
.p-l-20 {
    padding-left: 20px;
}

.p-l-25 {
    padding-left: 25px;
}

.p-t-n {
    padding-top: 0 !important;
}

.p-t-xs {
    padding-top: 5px;
}

.p-t-sm {
    padding-top: 10px;
}

.p-t-lg {
    padding-top: 15px;
}

.p-t-xlg {
    padding-top: 25px;
}

.p-l-xs {
    padding-left: 5px;
}

.p-l-sm {
    padding-left: 10px;
}

.p-l-lg {
    padding-left: 15px;
}

.p-l-xlg {
    padding-left: 25px;
}

.p-l-none {
    padding-left: 0 !important;
}

.p-l-35 {
    padding-left: 35px;
}

.p-r-none {
    padding-right: 0 !important;
}

.p-r-20-percent {
    padding-right: 20%;
}

.p-r-xs {
    padding-right: 5px;
}

.p-r-sm {
    padding-right: 10px;
}

.p-r-lg, .p-r-md {
    padding-right: 15px;
}

.p-r-xlg {
    padding-right: 25px;
}

.p-r-20 {
    padding-right: 20px;
}
.p-r-7 {
    padding-right: 7px;
}

.p-b-n,
.p-b-none {
    padding-bottom: 0 !important;
}

.p-b-xs {
    padding-bottom: 5px;
}

.p-b-sm {
    padding-bottom: 10px;
}

.p-b-lg {
    padding-bottom: 15px;
}

.p-b-xlg {
    padding-bottom: 25px;
}

.m-xxs {
    margin: 2px 4px;
}

.m-xs {
    margin: 5px;
}

.m-sm {
    margin: 10px;
}

.m {
    margin: 15px;
}

.m-md {
    margin: 20px;
}

.m-lg {
    margin: 30px;
}

.m-xl {
    margin: 50px;
}

.m-n {
    margin: 0 !important;
}

.m-l-none {
    margin-left: 0px !important;
}

.m-l-0 {
    margin-left: 0px;
}

.m-l-xs {
    margin-left: 5px;
}

.m-l-sm {
    margin-left: 10px;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l {
    margin-left: 15px;
}

.m-l-md {
    margin-left: 20px;
}

.m-l-lg {
    margin-left: 30px;
}

.m-l-xl {
    margin-left: 40px;
}

.m-l-xxl {
    margin-left: 50px;
}

.m-l-n-xxs {
    margin-left: -1px;
}

.m-l-n-xs {
    margin-left: -5px;
}

.m-l-n-sm {
    margin-left: -10px;
}

.m-l-n {
    margin-left: -15px;
}

.m-l-n-md {
    margin-left: -20px;
}

.m-l-n-lg {
    margin-left: -30px;
}

.m-l-n-35 {
	margin-left: -35px;
}

.m-l-n-xl {
    margin-left: -40px;
}

.m-l-n-xxl {
    margin-left: -50px;
}

.m-t-none {
    margin-top: 0 !important;
}

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

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

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-7 {
    margin-top: 7px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-8 {
    margin-top: 8px !important;
}

.m-t-xxs {
    margin-top: 1px;
}

.m-t-xs {
    margin-top: 5px;
}

.m-t-sm {
    margin-top: 10px;
}

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

.m-t-md {
    margin-top: 20px;
}

.m-t-lg {
    margin-top: 30px;
}

.m-t-xl {
    margin-top: 40px;
}

.m-t-xxl {
    margin-top: 50px;
}

.m-t-n-xxs {
    margin-top: -1px;
}

.m-t-n-xs {
    margin-top: -5px;
}

.m-t-n-sm {
    margin-top: -10px;
}

.m-t-n {
    margin-top: -15px;
}

.m-t-n-md {
    margin-top: -20px;
}

.m-t-n-lg {
    margin-top: -30px;
}

.m-t-n-xl {
    margin-top: -40px;
}

.m-t-n-xxl {
    margin-top: -50px;
}
.m-t-n-3 {
    margin-top: -3px;
}

.m-r-none {
    margin-right: 0 !important;
}

.m-r-0 {
    margin-right: 0px;
}

.m-r-xxs {
    margin-right: 1px;
}

.m-r-xs {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 10px;
}

.m-r {
    margin-right: 15px;
}

.m-r-md {
    margin-right: 20px;
}

.m-r-lg {
    margin-right: 30px;
}

.m-r-xl {
    margin-right: 40px;
}

.m-r-xxl {
    margin-right: 50px;
}

.m-r-n-xxs {
    margin-right: -1px;
}

.m-r-n-xs {
    margin-right: -5px;
}

.m-r-n-sm {
    margin-right: -10px;
}

.m-r-n {
    margin-right: -15px;
}

.m-r-n-md {
    margin-right: -20px;
}

.m-r-n-lg {
    margin-right: -30px;
}

.m-r-n-xl {
    margin-right: -40px;
}

.m-r-n-xxl {
    margin-right: -50px;
}

.m-r-n-75 {
    margin-right: -75px;
}

.m-b-none, .m-b-n {
    margin-bottom: 0 !important;
}

.m-b-0 {
    margin-bottom: 0px;
}

.m-b-xxs {
    margin-bottom: 1px;
}

.m-b-xs {
    margin-bottom: 5px;
}

.m-b-sm {
    margin-bottom: 10px;
}

.m-b {
    margin-bottom: 15px;
}

.m-b-md {
    margin-bottom: 20px;
}

.m-b-lg {
    margin-bottom: 30px;
}

.m-b-xl {
    margin-bottom: 40px;
}

.m-b-xxl {
    margin-bottom: 50px;
}

.m-b-n-xxs {
    margin-bottom: -1px;
}

.m-b-n-xs {
    margin-bottom: -5px;
}

.m-b-n-sm {
    margin-bottom: -10px;
}

.m-b-n-md {
    margin-bottom: -20px;
}

.m-b-n-lg {
    margin-bottom: -30px;
}

.m-b-n-xl {
    margin-bottom: -40px;
}

.m-b-none {
    margin-bottom: 0px;
}

.m-b-n-xxl {
    margin-bottom: -50px;
}

.m-b-8 {
	margin-bottom: 8px;
}

.m-r-7 {
    margin-right: 7px !important;
}

.m-r-n-7 {
    margin-right: -7px !important;
}

.overflow-hidden {
    overflow: hidden;
}

.no-height {
    height: 0px;
}
.negate-left-margin-20
{
    margin-left: -20px;
}
.normalize-text
{
    font-weight: normal !important;
    font-size: 4vw !important;
    text-transform: none !important;
    /* white-space: normal !important; */
}
.font-normal {
    font-weight: normal !important;
}

.font-thin {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400;
}
.font-weight-400-important {
    font-weight: 400 !important;
}
.lable-font-weight-400 label{
    font-weight: 400 !important;
}
.font-bold {
    font-weight: 700;
}
.font-bold-important {
    font-weight: 700 !important;
}
.font-semi-bold {
    font-weight: 500;
}
.text-extra-large {
    font-size: 50px;
    line-height: 50px;
}
.text-3x {
    font-size: 3em;
}
.text-3x {
    font-size: 3em;
}
.text-2x {
    font-size: 2em;
}
.text-10 {
    font-size: 10px;
}
.text-22 {
    font-size: 22px;
}
.text-24 {
    font-size: 24px;
}
.text-30 {
    font-size: 30px;
}
.text-xl {
    font-size: 20px !important;
}
.text-xxl {
    font-size: 40px !important;
}

.text-lg {
    font-size: 18px !important;
}

.text-md {
    font-size: 15px;
}

.text-base {
    font-size: 14px;
}

.text-sm {
    font-size: 13px;
}

.text-sm-important {
    font-size: 13px !important;
}
.text-xs {
    font-size: 12px;
}

.text-xxs {
    text-indent: -9999px;
}

.text-font-16 {
  font-size: 16px;
}

.text-light-grey {
    color: rgba(44, 44, 44, 0.35);
}

table.my-custom-sort tbody tr.ui-sortable-helper td {
    border: 2px solid #cccccc;
}

table.my-custom-sort tr.my-custom-css {
    padding: 10px 8px !important;
}

    table.my-custom-sort tr.my-custom-css > td {
        margin: 15px 0 !important;
        padding: 10px 8px !important;
        background-color: #FFFFCC;
        cursor: move;
    }

.wordbreak-all {
    word-break: break-all;
}

.my-image-hover {
    position: absolute;
    width: 200px;
    height: auto;
    opacity: 0.85;
    border: 1px solid #ddd;
    -webkit-box-shadow: 1px 5px 5px 0px rgba(204,204,204,1);
    -moz-box-shadow: 1px 5px 5px 0px rgba(204,204,204,1);
    box-shadow: 1px 5px 5px 0px rgba(204,204,204,1);
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
}

    .my-image-hover img {
        width: 100%;
        height: 100%;
        opacity: 1 !important;
    }

.text-underline {
    text-decoration: underline;
}

/* custom inclusion of right, left and below tabs */

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
    border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

    .tabs-below > .nav-tabs > li {
        margin-top: -1px;
        margin-bottom: 0;
    }

        .tabs-below > .nav-tabs > li > a {
            -webkit-border-radius: 0 0 4px 4px;
            -moz-border-radius: 0 0 4px 4px;
            border-radius: 0 0 4px 4px;
        }

            .tabs-below > .nav-tabs > li > a:hover,
            .tabs-below > .nav-tabs > li > a:focus {
                border-top-color: #ddd;
                border-bottom-color: transparent;
            }

    .tabs-below > .nav-tabs > .active > a,
    .tabs-below > .nav-tabs > .active > a:hover,
    .tabs-below > .nav-tabs > .active > a:focus {
        border-color: transparent #ddd #ddd #ddd;
    }

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
    float: none;
}

    .tabs-left > .nav-tabs > li > a,
    .tabs-right > .nav-tabs > li > a {
        min-width: 74px;
        margin-right: 0;
        margin-bottom: 3px;
    }

.tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
}

    .tabs-left > .nav-tabs > li > a {
        margin-right: -1px;
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
        border-radius: 4px 0 0 4px;
        width: 100%;
    }

        .tabs-left > .nav-tabs > li > a:hover,
        .tabs-left > .nav-tabs > li > a:focus {
            border-color: #eeeeee #dddddd #eeeeee #eeeeee;
        }

    .tabs-left > .nav-tabs .active > a,
    .tabs-left > .nav-tabs .active > a:hover,
    .tabs-left > .nav-tabs .active > a:focus {
        border-color: #ddd transparent #ddd #ddd;
        border-right-color: #ffffff;
    }

.tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
    border-left: 1px solid #ddd;
}

    .tabs-right > .nav-tabs > li > a {
        margin-left: -1px;
        -webkit-border-radius: 0 4px 4px 0;
        -moz-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
    }

        .tabs-right > .nav-tabs > li > a:hover,
        .tabs-right > .nav-tabs > li > a:focus {
            border-color: #eeeeee #eeeeee #eeeeee #dddddd;
        }

    .tabs-right > .nav-tabs .active > a,
    .tabs-right > .nav-tabs .active > a:hover,
    .tabs-right > .nav-tabs .active > a:focus {
        border-color: #ddd #ddd #ddd transparent;
        border-left-color: #ffffff;
    }

.close-box {
    position: absolute;
    right: -10px;
    top: -10px;
    visibility: visible;
    opacity: 1;
}

    .close-box > img {
        cursor: pointer;
    }

.b-b-dark {
    border-bottom: 1px solid #cccccc;
}

.b-3xb-dark {
    border-bottom: 3px solid #cccccc;
}

.b-b-none {
    border-bottom: 0px !important;
}

.b-t-none {
    border-top: 0px !important;
}

.b-t-impt {
    border-top: 1px solid #dee5e7 !important;
}

.p-l-r-none {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.table tr td.p-l-r-none {
    padding-left: 0;
    padding-right: 0;
}
/*remove up and down arrows of input number*/
input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}

    input[type="number"]:hover,
    input[type="number"]:focus,
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

/*  The below css is used for Settings -> Customization
    Author: Tin Le (Alex)
*/
.comp-format-container .row {
    margin-bottom: 10px;
}

    .comp-format-container .row label {
        line-height: 30px;
        text-align: right;
    }

.comp-format-prefix,
.comp-format-middle,
.comp-format-suffix {
    float: left;
    margin-right: 10px;
    /*width: 20%;*/
}

.comp-format-suffix {
    margin-right: 0;
}

.popover-text-sm > .popover{
    font-size: 12px;
}

/*  The class popover-md is used for 2 "Reservations" modals in purchaseEditForm.html and salesEditForm.html 
    The below of css is to style only for those 2 modals.    
*/
.popover {
    overflow: visible !important; /*to show the bottom arrow for popover*/
}
    .popover.top > .arrow, .popover.bottom > .arrow {
        overflow: visible;
    }

.popover-md .popover.top, .popover-md .popover.right {
    max-width: 500px;
}

.popover.inside-modal {
    z-index: 1100;
}
/*  End of popover-md modification */

.app-icon-shopify {
    background: url('../img/integrations/icon.shopify.png') no-repeat;
    height: 20px;
    width: 20px;
}

/* Alex: utilize more space in proposing purchase modal. */
.modal .modal-body.proposingpurchase {
    padding: 0 10px 0 10px;
}

.proposingpurchase .nav {
    margin-right: 10px;
}

.proposingpurchase .nav-tabs ~ .tab-content {
    padding-left: 0;
    padding-right: 0;
}

.proposingpurchase .panel-body {
    padding: 0 0 0 10px;
}
/* END - Alex: utilize more space in proposing purchase modal. */

.page-sidebar {
    background-color: #323237;
}

    .page-sidebar a, .page-sidebar button {
        color: #B2B2B2;
    }

        .page-sidebar a:visited,
        .page-sidebar button:visited,
        .page-sidebar a:focus,
        .page-sidebar button:focus {
            color: #B2B2B2;
        }


    .page-sidebar .sidebar-menu .menu-items li > a {
        width: 70%;
    }

    .page-sidebar .sidebar-menu .menu-items > li > a {
        font-family: Arial, sans-serif;
        display: inline-block;
        padding: 0 11px;
        padding-left: 32px;
        min-height: 40px;
        line-height: 40px;
        font-size: 13px;
        clear: both;
    }

.menu-pin .page-sidebar .sidebar-menu .menu-items > li > a {
    min-height: 37px;
    line-height: 37px;
    padding-left: 5px;
}

.page-sidebar .sidebar-menu .menu-items > li ul.sub-menu {
    background-color: #3C3C41;
}

.page-sidebar .sidebar-menu .menu-items > li > a.open {
    background: #313131;
}

.page-sidebar .sidebar-menu .menu-items > li > a > .arrow {
    float: right;
    color: #777;
}

.page-sidebar .sidebar-menu .menu-items > li ul.sub-menu > li {
    background: none;
    padding: 0 0 0 40px;
    margin-top: 1px;
}

    .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu > li .icon-thumbnail {
        background-color: #323237;
    }

.icon-thumbnail {
    display: inline-block;
    background: #3C3C41;
    height: 35px;
    width: 35px;
    line-height: 35px;
    color: #B2B2B2;
    font-size: 13px;
}

    .icon-thumbnail .ionicons {
        margin-top: 8px;
    }

.menu-pin .icon-thumbnail {
    margin-left: 43px;
    float: left;
    margin-right: 0;
    background: none;
    width: 15px;
}

.icon-thumbnail > i {
    font-size: 14px;
}

.dropdown-default .btn.dropdown-toggle ~ .dropdown-menu {
    z-index: 1 !important;
}

.dropdown-default .btn.dropdown-toggle {
    z-index: 2;
}

.dropdown-default .dropdown-menu {
    z-index: -1;
}

.dropdown-menu {
    z-index: 1045;
}

.deposit-note-dd .dropdown-menu {
	width: 210px;
}
.dropdown-backdrop {
	z-index: 600;
}

.form-control {
    height: 30px;
    padding: 3px 12px;
    min-height: 30px;
}

    /*Custom date-picker padding*/
    .form-control[date-picker] {
        padding-left: 0px;
    }

    .form-control[readonly] {
        pointer-events: none;
    }

input.form-control[readonly], input.form-control[readonly]:focus {
    background: #fff;
    border: none;
}

.additionChargesModalForm .select2-container .select2-choice {
    padding: 1px 7px;
    height: 30px;
}

.select2-container .select2-choice {
    padding: 0 7px;
    height: 27px;
}

    .select2-container .select2-choice .select2-arrow b:before {
        right: 0;
        top: -1px;
    }

.select2-results .select2-selection-limit {
    top: 0;
}

.line-chart .nvd3 .nv-axis .nv-axisMaxMin text {
    font-size: 10px;
}

.custom-salesChart.line-chart .nvd3 .nv-axis .nv-axisMaxMin text, .line-chart .tick text {
    text-transform: capitalize;
}

.list-view-group-container {
    padding: 50px 0 0 0;
}

.email-wrapper .email-sidebar {
    background: none;
}

.email-wrapper .email-list {
    float: none;
    width: auto;
}

    .email-wrapper .email-list .email-refresh {
        top: 11px;
    }

    .email-wrapper .email-list .list-view-fake-header,
    .email-wrapper .email-list .list-view-group-header {
        background: none;
        height: auto;
    }

.email-wrapper .email-opened .actions {
    display: none;
}

    .email-wrapper .email-opened .actions li {
        display: inline-block;
    }

.email-wrapper .email-opened .email-content-wrapper {
    display: none;
}

.register-container {
    padding-bottom: 135px;
}

.bg-master-light, .bg-light {
    background-color: #e6e6e6;
}

tab-heading {
    padding-right: 15px;
}


.btn-save {
    width: auto;
    height: 35px;
}

.btn-info:hover {
    background-color: #27326e;
    border-color: #27326e;
}

.loader {
  position: relative;
  min-width: 21px;
  min-height: 21px;
  color: transparent;
  padding-left: 7px;
  padding-right: 7px;
  display: table-caption;
}
.loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 21px;
  height: 100%;
  border: 2px solid #ccc;
  border-right-color: #666666;
  border-radius: 60%;
  animation: spin 0.6s linear infinite;
  opacity: 1;
}
@keyframes spin {  
  to {
    transform: rotate(360deg);
  }
}

/* Tai: add css to disable a href tag*/
.not-active {
    pointer-events: none;
    cursor: default;
}

a.disabled {
    pointer-events: none;
}

a[disabled] {
    pointer-events: none;
}

/* Tin: product and service icon */
i.product-icon.icon-12,
i.service-icon.icon-12,
i.rawMaterial-icon.icon-12 {
    background-size: 12px;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.icon-12 {
    display: inline-block;
    width: 12px;
    height: 12px;
}

.light-grey-icon {
    -webkit-filter: contrast(0);
    filter: contrast(0);
}

i.product-icon.icon-16,
i.service-icon.icon-16,
i.rawMaterial-icon.icon-16 {
    background-size: 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

i.product-icon {
    background: url(../img/noProductAvatar.svg) no-repeat center;
}

i.service-icon {
    background: url(../img/noProductServiceAvatar.svg) no-repeat center;
}

i.rawMaterial-icon {
    background: url(../img/noRawMaterialAvatar.svg) no-repeat center;
}

i.excel-icon {
    background: url(../img/excel-file.png) no-repeat center;
}
i.excel-icon.icon-16 {
    background-size: 27px;
    display: inline-block;
    width: 27px;
    height: 27px;
    margin-right: 5px;
}
.user-avatar.thumbnail-wrapper.d32 {
    text-align: center;
}

    .user-avatar.thumbnail-wrapper.d32 img {
        width: auto;
    }

.product-listing .table tbody tr.is-product-variant.is-collapsed {
    display: none;
}

.product-listing .table tbody tr.is-product-variant {
    display: table-row;
}

    .product-listing .table tbody tr.is-product-variant td {
        background-color: #edf8fc !important;
    }

.product-listing td.show-hide-variants a {
    text-decoration: underline;
    font-size: 12px;
}

.product-listing td.show-hide-variants .image-container {
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.product-listing td.show-hide-variants .product-variant-symbol {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.product-listing td.show-hide-variants img {
    float: left;
    width: 24px;
    margin-left: 17px;
}

.form-group.product-variant-definitions label.variant-question {
    font-size: 12px;
    text-transform: none;
}

.product-variant-options-list {
    margin-top: 10px;
}

.product-variant-definitions .variant-headers {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
}

    .product-variant-definitions .variant-headers .hint {
        float: right;
        text-transform: none;
        font-weight: normal;
        font-size: 12px;
    }

/*- Tai: add style to narrow the width of upload button http://stackoverflow.com/questions/19695053/truncate-text-in-input-type-file -*/
input[type=file] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 300px;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

    .upload-btn-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

/*CSS for On Boarding Page*/
.integrationtab {
    padding: 30px 30px 30px 20px;
}

    .integrationtab .nav-tabs {
        border: 0px;
    }

        .integrationtab .nav-tabs li {
            margin-right: 20px;
        }

            .integrationtab .nav-tabs li a {
                padding: 10px 20px;
                font-size: 16px;
                text-transform: uppercase;
                background: #fff;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

            .integrationtab .nav-tabs li.active a {
                padding: 10px 20px;
                font-size: 16px;
                text-transform: uppercase;
                background: #03B7E2;
                border: 1px solid #ccc;
                border-radius: 3px;
                color: #fff;
            }

    .integrationtab .tab-content {
        padding: 30px 0px;
    }

.app-container {
    padding: 30px;
    background: #fff;
    margin: 20px 0px;
}

.app-contents {
    padding-left: 20px;
    border-left: 1px solid #ccc;
}

.noti-bar {
    padding: 25px 0px;
    border-radius: 5px;
}

    .noti-bar h3 {
        font-size: 35px;
        line-height: 40px;
        margin: 0px;
        padding: 0px 0px 10px 0px;
        font-weight: normal;
    }

    .noti-bar p {
        font-size: 18px;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        font-weight: normal;
    }

.integration-table {
    font-size: 20px;
    font-weight: 100;
}

    .integration-table span {
        font-size: 12px;
        font-weight: 100;
        display: block;
    }

.page-intro-title {
    padding: 20px 10px 10px 0px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

    .page-intro-title h3 {
        font-size: 30px;
        margin: 0px;
        padding: 0px;
    }

.btn-primary.active {
    background: #03B7E2;
}

.page-number {
    /* Rectangle 54: */
    padding: 5px;
    line-height: 1;
    font-size: 20px;
    border-radius: 5px;
}

.height-auto {
    height: auto;
}

    .page-number ul.onboarding-steps li {
        display: inline-block;
    }

    .page-number ul.onboarding-steps li > img {
        width: 30px;
    }

/*Customize Selectize CSS*/
.waitForLoadingScreen {
    opacity: 0;
}

.custom-onboarding.selectize-control.single .selectize-input,
.custom-onboarding .selectize-input {
    border: 1px solid #ccc;
    padding: 15px 10px;
    background: white;
}

.has-error .custom-onboarding .selectize-input.focus {
    border-color: red;
}

.custom-onboarding.selectize-dropdown.single {
    border: 1px solid #ccc;
    padding: 5px 5px 5px 0;
    background: white;
}

.customized-company-dropdown .selectize-input {
    padding: 7px 8px 8px 7px;
}

.selectize-border-color.select2-container-multi .select2-choices {
    border-color: #d0d0d0;
}
/*Custom iSwitch for onboarding page*/
.custom-switch.i-switch {
    height: 20px;
}

    .custom-switch.i-switch i:before {
        background-color: #e6e7e8;
    }

    .custom-switch.i-switch i:after {
        background-color: #fafafa;
    }

    .custom-switch.i-switch.disabled i:after {
        background-color: #ddd;
    }

.onboarding-table.table thead tr th:first-child {
    padding-left: 0px !important;
    text-transform: none;
}

.onboarding-table.table tbody tr td {
    padding-left: 0px;
}

.permission-row {
    padding: 8px 5px 5px;
    border-bottom: 1px solid #ccc;
}

    .permission-row .item {
        padding-top: 3px;
    }

    .permission-row:first-child {
        border-top: 1px solid #ccc;
    }

    .permission-row.child-permission {
        background-color: #EFEFEF;
    }

.delete-coworker {
    padding: 15px 0 0 10px;
}

.big-button-area {
    padding: 30px 0px;
    clear: both;
    text-align: center;
    position: relative;
}

.big-button-bubble {
    background-color: #f9cc4e;
    border-radius: 5px;
    color: #fff;
    line-height: 40px;
    display: inline-block;
    height: 40px;
    font-weight: bolder;
    position: relative;
    top: -25px;
    width: 100%;
    font-size: 14px;
}

    .big-button-bubble img {
        width: 25px;
        margin-top: -5px;
        margin-right: 5px;
    }

    .big-button-bubble::after {
        content: ' ';
        position: absolute;
        left: 255px;
        top: 35px;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 16px solid #f9cc4e;
    }

.big-button-area a {
    /* Rectangle 76 Copy 2: */
    background-color: transparent;
    border-radius: 7px;
    padding: 20px 25px;
    max-width: 300px;
    display: inline-block;
    width: 300px;
    font-size: 18px;
    font-weight: 100;
    color: #1c1c1c;
    border: 2px solid #48B5E4;
    position: relative;
    min-height: 450px;
    vertical-align: top;
    margin: -10px 30px 0 30px;
}

    .big-button-area a:hover {
        background-color: #daf0fa;
        border-color: #daf0fa;
    }

    .big-button-area a.blue-button {
        background-color: #48B5E4;
        color: #fff;
    }

        .big-button-area a.blue-button:hover {
            background-color: #3ca0dc;
            border-color: #3ca0dc;
        }

    .big-button-area a .title {
        font-size: 25px;
        color: #48B5E4;
        line-height: 32px;
        padding: 50px 10px;
        font-weight: bolder;
        display: block;
        clear: both;
    }

    .big-button-area a.blue-button .title {
        color: #fff;
    }

    .big-button-area a .onboarding-final-icon {
        width: 100px;
        position: absolute;
        bottom: 60px;
        left: 100px;
    }

.customForCustomerListingPage.big-button-bubble {
    z-index: 1000;
    top: 0px;
    white-space: nowrap;
    padding: 0px 15px;
    position: absolute;
    width: unset;
    font-weight: normal;
    transition: all ease 1s;
    opacity: 0.8;
}

.firsttimeTooltip {
    margin-top: -50px;
    position: absolute;
    z-index: 1046;
    left: 500px;
}

.hideEcartTooltipAnimation .customForCustomerListingPage.big-button-bubble {
    opacity: 0;
    top: -100px;
}

.proceed {
    position: absolute;
    top: 0px;
    left: 0px;
}

.lableitp {
    font-size: 20px;
}

.itp-blue-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.onboarding .lableitp {
    font-size: 16px;
}

.onboarding .form-control.itp {
    height: 45px;
}

.onboarding .has-error input.ng-invalid {
    border: 1px solid #b94a48;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.onboarding .has-error input.ng-dirty.ng-invalid {
    border: 1px solid #b94a48;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.onboarding input.ng-dirty.ng-invalid {
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.onboarding input.ng-dirty.ng-valid {
    border: 1px solid #ddd;
}

.onboarding .select2-container .select2-choice {
    padding: 3px 7px;
    height: 45px !important;
    border-color: #ddd;
    outline: none;
    box-shadow: none;
    border-radius: 5px;
}

    .onboarding .select2-container .select2-choice .select2-chosen {
        margin-top: 5px;
    }

    .onboarding .select2-container .select2-choice abbr {
        top: 10px;
    }

    .onboarding .select2-container .select2-choice .select2-arrow {
        top: 10px;
    }

.wrap-crop-image-tool {
    padding: 15px;
    border: 3px dashed #ccc;
}

    .wrap-crop-image-tool .crop-image-tool {
        width: 500px;
        height: 333px;
    }

textarea.form-control.itp {
    padding: 10px;
}

.form-control.itp {
    padding: 0 10px;
    font-size: 16px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
}

    /*DO NOT GROUP THEM, just put them separately like this*/
    .form-control.itp.placeholder-italic::-webkit-input-placeholder /* WebKit, Blink, Edge */ {
        font-style: italic;
    }

    .form-control.itp.placeholder-italic:-moz-placeholder /* Mozilla Firefox 4 to 18 */ {
        font-style: italic;
    }

    .form-control.itp.placeholder-italic::-moz-placeholder /* Mozilla Firefox 19+ */ {
        font-style: italic;
    }

    .form-control.itp.placeholder-italic:-ms-input-placeholder { /* Internet Explorer 10-11 */
        font-style: italic;
    }

    .form-control.itp a.select2-choice {
        background-color: #fff;
        border: none;
        height: 100% !important;
    }

        .form-control.itp a.select2-choice span.select2-chosen {
            height: 100%;
            padding: 10px;
        }

        .form-control.itp a.select2-choice abbr.select2-search-choice-close {
            padding: 10px 20px;
            /*display: none;*/
        }

        .form-control.itp a.select2-choice span.select2-arrow {
            padding: 11px 0;
        }

.btn-group.user .btn {
    margin: 0px 5px;
    padding: 6px 20px;
    font-size: 20px;
    border-radius: 3px !important;
    font-weight: 700;
    background-color: #fff;
    margin-bottom: 10px;
    color: #48B5E4;
}

    .btn-group.user .btn:hover {
        background-color: #daf0fa;
        color: #48B5E4;
        border-color: #48B5E4;
    }

    .btn-group.user .btn.active {
        background: #48B5E4;
        border-color: #48B5E4;
        color: #fff;
    }

.onBoarding-form {
    overflow-y: auto;
    position: fixed;
    background-color: white;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

    .onBoarding-form .container {
        max-width: 960px;
    }

.company-logo {
    max-width: 380px;
}

    .company-logo img {
        width: 100%;
    }

.newCompanyBg {
    background-image: url('../img/newCompanyBg.svg');
    width: 100%;
    height: 100%;
}

.w-160 {
    width: 160px;
}

.w-190 {
    width: 190px;
}

.h-60 {
    height: 140px;
}

.padder-4-15 {
    padding: 4px 15px;
}
/*css for phone, below 768px (iPad)*/
@media screen and (max-width: 767px) {
    .select2-drop.select2-with-searchbox {
        max-width: 100% !important;
    }

    .onboarding-btn-padding {
        padding: 6px 17px !important;
    }

    .onboarding-flex {
        display: flex;
    }

    .onboarding-step-2-action {
        margin-top: 30px;
    }
}


/*START INTRO CSS - INTRO.JS*/
/*ITP CSS goes here*/

.itp-notifier {
    background: #4EB6E2;
    color: #fff;
    border-radius: 0px;
    border: 0px;
    text-shadow: none !important;
}

    .itp-notifier a {
        text-decoration: underline;
        color: #fff;
    }

    .itp-notifier button {
        font-size: 14px;
        color: #fff;
        opacity: 1 !important;
        text-shadow: none !important;
    }

body.is-itp-running .left-panel-listingpage {
    position: static;
    top: 0;
    width: 100%;
    margin-top: 0;
}

body.is-itp-running .select2-drop.select2-drop-active,
body.is-itp-running .datepicker.dropdown-menu {
    z-index: 9999999;
}

body.is-itp-running .datepicker table tr td.today {
    background-color: #ccc;
}

/*Sales Order*/
body.is-itp-running ul#actionMenuTop,
/*body.is-itp-running li#actionMenuInvoiceButton,*/
body.is-itp-running .skip-buttons {
    display: block;
}

/*Auto Open submenu when ITP runs*/
.btnAction.autoOpenBackOrderSubMenu .dropdown-menu,
.btnAction.autoOpenInvoiceSubMenu .dropdown-menu,
.btnAction.autoOpenDeliverySubMenu .dropdown-menu,
.btnAction.autoOpenReceiveSubMenu .dropdown-menu,
.btnAction.autoOpenDropshipSubMenu .dropdown-menu {
    display: block;
}

/*fix css for firefox on MacOs (display '...' after selected an item in Sales Order Detail)*/
.table.table-condensed tr td.disable-textoverflow,
.table.table-condensed tbody tr td.disable-textoverflow * {
    text-overflow: unset;
}

body.is-itp-running ul#actionMenuTop #convertToPO > a,
body.is-itp-running ul#actionMenuTop #convertToPO #convertToPOContent_QuickConvert,
body.is-itp-running ul#actionMenuTop #convertToPO #convertToPOContent_QuickConvert > a,
body.is-itp-running ul#actionMenuTop #convertToPO > a,
body.is-itp-running ul#actionMenuTop #convertToPO #convertToDropShipContent_CreateDropShip,
body.is-itp-running ul#actionMenuTop #convertToPO #convertToDropShipContent_CreateDropShip > a,
body.is-itp-running ul#actionMenuTop #convertToDO > a,
body.is-itp-running ul#actionMenuTop #convertToDO #convertToDOContent_QuickConvert,
body.is-itp-running ul#actionMenuTop #convertToDO #convertToDOContent_QuickConvert > a,
body.is-itp-running ul#actionMenuTop #convertToInvoice > a,
body.is-itp-running ul#actionMenuTop #convertToInvoice #convertToInvoiceContent_QuickConvert,
body.is-itp-running ul#actionMenuTop #convertToInvoice #convertToInvoiceContent_QuickConvert > a,
body.is-itp-running ul#actionMenuTop #convertToSupplierInvoice > a,
body.is-itp-running ul#actionMenuTop #convertToSupplierInvoice #invoice_quickConvert,
body.is-itp-running ul#actionMenuTop #convertToSupplierInvoice #invoice_quickConvert > a,
body.is-itp-running ul#actionMenuTop #itpPayInvoice,
body.is-itp-running ul#actionMenuTop #itpPayInvoice a {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

body.is-itp-running .navbar-nav .dropdown-menu a, /* Disable action menu if in ITP mode. */
body.is-itp-running .select2-drop a.btn, /* Disable Add button of dropdownlist if in ITP mode. */
body.is-itp-running .is-show-whenrunning-ITP,
body.is-itp-running .is-deactive-when-run-itp,
body.is-itp-running .deactive-link,
body.is-itp-running .deactive-so-description,
body.is-itp-running .deactive-description-field,
body.is-itp-running .deactive-edit-remove-address-buttons,
body.is-itp-running .deactive-edit-checkbox,
body.is-itp-running .deactive-edit-textfield,
body.is-itp-running .deactive-tab,
body.is-itp-running .deactive-ddl,
body.is-itp-running .deactive-button {
    pointer-events: none;
}

body.is-itp-running.is-loading-itpdata .introjs-helperLayer,
body.is-itp-running.is-loading-itpdata .introjs-tooltipReferenceLayer,
body.is-itp-running.is-loading-itpdata .introjs-tooltip {
    opacity: 0; /* override the display of tooltip while loading data. */
}

body.is-itp-running .navbar-nav .dropdown-menu li:hover .dropdown-menu {
    display: none; /* Disable action menu level 2 if in ITP mode. */
}

/*disbaled listing page*/
body.is-itp-running.noscroll {
    position: fixed;
    overflow-y: scroll;
}

body.is-itp-running .modal-backdrop.fade.in {
    opacity: 0.6;
}

body.is-itp-running.itp-set-maxzindex .modal.fade {
    z-index: 10000001 !important;
}

.animation-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    background: rgb(161,161,180);
    background: linear-gradient(180deg, rgba(161,161,180,1) 0%, rgba(255,255,255,0) 75%);
} 

.itpLoadingBackdrop,
.loadingBackdrop {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10000001;
    background-color: #000;
    background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
    background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.6)));
    background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.6) 100%);
    background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.6) 100%);
    background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.6) 100%);
    background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    animation-delay: 1s;
}

.loadingBackdrop {
    top: 50px;
    left: 250px;
}

.onboarding .loadingBackdrop {
    top: 0;
    left: 0;
    z-index: 1060;
}

.itpLoadingIcon, .loadingIcon {
    position: fixed !important;
    z-index: 10000001;
    margin: 0 auto;
    left: calc(50% - 25px);
    width: 300px;
    height: 100%;
}

.loadingIcon {
    left: calc(44%);
}

.onboarding .loadingIcon {
    left: calc(42%);
    z-index: 1060;
}

.loadingBackdrop,
.loadingIcon {
    z-index: 1050;
}

.bg-login .loadingBackdrop {
    position: absolute;
    top: 0;
    left: 0;
}

.bg-login .loadingIcon {
    position: absolute !important;
}

.progressIcon {
    background: url('../pages/img/progress/progress-circle-success-itp.svg') no-repeat center center;
    background-size: 16px;
    min-height: 16px;
    padding-left: 20px;
}
/*For quick itp run only*/
body.is-itp-running.override-itp-red-border .introjs-helperLayer {
    border: none;
}

body.is-itp-running .introjs-helperLayer {
    border: 2px solid red;
}

body.is-itp-running .itp-border-red {
    border: 2px solid red !important;
    transition: border 1s !important;
}

body.is-itp-running .itp-remove-border-red.introjs-helperLayer {
    border: none !important;
}

body.is-itp-running .itp-override-border-redline {
    border: 2px solid red !important;
}
/* End - ITP CSS for new upgrade Nov 29 2016 */


/*Is Trial Bar*/
.isTrialMenuBar {
    display: none;
    background-color: transparent;
    height: 50px;
}

body.is-trial-running .isTrialMenuBar {
    display: block;
}

body.modal-dialog {
    margin-top: 100px;
}

.modal-backdrop.fade.in {
    z-index: 1045 !important;
}

body.is-trial-running .modal-dialog {
    margin-top: 85px;
}
/*For Save Advanced Search Modal*/
body.is-trial-running .modal-preview.slide-up {
    top: 110px;
}

.modal.fade.slide-up {
    top: 60px;
}

/* Custom container */
.container-narrow {
    margin: 0 auto;
    max-width: 700px;
}

    .container-narrow > hr {
        margin: 30px 0;
    }

/* Main marketing message and sign up button */
.jumbotron {
    margin: 60px 0;
    text-align: center;
}

    .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
    }

    .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
    }

/* Supporting marketing content */
.marketing {
    margin: 60px 0;
}

    .marketing p + h4 {
        margin-top: 28px;
    }

.forLastStep {
    font-weight: bold;
}

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

.customDefault {
	color: #fff;
}

    .customDefault .introjs-skipbutton {
        border-radius: 0;
        color: red;
    }

/*END INTRO CSS - INTRO.JS*/

div .flex-row-reverse-intro {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    flex-direction: row-reverse;
}

    div .flex-row-reverse-intro .custom-popover {
        padding-left: 10px;
    }

    div .flex-row-reverse-intro > .wrapper-popover {
        margin-right: 5px;
        width: auto;
    }

div .flex-intro {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
}

    div .flex-intro > .wrapper-popover {
        margin-left: 5px;
        width: auto;
    }

div .flex-intro-right {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: flex-end;
}

div.info-tooltip > .item-left {
    float: left;
    width: 96%;
    margin-right: 5px;
}

div.info-tooltip > label,
div.info-tooltip-horizontal > a,
div.info-tooltip > span {
    float: left;
    margin-right: 5px;
    line-height: 20px;
}


div.info-tooltip-horizontal > label,
div.info-tooltip-horizontal > span {
    float: left;
    margin-right: 5px;
}

div.info-tooltip-horizontal > .wrapper-popover {
    margin-top: 3px;
}
th > div.info-tooltip-horizontal {
    margin-top: 10px;
}

div.info-tooltip > a {
    float: left;
    margin-right: 5px;
}

div.info-tooltip h3,
div.info-tooltip h4 {
    float: left;
}

.info-tooltip-checkbox > label {
    float: left;
    margin-right: 5px;
}

.info-tooltip-checkbox > .wrapper-popover {
    margin-top: 0px;
}

.info-tooltip > .wrapper-popover {
    margin-top: 0px;
}

th > .wrapper-popover {
    margin-top: 8px;
}

th > span {
    line-height: 35px;
}

div.info-tooltip-absolute .intro-questionmark {
    position: absolute;
}

.intro-questionmark {
    /*font-size: 25px;*/
    color: #ccc;
    /*position: absolute;*/
    right: 0;
    top: 20px;
    cursor: pointer;
    z-index: 1040;
    width: 25px;
}

    .intro-questionmark .fa {
        font-size: 15px;
    }

.intro-btnClose {
    position: absolute;
    top: -3px;
    right: 5px;
}

.skip-buttons {
    display: none;
    z-index: 9999999;
    position: fixed;
    right: 75px;
    bottom: 20px;
}

.introjs-button.emerge-skip-buttons {
    border: none !important;
}

.skip-buttons a.emerge-skip-buttons {
    background-color: #48B5E4 !important;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 3px;
    font-weight: bold;
}

    .skip-buttons a.emerge-skip-buttons.end-itp {
        background-color: white !important;
        padding: 10px 15px;
        color: #48B5E4 !important;
        border: 2px solid #48B5E4 !important;
        font-weight: bold;
        opacity: 0.7;
    }

        .skip-buttons a.emerge-skip-buttons.end-itp:hover {
            opacity: 1;
        }

.wrapper-popover .popover .popover-title {
    display: none;
}

.left-panel-listingpage {
    position: fixed;
    min-width: 270px;
    /*width: 21%;*/
    width: 20%;
    background-color: #f0f0f0;
    bottom: 0;
    top: 60px;
}

    .left-panel-listingpage.is-trial {
        /*top: 60px;*/
        margin-top: 50px;
    }

    .left-panel-listingpage.introjs-fixParent {
        top: 10px;
        margin-top: 0;
    }

body.header, .header, body.fixed-header .header {
    z-index: 1040;
    width: calc(100% - 250px);
    float: right;
    left: unset;
    right: 0;
    margin-left: 250px;
    position: absolute;
}

.page-container .page-content-wrapper {
    top: 50px;
}

.page-sidebar.introjs-fixParent {
    position: fixed !important;
    /*height: 122%;*/
}
/*.datepicker.dropdown-menu {
    z-index: 1050 !important;
}*/
body.is-itp-running .navbar-nav .dropdown-menu li .dropdown-menu.is-PO-content-showing,
body.is-itp-running .navbar-nav .dropdown-menu li .dropdown-menu.is-DO-content-showing,
body.is-itp-running .navbar-nav .dropdown-menu li .dropdown-menu.is-Invoice-content-showing,
body.is-itp-running .navbar-nav .dropdown-menu li .dropdown-menu#convertToSupplierInvoice_Options {
    display: block;
    min-width: 400px;
}


.ui-notification:hover {
    opacity: 1;
}

.ui-notification a {
    color: #3a8fc8;
}

    .ui-notification a.emerge-bg-color {
        color: white;
    }


.ui-notification.itp-notification {
    z-index: 1000000;
    background-color: #fff;
    color: #626262;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
}

.ui-notification.itp-badge-awarded h3 {
    text-align: center;
    margin: 0;
    font-size: 18px;
    border: none;
}

.ui-notification.itp-badge-awarded img {
    padding-bottom: 10px;
}

.ui-notification.itp-badge-awarded .badge-name {
    color: #273170;
    font-weight: bold;
}

.ui-notification.percent-complete .text {
    float: left;
    max-width: 45%;
}

.ui-notification.percent-complete .complete-bar {
    float: right;
    height: 20px;
    width: 50%;
    border-radius: 10px;
    background-color: #D0D2D3;
    overflow: hidden;
}

.ui-notification.percent-complete .percent-bar {
    float: left;
    height: 20px;
    border-radius: 10px 0 0 10px;
    background-color: #4EB6E2;
}

/*sang added*/
.dropdown-menu .dropdown-menu {
    margin-left: 0px;
    left: 100%;
    top: 0px;
}

.dropdown-menu li:hover .dropdown-menu {
    display: block;
    width: 400px;
}

.dropdown-menu .dropdown-menu .second-level-description {
    padding: 0 20px;
}

    .dropdown-menu .dropdown-menu .second-level-description hr {
        margin: 0 0 5px 0;
    }

    .dropdown-menu .dropdown-menu .second-level-description p {
        margin: 0 0 3px 0;
        color: #999999;
        font-size: 12px;
    }

.caret-right {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: central;
    width: 0;
    margin-left: 8px;
    padding-right: 10px;
}

.caret-down {
    border-bottom: 0 !important;
    border-top: 4px solid !important;
}

.menu-action-hover > li > a.only-for-this-item:hover {
    background-color: #D3D3D3;
    /*background-color:red;*/
}

.menu-action-hover > li > a.only-for-this-item-empty:hover {
    background-color: #D3D3D3;
    /*background-color:red;*/
}

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv {
    width: 100%;
    min-height: 40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
    background: #e7f1d8;
    color: black;
    padding: 10px;
    margin-top: 5px;
    position: relative;
    word-wrap: break-word;
    -moz-border-radius: 5px; /*add some nice CSS3 round corners*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0em;
    align-content: center;
}

    .uparrowdiv:after { /*arrow added to uparrowdiv DIV*/
        content: '';
        display: block;
        position: absolute;
        top: -20px; /*should be set to -border-width x 2 */
        left: 60px;
        width: 0;
        height: 0;
        border-color: transparent transparent #e7f1d8 transparent; /*border color should be same as div div background color*/
        border-style: solid;
        border-width: 10px;
    }

    .downarrowdiv:after { /*arrow added to downarrowdiv DIV*/
        content: '';
        display: block;
        position: absolute;
        top: 100%; /*should be set to 100% */
        left: 30px;
        width: 0;
        height: 0;
        border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
        border-style: solid;
        border-width: 10px;
    }

    .leftarrowdiv:after { /*arrow added to leftarrowdiv DIV*/
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        left: -20px; /*should be set to -border-width x 2 */
        width: 0;
        height: 0;
        border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
        border-style: solid;
        border-width: 10px;
    }

    .rightarrowdiv:after { /*arrow added to rightarrowdiv DIV*/
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        left: 100%; /*should be set to 100% */
        width: 0;
        height: 0;
        border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
        border-style: solid;
        border-width: 10px;
    }

.action-notify {
    width: 100%;
}

.btn-void-color {
    color: red;
    margin-right: 10px;
    padding: 6px;
}

.deactive-action-tooltip.alert {
    padding-top: 10px;
    padding-left: 25px;
}

    .deactive-action-tooltip.alert .close {
        font-size: large;
        background: none;
        height: 18px;
        width: 16px;
        margin-left: 0px;
        padding-left: 15px;
        padding-right: 30px;
        position: static;
    }

ul#actionMenuTop > li > a.only-for-this-item {
    width: 250px;
    display: block;
    white-space: normal;
}

    ul#actionMenuTop > li > a.only-for-this-item:after {
        float: right;
        content: '\25b6';
    }

/** DASHBOARD */
#dashboard-shorcut-buttons {
    background-color: #10cfbd;
    min-height: 0px;
    padding: 0px;
}

    #dashboard-shorcut-buttons svg {
        float: left;
        width: 19px;
        height: 20px;
        margin-right: 10px;
    }

    #dashboard-shorcut-buttons .btnaddproduct svg {
        width: 16px;
    }

    #dashboard-shorcut-buttons .btncreateso svg {
        margin-top: 2px;
        width: 27px;
    }

    #dashboard-shorcut-buttons a {
        color: white;
        font-size: 16px;
    }

    #dashboard-shorcut-buttons ul {
        margin: 0 auto;
        padding: 0;
        display: block;
    }

        #dashboard-shorcut-buttons ul li.quickButton {
            display: inline-block;
            padding: 15px;
            position: relative;
        }

            #dashboard-shorcut-buttons ul li.quickButton:hover {
                background-color: #5FD2C8;
                cursor: pointer;
            }

    #dashboard-shorcut-buttons a > img {
        padding-right: 5px;
    }

    #dashboard-shorcut-buttons a > span {
        line-height: 100%;
        vertical-align: middle;
    }

    #dashboard-shorcut-buttons svg path {
        fill: #7266BA;
    }

    #dashboard-shorcut-buttons a:hover svg path {
        fill: #FFF;
    }

.dashboard-chart.panel {
    /*border: 1px solid #d0d2d3;*/
    margin: 0 0 15px 0;
    height: 410px;
    box-shadow: 3px 3px 32px -14px rgba(0,0,0,0.75);
}

.dashboard-itemName {
    word-wrap: break-word;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -moz-line-clamp: 5;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
}

/*css for End lesson model*/
.lesson-img-education {
    float: right;
    margin: -30px;
}

.lesson-btn-cancel {
    margin-top: -40px;
    margin-right: -18px;
}

.lesson-btn-keep-going {
    width: 300px;
    height: 60px;
    font-size: 20px;
    color: white;
}

.lesson-btn-education {
    border: 6px solid #f0f0f0;
}

.lesson-link {
    text-decoration: underline;
}

.lesson-hr {
    border: none;
    height: 5px;
    width: 100px;
    /* Set the hr color */
    color: #f0f0f0; /* old IE */
    background-color: #f0f0f0; /* Modern Browsers */
}

.lesson-text-white {
    color: white;
}

.lesson-text-blue {
    color: #48B5E4;
}

.modal .modal-body.enditp-halfway,
.modal .modal-body.itp-gotnew-badges {
    padding: 0 100px 50px;
}

.let-begin-content .header-itp {
    font-size: 20px;
}

.let-begin-content .content-itp {
    font-size: 16px;
}

    .let-begin-content .content-itp.font18 {
        font-size: 18px;
    }

.let-begin-button {
    color: white;
    padding: 10px 35px;
    text-align: center;
    font-size: 20px;
}

    .let-begin-button:hover {
        color: white;
    }

.w-700 {
    width: 700px;
}

.w-800 {
    width: 800px;
}

.w-400 {
    width: 360px;
}

.h-220 {
    height: 220px;
}

.modal-body.end-itp img,
.modal-body.end-itp a,
.modal-body.end-itp span {
    display: block;
    margin: 0 auto;
}

.modal-body.end-itp .stars a {
    margin: 0;
}

.modal-body.end-itp img {
    margin-top: 20px;
}

.modal-body.end-itp .badge-name {
    color: #273170;
    padding: 10px 0 25px 0;
    font-weight: bold;
}

.modal-body.end-itp .end-button {
    width: 40%;
    margin-bottom: 20px;
    color: white;
    padding: 10px 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

/* ITP Overview page */
.page-sidebar .sidebar-menu.itp-overview-menu .menu-items > li > a > .title {
    white-space: normal;
    width: 90%;
}

.itp-border {
    border: 4px solid #f0f0f0 !important;
    padding-top: 5px;
    padding-bottom: 15px;
    min-height: 205px;
    background-color: white;
}

.itp-vertical-top {
    /*width: 15%;*/
    vertical-align: top;
}

.itp-img {
    width: 75px;
    margin-bottom: 5px;
}

.itp-text-center {
    text-align: center !important;
}

.itp-h1 {
    line-height: 59px !important;
    font-size: 55px !important;
}

.itp-h2 {
    line-height: 40px;
}

.itp-h4 {
    font-size: 20px;
    margin-bottom: 20px;
}

.itp-width-50-per {
    width: 50%;
}

.itp-input-group-addon {
    background-color: transparent;
    border-left: none;
    border-top: none;
    color: #273170;
    font-size: 22px;
}

.input-group input.itp-input:focus {
    background-color: transparent;
}

.display-inline {
    display: inline !important;
}

.display-inline-block {
    display: inline-block;
}

.display-block {
    display: block;
}

.display-grid {
    display: grid;
}

.no-padding {
    padding: 0 !important;
    margin: 0 !important;
}

.canvas-holder {
    height: 115px;
    width: 220px;
    position: relative;
    left: -46px;
}

.emerge-dark-blue {
    color: #273170;
}

.chart-completion {
    font-size: 28px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 40%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.chart-title {
    font-size: 11px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 57%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.itp-list-group {
    text-align: left;
    padding-left: 0;
    list-style-type: none;
    font-size: 14px;
}

    .itp-list-group li {
        background-image: url('../img/big-black-dot.jpg');
        background-repeat: no-repeat;
        background-position: 10px 55%;
        background-size: 5px 5px;
        padding-left: 19px;
        line-height: 20px !important;
    }

.itp-bold {
    font-weight: bolder !important;
}

.itp-hr {
    margin-top: -5px;
    border-width: 3px;
    width: 45px;
    border-color: #273170;
    border-radius: 5px;
}

.itp-hr-lg {
    border-color: #f0f0f0;
    border-width: 2px;
}

.itp-strong {
    font-weight: lighter;
    font-size: 75px;
}

.itp-module-box {
    display: inline-block;
    width: 140px;
    margin-right: 25px;
    border: 4px solid #f0f0f0 !important;
    padding: 10px;
    text-align: center;
}

    .itp-module-box span,
    .itp-module-box button {
        display: block;
        margin: auto;
    }

    .itp-module-box .itp-title {
        font-weight: bold;
        color: #273170;
        height: 80px;
        line-height: 17px;
    }

    .itp-module-box .itp-time {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .itp-module-box .itp-btn {
        border-radius: 0;
        width: 80px;
        padding: 3px 0;
    }

    .itp-module-box .itp-btn-relearn {
        background-color: #fff;
        color: #48B5E4;
    }

        .itp-module-box .itp-btn-relearn:hover {
            background-color: #fff;
            color: #273170;
        }

.no-margin {
    margin-left: 0;
    margin-right: 0;
}

.itp-green {
    color: #8BC53F;
}

.itp-icon {
    position: absolute;
    top: -12px;
    right: -9px;
    font-size: 22px;
    background-color: #fff;
}
/*sales order Fullfilment*/
.badge.sale-order-pending-approval-color {
    background-color: #f9e300;
    color: #626262;
    text-transform: capitalize;
}

.badge.sale-order-not-approved-color {
    background-color: #b0565f;
    color: white;
    text-transform: capitalize;
}
.badge.custom-status{
    color: white
}

.sale-order-inproress-color {
    background-color: #d0d2d3;
    text-transform: capitalize;
}

.sale-order-partially-delivered-color {
    background-color: #28336f;
    color: white;
    text-transform: capitalize;
}

.sale-order-delivered-color {
    background-color: #47b4e3;
    color: white;
    text-transform: capitalize;
}

.sale-order-partially-issued-color {
    background-color: #c69c6d;
    color: white;
    text-transform: capitalize;
}

.sale-order-issued-color {
    background-color: #603813;
    color: white;
    text-transform: capitalize;
}

.sale-order-archived-color {
    background-color: #4d4d4d;
    color: white;
    text-transform: capitalize;
}
/*sales order Payment*/
.sale-order-paid-color, .b2bEcomStatus--active {
    background-color: #47b4e3;
    color: white;
    text-transform: capitalize;
}

.sale-order-unpaid-color, .b2bEcomStatus--inactive {
    background-color: #d0d2d3;
    text-transform: capitalize;
}

.sale-order-partial-paid-color {
    background-color: #28336f;
    color: white;
    text-transform: capitalize;
}

.sale-order-partial-issued-color {
    background-color: #C69C6D;
    color: white;
    text-transform: capitalize;
}

.sale-order-issued-color {
    background-color: #603813;
    color: white;
    text-transform: capitalize;
}

.sale-order-pending-color {
    background-color: #EDE5B0;
    color: white;
    text-transform: capitalize;
}

.sale-order-failed-color {
    background-color: #ffc4c4;
    color: white;
    text-transform: capitalize;
}

/* Document Status Color */
.status-new-color {
    color: #d0d2d3;
    text-transform: capitalize;
}

.status-pending-approval-color {
    color: #f9e300;
    text-transform: capitalize;
}

.status-not-approved-color {
    color: #b81e2d;
    text-transform: capitalize;
}

.status-approved-color {
    color: #28336f;
    text-transform: capitalize;
}

.status-completed-color {
    color: #47b4e3;
    text-transform: capitalize;
}

.status-manual-closed-color {
    color: #4d4d4d;
    text-transform: capitalize;
}

/* ---------------------------------------------- */

.badge.badge-yellow{
    background-color: #f9e300;
    color: #626262;
    text-transform: capitalize;
}
.badge.badge-light-blue{
    background-color: #47b4e3;
    color: white;
    text-transform: capitalize;
}

/*sales order status*/
.sale-order-new-color {
    color: #d0d2d3;
    text-transform: capitalize;
}

.sale-order-pending-approval-color {
    color: #f9e300;
    text-transform: capitalize;
}

.sale-order-not-approved-color {
    color: #b81e2d;
    text-transform: capitalize;
}

.sale-order-approved-color {
    color: #28336f;
    text-transform: capitalize;
}

.sale-order-completed-color {
    color: #47b4e3;
    text-transform: capitalize;
}

.sale-order-manual-closed-color {
    color: #4d4d4d;
    text-transform: capitalize;
}

.sales-order-font {
    font-weight: bold;
    font-size: 11px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 4px;
}
/*purchase order Receive*/
.purchase-in-progress-color {
    background-color: #d0d2d3;
}

.purchase-received-color {
    background-color: #47b4e3;
    color: white;
}

.purchase-partial-received-color {
    background-color: #28336f;
    color: white;
}

.purchase-partial-issued-color {
    background-color: #C69C6D;
    color: white;
}

.purchase-issued-color {
    background-color: #603813;
    color: white;
}
/*purchase order Status*/
.purchase-new-color {
    color: #d0d2d3;
}
.rfq-partially-color {
    color: #28336f;
}

.purchase-in-transit-color {
    color: #70e1d8;
}

.purchase-pending-approval-color {
    color: #f9e300;
}

.purchase-not-approved-color {
    color: #b81e2d;
}

.purchase-approved-color {
    color: #28336f;
}

.purchase-completed-color {
    color: #47b4e3;
}
.purchase-manual-closed-color {
    color: #4d4d4d;
    text-transform: capitalize;
}
.badge.purchase-manual-closed-color {
    background-color: #4d4d4d;
    color: white;
    text-transform: capitalize;
}

/*Shipment*/
.delivery-order-new {
    background-color: #d0d2d3;
}

.delivery-order-delivered {
    background-color: #47b4e3;
    color: white;
}
.delivery-order-partial-dispatched {
    background-color: #005A54;
    color: white;
}
.delivery-order-dispatched {
    background-color: #00A79D;
    color: white;
}
.delivery-order-ecart {
    background-color: #2A336A;
    color: white;
}
.delivery-order-staging {
    background-color: #27326F;
    color: white;
}

/*Exchange Return*/
.exchange-return-exchanged { /*1*/
    background-color: #47b4e3;
    color: white;
}

.exchange-return-returned {
    background-color: #28336f;
    color: white;
}
/*Inventory Acquision 1 new*/
.inventory-acquisition-new {
    background-color: #d0d2d3;
}

.inventory-acquisition-received {
    background-color: #47b4e3;
    color: white;
}

/*Quotation*/
.quotation-new {
    color: #d0d2d3;
}

.quotation-pending-approval {
    color: #f9e300;
}

.quotation-approved {
    color: #28336f;
}

.quotation-not-approved {
    color: #b81e2d;
}

.quotation-issued {
    color: #603813;
}

.quotation-closed {
    color: #c69c6d;
}

.quotation-custom {
    color: #2f2f2f;
}

/*Customer Invoice*/
.over-due-date-color {
    color: #b81e2d;
}

.due-date-color {
    color: #626262;
}
/** DASHBOARD CHECK LIST */
.checklist {
    /*border: 1px solid #d0d2d3;*/
    margin-left: 5px;
    background-color: #fff;
    box-shadow: 3px 3px 32px -14px rgba(0,0,0,0.75);
}

.checklist-header {
    padding: 10px;
    border-bottom: 1px solid #d0d2d3;
}

    .checklist-header .header-text {
        font-weight: bolder;
        text-transform: uppercase;
    }

        .checklist-header .header-text.in-active {
            color: rgba(44,44,44,.35);
        }

    .checklist-header .header-sentence {
        float: right;
        font-weight: bold;
    }

.checklist ul {
    margin: 0;
    padding: 0;
}

    .checklist ul li {
        padding: 10px 10px 10px 45px;
        list-style-type: none;
        background: url('../img/checklist/icon-10.svg') no-repeat;
        background-size: 25px;
        background-position: 10px center;
    }

        .checklist ul li:nth-child(2n+1) {
            background-color: #ebebeb;
        }

        .checklist ul li a {
            color: #626262;
            text-decoration: underline;
            font-weight: bold;
        }

        .checklist ul li .fa.fa-times {
            float: right;
        }

.checklist .checklist-none {
    background-image: none;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid rgba(230,230,230,.7);
}

.checklist .checklist-none {
    background-image: none;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid rgba(230,230,230,.7);
}

    .checklist .checklist-none .table-header {
        text-transform: uppercase;
        font-weight: 600;
        font-family: Montserrat;
        font-size: 13px;
        vertical-align: middle;
        color: rgba(44,44,44,.35);
    }
    
.table-fixed-header          { overflow: auto; height: 100px; }
.table-fixed-header thead th { position: sticky; top: 0; z-index: 1; background-color: white; }

.table-header {
    text-transform: uppercase;
    font-weight: 600;
    font-family: Montserrat;
    font-size: 13px;
    vertical-align: middle;
    color: rgba(44,44,44,.35);
}
.table-medium-description {
    font-weight: 600;
    font-family: Montserrat;
    font-size: 14px;
}
/* When the whole check list is finished, temporarily override grid layout because we don't do recent activities yet.*/
.checklist-finished .row.col-sm-6 {
    padding: 0 5px;
}

/* Start - New Dashboard Checklist */
.newCheckList {
    background-color: white;
    margin: 0 15px;
    box-shadow: 0 2px 2px 0 rgba(128, 130, 133, 0.05), 0 3px 13px 0 rgba(0, 0, 0, 0.19);
}

    .newCheckList .dashboard-checklist {
        opacity: 0;
    }

        .newCheckList .dashboard-checklist .customSlickBtn {
            background: none;
            border: none;
            position: absolute;
            top: calc(50% - 30px);
            font-size: 60px;
            z-index: 1;
            opacity: 0.4;
        }

            .newCheckList .dashboard-checklist .customSlickBtn:hover {
                opacity: 1;
            }

            .newCheckList .dashboard-checklist .customSlickBtn.slick-disabled {
                opacity: 0;
            }

            .newCheckList .dashboard-checklist .customSlickBtn.slick-left {
                left: 0px;
            }

            .newCheckList .dashboard-checklist .customSlickBtn.slick-right {
                right: 0px;
            }

    .newCheckList .item {
        text-align: center;
        /*border-right: 1px solid #ddd;*/
        position: relative;
        outline: 0;
        padding: 15px;
        display: inline-block;
        position: relative;
    }

        .newCheckList .item::after {
            content: '';
            position: absolute;
            border-right: 1px solid #ddd;
            top: 0px;
            height: 100%;
            right: 0px;
            min-height: 300px;
        }

        .newCheckList .item:last-of-type {
            border-right: none;
        }

        .newCheckList .item .stepTitle {
            display: block;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
        }

        .newCheckList .item img {
            display: block;
            margin: 0px auto;
            text-align: center;
        }

        .newCheckList .item .checkListContent {
            display: block;
            white-space: normal;
            margin-top: 5px;
        }

        .newCheckList .item .durationTitle {
            display: block;
            color: #626262;
            opacity: .7;
        }

        .newCheckList .item .fa.fa-times-circle {
            position: absolute;
            right: 15px;
            top: 15px;
        }
/* End - New Dashboard Checklist */

h5#dropshipping-tooltip .tooltip {
    top: 15px;
    width: 200px;
}

.ddl-text-font {
    padding: 0 20px;
}

.my-override-dropdown.dropdown-menu > li > a {
    padding: 0 30px;
    border-radius: 3px;
    text-align: left;
    font-size: 13px;
    display: inline;
    margin-left: -44px;
}

.my-override-dropdown-paymentType.dropdown-menu > li > a {
    padding: 0 30px;
    border-radius: 3px;
    text-align: left;
    font-size: 13px;
    display: inline;
    margin-left: -10px;
}

/* Tai: custom uom css*/
.uom-span-p-left {
    padding: 8px;
}

.padding-zero .uom-span-p-left {
    padding: 0px;
}

.emerge-upload-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .emerge-upload-input + label {
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        color: white;
        display: inline-block;
        padding: 10px 28px 10px 28px;
        line-height: 23px;
        border-radius: 3px;
        background-color: #48B5E4;
    }

        .emerge-upload-input + label:hover {
            background-color: #27326e;
            cursor: pointer;
        }

.custom-textarea {
    white-space: pre-line !important;
}
.no-wrap {
    white-space: nowrap;
}
.emerge-tab {
    width: 50%;
}

/*CSS for disabled texts on modal*/
.emerge-dark-textform .form-control[disabled],
.emerge-dark-textform .form-control[readonly],
.emerge-dark-textform fieldset[disabled] .form-control {
    color: black;
}
.p-0 {
    padding: 0px !important;
}

.p-l-13 {
    padding-left: 13px;
}

.p-r-13 {
    padding-right: 13px;
}

.p-l-30 {
    padding-left: 30px;
}

.p-r-30 {
    padding-right: 30px;
}

.p-t-30 {
    padding-top: 30px;
}

.p-b-30 {
    padding-bottom: 30px;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-b-40 {
    padding-bottom: 40px !important;
}

.checkbox.custom-checkbox label::after {
    width: 12px;
    height: 12px;
}

.center-block {
    margin: 0 auto;
    display: block;
}

/* EMERGE tags input overriding style */
tags-input.emerge-tags .host {
    margin: 0;
    min-height: 30px;
}

tags-input.emerge-tags .tags {
    border-color: #fff #fff #E0E0E0;
    border-radius: 5px;
    box-shadow: none;
}

    tags-input.emerge-tags .tags.focused {
        border-color: #FFF #FFF #66afe9;
    }

        tags-input.emerge-tags .tags.focused,
        tags-input.emerge-tags .tags.focused input {
            background-color: rgb(240, 240, 240);
        }

            tags-input.emerge-tags .tags.focused .tag-item {
                background-color: #fff;
            }

tags-input.emerge-tags .tag-item {
    background-color: #e6e6e6;
    background-image: none;
    border-style: none;
    border-radius: 8px;
    color: rgb(98, 98, 98);
    padding: 3px 8px 0 8px;
    height: 23px;
}

tags-input.emerge-tags .remove-button {
    position: relative;
    top: -1px;
    left: -5px;
    font-size: 1px;
}

    tags-input.emerge-tags .remove-button:before {
        font-family: FontAwesome;
        content: "\f00d";
        font-size: 12px;
        color: #626262;
    }

tags-input.emerge-tags .editable {
    border-bottom: none;
    padding-top: 0;
}

.no-border-bottom{
    border-bottom: none !important;
}
tags-input.emerge-tags .editable-unsaved {
    font-weight: normal;
}

tags-input.emerge-tags input.ng-dirty.ng-valid {
    border: none;
}

    .customized-tags-foremail .select2-container.select2-container-multi {
        width: 100%;
    }

    .customized-tags-foremail .select2-choices {
        padding: 0px !important;
        border: none;
    }

        .customized-tags-foremail .select2-choices .select2-search-field {
            padding: 0px;
        }

            .customized-tags-foremail .select2-choices .select2-search-field input {
                padding: 0px;
            }

                .customized-tags-foremail .select2-choices .select2-search-field input:focus {
                    padding: 0 5px;
                }

.editable-container.popover.top > .arrow:after {
    border-top-color: #fff;
}

.product-variant-overview-actions .fa {
    cursor: pointer;
    margin-left: 15px;
}

.product-variant-overview-actions .fa-pencil {
    color: #48B5E4;
}

.product-variant-option-define input.form-control {
    height: 34px;
}

.product-variant-option-define tags-input {
    float: left;
    width: 90%; /* Fallback for calc() */
    width: calc(100% - 30px);
}

.product-variant-option-define i.fa-trash {
    cursor: pointer;
    margin-top: 10px;
}

.product-variant-combination-display {
    background-color: #e6e6e6;
    background-image: none;
    border-style: none;
    border-radius: 8px;
    color: rgb(98, 98, 98);
    padding: 0 8px;
    margin: 0 3px 3px 3px;
    line-height: 23px;
    float: left;
}

    .product-variant-combination-display .remove-button:before {
        font-family: FontAwesome;
        content: "\f00d";
        font-size: 12px;
        color: #626262;
    }

.table tbody tr.variant-duplicated td {
    border-bottom: none;
}

tr.variant-duplicated-msg .fa-exclamation-triangle {
    color: #fbd800;
}

.product-variant-combination-select {
    float: left;
    width: 150px;
}

.product-variant-actions .btn {
    min-width: 100px;
    font-size: 14px;
}

.product-variant-actions .loaded-btn {
    cursor: none;
    pointer-events: none;
}

.product-variant-actions .more-info-btn {
    color: #48B5E4;
    border-color: #48B5E4;
}

.product-variant-actions i.fa {
    cursor: pointer;
    margin-bottom: 10px;
    padding-left: 18px;
}

.displaying-product-variant {
    margin-top: 40px;
}

    .displaying-product-variant.no-variant-selected h2 span {
        color: #a7a9ac;
    }

    .displaying-product-variant.no-variant-selected span .fa-info-circle {
        color: #48B5E4;
        position: relative;
        bottom: -5px;
        padding: 5px;
    }

    .displaying-product-variant h2 span {
        color: #48B5E4;
    }

/** convert-to-label used for input that is disabled, we convert it to a label.*/
.convert-to-label {
    pointer-events: none;
    cursor: default;
}

input.convert-to-label {
    border: none;
}

.convert-to-label .select2-container .select2-choice,
.convert-to-label.select2-container .select2-choice {
    border: none;
}

    .convert-to-label .select2-container .select2-choice .select2-chosen,
    .convert-to-label.select2-container .select2-choice .select2-chosen {
        color: #10cfbd !important;
        font-size: 17px;
        margin: -4px 0 0 -6px;
    }

    .convert-to-label .select2-container .select2-choice .select2-arrow,
    .convert-to-label.select2-container .select2-choice .select2-arrow,
    .convert-to-label.select2-container.select2-allowclear .select2-choice abbr.select2-search-choice-close {
        display: none;
    }

.select2-results .select2-disabled {
    background: inherit;
}

.ddl-product-item {
    padding: 3px 0 0 0;
}

    .ddl-product-item > img.icon-12 {
        margin-top: -3px;
    }

.ddl-product-variant-item {
    padding-left: 15px;
}

    .ddl-product-variant-item .fa-circle {
        font-size: 8px;
        margin-right: 5px;
        position: relative;
        top: -2px;
    }

.product-images-panel img {
    float: left;
    margin: 5px;
    border: 1px solid #d2d4d5;
}

.product-variant-symbol {
    width: 12px;
    height: 12px;
    background: url('../img/product-variant-symbol.svg') no-repeat;
    display: block;
}

.report .product-variant-symbol {
    float: left;
    margin: 2px 0 0 7px;
}



.report .table.table-striped tbody tr.group-row td {
    background-color: #eaeaea !important;
}

.report .table#tableInventoryList tbody tr.group-row td {
    border-top: 1px solid #666;
}

.report .table.table-striped tbody tr.warehouse-row td {
    background-color: #eaeaea !important;
    padding: 8px 8px !important;
}

.report .table.table-striped tbody tr.warehouse-spacing td {
    padding: 5px 0px !important;
}

.report .table.table-striped tbody tr.is-parent-product td {
    background-color: #fff !important;
}

.report .table tbody tr.is-product-variant td {
    background-color: #edf8fc !important;
}

.report .table tbody tr.is-product-variant.is-collapsed {
    display: none;
}

.report td.expand-symbols i.fa {
    cursor: pointer;
    color: #b6b6b6;
    font-size: 17px;
    margin-top: 2px;
}

/* Override ui notification css */
.ui-notification.success.customNotification {
    background: white;
    color: black;
    width: 355px;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}

    .ui-notification.success.customNotification a {
        font-family: "Segoe UI", Arial, sans-serif !important;
        font-size: 14px;
    }


    .ui-notification.success.customNotification .btn {
        padding-left: 20px;
        padding-right: 25px;
    }

    .ui-notification.success.customNotification i {
        display: none;
    }

        .ui-notification.success.customNotification i.fa-check-circle {
            color: #39B54A;
            font-size: 35px;
            display: block;
        }

    .ui-notification.success.customNotification .close-notification {
        position: absolute;
        top: -26px;
        right: -9px;
        display: block;
        font-size: 20px;
        color: #b42d2d;
    }

    .ui-notification.success.customNotification i.notificationIcon {
        font-size: 35px;
        display: block;
    }

    .ui-notification.success.customNotification i.warningIcon {
        color: #FACE00;
    }

/*Override ui notification index*/
.ui-notification {
    z-index: 10000002;
}


/* Highlight.js */
.highlight {
    padding: 1px 4px;
    margin: 0 -4px;
    background-color: #FFFBB2;
    -moz-border-radius: 5px; /* FF1+ */
    -webkit-border-radius: 5px; /* Saf3-4 */
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.itp-module-box span.highlight {
    display: inline-block;
}

/* Integration Xero */
@font-face {
    font-family: proxima-nova;
    src: url(ProximaNova-Light.ttf);
}

    .integration .row h5.integration-breadcrumb {
        margin: 0px;
        padding: 8px 0px;
    }

    .integration div#xeroContainer {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        width: 100%;
    }

        .integration div#xeroContainer h5 {
            font-weight: 400;
        }

    .integration .nav-tabs.nav-tabs-linetriangle li > a {
        padding: 15px 20px 15px 15px;
    }

    .integration table#linkage tbody tr td {
        vertical-align: middle;
    }

    .integration table#linkage tfoot tr td {
        padding-top: 25px;
    }

    .integration table#linkage tbody tr:first-child {
        border-top: 3px solid #D0D2D3;
    }

    .integration table#linkage tr th {
        font-weight: 500;
        color: #808184;
        padding-left: 0px !important;
    }

    .integration table#linkage tr td {
        padding-left: 0px !important;
    }

    .integration div.row.linkage-container div.col-md-12 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .integration div.row.transaction-container div.col-md-12 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .integration small.text-prompt {
        display: inline-block;
    }

    .integration label.i-switch.bg-success-ltest[disabled="disabled"] i {
        cursor: default;
    }

nav.integration {
    background-color: #fff;
}

.integration div#xeroTabs .tab-content,
.integration div#quickBooksTabs .tab-content,
.integration div#shipStationTabs .tab-content {
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 100px; /** Prevent the document type filter (popover) from getting hidden */
    border: none;
}

.connectToQuickBooksBtn {
    background-image: url('../img/quickBooksIntegration/Connect_to_QuickBooks/C2QB_green_btn_tall_default.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 274px;
    height: 48px;
    border: none;
}

    .connectToQuickBooksBtn:hover {
        background-image: url('../img/quickBooksIntegration/Connect_to_QuickBooks/C2QB_green_btn_tall_hover.png');
    }

.quickBooksConnectAccount {
    background-image: url('../img/quickBooksIntegration/qbConnectAcountDefault.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 150px;
    height: 50px;
    border: none;
}

    .quickBooksConnectAccount:hover {
        background-image: url('../img/quickBooksIntegration/qbConnectAcountDefault_hover.png');
    }

.quickBooks--instruction {
    border: 2px solid #EBEBEB;
    border-radius: 3px 3px;
    padding: 10px;
}

    .quickBooks--instruction .readInstructionIcon {
        display: table-cell;
        vertical-align: top;
        padding-top: 5px;
    }

    .quickBooks--instruction .introText {
        display: table-cell;
        padding-left: 10px;
    }

.integration .description {
    background-color: #EBEBEB;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.integration .table-header {
    font-weight: bold;
    margin: 10px 20px !important;
}

.integration table#transactionTable thead tr th {
    padding-left: 15px;
}

.integration .text-muted {
    color: #AFB1B3;
}

.integration .text-muted-bold {
    color: #A6A8AB;
    font-weight: bolder;
}

.integration table#transactionTable tbody tr td {
    padding-left: 15px;
    vertical-align: middle;
}

    .integration table#transactionTable tbody tr td input[type=checkbox] {
        margin-left: 3px;
    }

.integration .pagination {
    margin-left: 15px;
}

.integration-connected-to {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
}

.integration .linkage-container .form-group {
    margin-bottom: 20px;
}

.integration .linkage-container .control-label {
    margin-bottom: 0px;
    text-transform: none;
}

.integration .small-description {
    display: block;
}

    .integration .small-description.text-muted.text-muted-margin-left {
        margin-left: 55px;
    }

.integration .instruction-block {
    border: 2px solid #EBEBEB;
    border-radius: 3px 3px;
    width: 100%;
    padding: 10px;
    line-height: 22px;
    position: relative;
}

    .integration .instruction-block .readInstructionIcon {
        position: absolute;
        top: 18px;
    }

    .integration .instruction-block .introText {
        padding-left: 40px;
    }

    .integration .instruction-block div p {
        margin-bottom: 5px;
    }

        .integration .instruction-block div p a {
            text-decoration: underline;
            font-weight: bold;
        }

.integration .create-new-store {
    padding-top: 9px;
    padding-bottom: 10px;
}

.integration .description .btn-create-new-store {
    padding: 5px;
    margin-right: 38px;
}

.integration .description .btn-return-to-store {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 5px;
    margin-right: 38px;
}

.integration .btn-disable {
    padding: 5px 30px;
}

.integration .row h5 {
    font-weight: normal;
    margin-bottom: 0px;
}

.integration .row {
    margin-left: -7px;
    margin-right: -7px;
}

    .integration .row [class*=col-]:first-child {
        padding-left: 7px;
    }

    .integration .row [class*=col-]:last-child {
        padding-right: 7px;
    }

.integration .form-group .checkbox label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    text-transform: none;
    line-height: 18px !important;
    font-weight: normal;
    word-wrap: break-word;
    white-space: normal;
}

.integration .form-group input.form-control {
    margin-top: -5px;
}

    .integration .form-group input.form-control[readonly] {
        border-bottom: none;
        background-color: #fff;
        padding-left: 0px;
        padding-right: 0px;
    }

.integration .form-group .checkbox[readonly] {
    pointer-events: none;
    cursor: not-allowed;
}

.integration .row > [class*=col-] {
    padding-left: 7px;
    padding-right: 7px;
}

.integration .check-box label {
    text-transform: none !important;
}

.span-enable {
    color: #27C24C;
}

.emerge-navigation {
    z-index: 1040;
    width: 100%;
    padding: 15px 0px;
}

.custom-popover.advanced-search .popover {
    /* EMG-1189 Increase advance search pop up width */
    width: 500px;
    max-width: 500px;
}
.custom-popover .popover-content {
    padding: 10px 0px;
}

.custom-popover.advanced-search .popover-content {
    padding: 10px;
}

.custom-popover .popover-title {
    padding: 0px 10px;
}

.emerge-navigation .filter-search {
    position: absolute;
    top: 10px;
    right: 25px;
}

.emerge-navigation .form-control:focus {
    background-color: white;
}

.emerge-navigation .input-group .search-button,
.emerge-navigation .input-group-btn {
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.emerge-navigation .barcodeScanningWrapper {
    width: 100%;
}

    .emerge-navigation .barcodeScanningWrapper img {
        display: block;
        margin: 0 auto;
    }

.barcodeScanningWrapper img.deactive {
    filter: invert(39%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(86%) contrast(89%);
}

.height-35 {
    height: 35px;
}

.h-400 {
	height: 400px;
}

.w-300 {
    width: 300px;
}

.border-left-emerge {
    border-left: 1px solid #ddd;
}

.border-right-emerge {
    border-right: 1px solid #ddd;
}

.p-t-5 {
    padding-top: 5px;
}

.p-t-7 {
    padding-top: 7px;
}

.p-b-7 {
    padding-bottom: 7px;
}

.p-7-10 {
    padding: 7px 10px;
}

/*Custom CSS for qty*/
.custom-qty-change .title {
    min-width: 45px;
}

.custom-qty-change .oldqty {
    min-width: 35px;
    text-align: right;
}

.custom-qty-change .arrow {
    text-align: center;
    min-width: 30px;
    text-align: right;
}

.custom-qty-change .newqty {
    min-width: 35px;
    text-align: right;
}

ul.so-listOfActions {
    padding: 0;
    list-style-type: none;
    text-align: right;
    margin: 0px;
}

ul.so-listOfActions > div > li,
ul.so-listOfActions > li {
    display: inline-block;
}

    ul.so-listOfActions > li > .btnAction,
    ul.so-listOfActions > li > button,
    ul.so-listOfActions > li > a {
        float: right;
    }

ul.so-listOfActions > li > div.btnAction::before {
    content: '';
    height: 27px;
    background: #A4DAF2;
    width: 1px;
    position: absolute;
    right: 26px;
    z-index: 1;
    top: 4px;
}

ul.so-listOfActions > li > div.btnAction.btnMore::before {
    background-color: #cccccc;
}

ul.so-listOfActions > li > a {
    display: block;
    /*background: transparent;*/
    padding: 0 10px 10px 10px;
    margin: 0;
}

ul.so-listOfActions > li > a.btnLink,
ul.so-listOfActions > li > a#backToView {
    padding: 6px 12px 6px 12px;
}

ul.so-listOfActions > li > div.btnAction > ul {
    width: 250px;
    padding: 15px 25px;
}

ul.so-listOfActions > li > div.btnAction ul.dropdown-menu {
    z-index: 1044;
}

ul.so-listOfActions > .deposit-note-dd > div.btnAction ul.dropdown-menu {
    width: 255px;
}

ul.so-listOfActions > li > div.btnAction.btnMore > ul {
    width: auto;
}

ul.so-listOfActions > li > div.btnAction.btnBackOrder > ul {
    width: 275px;
}

ul.so-listOfActions > li > div.btnAction > ul > li:last-child {
    padding-bottom: 0px;
}

ul.so-listOfActions > li > div.btnAction > ul > li > a {
    padding: 0px;
}

ul.so-listOfActions > li > div.btnAction.btnGroup {
    display: inline-flex;
    border-radius: 3px;
    padding: 0;

    &::before {
        content: '';
        height: 27px;
        background: #A4DAF2;
        width: 1px;
        position: absolute;
        right: 37px;
        z-index: 1;
        top: 4px;
    }

    & .btn-left, & .btn-right {
        outline: none;
        border: none !important;
        background-color: #fff;
    }
    & .btn-left:disabled, & .btn-right:disabled {
        color: #BCBEC0;
    }
    & .btn-left {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }
    & .btn-right {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
        padding-right: 14px;
        padding-left: 14px;
    }
    &.emerge-btn-light-blue,
    &.emerge-btn-light-blue:focus {
        border: 1px solid #48B5E4 !important;
        & .btn-left, & .btn-right {
            color: #48B5E4 !important;
            background-color: white !important;
        }
    }
    &.emerge-btn-light-blue:hover {
        border: 1px solid transparent !important;
        & .btn-left, & .btn-right {
            color: #48B5E4 !important;
            background-color: #DAF0FA !important;
        }
    }
}

@media screen and (min-width: 1350px) and (max-width: 1570px) {
    /* https://emergeapp.atlassian.net/browse/EMG-2462 
    PETER:edit general info shows => action buttons take too much space
    Decrease font-size in small screen => prevent buttons drop to next line & hiding tabs
    Note: 1366px in window resizer (viewport mode) is equivalent to 1350px in window resizer (window mode)
    */
    ul.so-listOfActions.so-listOfActions-font-sm > li .btn,
    ul.so-listOfActions.so-listOfActions-font-sm > li button {
        font-size: 11px;
    }
}

@media screen and (min-width: 1350px) and (max-width: 1366px) {
    /* https://emergeapp.atlassian.net/browse/EMG-2462 Invoice details page, after decrease font-size, action button still break to next line => decrease padding */
    ul.so-listOfActions.so-listOfActions-font-sm > li > #invoiceDetailsEditGeneralInfoBtn {
        padding-left: 7px;
        padding-right: 7px;
    }
}

.override-zindex #select2-drop,
.modal-open .select2-drop-active {
    z-index: 1060;
}

td.last-adjusted span {
    margin-right: 15%;
    line-height: 30px;
}

td.last-adjusted > div {
    margin-right: 15%;
}

.custom-moreInfoBtn {
    top: -45px;
    position: relative;
}

ul.panel-contact.custom-contact li {
    padding-top: 15px;
    padding-bottom: 15px;
}

.swal2-overlay {
    z-index: 10000001;
}

.swal2-modal {
    z-index: 10000001;
}

    .swal2-modal h2 {
        font-size: 24px;
        line-height: 25px;
        margin-bottom: 25px;
    }

.swal2-content {
    font-size: 16px;
    font-weight: normal;
}

.swal2-icon.swal2-info {
    color: #48B5E4;
    border-color: #48B5E4;
}

.swal2-icon.swal2-question {
    color: #48B5E4;
    border-color: #48B5E4;
}

.swal2-modal.greenConfirmationButton .swal2-confirm {
    background-color: #70E3D8 !important;
    border-color: #70E3D8 !important;
    font-size: 16px;
}

.swal2-modal.redConfirmationButton .swal2-confirm {
    background-color: #c1272d !important;
    border-color: #c1272d !important;
    font-size: 16px;
}

.end-itp .swal2-icon {
    margin-bottom: 0px;
}

    .end-itp .swal2-icon.swal2-success::after,
    .end-itp .swal2-icon.swal2-success::before {
        position: initial;
    }

/*body #intercom-container .intercom-launcher {
    bottom: 10px;
    right: 20px;
}*/

/* Customize Style for Selectize multiple selection */
.selectize-control.multi .selectize-input.items .item,
.selectize-control.multi.emerge-disable-selected .selectize-input.items .item.active {
    background-color: #e6e6e6;
    background-image: none;
    border-style: none;
    border-radius: 8px;
    color: rgb(98, 98, 98);
    padding: 2px 8px 0 8px;
    min-height: 23px;
    box-shadow: none;
    text-shadow: none;
}

.selectize-control.multi.plugin-remove_button [data-value] {
    padding-right: 8px !important;
    padding-left: 24px !important;
}

    .selectize-control.multi.plugin-remove_button [data-value] .remove,
    .selectize-control.multi.plugin-remove_button [data-value] .remove:hover {
        color: #e6e6e6; /* Hide the default button to display our FontAwesome icon. */
        border-left: none;
        left: 0;
        right: auto;
        padding: 1px 0 0 7px;
        background: inherit;
        border-radius: 8px;
    }

        .selectize-control.multi.plugin-remove_button [data-value] .remove:before {
            font-family: FontAwesome;
            content: "\f00d";
            font-size: 12px;
            color: #626262;
        }

.selectize-control .selectize-input.disabled {
    opacity: 1;
}
/* END Customize Style for Selectize multiple selection */

table#inventoryReminderTable {
    margin-top: 0px;
    margin-bottom: 0px;
}

    table#inventoryReminderTable thead tr th {
        padding-left: 20px !important;
    }

    table#inventoryReminderTable tbody tr td {
        padding-left: 20px !important;
    }

    table#inventoryReminderTable.white-bg {
        background-color: #fff;
    }

        table#inventoryReminderTable.white-bg tbody tr td {
            background-color: #fff !important;
        }

    table#inventoryReminderTable.scroll-table tbody {
        display: block;
        max-height: 500px;
        overflow: auto;
    }

        table#inventoryReminderTable.scroll-table thead, table#inventoryReminderTable.scroll-table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

div#reorderQty .checklist-header {
    border-bottom: 1px solid #d0d2d3;
}

table#uomTable .p-l-18 {
    padding-left: 18px;
}

/* Override overflow attribute for selectize ddl */
.custom-selectize.table.table-condensed tbody tr td {
    overflow: visible;
}

.table.table-condensed tbody tr td .selectize-control,
.table.table-condensed tbody tr td .selectize-control .selectize-dropdown,
.table.table-condensed tbody tr td .selectize-control .selectize-dropdown div.selectize-dropdown-content {
    white-space: normal;
    vertical-align: middle;
    overflow: visible;
}

.treeview .table tbody tr td i{
    width: 15px;
}

td .selectize-input {
    padding-bottom: 4px;
    margin-top: 2px;
    padding-top: 3px;
}

.selectize-input { 
    padding: 2px 8px 3px 8px;
}

.selectize-control .selectize-input.items {
    background: none;
    box-shadow: none;
    border: 1px solid #d0d0d0;
    min-height: 25px;
}

.selectize-control.single .selectize-input.items .item {
    background: none;
}

.selectize-control.single .selectize-input:after {
    margin-top: -2px;
}

div.p-l-10-p {
    padding-left: 10%;
}

div.p-l-15-p {
    padding-left: 15%;
}

.custom-nav.nav .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.custom-nav.nav .navbar-collapse {
    text-align: center;
}

/* Fix css for the left menu in Setting Template */
.page-sidebar .custom-setting-page.sidebar-menu .menu-items > li > a > .title {
    white-space: normal;
    width: 100%;
    text-overflow: initial;
    line-height: 22px;
}

.menu-pin .custom-setting-page .icon-thumbnail {
    margin-left: 30px;
    line-height: 18px;
}

.taskNote-download-button {
    padding-top: 10px;
}

div.tab-upload div div h2 {
    font-weight: 400;
}

div.tab-upload div div p {
    font-size: 15px;
}

div.emerge-import-tab-upload-left-title {
    padding: 15px;
    background-color: #EBEBEB;
    color: black;
}

    div.emerge-import-tab-upload-left-title div p {
        margin-bottom: 15px;
    }

        div.emerge-import-tab-upload-left-title div p a {
            font-weight: bold;
            text-decoration: underline;
        }

    div.emerge-import-tab-upload-left-title div i {
        font-size: 19px;
    }

    div.emerge-import-tab-upload-left-title ul {
        list-style-type: none;
        padding-left: 5px;
    }

        div.emerge-import-tab-upload-left-title ul > li {
            padding-left: 1.3em;
            padding-bottom: 10px;
        }

        div.emerge-import-tab-upload-left-title ul li span {
            display: inline-table;
            width: 98%;
        }

            div.emerge-import-tab-upload-left-title ul li span span {
                display: inline;
            }

        div.emerge-import-tab-upload-left-title ul > li:before { /* ref: http://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon */
            content: "\f05a"; /* FontAwesome Unicode */
            font-family: FontAwesome;
            display: inline-block;
            margin-left: -1.6em; /* same as padding-left set on li */
            width: 1.3em; /* same as padding-left set on li */
            color: #48B5E4;
        }

.emerge-small-text {
    font-size: 14px;
}

.drop-box {
    margin-top: 23px;
    display: block;
    border: 5px dashed #D0D2D3;
    background-color: white;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
    font-size: 16px;
    font-weight: 400;
}

@media screen and (min-width: 1280px) {
    .drop-box {
        margin-top: 85px;
        padding-top: 112px;
        padding-bottom: 112px;
    }
}

@media screen and (min-width: 1376px), screen and (min-height: 644px) {
    .drop-box {
        margin-top: 16px;
        padding-top: 98px;
        padding-bottom: 98px;
    }

    /* scanbarcode modal  */
    .scrollableDispatchPrdList {
        height: 600px;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
    } 

}

@media screen and (min-width: 1600px) {
    .drop-box {
        padding-top: 87px;
        padding-bottom: 87px;
    }
}

@media screen and (min-width: 1920px) {
    .drop-box {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media screen and (max-width: 1530px) {
    #defaultListingPage #createNewDocument {
        font-size: 13px;
    }
}
@media screen and (max-width: 1376px), screen and (max-height: 644px)  {
    #defaultListingPage #createNewDocument {
        font-size: 12px;
    }

    .scrollableDispatchPrdList {
        height: 350px;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
}
@media screen and (max-width: 1250px) {
    #defaultListingPage #createNewDocument {
        font-size: 11px;
    }
}

.uploader-container {
    text-align: center;
}

    .uploader-container span {
        font-size: 15px;
        color: #626262;
    }

.drop-box span {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.emerge-upload-input + label#noBorderRadiusLabel {
    padding: 10px 45px 10px 45px;
    font-weight: 700;
    border-radius: 0px;
    text-transform: uppercase;
}

.yellow-color {
    color: #fbe024;
}

.small-remove-icon {
    font-weight: bold;
}

    .small-remove-icon:hover {
        cursor: pointer;
    }

.not-submitted-yet .input-daterange input {
    border-bottom: 1px solid rgba(0,0,0,.07);
}

.form-price-list .right-header {
    text-align: right;
    padding-right: 20px;
}

.form-price-list .item-select {
    float: left;
    padding: 1px 7px 3px 7px;
    background: #e6e6e6;
    border-radius: 10px;
    margin: 5px 10px 0 0;
}

.form-price-list .custom-radio-info {
    margin-top: 3px;
    margin-bottom: 0px;
}

    .form-price-list .custom-radio-info label {
        font-size: 12px !important;
        font-weight: initial;
        text-transform: none;
    }

.form-price-list input.input-tier-pricing {
    border-bottom: 1px solid #b94a48;
}

.form-price-list .selectize-control {
    min-width: 500px;
    width: 100%;
}

    .form-price-list .selectize-control .selectize-input {
        border-top: none;
        border-left: none;
        border-right: none;
    }

.price-list-products-content {
    max-height: 330px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.width-120-percent {
    width: 120%;
}

/* START Purchase Order page - Receives tab */
.receives-of-po {
    margin-top: -40px;
}

    .receives-of-po div[ng-table-pagination] {
        display: none;
    }

.multiple-po-icon {
    background: url('../img/multiple_po.svg') no-repeat top left;
    display: block;
    width: 20px;
    height: 20px;
}

.po-receives-summary div {
    display: table-row;
    line-height: 30px;
    font-weight: bold;
}

.po-receives-summary label {
    display: table-cell;
    text-transform: uppercase;
    font-weight: 600;
    font-family: Montserrat;
    font-size: 13px;
    color: rgba(44,44,44,.35);
    padding-left: 20px;
}

.po-receives-summary span {
    padding-left: 20px;
    display: table-cell;
}
/* END Purchase Order page - Receives tab */
.emerge-tab-content .tab-content {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

    .emerge-tab-content .tab-content .row.form-row.form-group {
        margin-bottom: 0px;
    }

.emerge-p-t-15 {
    padding-top: 15px;
}

.emerge-p-t-20 {
    padding-top: 20px;
}

.emerge-p-b-15 {
    padding-bottom: 15px;
}

.emerge-p-b-45 {
    padding-bottom: 45px;
}

.emerge-p-b-88 {
    padding-bottom: 88px;
}

.emerge-p-b-90 {
    padding-bottom: 90px;
}

.emerge-p-b-92 {
    padding-bottom: 92px;
}

.emerge-p-b-93 {
    padding-bottom: 93px;
}

.emerge-p-b-109 {
    padding-bottom: 109px;
}

.emerge-p-b-118 {
    padding-bottom: 118px;
}

.emerge-p-b-127 {
    padding-bottom: 127px;
}

.emerge-p-l-15 {
    padding-left: 15px;
}

.emerge-p-l-15 {
    padding-left: 30px;
}

.emerge-p-r-15 {
    padding-right: 15px;
}

.emerge-p-l-30 {
    padding-left: 30px;
}
.emerge-p-r-30 {
    padding-right: 30px;
}
.emerge-p-l-0 {
    padding-left: 0px;
}
.emerge-p-t-22 {
    padding-top: 22px;
}

.emerge-p-t-30 {
    padding-top: 30px;
}

.emerge-p-t-19 {
    padding-top: 19px;
}

.pos-rel {
    position: relative;
}

.emerge-row-p-0.row .col-sm-6:first-child.emerge-col-p-l-15 {
    padding-left: 15px;
}
.emerge-row-p-0.row .col-sm-7:first-child.emerge-col-p-l-15 {
    padding-left: 15px;
}

.emerge-row-p-0.row .col-sm-5:last-child {
    padding-left: 0px;
}

    .emerge-row-p-0.row .col-sm-5:last-child .row .col-sm-6:last-child.emerge-col-p-l-0 {
        padding-left: 0px;
    }

    .emerge-row-p-0.row .col-sm-5:last-child.emerge-col-p-l-15 {
        padding-left: 0px;
        padding-right: 15px;
    }

    .emerge-row-p-0.row .col-sm-5:last-child .row .col-sm-6:first-child,
    .emerge-row-p-0.row .col-sm-5:last-child .row .col-sm-12 {
        padding-left: 30px;
    }

.emerge-tab-content .emerge-line-height-30,
.line-height-30 {
    line-height: 30px;
}

.line-height-20 {
    line-height: 20px;
}

.line-height-13 {
    line-height: 13px;
}

.line-height-14 {
    line-height: 14px;
}

.line-height-20-important {
    line-height: 20px !important;
}

.form-control {
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.emerge-font-size-19 {
    font-size: 19px;
}

.emerge-p-b-52 {
    padding-bottom: 52px;
}

#dropshipping-tooltip.muted {
    padding-bottom: 5px;
}

.emerge-font-size-12 {
    font-size: 12px !important;
}

@media screen and (min-width: 1350px) and (max-width: 1450px) {
    /* TODO: please remove this, use SCSS to make a  font-size class for a specific resolution (more structure)*/
    .emerge-font-size-sm-12 {
        font-size: 12px !important;
    }
}

.emerge-font-size-14 {
    font-size: 14px !important;
}

/*START Billing Information and Subscription Management Page*/

.custom-tabset-billingpage .nav.nav-tabs li.active a {
    font-weight: bold;
}

.custom-tabset-billingpage .nav.nav-tabs li a {
    font-size: 14px;
}

    .custom-tabset-billingpage .nav.nav-tabs li a:before,
    .custom-tabset-billingpage .nav.nav-tabs li a:after {
        border: none;
    }

/*SUBSCRIPTION PAGE*/
@media screen and (max-width: 1366px) {
    .subscription-page.scrollable-container {
        max-height: 670px;
        overflow: auto;
    }
}
.subscription-page .subscription-stepnumber {
    right: 15px;
    position: absolute;
    top: calc(50% - 85px);
}

    .subscription-page .subscription-stepnumber .step {
        color: #ccc;
    }

    .subscription-page .subscription-stepnumber ul.numbers {
        padding: 0px;
    }

        .subscription-page .subscription-stepnumber ul.numbers li {
            list-style-type: none;
            text-align: center;
            background-color: #bcbec0;
            border-radius: 50%;
            padding: 10px 15px;
            margin: 10px;
            font-weight: bold;
            color: white;
            font-size: 18px;
        }

            .subscription-page .subscription-stepnumber ul.numbers li.step-active {
                background-color: #48b5e4;
            }

.subscription-page .panel-group .panel-heading {
    background: #48b5e4
}

    .subscription-page .panel-group .panel-heading .panel-title > a {
        color: white !important
    }
        .subscription-page .panel-group .panel-heading .panel-title > a:after {
            content: ''
        }

    .subscription-page .subscription-header .logo-emerge {
        margin: 0 auto;
        width: 150px;
    }

        .subscription-page .subscription-header .logo-emerge img {
            width: 100%;
        }

    .subscription-page .subscription-body .wrapper-boxcontent {
        padding: 0 15px;
    }

        .subscription-page .subscription-body .wrapper-boxcontent:first-child {
            padding-left: 0px;
        }

        .subscription-page .subscription-body .wrapper-boxcontent:last-child {
            padding-right: 0px;
        }

.subscription-page .subscription-body .box-content {
    border: 1px solid #d9d9d9;
    padding: 10px 25px 10px 25px;
    min-height: 300px;
}

    .subscription-page .subscription-body .box-content .icon {
        width: 40px;
        margin: 0 auto;
        height: 55px;
    }

        .subscription-page .subscription-body .box-content .amount-box .minusIcon,
        .subscription-page .subscription-body .box-content .amount-box .plusIcon {
            width: 50px;
            display: block;
            margin: 0 auto;
            padding: 30px 0px;
            cursor: pointer;
        }

        .subscription-page .subscription-body .box-content .amount-box .minusIcon {
            float: right;
        }

        .subscription-page .subscription-body .box-content .amount-box .plusIcon {
            float: left;
        }

        .subscription-page .subscription-body .box-content .amount-box .selectedValue {
            font-weight: lighter;
            font-size: 100px;
            line-height: 100px;
            width: 100%;
            text-align: center;
            display: block;
            margin: 0 auto;
        }

        .subscription-page .subscription-body .box-content .amount-box .selectedAmount {
            font-size: 70px;
            line-height: 100px;
        }

        .subscription-page .subscription-body .box-content .select-box select {
            padding: 10px !important;
            line-height: 16px;
            width: 100%;
            border: 1px solid #48b5e4;
        }

        .subscription-page .subscription-footer ul.integration-logo {
            padding: 10px 0px 0px;
            list-style-type: none;
        }
    
        .subscription-page .subscription-footer ul.integration-logo li {
            display: inline-block;
            padding-right: 20px;
        }
        
.top-15 {
    top: 15px;
}

.img-medium {
    width: 35px;
}

.code-box {
    display: inline-block;
    width: 20%;
    padding: 10px 0px 5px 0px;
    margin-left: 10px;
    border-bottom: 3px solid #48b5e4;
}

.code-box input[type=text] {
    border: 0px;
    width: 100px;
}

.subscriptionBtn .next {
    display: inline-block;
    padding: 15px 25px;
    height: 55px;
}

.subscriptionBtn .back {
    display: inline-block;
    padding: 0px 25px;
    line-height: 55px;
    vertical-align: middle;
}

.subscription-page .payment-wizard-step4 .step4-content {
    text-align: center;
    font-size: 16px;
}

    .subscription-page .payment-wizard-step4 .step4-content img {
        width: 80px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .subscription-page .payment-wizard-step4 .step4-content .assignBtn {
        margin-top: 10px;
        padding: 10px 40px;
    }

    .subscription-page .payment-wizard-step4 .step4-content .h4 {
        font-size: 20px;
    }

    .subscription-page .payment-wizard-step4 .step4-content .user-checkList {
        margin-left: auto;
        margin-right: auto;
        width: 10%;
    }

.subscription-page input[type="text"]#honeybot {
    display: none;
}
.subscription-page button[type="submit"]#submitForm {
    display: none;
}

.custom-subscription-months {
    width: 80px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #48b5e4;
    padding: 10px 15px;
}

.wrapper-creditcard-form {
    width: 768px;
    display: block;
    margin: 0 auto 0px auto;
}

.overview-subscription-form {
    width: 768px;
    display: block;
    margin: 0 auto 25px auto;
    padding-top: 50px;
    padding-bottom: 25px;
}

.wrapper-creditcard-form.full-width {
    width: 100%;
}

.wrapper-creditcard-form .custom-subscription-fields {
    padding-bottom: 18px;
}

    .wrapper-creditcard-form .custom-subscription-fields select {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 3px solid #48b5e4;
        width: 100%;
        padding: 10px 0px !important;
        font-size: 18px;
        height: 45px;
    }

        .wrapper-creditcard-form .custom-subscription-fields select.final-line {
            padding: 8px 0px !important;
        }

    .wrapper-creditcard-form .custom-subscription-fields input[type=text] {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 3px solid #48b5e4;
        width: 100%;
        padding: 10px 0px;
        font-size: 18px;
        line-height: 18px;
        height: 45px;
    }

    .wrapper-creditcard-form .custom-subscription-fields span.expirationDate {
        display: block;
        margin: 8px 0;
    }



.wrapper-creditcard-form .custom-subscription-fields input[type=text].final-line {
    padding: 9px;
}

.overview-subscription-form {
    border: 1px solid #ccc;
    padding: 15px 50px;
}

    .overview-subscription-form .custom-invoice-fields {
        padding: 10px 0px;
    }

        .overview-subscription-form .custom-invoice-fields.border {
            border-top: 1px solid #ccc;
            padding: 20px 0px 0px;
            margin-top: 5px;
        }

.billing-page .tab-content {
    padding: 0px;
}

.billing-page .update-card {
    position: absolute;
    top: 30px;
    right: 30px;
}

.billing-page .ecart-billing .update-card-des {
    padding: 15px;
    background: #a9dcf2;
    text-align: center;
    margin-bottom: -25px;
    font-weight: bold;
    font-size: 15px;
}
/*Custom checkbox for integration tab - red checkbox*/
.checkbox.cancelIntegration label {
    padding-left: 35px !important;
    font-weight: 500;
}

    .checkbox.cancelIntegration label:before {
        border-color: #f55753;
    }

/*END Billing Information and Subscription Management Page*/


/*START DO New Design CSS*/
.custom-addItemTable tr.SOTitle th {
    border-top: none;
    border-bottom: 1px solid #cccccc;
    text-transform: uppercase;
    color: #cccccc;
}

    .custom-addItemTable tr.SOTitle th strong {
        color: black;
    }


.custom-addItemTable tr.select-SO td {
    background-color: #e6e6e6;
}

    .custom-addItemTable tr.select-SO td strong {
        color: black;
    }

    .custom-addItemTable tr.select-SOItem.hover-effect:hover td {
        background-color: #e4f4fb;
    }

    .custom-addItemTable tr.select-SOItem td strong {
        color: black;
    }

.custom-editingpage .blueNarrow img {
    width: 40px;
    transform: rotate(90deg);
    display: block;
    margin: 0 auto;
}

.custom-editingpage .blueNarrow.horizotal img {
    width: 50px;
    display: inline-block;
    transform: none;
}

.table.tableOfInvoiceInfor tr td {
    vertical-align: middle;
}

.table.tableOfInvoiceInfor tbody tr:first-child td {
    border-bottom: none;
}

.table.tableOfInvoiceInfor tr:last-child td {
    border-bottom: none;
    border-top: 1px solid black;
    background-color: #e6e6e6;
}

    .table.tableOfInvoiceInfor tr:last-child td:first-child {
        border-right: 1px solid black;
    }

li.itp-active-option {
    cursor: pointer;
}

    li.itp-active-option > a {
        font-weight: bold;
        font-size: 16px;
    }
/*END DO New Design CSS*/

/* START integrations page */
.integrations-filters span {
    cursor: pointer;
    background-color: #e6e6e6;
    color: #2c2c2c;
    border-radius: 20px;
    padding: 8px 16px;
    margin-right: 10px;
    font-size: 16px;
    float: left;
    margin-bottom: 10px;
}

    .integrations-filters span.selected {
        background-color: #48B5E4;
        color: white;
    }

.integration-box {
    border: 1px solid #BCBEC0;
    margin: 15px 0px;
    padding: 30px 20px;
    border-radius: 3px;
    min-height: 255px;
    background-color: white;
}

.wrapper-all-integrations .integration-box {
    padding: 15px;
    margin: 15px 0 0 0;
    min-height: 100%;
}

    .wrapper-all-integrations .integration-box img {
        width: 100%;
    }
/* END integrations page */
.pointer-event-none {
    pointer-events: none;
}

.selectize-top-header {
    padding: 5px;
    font-size: 15px;
}

    .selectize-top-header div#top-header {
        font-size: 15px;
        display: block;
        color: #B3B3B3;
        /*padding-top: 5px;*/
        padding-bottom: 5px;
        /*border-top: 2px solid #B3B3B3;*/
        border-bottom: 2px solid #B3B3B3;
    }

.selectize-header {
    padding: 5px;
    font-size: 15px;
}

.optgroup-header .row {
    font-size: 15px;
}

.option .row {
    font-size: 15px;
}

span.bullet {
    padding-left: 15px;
    font-size: 15px;
}

    span.bullet:before {
        content: '\00a0\00a0\00a0';
        font-size: 19px;
        /*list-style-type:circle;
    padding-left: 15px;*/
    }

.selectize-item {
    font-size: 15px;
}

.view-form h5 {
    line-height: 19px;
}

.view-form .a-hover-underline:hover {
    text-decoration: underline;
}

.width-100-percent {
    width: 100%;
}

.height-100-percent {
    height: 100%;
}

.dark-dropship-icon {
    background-image: url('../img/dark_dropShippingIcon.svg');
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
    display: block;
}

.in-stock-icon {
    background-image: url('../img/stock icon-01.svg');
    width: 11px;
    height: 11px;
    display: inline-block;
}

.dropship-icon {
    background-image: url('../img/dropShippingIcon.svg');
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
    display: block;
}

.custom-headerCheckbox.checkbox label::after {
    left: 1px;
}

.checkbox-popup label::after {
    left: 1.2px;
}

.customActionMenuListingpage.dropdown {
    position: relative;
    z-index: 1;
    padding: 25px 0px 5px;
}

.bg-white {
    background-color: white;
}

.b-l-n {
    border-left: none;
}

.b-r-n {
    border-right: none;
}

.b-n {
    border: none;
}

.lh-30 {
    line-height: 30px;
}

table#addItemSOD tbody tr .emerge-bg-grey td {
    background-color: #e6e7e8;
}

.category-margin-top-7 {
    margin-top: 7px;
}

.m-l-25-per {
    margin-left: 25%;
}

.m-l-xs {
    margin-right: 5px;
}

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

.p-l-50-percent {
    padding-left: 50%;
}

/*Start CSS for TOP HEADER MENU*/
.top-right-header {
    text-align: right;
    line-height: 58px;
    vertical-align: middle;
}

    .top-right-header .header-box {
        display: inline-block;
        padding-left: 15px;
    }

    .top-right-header .header-box > a {
        color: #48B5E4;
    }

    .top-right-header .header-box .emergeLogo {
        width: 32px;
        /*height: 32px;*/
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

        .top-right-header .header-box .emergeLogo img {
            height: 100%;
            width: 100%;
            margin-bottom: 5px;
            border: 1px solid #48B5E4;
            border-radius: 50%;
        }

.top-left-header {
    text-align: left;
    vertical-align: middle;
}
    /*.top-left-header .header-box {
        display: inline-block;
        padding-left: 15px;
        max-height: 60px;
    }*/
    .top-left-header .btn.btn-default {
        padding-top: 20px;
        padding-bottom: 18.3px;
        border-right: 1px solid #ccc !important;
        border-radius: 0px;
        -webkit-border-radius: 0px;
    }

    .top-left-header .btn:hover {
        background-color: #DAF0FA;
    }

    .top-left-header .dropdown .dropdown-menu {
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    }

    .top-left-header .dropdown.open > .dropdown-toggle.btn-default {
        background-color: #DAF0FA;
    }

    .top-left-header .dropdown-menu > li {
        margin: 10px 0;
    }

    .top-left-header .dropdown li > div {
        line-height: 35px;
        color: #626262;
        padding: 0 20px;
        border-radius: 3px;
        text-align: left;
    }

    .top-left-header .dropdown li img {
        width: 32px;
        padding-top: 2px;
        margin-right: 10px;
    }

    .top-left-header .dropdown a.activity-link {
        text-decoration: underline;
        color: #48b0f7;
        font-weight: 500;
    }

        .top-left-header .dropdown a.activity-link:hover {
            color: #0073c1;
        }

    .top-left-header .dropdown-menu .divider {
        margin-left: 15px;
        margin-right: 15px;
    }

    .top-left-header .dropdown-menu > li:first-child {
        padding-top: 0px;
    }

    .top-left-header .dropdown-menu > li:last-child {
        padding-bottom: 0px;
    }

    .top-left-header .dropdown-menu > li.divider:last-child {
        height: 0px;
        margin: 0px;
    }

    .top-left-header #recentActivitiesDropdown {
        max-height: 60vh;
        overflow-y: auto;
        padding-top: 0px;
        min-width: 340px;
    }

    .top-left-header #progressTrackingDropdown {
        max-height: 60vh;
        overflow-y: auto;
        padding-top: 0px;
    }

    .top-left-header .noNotificationLeft {
        text-align: center !important;
        color: #a2a2a2 !important;
    }

    .top-left-header .notification-text {
        vertical-align: middle;
        line-height: 17px;
    }

        .top-left-header .notification-text > div {
            font-weight: 500;
        }

.btn-separator:after {
    content: ' ';
    display: block;
    float: left;
    background: #e8e8e8;
    height: 59px;
    width: 1px;
}
/*End CSS for TOP HEADER MENU*/

/*Start CSS for Product Upload Image*/
.product-upload-image {
    width: 250px;
    height: 150px;
}

    .product-upload-image > img {
        height: 100%;
        width: 100%;
    }

.drop-box.custom-dropbox {
    margin: 0px;
    padding: 15px;
}
/*End CSS for Product Upload Image*/

#striky_header {
    display: none;
}

.mobile .striky_header {
    width: 100%;
    background-color: #27326F;
    position: relative;
    z-index: 1050;
    text-align: center;
}

    .mobile .striky_header p {
        padding: 10px;
        font-size: 20px;
        font-weight: bold;
        color: white;
    }

pre {
    white-space: normal;
    word-wrap: break-word;
}

.flex-intro h4 {
    font-size: 20px;
    word-break: break-word;
}

.flex-intro-small h4 {
    font-size: 18px;
    word-break: break-word;
}

/* START: open mobile account. **/
.closeBtn-floatRight {
    position: absolute;
    right: 0px;
    z-index: 1;
}

.open-purchasing-account {
    background-image: url('../img/open-mobile-acc-background.png');
    /*background-position: 0 50%;*/
    background-repeat: no-repeat;
}

.blue-underline-textbox {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #48b5e4;
    width: 100%;
    padding: 10px 0px;
    font-size: 18px;
    line-height: 18px;
    height: 45px;
}

.purchasing-account-list-info {
    margin: -55px -15px 0 -15px;
    padding: 15px;
    background-color: #e4f4fb;
}
/* END: open mobile account. **/


.customize-button-pdf-modal {
    padding-left: 12px;
    width: 100%;
}

.emerge-b-r {
    border-right: 1px solid #e6e7e8;
}

.emerge-pdf-footer-button {
    width: 100%;
    /*padding-top: 10px;
    padding-bottom: 10px;*/
}

body .modal-width-100-percent .modal-dialog {
    width: 100%;
}

body .modal-width-95-percent .modal-dialog {
    width: 95%;
}

body .modal-width-90-percent .modal-dialog {
    width: 90%;
}

body .modal.mass-upload-photos-modal .modal-dialog {
    margin: 0px;
    height: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

@media (min-width: 768px) {
    body .modal.mass-upload-photos-modal .modal-dialog {
        margin: 0px;
    }
}

body .modal.mass-upload-photos-modal .modal-content {
    height: 100%;
    border: none;
    border-radius: 0;
}

    body .modal.mass-upload-photos-modal .modal-content .modal-header {
        height: 10%;
        padding: 5px 0px;
    }

    body .modal.mass-upload-photos-modal .modal-content .modal-body {
        height: 80%;
    }

    body .modal.mass-upload-photos-modal .modal-content .modal-footer {
        height: 10%;
        padding: 15px;
    }

.purchasing-account-list.info-not-displayed {
    margin-top: -30px;
}

.inside-save-button {
    float: right;
    margin-top: -25px;
    margin-right: 20px;
}

.modal.in .modal-dialog {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #c3c3c3;
}

.change-plan.modal {
    display: flex !important;
    align-items: center;
}

.saveSearchCustomModal.modal.in .modal-dialog {
    border: none;
    box-shadow: none;
}
/*Override when running ITP*/
body.is-itp-running .modal.in .modal-dialog {
    border: none;
    box-shadow: none;
}
/* END: open mobile account. **/

/* START: onboarding integration step. **/
form .row .integration-modal-instruction-note[class*='col-']:first-child,
form .row .integration-modal-instruction-note[class*='col-']:last-child {
    background-color: #e4f4fb;
    line-height: 35px;
    padding: 5px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.integration-modal-btn-sync {
    padding-left: 50px;
    padding-right: 50px;
}
/* END: onboarding integration step. **/

.b-light-grey {
    border-left-color: #e6e6e6;
}

.b-light-grey-b {
    border-bottom: 1px solid #e6e6e6;
}

.w-95-per {
    width: 95%;
}

.f-l {
    float: left;
}

.modal-body iframe.iframe-height-500 {
    height: 500px;
}

.modal-body iframe.iframe-height-680 {
    height: 680px;
}

.custom-pdf-radio input[type=radio] {
    float: left;
    margin-left: 15px;
}

.custom-pdf-radio label:first-child input[type=radio] {
    margin-left: 20px;
}

.custom-pdf-radio .radio label.isGroupVariant_2 {
    position: relative;
}

    .custom-pdf-radio .radio label.isGroupVariant_2:before {
        position: absolute;
        top: 0px;
    }

.btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover {
    z-index: 0;
}
/*Start - Selectize of Additional Charge in Sales*/
.selectize-dropdown {
    z-index: 1099;
}

.custom-selectize-additionalcharge .selectize-input.items {
    border: 1px solid #f0f0f0;
    padding: 5px;
}

.custom-selectize-additionalcharge .selectize-control.single .selectize-input,
.custom-selectize-additionalcharge .selectize-dropdown.single {
    border-color: #f0f0f0;
}

.custom-selectize-additionalcharge .selectize-dropdown-content {
    padding-bottom: 50px;
}

    .custom-selectize-additionalcharge .selectize-dropdown-content .custom-addtionalcharge {
        margin: 10px 2px 10px 2px;
    }

    .custom-selectize-additionalcharge .selectize-dropdown-content div[data-value="0"] {
        width: calc(100% - 15px);
        background-color: white;
        border-top: 1px solid #e6e6e6;
        position: absolute;
        text-align: right;
        display: block;
        bottom: 0px;
    }

        .custom-selectize-additionalcharge .selectize-dropdown-content div[data-value="0"] .btn.btn-white {
            border: 1px solid #48B5E4;
            color: #48B5E4;
            border-radius: 5px;
            font-weight: bold;
        }

            .custom-selectize-additionalcharge .selectize-dropdown-content div[data-value="0"] .btn.btn-white:hover {
                background-color: #DAF0FA;
            }

/*End - Selectize of Additional Charge in Sales*/

/*Start - CSS for Opening new purchasing account in Customer*/
.inviteEcartAdsWrapper {
    /*background-color: #fafafa;*/
    padding: 60px;
}

    .inviteEcartAdsWrapper .ads-photo {
        display: block;
        width: 100%;
        padding-right: 30px;
        box-shadow: 3px 3px 32px -14px rgba(0,0,0,0.75);
    }

        .inviteEcartAdsWrapper .ads-photo:first-child {
            margin-bottom: 45px;
        }

    .inviteEcartAdsWrapper .wrap-ads-info {
        padding: 30px;
        margin-top: 60px;
    }

        .inviteEcartAdsWrapper .wrap-ads-info ul.ads-invite-customer-ecart {
            margin: 15px 0 0 0;
            padding: 0;
            list-style-type: none;
        }

            .inviteEcartAdsWrapper .wrap-ads-info ul.ads-invite-customer-ecart li {
                padding-bottom: 15px;
                position: relative;
                padding-left: 25px;
            }

                .inviteEcartAdsWrapper .wrap-ads-info ul.ads-invite-customer-ecart li:before {
                    content: '';
                    position: absolute;
                    background-image: url('../img/newEcartAds/checkIcon.svg');
                    width: 16px;
                    height: 16px;
                    background-repeat: no-repeat;
                    left: 0px;
                    top: 2px;
                }

.wrapper-purchasingAccountSteps {
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-height: 380px;
}

    .wrapper-purchasingAccountSteps.custom-window {
        max-height: 100%;
    }

    .wrapper-purchasingAccountSteps.QRcode-window {
        max-height: 500px;
    }

    .wrapper-purchasingAccountSteps .stepContainer {
        height: 100%;
        width: calc(900px * 3);
    }

        .wrapper-purchasingAccountSteps .stepContainer .purchasingStep {
            width: 900px;
            display: block;
            float: left;
            transform: translateX(0%);
            -webkit-transition: transform 1s;
            transition: transform 1s;
        }
        /* style for 2FA QR code modal */
        .wrapper-purchasingAccountSteps .stepContainer .twoFactorStep {
            width: 600px;
            display: block;
            float: left;
            transform: translateX(0%);
            -webkit-transition: transform 1s;
            transition: transform 1s;
        }

        .wrapper-purchasingAccountSteps .stepContainer .step-2 {
            transform: translateX(-100%);
        }

        .wrapper-purchasingAccountSteps .stepContainer .step-3 {
            transform: translateX(-200%);
        }

        .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay {
            min-height: 60px;
        }

            .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .actionButtons {
                padding: 15px 0px;
                /*display: inline-block;*/
                /*width: 50%;
                float: left;*/
            }

            .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox {
                /*display: inline-block;*/
                /*width: 50%;
                float: right;*/
                padding: 15px 0px;
            }

                .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul,
                .step-productDisplay .searchBox ul {
                    margin: 0;
                    padding: 0;
                    display: flex;
                    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
                    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox; /* TWEENER - IE 10 */
                    display: -webkit-flex; /* NEW - Chrome */
                    float: right;
                }

                    .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li,
                    .step-productDisplay .searchBox ul li {
                        display: inline-block;
                        padding: 0px;
                        height: 35px;
                    }

                            .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchButtons select,
                            .step-productDisplay .searchBox ul li.searchButtons select {
                                border: 1px solid #ccc;
                                font-weight: bold;
                                height: 100%;
                                padding: 0px 15px !important;
                                border-top-left-radius: 5px;
                                border-bottom-left-radius: 5px;
                                width: 170px;
                            }
                            @media screen and (max-width: 1366px) {
                                .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchButtons select,
                                .step-productDisplay .searchBox ul li.searchButtons select {
                                    border: 1px solid #ccc;
                                    font-weight: bold;
                                    height: 100%;
                                    padding: 0px 15px !important;
                                    border-top-left-radius: 5px;
                                    border-bottom-left-radius: 5px;
                                    width: 120px;
                                }
                            }
                        .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchField {
                            position: relative;
                        }

                            .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchField input,
                            .step-productDisplay .searchBox ul li.searchField input {
                                border: 1px solid #ccc;
                                padding: 0px 15px;
                                /* border-left: none; */
                                height: 100%;
                                min-width: 270px;
                            }
                            @media screen and (max-width: 1366px) {.wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchField input,
                            .step-productDisplay .searchBox ul li.searchField input {
                                border: 1px solid #ccc;
                                padding: 0px 15px;
                                /* border-left: none; */
                                height: 100%;
                                min-width: 170px;
                                width: 170px;
                            }
                        }

                        .step-productDisplay .searchBox ul li.searchField .closeSearchItem {
                            background: none;
                            border: none;
                            position: absolute;
                            right: 5px;
                            top: 7px;
                            font-size: 20px;
                        }
                      
                        .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchIcon,
                        .step-productDisplay .searchBox ul li.searchIcon {
                            background-color: #48B5E4;
                            color: white;
                            padding: 8px 10px;
                            cursor: pointer;
                            border-top-right-radius: 5px;
                            border-bottom-right-radius: 5px;
                            text-align: center;
                        }

                            .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .searchBox ul li.searchIcon i,
                            .step-productDisplay .searchBox ul li.searchIcon i {
                                width: 20px;
                            }


        .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .step-number {
            color: #48B5E4;
            display: block;
            font-size: 24px;
        }

        .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .step-description {
            color: #ccc;
            display: block;
        }

        .wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay .productCategoryList {
            height: 330px;
            width: 100%;
            margin: 15px 0px 15px;
        }

/***** Start FilterProductForStockTake *****/

.filter-product-stocktake .wrapProductDisplay .searchBox ul {
    margin: 0;
    padding: 0;
    display: flex;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    float: right;
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li {
    display: inline-block;
    padding: 0px;
    height: 35px;
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li.searchButtons select {
    border: 1px solid #ccc;
    font-weight: bold;
    height: 100%;
    padding: 0px 15px !important;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 170px;
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li.searchField {
    position: relative;
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li.searchField input {
    border: 1px solid #ccc;
    padding: 0px 15px;
    border-left: none;
    height: 100%;
    /*min-width: 270px;*/
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li.searchField .closeSearchItem {
    background: none;
    border: none;
    position: absolute;
    right: 5px;
    top: 7px;
    font-size: 20px;
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li.searchIcon {
    background-color: #48B5E4;
    color: white;
    padding: 8px 10px;
    cursor: pointer;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
}

.filter-product-stocktake .wrapProductDisplay .searchBox ul li.searchIcon i {
    width: 20px;
}


/***** End FilterProductForStockTake  *****/


.categoryColumn,
.productColumn,
.variantColumn {
    width: 32%;
    height: 100%;
    overflow: auto;
    display: inline-block;
    overflow: auto;
    border: 1px solid #ddd;
    transition: width 1s;
    vertical-align: bottom;
}

.categoryColumn {
    margin-right: 1.5%;
}

.column .block:hover {
    cursor: pointer;
    background-color: #DAF0FA;
}
.column.copy-ecart-setting .block:hover {
    cursor: pointer;
    background-color: white;
}

.column .block.active {
    background-color: #DAF0FA;
}
.column .checkbox {
    margin: 0px;
    font-style: unset;
}

.column.copy-ecart-setting .checkbox {
    margin-left: 27px;
    font-style: unset;
}

    .column .checkbox label {
        text-transform: none;
        font-weight: normal;
        pointer-events: none;
        white-space: normal;
    }

        .column .checkbox label i,
        i.some-selectedItems {
            color: #70E3D8;
        }

        .column .checkbox label::before {
            pointer-events: visible;
        }

.column .block.active .checkbox label {
    color: #48B5E4;
}

.column .left-row,
.column .right-row {
    display: inline-block;
}

.column .left-row {
    padding: 8px;
    margin: 0px;
    width: 92%;
}

.column .right-row {
    width: 5%;
    vertical-align: top;
    /*padding: 10px 0px;*/
    vertical-align: middle;
}

.column .narrow {
    width: 10px;
    height: 10px;
    background: url('../img/narrow.svg') no-repeat;
}

.column .block.active .narrow {
    background: url('../img/narrow-active.svg') no-repeat;
}

.column p:hover {
    background-color: #DAF0FA;
}

.productColumn {
    margin-right: 1.5%;
    animation-delay: 1s;
}

    .productColumn.overrideColumn,
    .variantColumn.overrideColumn,
    .categoryColumn.overrideColumn {
        margin-right: unset;
        width: 100%;
        height: 350px;
    }

.variantColumn {
    animation-delay: 2.5s;
}

    .custom-radio-info label {
        line-height: 20px;
        vertical-align: middle;
        font-weight: normal;
    }

.radio.radio-info.custom-radio-info label:before {
    bottom: auto;
    top: 0;
}

.radio.radio-info.custom-radio-info input[type=radio]:checked + label:before {
    border-color: #48B5E4;
}

.radio-green label,
.radio-blue label {
    line-height: 20px;
    vertical-align: middle;
    font-weight: normal;
}
.radio-blue label {
    font-weight: normal !important;
    text-transform: none !important;
}
.radio.radio-green input[type=radio]:checked + label:before {
    border-color: #27c24c;
    top: 0; /* In case multiple lines text (label for="stockQtyAndproductionQty in settingSection.html in Plugins) */
}
.radio.radio-blue input[type=radio]:checked + label:before {
    border-color: #48B5E4;
}
/*CSS for purchasing account tab in customer*/
.wrapper-purchasingAccountSteps.customStepsForPurchasingTab {
    overflow: visible;
}

.customStepsForPurchasingTab.wrapper-purchasingAccountSteps .stepContainer {
    width: 100%;
}

    .customStepsForPurchasingTab.wrapper-purchasingAccountSteps .stepContainer .purchasingStep {
        width: 100%;
        padding-bottom: 50px;
    }

.wrapper-purchasingAccountSteps .stepContainer .step-productDisplay .wrapProductDisplay.showOnly .searchBox {
    width: 100%;
    display: inline;
    height: 0px;
    padding: 0;
    position: relative;
    /*top: -70px;*/
}

.wrapProductDisplay.showOnly .checkbox.check-info label:before,
.wrapProductDisplay.showOnly .checkbox.check-info label:after,
.wrapProductDisplay.showOnly .checkbox.check-info input[type=checkbox]:checked + label:before,
.wrapProductDisplay.showOnly .checkbox.check-info input[type=checkbox]:checked + label:after {
    opacity: 0;
}

.showOnly .checkbox label {
    padding-left: 0px !important;
}
/*End - CSS for Opening new purchasing account in Customer*/


/*Start CSS for Setting Pages (modal) */
.general-detail-label .row .col-sm-5 label {
    margin: 0px;
    vertical-align: middle;
    line-height: 30px;
}

.general-detail-label .row {
    padding-bottom: 15px;
}

form.formData-modal label {
    font-weight: bold;
    color: rgba(44,44,44,.35);
    line-height: 13px;
    margin: 0px;
    line-height: 30px;
    text-transform: uppercase;
}

    form.formData-modal .location-info:after {
        content: '';
        position: relative;
        right: 0px;
        width: 1px;
        height: 100%;
        padding-left: 2px;
        background: #ccc;
        margin: 0 10px 0 14px;
    }

form.formData-modal .optional-text {
    font-size: 12px;
    color: #ccc;
}

form.formData-modal input.form-control {
    padding-right: 20px;
    font-size: 14px;
}

form.formData-modal .remove-section-icon {
    position: absolute;
    top: 6px;
    right: 5px;
}

    .combo-inputWithIcon .comboIcon {
        float:left;
        margin-right: -15px;
        padding-top: 5px;
        font-weight: 600;
        padding-left: 5px;
    }

    .combo-inputWithIcon .form-control.comboInput[type="number"] {
        text-align: right !important;
    }

    .divider-saveAndEdit:before {
        content: '';
        padding: 0px;
        background: #636363;
        height: 100%;
        width: 1px;
        position: absolute;
        left: 50%;
    }

pre.showTextWithMultipleLines {
    white-space: pre-line;
    word-wrap: break-word;
    margin-bottom: 0px;
    font-family: inherit;
    background: none;
    border: none;
    color: #626262;
    word-break: break-word;
}

.wrap-scroll-currencies {
    overflow-y: scroll;
    height: 320px;
}
/*End CSS for Setting Pages (modal) */


/*Start CSS for Instruction Video*/
/*Override CSS for directive lity modal*/
.lity {
    z-index: 10000002;
}

.ui-notification.instructionVideoNotification.open {
    opacity: 1;
    transform: translateY(-40px);
}

.ui-notification.instructionVideoNotification {
    width: 500px;
    background: white;
    border-radius: 5px;
    border: 1px solid #ddd;
    color: #626262;
    padding: 15px;
    opacity: 0;
    transform: translateY(300px);
    animation: ease;
    animation-duration: 1s;
    right: 15px;
    bottom: 0px;
}

    .instructionVideoNotification .close-notification {
        font-size: 26px;
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: inherit;
    }

    .instructionVideoNotification p {
        padding-right: 20px;
    }
/*End CSS for Instruction Video*/

/*Start CSS to notify user create first product, supplier....*/
.ui-notification.notifyUserToCreateFirstProduct.open {
    opacity: 1;
    transform: translateY(0px);
}

.ui-notification.notifyUserToCreateFirstProduct {
    width: calc(100% - 250px);
    border: 1px solid #ddd;
    color: #626262;
    padding: 15px;
    opacity: 0;
    transform: translateY(100%);
    animation: ease;
    animation-duration: 1s;
    right: 0px;
    bottom: 0px;
    box-shadow: 0px -6px 6px rgba(0,0,0,0.2);
    background-color: white;
}

        .ui-notification.notifyUserToCreateFirstProduct .firstProduct-info > img {
            margin-left: 30px;
            margin-right: 30px;
        }

    .ui-notification.notifyUserToCreateFirstProduct ul.createFirstProduct {
        margin: 0px;
        padding: 0px;
        line-height: 48px;
    }

        .ui-notification.notifyUserToCreateFirstProduct ul.createFirstProduct li {
            display: inline-block;
            padding-right: 15px;
        }

            .ui-notification.notifyUserToCreateFirstProduct ul.createFirstProduct li a {
                color: white;
                text-decoration: none;
            }
/*End CSS to notify user create first product, supplier....*/

.checkbox.check-light-blue input[type=checkbox]:checked + label:before {
    border-color: #48B5E4;
}

.showMoreDescription {
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    line-height: 1.8em;
}

/*.showMoreDescription.showmoreDescriptionActive {
        max-height: 5.4em;
    }*/

/*End CSS for Setting Pages (modal) */
h5 > .form-control.integration-form-control {
    font-size: 19px;
    height: 28px;
    min-height: 28px;
}

.form-control.integration-form-control {
    margin-top: 0;
    margin-bottom: 0;
}

.integration .linkage-container .form-group.amazon-integration-form-group-no-border {
    border: none;
}

.amazon-integration-form-group-padding {
    padding: 5px;
}

.text-transform-none {
    text-transform: none !important;
}
.label-text-transform-none label {
    text-transform: none !important;
}
.amazon-integration #wholeTableListingPage {
    margin-top: 0;
    margin-bottom: 0;
}

    .amazon-integration #wholeTableListingPage .checkbox.custom-headerCheckbox {
        margin-top: 0;
        margin-bottom: 0;
    }

.amazon-integration .row.form-row.form-group.m-b-n {
    margin-bottom: 0;
}

.amazon-integration table#wholeTableListingPage .checkbox label::after {
    left: 0.2px;
}

/* PETER for override above css left: 0.2px not apply to mapped, unmapped product filter, if you can, pls fix */
.amazon-integration table#wholeTableListingPage #shopifyMassActionButton .checkbox label:after {
    left: 2px;
}

.amazon-integration table#wholeTableListingPage #integrationHeaderCheckBoxList .checkbox label::after {
    left: 2.2px;
}

.amazon-integration input#integrationSearchInput {
    padding-left: 30px;
}

.amazon-integration .fa.fa-search {
    position: absolute;
    top: 8px;
    left: 15px;
}

table#wholeTableListingPage div#integrationHeaderCheckBoxList ul#amazonHeaderFilterCheckboxList li div.checkbox.custom-headerCheckbox {
    margin-top: 3px;
    margin-bottom: 5px;
}

.cbb-store {
    float: right;
    padding: 12px;
}

.wrapper-importDataListAmazon {
    display: block;
    padding-top: 70px;
    padding-bottom: 70px;
}

    .wrapper-importDataListAmazon .importDescription {
        padding: 50px 30px;
    }

.loadding-bar {
    height: 30px;
    width: 100%;
}

    .loadding-bar .mainLoadingBar {
        background-color: #daf0fa;
        width: 80%;
        display: block;
        margin: 0 auto;
        height: 10px;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

        .loadding-bar .mainLoadingBar .loadingPercent {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            position: relative;
            background-color: #48B5E4;
            transform: translate3d(-100%, 0px, 0px);
            transition: transform 1s;
        }

    .loadding-bar .loadingSuggestText {
        position: relative;
        top: 10px;
        font-size: 20px;
        font-weight: bold;
        color: #48B5E4;
    }

.btn-p-10-30 {
    padding: 10px 30px;
}

.font-size-16 {
    font-size: 16px;
}

.empty-data-message {
    text-align: center;
    padding-top: 50px;
}
/*Show warning message*/
.doesnotSupport1360 {
    width: 100%;
    background-color: #27326F;
    position: fixed;
    top: 0px;
    z-index: 1062;
    text-align: center;
    color: white;
    font-weight: bold;
    animation-delay: 1s;
    padding: 20px 45px;
    display: none;
}

    .doesnotSupport1360 .switchToMobileVersion {
        display: none;
    }

    .doesnotSupport1360 i.fa.fa-times {
        position: absolute;
        right: 15px;
        top: 15px;
    }

.mobile .doesnotSupport1360 .switchToMobileVersion {
    display: inline-block;
}

@media screen and (max-width: 1349px) {
    .doesnotSupport1360 {
        display: block;
    }
}

@media screen and (max-width: 991px) {
    body.header, .header, body.fixed-header .header {
        width: 100%;
    }
}
/*sales order listing checkbox*/
.checkbox.soListingCheckbox label::after {
    left: 1px;
}
/*Product listing submenu*/
.dropdown-menu > li > a.see-video-link {
    display: inline;
    word-wrap: break-word;
    white-space: normal;
    line-height: 16px;
    color: #48b0f7;
}

.dropdown-menu.prdListingSubmenu {
    width: 100%;
    text-align: center;
    padding: 0px;
    background: white;
}

    .dropdown-menu.prdListingSubmenu li {
        /*padding: 15px;*/
        padding: 0px;
        border-bottom: 1px solid #ddd;
    }

        .dropdown-menu.prdListingSubmenu li:hover {
            background-color: #e5f4fb;
        }

            .dropdown-menu.prdListingSubmenu li .wrap-product-icon .wrap-text a {
                position: relative;
                text-transform: capitalize;
                font-weight: 500;
                color: #636363;
                padding: 15px;
                margin: 0px;
                display: block;
                width: 100%;
                height: 100%;
            }

            .dropdown-menu.prdListingSubmenu li .wrap-product-icon.product-icon .wrap-text a::before {
                content: "";
                background-image: url(../img/normalProduct.svg);
                background-size: contain;
                width: 25px;
                height: 20px;
                left: 35px;
                position: absolute;
                background-repeat: no-repeat;
                top: 15px;
            }

            .dropdown-menu.prdListingSubmenu li .wrap-product-icon.service-icon .wrap-text a::before {
                content: "";
                background-image: url(../img/serviceProduct.svg);
                background-size: contain;
                width: 25px;
                height: 20px;
                left: 35px;
                top: 14px;
                position: absolute;
                background-repeat: no-repeat;
            }

            .dropdown-menu.prdListingSubmenu li .wrap-product-icon.customer-icon .wrap-text a::before {
                content: "";
                background-image: url(../img/addNewCustomerIcon.svg);
                background-size: contain;
                width: 25px;
                height: 20px;
                left: 35px;
                top: 14px;
                position: absolute;
                background-repeat: no-repeat;
            }
/*START - CSS FOR LATEST EMERGE NEWS*/
.dashboardLatestNews {
    font-size: 14px;
    background-color: white;
    margin: 30px 15px 15px;
    box-shadow: 0 2px 2px 0 rgba(128, 130, 133, 0.05), 0 3px 13px 0 rgba(0, 0, 0, 0.19);
}

    .dashboardLatestNews .newsImage {
        max-width: 135px;
    }

    .dashboardLatestNews .newsDescription {
        padding-left: 30px;
    }

    .dashboardLatestNews .closeDashboardNews {
        position: absolute;
        right: 10px;
        z-index: 1;
    }

    .dashboardLatestNews .newsIcons {
        margin: 0px;
        padding: 15px;
        display: inline-block;
        width: 50%;
    }

        .dashboardLatestNews .newsIcons li::before {
            content: '';
            background: url(../img/starIcon.svg) no-repeat center;
            width: 20px;
            height: 20px;
            position: absolute;
            left: -25px;
            top: -2px;
        }

        .dashboardLatestNews .newsIcons li {
            display: block;
            padding-bottom: 15px;
            position: relative;
        }

            .dashboardLatestNews .newsIcons li.hideIcon::before {
                background: none;
            }

    .dashboardLatestNews .ecart-banner-link {
        margin-right: 30px;
        float: left;
    }
/*END - CSS FOR LATEST EMERGE NEWS*/
#coming-soon {
    margin: 30px;
}

    #coming-soon h3 {
        color: #27326f;
        font-size: 20px;
        font-weight: bold;
        margin: 15px;
    }

.block-img {
    display: inline-block;
    height: 55px;
    margin: 0 15px;
}
/*END - CSS FOR LATEST EMERGE NEWS*/

/*START - CSS FOR DDL '+ Add New'*/
.select2-drop .btn.btn-white, .select-custom .btn.btn-white {
    border: 1px solid #48B5E4;
    color: #48B5E4;
    border-radius: 5px;
    font-weight: bold;
}

    .select2-drop .btn.btn-white:hover, .select-custom .btn.btn-white:hover {
        background-color: #DAF0FA;
    }
/*END - CSS FOR DDL '+ Add New'*/
.editPage-detailDescription {
    font-size: 12px;
    display: block;
    color: #626262;
}

    .editPage-detailDescription.customStarIcon {
        line-height: 19px;
        vertical-align: middle;
    }

.uomEqualIcon {
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    right: -5px;
    top: 5px;
}

.break-word {
    word-break: break-word;
}

.wrapper-Customer-SO ul.customer-so-listing {
    padding: 0px;
    margin: 0px;
}

    .wrapper-Customer-SO ul.customer-so-listing li {
        display: inline-block;
        list-style-type: none;
        line-height: 35px !important;
        vertical-align: middle;
    }

        .wrapper-Customer-SO ul.customer-so-listing li.salesStatusColumn {
            min-width: 220px;
        }

        .wrapper-Customer-SO ul.customer-so-listing li.deliveryStatusColumn {
            min-width: 150px;
        }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a > tab-heading {
    font-weight: bold;
    color: #27326F;
    width: 100%;
}

    .override-tooltip-listingpage .popover-content {
        padding: 0px;
    }

    .override-tooltip-listingpage .countSO {
        padding: 15px;
    }

    .override-tooltip-listingpage .popover {
        border-color: #48B5E4;
    }

        .override-tooltip-listingpage .popover.left > .arrow {
            border-left-color: transparent;
            background: url('../img/bluePopoverArrow.png') no-repeat;
            height: 32px;
            width: 22px;
            content: '';
            position: absolute;
            top: calc(50% - 10px);
        }

            .override-tooltip-listingpage .popover.left > .arrow:after {
                border: none;
                background-color: transparent;
            }

.override-limit-remark.override-tooltip-listingpage .popover {
    background: #48B5E4;
    color: white;
    border: none;
    padding: 5px 10px;
}

    .override-limit-remark.override-tooltip-listingpage .popover.left > .arrow {
        background: url(../img/fullBluePopoverArrow.jpg) no-repeat;
        right: -10px;
    }

.grey-tooltip-arrow .popover.left > .arrow:after {
    border-left-color: white;
}

/* Start - scrollbar css ul.customer-countSalesOrder */
ul.customer-countSalesOrder::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f3f3f3;
}

ul.customer-countSalesOrder::-webkit-scrollbar {
    width: 10px;
    padding: 3px;
    background-color: #f3f3f3;
}

ul.customer-countSalesOrder::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #d9d9de;
}
/* End - scrollbar css ul.customer-countSalesOrder */

ul.customer-countSalesOrder {
    padding: 0px 15px;
    margin: 15px 10px;
    max-height: 200px;
    overflow-y: scroll !important;
}

    ul.customer-countSalesOrder li {
        display: block;
        padding: 5px 0px;
    }

.emerge-description-text.custom-description-text > span,
.emerge-description-text.custom-description-text > strong {
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}


/*End - Customer - Created Sales Order List*/

/*START - CSS FOR multi channel store*/
.integration .ccb-store-container {
    display: flex;
    height: 47px;
    align-items: center;
    flex-direction: row-reverse;
}

    .integration .ccb-store-container > a {
        margin-left: 5px;
    }

    .integration .ccb-store-container > p {
        margin: 0px;
        margin-right: 10px;
        opacity: 0.7;
    }

.integration .selectize-control {
    margin-top: 5px;
}

    .integration .selectize-control .selectize-input {
        padding: 6px;
        height: 32px;
    }
/*END - CSS FOR multi channel store*/

/*START - CSS FOR Notify After Create Document*/
.notify-after-create-document {
    text-align: center;
}

    .notify-after-create-document p {
        margin: 0;
        font-size: 12px;
    }

    .notify-after-create-document a {
        color: white;
        margin-top: 10px;
    }

    .notify-after-create-document .first-line {
        color: #48B5E4;
        font-size: 13px;
    }

    .notify-after-create-document img {
        margin-bottom: 15px;
    }
/*END - CSS FOR multi channel store*/

/*START - CSS FOR integrate comlimentary popup*/
.swal2-modal.integrate-comlimentary .swal2-image {
    margin: 0 auto;
}

.swal2-modal.integrate-comlimentary h2 {
    margin-bottom: 15px;
}

.swal2-modal.integrate-comlimentary .swal2-spacer {
    height: 0;
    margin: 0;
}

.swal2-modal.integrate-comlimentary .swal2-confirm {
    margin-top: 20px;
}

.swal2-modal.integrate-comlimentary .swal2-content {
    font-size: 17px;
}

.swal2-modal.stockTakeAlert h2 {
    margin-bottom: 10px;
}

.swal2-modal.stockTakeAlert hr.swal2-spacer {
    margin: 0;
    padding-bottom: 10px;
}

.swal2-modal.stockTakeAlert .swal2-content {
    text-align: left;
}

    .swal2-modal.stockTakeAlert .swal2-content ul {
        margin-bottom: 0px;
    }

        .swal2-modal.stockTakeAlert .swal2-content ul li {
            padding-bottom: 5px;
        }

        .swal2-modal.stockTakeAlert .swal2-content ul br {
            display: none;
        }

    .swal2-modal.swalAddNewCompany .swal2-confirm {
        background-color: #10cfbd !important;
    }

    .swal2-modal.swalAddNewCompany .swal2-cancel {
        background-color: white !important;
        border: 1px solid #10cfbd;
        color: #10cfbd;
    }
/*START - CSS FOR integrate comlimentary popup*/

/*START - CSS FOR pdf translation*/
.pdf-translate .left-title {
    font-family: Montserrat;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
}

.pdf-translate label {
    font-size: 13px;
}

.pdf-translate .field-line {
    margin-top: 20px;
}

    .pdf-translate .field-line:first-child {
        margin-top: 20px;
    }

.pdf-translate .description {
    margin-left: 20px;
}

.pdf-translate .small-desc {
    font-size: 12px;
    opacity: 0.8;
    line-height: 14px;
}

.pdf-translate .refresh-icon {
    width: 25px;
    height: 15px;
    margin-top: -2px;
    margin-right: 5px;
}

.pdf-translate .col-sm-6,
.pdf-translate .col-sm-3,
.pdf-translate .col-sm-9 {
    margin: 0;
    padding: 0;
}

.pdf-translate .p-l-6 {
    padding-left: 6px;
}

.pdf-translate .m-t-3 {
    margin-top: 3px;
}
/*END - CSS FOR pdf translation*/

.ui-notification.success.customNotification a.btn:hover {
    text-decoration: none;
}

/* START PRODUCT EDIT FORM - DROP IMAGES - SELECT IMAGES TO UPLOAD */
    .product-edit-image-uploader .drop-box {
        border-width: 3px;
        border-radius: 3px;
        text-align: center;
    }

    .product-edit-image-uploader.action--drag-drop .drop-box {
        border-width: 1px;
    }

    .product-edit-image-uploader .drop-box input[type="file"] {
        margin: 0 auto;
        display: block;
        width: 100px;
        height: 35px;
        position: relative;
        z-index: 2;
        opacity: 0;
    }

    .product-edit-image-uploader.action--drag-drop .drop-box .mass-upload--icon {
        display: block;
        margin: 15px auto 30px;
    }

    .product-edit-image-uploader .product-upload-description {
        padding: 25px 0px;
        font-weight: normal;
        font-size: 14px;
    }

    .product-edit-image-uploader button {
        position: absolute;
        bottom: 0px;
        z-index: 1;
        left: calc(50% - 45px);
    }

.tag-prd-2img.selectize-control.multi .selectize-input.items .item {
    background: white;
    border: 1px solid #ccc;
}

    .tag-prd-2img.selectize-control.multi .selectize-input.items .item > a {
        color: white;
    }

    .product-images-list .tobe-upload-product {
        display: inline-block;
        padding: 15px;
    }

        .product-images-list .tobe-upload-product.single-product {
            width: 33.33%;
        }

        .product-images-list .tobe-upload-product.variant-product {
            width: 50%;
        }

        .product-images-list .tobe-upload-product .wrap-product-image {
            display: inline-block;
            text-align: left;
            height: 200px;
            width: 50%;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

@media screen and (min-width: 1366px) {
    .single-product .prdDefaultImgPreview {
        height: 200px;
    }
}

@media screen and (min-width: 1600px) {
    .product-images-list .tobe-upload-product .wrap-product-image {
        height: 300px;
    }

    .single-product .prdDefaultImgPreview {
        height: 300px;
    }
}

@media screen and (min-width: 1900px) {
    .product-images-list .tobe-upload-product .wrap-product-image {
        height: 350px;
    }

    .single-product .prdDefaultImgPreview {
        height: 350px;
    }
}

.product-images-list .tobe-upload-product .wrap-product-image.full-image {
    width: 100%;
}

    .product-images-list .tobe-upload-product .wrap-product-image.full-image .status {
        font-size: 40px;
        position: absolute;
        left: 50%;
        z-index: 1;
        top: 60px;
    }

    .product-images-list .tobe-upload-product .wrap-product-image.full-image.active img {
        filter: blur(3px);
    }

    .product-images-list .tobe-upload-product .wrap-product-image.full-image .success-upload.status {
        color: #39B54A;
    }

    .product-images-list .tobe-upload-product .wrap-product-image.full-image .failed-upload.status {
        color: #f8d053;
    }

.product-images-list .tobe-upload-product .headerImage .imageName {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.product-images-list .tobe-upload-product .headerImage .removeImage {
    width: 10%;
    float: right;
    display: block;
    text-align: right;
}

.product-images-list .tobe-upload-product .wrap-ddl {
    display: inline-block;
    width: 48%;
    padding-left: 25px;
    vertical-align: top;
}

    .product-images-list .tobe-upload-product .wrap-ddl .selectize-control a.remove::before {
        color: #f55753;
    }

    .product-images-list .tobe-upload-product .wrap-ddl .selectize-control .selectize-input {
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
    }

.selected-image-list {
    min-height: 200px;
}

    .selected-image-list .list-product-images {
        margin: 0;
        padding: 0;
    }

.product-image-parent {
    width: 25%;
    display: inline-block;
    padding: 15px;
}

    .product-image-parent .hightlight-default-image-text.already-default-image {
        background: yellow;
        color: #626262;
        padding: 3px 5px;
        display: inline-block;
        font-weight: bold;
        position: absolute;
    }

    .product-image-parent .hightlight-default-image-text {
        display: none;
    }

    .product-image-parent .image-child {
        overflow: hidden;
        display: block;
        margin-bottom: 5px;
        border: 1px solid #ccc;
        border-radius: 1px;
        text-align: center;
    }

        .product-image-parent .image-child .img,
        .prdDefaultImgPreview {
            width: 100%;
            height: 150px;
            background-image: url(../../../assets/img/mobile/no-image.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            text-align: center;
            margin: 0 auto;
        }

    .product-image-parent .image-actions {
        display: block;
        text-align: center;
        padding-top: 5px;
    }

        .product-image-parent .image-actions .image-child-delete-icon {
            padding-right: 5px;
            display: inline-block;
        }

            .product-image-parent .image-actions .image-child-delete-icon button {
                border: 1px solid #ccc;
                background-color: white;
                padding: 3px 15px;
                border-radius: 5px;
                font-size: 12px;
                color: #f55753;
            }

        .product-image-parent .image-actions .image-child-setdefault-icon {
            display: inline-block;
        }

            .product-image-parent .image-actions .image-child-setdefault-icon button {
                border: 1px solid #ccc;
                background-color: white;
                padding: 3px 15px;
                border-radius: 5px;
                font-size: 12px;
            }

                .product-image-parent .image-actions .image-child-setdefault-icon button i {
                    color: #ccc;
                }

                .product-image-parent .image-actions .image-child-setdefault-icon button:hover i {
                    color: #10cfbd;
                }

            .product-image-parent .image-actions .image-child-setdefault-icon .default-image {
                font-size: 12px;
                color: #10cfbd;
            }

.default-image-label {
    color: #626262;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 3px 5px;
    font-size: 12px;
}

.wrap-product-image-list {
    max-height: 500px;
    overflow-y: auto;
}
/* END PRODUCT EDIT FORM - DROP IMAGES - SELECT IMAGES TO UPLOAD */
button.popover-text-button {
    background: transparent;
    border: none;
    padding: 5px;
    text-transform: uppercase;
}

#wholeTableListingPage button.popover-text-button {
    padding: 0px;
}

/*============== START CSS FOR BASIC SETTING =============*/
.border {
    border: 1px solid #DDD;
}

    .wrap-basic-setting .basic-setting-header {
        font-size: 21px;
        border-bottom: 1px solid #e5e5e5;
        display: block;
        padding: 15px 0px;
        margin-bottom: 15px;
    }

    .wrap-basic-setting .business-overview {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
    }

        .wrap-basic-setting .business-overview li {
            display: inline-block;
            padding-right: 15px;
            padding-left: 0px;
        }

    .wrap-basic-setting fieldset.override-fieldset {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 8px 15px;
    }

        .wrap-basic-setting fieldset.override-fieldset > legend {
            border: none;
            display: inline;
            width: auto;
            padding: 0 15px;
            font-size: 16px;
            font-weight: 500;
            margin: 0;
        }

        .wrap-basic-setting fieldset.override-fieldset > small {
            display: block;
            padding-bottom: 15px;
        }

    .wrap-basic-setting input[type=file] {
        width: 100%;
    }

    .wrap-basic-setting .custom-switch.i-switch {
        height: 20px;
    }

    .wrap-basic-setting .approve-items-box {
        width: 175px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 170px;
        border: 1px solid #DDD;
        margin: 15px 15px 0 0;
    }

        .wrap-basic-setting .approve-items-box .active {
            color: #27c24c !important;
        }

    .wrap-basic-setting .group-box {
        width: 700px;
    }

        .wrap-basic-setting .group-box .group-box-header {
            background-color: #c9edfd;
            color: #4bb5e3;
            font-weight: bold;
            font-size: 15px;
            padding: 5px 15px;
        }

        .wrap-basic-setting .group-box .group-box-item {
            padding: 10px;
            border-bottom: 1px solid #DDD;
        }

        .wrap-basic-setting .group-box .business-overview li {
            padding-right: 0px;
        }

        .wrap-basic-setting .group-box .business-overview .radio {
            margin: 0;
        }

        .wrap-basic-setting .group-box .business-overview label {
            margin: 0;
            line-height: 22px;
        }

    .wrap-basic-setting form.formData-modal .business-overview {
        margin-top: -7px;
    }

    .wrap-basic-setting form.formData-modal .radio label {
        line-height: 22px;
        vertical-align: middle;
        font-weight: normal;
        text-transform: none;
        color: black;
    }

    .wrap-basic-setting .group-box .sub-group-box-item {
        padding: 10px;
        background-color: #DDD;
    }

    .wrap-basic-setting .header-footer-option-box{
        clear: both; 
        padding: 12px 10px; 
        background: #e4e4e4; 
        margin-top: 50px;
        margin-bottom: 5px;
    }
    .wrap-basic-setting .single-option-box{
        clear: both; 
        padding: 22px 10px; 
        background: #e4e4e4; 
        margin-bottom: 5px;
    }
/*============== END CSS FOR BASIC SETTING =============*/

/*============== START CSS FOR PICKING LIST =============*/
.picking-list-content {
    overflow: hidden;
    /*width: 100%;
    min-height: 200px;*/
    width: 100%;
    min-height: 200px;
    height: 550px;
}

.result-page {
    height: 500px;
}

.picking-list-content .custom-proposePurchase > li {
    width: 130px;
}

.picking-list-content .stepContainer {
    /*height: 100%;
    width: calc(975px * 3);*/
    height: calc(550px * 3);
    width: 100%;
}

    .picking-list-content .stepContainer .step-content {
        width: 100%;
        height: 550px;
        display: block;
        float: left;
        transform: translateY(0);
        -webkit-transition: transform 1s;
        transition: transform 1s;
    }

    .picking-list-content .stepContainer .step-2 {
        transform: translateY(-550px);
        background-color: white;
    }

.picking-list-content .waring-message {
    background-color: #FCF8E3 !important;
    padding: 9px;
    border-radius: 5px;
}

.picking-list-content .btn-pl-disable {
    background-color: rgb(208, 210, 211);
    border-color: rgb(208, 210, 211);
    position: relative;
    cursor: default;
}

    .picking-list-content .btn-pl-disable > p {
        position: absolute;
        top: -150%;
        left: -60%;
        min-width: 290px;
        background-color: #10cfbd;
        padding: 7px;
        border-radius: 5px;
        display: none;
    }

    .picking-list-content .btn-pl-disable:hover > p {
        display: initial;
    }

        .picking-list-content .btn-pl-disable:hover > p:after {
            content: "";
            position: absolute;
            top: 100%;
            left: 65%;
            margin-left: -5px;
            border-width: 8px;
            border-style: solid;
            border-color: #10cfbd transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid transparent;
        }

.modal-dialog .picking-list-content .nav-tabs.nav-tabs-linetriangle > li.error-heading > a {
    color: #f55753;
}
/*============== END CSS FOR PICKING LIST =============*/

td#applyAllPopover .popover {
    background-color: #48B5E4;
    color: white;
}

    td#applyAllPopover .popover .popover-content {
        padding: 9px 10px;
    }

    td#applyAllPopover .popover .arrow {
        border-bottom-color: #48B5E4;
    }

    td#applyAllPopover .popover .btn.btn-primary.btn-sm {
        border-width: 2px;
        border-color: white;
        border-style: solid;
        font-size: 1.1em;
        padding: 5px 22px;
        margin-left: 5px;
    }
/*Badge Override*/
.top-left-header .badge {
    font-size: 14px;
}

.badge.badge-danger {
    background-color: #f55753;
    color: #fff;
}

.first-sales-shipment-content > p {
    position: absolute;
    bottom: -55px;
    left: -115px;
    min-width: 345px;
    background-color: #10cfbd;
    padding: 7px;
    border-radius: 5px;
    color: white;
    text-align: center;
    z-index: 1000;
    opacity: 0.8;
}

    .first-sales-shipment-content > p:after {
        content: ' ';
        position: absolute;
        left: calc(50%);
        top: -10px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #10cfbd;
    }

.first-sales-dropship-content > p {
    position: absolute;
    top: -46px;
    left: -115px;
    min-width: 345px;
    background-color: #10cfbd;
    padding: 7px;
    border-radius: 5px;
    color: white;
    text-align: center;
    z-index: 1046;
    opacity: 0.8;
}

    .first-sales-dropship-content > p:after {
        content: ' ';
        position: absolute;
        left: calc(50%);
        top: 34px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #10cfbd;
    }

.static-popover .popover {
    background-color: #FACE00;
    color: white;
    margin-left: 25px;
    min-width: 200px;
}

    .static-popover .popover .arrow {
        border-right-color: #FACE00;
    }

        .static-popover .popover .arrow::after {
            border-right-color: #FACE00;
        }

.static-popover i {
    color: white;
}

    .static-popover i.fa-times {
        cursor: pointer;
    }

.raw-material-content input.ng-invalid {
    border-color: #b94a48;
}

.raw-material-content .ui-select2.ng-invalid .select2-choice {
    border-color: #b94a48;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.product-download-icon .wrap-text a::before {
    content: "";
    background-image: url(../img/download_icon_blue.svg);
    background-size: contain;
    width: 25px;
    height: 20px;
    left: 35px;
    position: absolute;
    background-repeat: no-repeat;
    top: 15px;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.product-upload-icon .wrap-text a::before {
    content: "";
    background-image: url(../img/import-icon-blue.svg);
    background-size: contain;
    width: 25px;
    height: 20px;
    left: 35px;
    position: absolute;
    background-repeat: no-repeat;
    top: 15px;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.product-update-icon .wrap-text a::before {
    content: "";
    background-image: url(../img/update_icon_blue.svg);
    background-size: contain;
    width: 25px;
    height: 20px;
    left: 35px;
    position: absolute;
    background-repeat: no-repeat;
    top: 15px;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.product-mass-upload-photos .wrap-text a::before {
    content: "";
    background-image: url(../img/massUpload/blue-upload-icon.svg);
    background-size: contain;
    width: 25px;
    height: 20px;
    left: 35px;
    position: absolute;
    background-repeat: no-repeat;
    top: 15px;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.standard-pl-icon .wrap-text a::before {
    content: "";
    background-image: url(../img/icon-svg/standard-pl-icon.svg);
    background-size: contain;
    width: 25px;
    height: 20px;
    left: 25px;
    position: absolute;
    background-repeat: no-repeat;
    top: 13px;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.tier-pricing-pl-icon .wrap-text a::before {
    content: "";
    background-image: url(../img/icon-svg/tier-pricing-pl-icon.svg);
    background-size: contain;
    width: 31px;
    height: 26px;
    left: 17px;
    position: absolute;
    background-repeat: no-repeat;
    top: 18px;
}

.dropdown-menu.prdListingSubmenu li .wrap-product-icon.price-list-import .wrap-text a::before {
    content: "";
    background-image: url(../img/import-icon-blue.svg);
    background-size: contain;
    width: 25px;
    height: 20px;
    left: 17px;
    position: absolute;
    background-repeat: no-repeat;
    top: 15px;
}

.download-and-upload.row .massUpdateBox {
    border: 1px solid #E6E6E6;
    background-color: white;
}

    .download-and-upload.row .massUpdateBox .massUpdateDetail {
        padding: 30px 15px;
    }

        .download-and-upload.row .massUpdateBox .massUpdateDetail div .header-text {
            font-size: 20px;
            font-weight: 500;
        }

        .download-and-upload.row .massUpdateBox .massUpdateDetail .emerge-small-text {
            color: gray;
            margin-top: 15px;
        }

        .download-and-upload.row .massUpdateBox .massUpdateDetail button {
            font-weight: 700;
        }

.importSoDetails-childBox {
    padding: 20px 0px;
    border: 1px solid #E6E6E6;
    background-color: white;
}

.badge-blue {
    background: #48B5E4;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    padding: 6px 10px;
    margin-right: 10px;
}

.download-and-upload.row .massUpdateBox .massUpdateDetail .uploader-container input.emerge-upload-input + label#lblForMassUpdateProductUpload {
    padding: 6px 17px;
    font-size: 14px;
    text-transform: none;
    border: 1px solid #48B5E4;
    color: #48B5E4;
    background-color: white;
}

    .download-and-upload.row .massUpdateBox .massUpdateDetail .uploader-container input.emerge-upload-input + label#lblForMassUpdateProductUpload:hover {
        border: 1px solid transparent;
        color: #48B5E4;
        background-color: #DAF0FA;
    }

.download-and-upload.row .massUpdateBox .massUpdateDetail .uploader-container label#lblForMassUpdateProductUpload {
    margin-bottom: 0px;
    border-radius: 3px;
    font-weight: 700;
}

.download-and-upload .tab-pane {
    max-height: 500px;
    overflow-y: auto;
}
/*Section Css*/
section hr {
    margin-top: 0px;
}

.transaction-address-form {
    padding: 0 15px;
    border: 1px dashed #ccc;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.m-t-neg-7 {
    margin-top: -7px;
}
.m-t-neg-7 {
    margin-top: -7px;
}
.max-h-300 {
    max-height: 300px;
}
.max-h-700 {
    max-height: 700px;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.additional-messages-container {
    border: 1px solid #e6e6e6;
    padding: 10px;
    border-radius: 5px;
}

body .modal-dialog .font-weight-500 {
    font-weight: 500;
}

.h-650 {
    height: 650px;
}

.h-485 {
    height: 485px;
}

.h-300 {
    height: 300px;
}

.btn-success.btn-outline {
    color: #10cfbd;
    background-color: transparent;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #10cfbd;
    border-color: #10cfbd;
}

.btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
    color: #fff;
}

.btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
    color: #fff;
}

.btn-danger.btn-outline {
    color: #d9534f;
    background-color: transparent;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #d2322d;
    border-color: #ac2925;
}

.success-bg {
    background-color: #47b4e3;
    color: white;
}

.warning-bg {
    background-color: #f9e300;
    color: #626262;
}

/* --- START - MAIN MENU ---- */

ul#main-menu li.top-main-menu {
    /*background-image: url('../img/mainMenu/gradient.svg');*/
    background-size: cover;
    position: fixed;
    transform: rotateX(180deg);
    right: 10px;
}

ul#main-menu li.bottom-main-menu {
    /*background-image: url('../img/mainMenu/gradient.svg');*/
    background-size: cover;
    position: fixed;
    bottom: 40px;
    padding-bottom: 20px;
    right: 10px;
}

ul#main-menu li.top-main-menu img {
    padding-top: 10px;
}

ul#main-menu li.top-main-menu img,
ul#main-menu li.bottom-main-menu img {
    display: block;
    margin: 0 auto;
    transform: rotateX(180deg);
    opacity: 0.25;
}

ul#main-menu li.top-main-menu:hover img,
ul#main-menu li.bottom-main-menu:hover img {
    opacity: 0.6;
}


/* --- END - MAIN MENU ---- */
.advance-saved-search-container {
    padding: 0 20px 0 5px;
}

    .advance-saved-search-container .delete-save-search {
        position: absolute;
        right: 5px;
    }

/* ------ START - CUSTOMIZE CSS FOR ATTENTION TO CONTACT FORM ---- */
.wrapSelectAttnToContact.selectize-control.multi .selectize-input [data-value] {
    background: white;
    color: #626262;
    border: 1px solid #ccc;
    box-shadow: none;
    text-shadow: none;
}

    .wrapSelectAttnToContact.selectize-control.multi .selectize-input [data-value]:hover {
        color: #10cfbd;
    }

.wrapSelectAttnToContact.selectize-control.multi.plugin-remove_button [data-value] .remove {
    color: white;
}

.wrapSelectAttnToContact.selectize-input {
    padding: 4px 8px 5px 8px;
}
/* ------ END - CUSTOMIZE CSS FOR ATTENTION TO CONTACT FORM ------ */

/*emerge-dropdown select2 readonly css*/
emerge-dropdown[readonly] {
    pointer-events: none;
}

    emerge-dropdown[readonly] .select2-search-choice-close, emerge-dropdown[readonly] .select2-arrow {
        display: none !important;
    }

    emerge-dropdown[readonly] .select2-container a {
        padding-left: 0px;
        padding-right: 0px;
        border: none;
    }

.readonly {
    pointer-events: none;
}

    .readonly .select2-search-choice-close, .readonly .select2-arrow {
        display: none !important;
    }

    .readonly .select2-container a {
        padding-left: 0px;
        padding-right: 0px;
        border: none;
    }
    .readonly .select2-container.select2-allowclear .select2-choice .select2-chosen {
        padding-left: 5px;
    }
/*END emerge-dropdown select2 readonly css*/
/* ------ END - CUSTOMIZE CSS FOR ATTENTION TO CONTACT FORM ------ */
.createSupplierForm ng-form .small-desc {
    display: none;
}

.quickViewCustomerForm .address-no-data-msg {
    padding: 0 25px;
}

#emerge_advance_multiple_search .selectize-control div[data-value] {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 235px;
}

form.productSupplierMapping .modal-header .prompt-text {
    margin-top: 40px;
}

form.productSupplierMapping .modal-header i.fa.fa-times-circle {
    position: absolute;
    right: 3%;
}

form.productSupplierMapping .modal-header .prompt-text span {
    padding-left: 8px;
}

form.productSupplierMapping .modal-body {
    padding: 25px;
}

    form.productSupplierMapping .modal-body div.table-responsive {
        max-height: 50vh;
    }

.modal-footer.proposingpurchase {
    padding-left: 110px;
}

/*file drop zone*/
.file-drop-box {
    border: dashed 2px lightgray;
}

    .file-drop-box.dragover {
        border-color: #48B5E4;
    }

.progress-bar-lightblue {
    background-color: #48B5E4;
}

li.attach-file-wrapper {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    padding-left: 8px;
}

    li.attach-file-wrapper:first-child {
        padding-left: 0px;
    }

    li.attach-file-wrapper .attach-file-text {
        vertical-align: super;
    }

/*-----START - OVERRIDE CSS OF MULTISELECT DDL------*/
.overrided-multiselect .multiSelect > button {
    background-image: none;
    border-color: #dddddd;
}

    .overrided-multiselect .multiSelect > button:hover {
        background-image: none;
        border-color: #c6c6c6;
    }

.overrided-multiselect .multiSelect .multiSelectItem:not(.multiSelectGroup).selected {
    background-image: none;
    background-color: #DAF0FA;
}

    .overrided-multiselect .multiSelect .multiSelectItem:not(.multiSelectGroup).selected:hover {
        color: #2c2c2c;
    }

.overrided-multiselect .multiSelect .tickMark {
    font-size: 15px;
    font-weight: bold;
    top: 5px;
}
/*-----END - OVERRIDE CSS OF MULTISELECT DDL------*/

.fa.fa-remove.text-danger:hover {
    color: #f70600;
}

.paid-feature-switch-label {
    font-family: Montserrat;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 20px;
    display: inline-block;
    font-weight: 500 !important;
    position: absolute;
}

.text-lowercase, .text-lowercase button {
    text-transform: lowercase !important;
}

.text-uppercase, .text-uppercase button {
    text-transform: uppercase !important;
}

.text-initial {
    text-transform: initial !important;
}

/* Row with equal height columns */
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.content-center {
    justify-content: center;
}

/* CSS Animation for highlighting the element */
.highlighSpecEle {
    position: relative;
    border-radius: 5px;
    cursor: pointer;
}

    .highlighSpecEle::after {
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 5px;
        display: block;
        position: absolute;
        top: 0px;
        animation: highlightElement 2s infinite;
        -webkit-animation: highlightElement 2s infinite;
        animation-iteration-count: 3;
        animation-delay: 2s;
    }

@-webkit-keyframes highlightElement {
    0% {
        border: 2px solid red;
        opacity: 1;
    }

    50% {
        border: 1px solid red;
        opacity: 0.5;
    }

    100% {
        border: 0px solid red;
        opacity: 0;
        -webkit-transform: scale(1.2, 1.2);
    }
}

@keyframes highlightElement {
    0% {
        border: 2px solid red;
        opacity: 1;
    }

    50% {
        border: 1px solid red;
        opacity: 0.5;
    }

    100% {
        border: 0px solid red;
        opacity: 0;
        transform: scale(1.2, 1.2);
    }
}

.newCompanyModal.modal .modal-dialog,
.newCompanyModal.modal .modal-dialog .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(150%, -50%);
    width: 900px;
    transition-duration: 1s;
    transition-timing-function: ease;
}

.newCompanyModal.modal.in .modal-dialog,
.newCompanyModal.modal.in .modal-dialog .modal-content {
    border: none;
    border-radius: 0px;
    box-shadow: none;
    /*middle of screen*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
}

.modal .modal-body.w-new-company {
    padding: 0 15px 0 0;
    overflow: hidden;
}

.w-new-company .left-img-bg {
    background-color: #29abe2;
    padding: 60px 25px;
}

    .w-new-company .left-img-bg img {
        display: block;
        margin: 0 auto;
    }

.w-new-company .right-img-bg {
    background-color: white;
    padding: 0 25px;
}

.modal-signature .modal-dialog .modal-content{
    height: 450px;
    width: 1200px;
}

/*CSS for purchasing account in customer page*/

    .purchasing-options label:not(.i-switch) {
        color: rgba(44,44,44,.45);
        font-size: 14px;
        min-width: 80px;
    }

    .purchasing-options ul {
        display: inline-block;
        margin: 0;
    }

        .purchasing-options ul li {
            display: block;
        }

            .purchasing-options ul li div.radio label {
                text-transform: capitalize;
                font-weight: normal;
            }

fieldset.ecart-instock-options {
    padding: 15px 0px 15px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

    fieldset.ecart-instock-options legend {
        margin: 0;
        border-bottom: none;
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 14px;
    }

.purchasing-options fieldset.ecart-instock-options ul li {
    display: block;
}

    .purchasing-options fieldset.ecart-instock-options ul li label {
        text-transform: capitalize;
        font-size: 12px;
    }

.emerge-custom-label {
    font-family: Montserrat;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    padding-right: 10px;
}

/*----------------------START CSS FOR NEW PRODUCT DDL---------------------*/
    .wrap-selectItemsDropdown.w-290 {
        width: 290px;
    }

    .wrap-selectItemsDropdown .label-items-dropdown {
        background-image: none;
        border-radius: 2px;
        border: 1px solid rgba(0,0,0,.07);
        white-space: nowrap;
        line-height: 27px;
        display: flex;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        background-clip: padding-box;
        user-select: none;
        background-color: #fff;
        font-size: 14px;
        color: #444;
        padding: 0 8px;
        cursor: pointer;
    }

    .wrap-selectItemsDropdown.w-290 .label-items-dropdown .itemName {
        padding-left: 7px;
    }

    .wrap-selectItemsDropdown .label-items-dropdown .itemName {
        width: 90%;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

        .wrap-selectItemsDropdown .label-items-dropdown .itemName.placeholder-text {
            font-size: 12px;
            color: #999;
        }

    .wrap-selectItemsDropdown .label-items-dropdown .removeBtn {
        width: 12%;
        text-align: center;
        line-height: 24px;
        color: #626262;
        min-width: 22px;
    }

    .wrap-selectItemsDropdown .label-items-dropdown .downArrow {
        width: 8%;
        text-align: center;
        line-height: 25px;
        color: #626262;
    }

    .wrap-selectItemsDropdown .label-items-dropdown .editIcon {
        width: 10%;
        min-width: 15px;
        text-align: center;
        line-height: 25px;
        color: #626262;
    }

        .wrap-selectItemsDropdown .label-items-dropdown .editIcon > i {
            margin-top: 6px;
        }
/*----------------------END CSS FOR NEW PRODUCT DDL----------------------*/

/*------------------ Start Discount button for SO, QO, PO.... -----------*/
.discountButton {
    padding: 2.5px 5px;
}

    .discountButton > div {
        display: inline-block;
    }

    .discountButton span {
        display: inline-block;
    }

.wrap-selectItemsDropdown .label-items-dropdown.wrapDiscount {
    padding-left: 0px;
    padding-right: 0px;
}

.wrap-selectItemsDropdown .label-items-dropdown .itemName.discountAmount,
.discountButton .discountAmount {
    width: 70%;
    text-align: center;
}

    .wrap-selectItemsDropdown .label-items-dropdown .itemName.discountAmount.fullWidthDiscount {
        width: 100%;
    }

.wrap-selectItemsDropdown .label-items-dropdown .editIcon.removeDiscount,
.discountButton .removeDiscount {
    width: 25%;
    text-align: center;
}

    .animate-if.ng-enter, .animate-if.ng-leave {
        transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    }

        .animate-if.ng-enter,
        .animate-if.ng-leave.ng-leave-active {
            opacity: 0;
        }

            .animate-if.ng-leave,
            .animate-if.ng-enter.ng-enter-active {
                opacity: 1;
            }

.override-item-icons span {
    line-height: 27px;
}

.override-item-icons i.product-icon.icon-16,
.override-item-icons i.service-icon.icon-16,
.override-item-icons i.rawMaterial-icon.icon-16 {
    margin-bottom: 3px;
}
/*------------------ End Discount button for SO, QO, PO.... -------------*/

.tooltip-see-details-btn {
    border: 1px solid #48B5E4;
    border-radius: unset;
    padding: 2px 36px;
    background-color: #fafafa;
    pointer-events: auto;
    color: #48B5E4;
    border-radius: 4px;
}

    .tooltip-see-details-btn:hover {
        border: 1px solid transparent;
        color: #48B5E4;
        background-color: #DAF0FA;
        padding: 2px 36px;
        pointer-events: auto;
    }

.item-qty-custom-popover .popover {
    font-size: 12px;
    color: black;
    background-color: #fafafa;
    opacity: 0.9;
    border: 1px solid #d1d3d4;
}

.manage-multiple-company {
    padding-right: 23px;
    font-size: 15px;
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}

    .manage-multiple-company.with-padding-6 {
        padding-top: 6px;
    }

    .manage-multiple-company a {
        text-decoration: underline;
        color: #48B5E4;
    }

    .manage-multiple-company i {
        cursor: pointer;
    }

/* ======= START - CUSTOM CSS FOR SALES ORDER DETAIL PAGE ===========*/
.table tbody tr td.b-b-blueBorder {
    border-left: 3px solid #48B5E4 !important;
}

.fixedHeaderWhenScrolling {
    position: fixed;
    /* this element 's top should be dynamic */
    background-color: #DAF0FA;
    width: max-content;
    padding-left: 20px;
    display: block;
    max-height: 65px;
}

    .fixedHeaderWhenScrolling.activateFixedTableHeader {
        display: block;
    }

    .fixedHeaderWhenScrolling .wrapHeaderTable {
        padding: 0px;
        margin: 0px;
        /* to make all header on one row, no new line 
           .fixedHeaderWhenScrolling width: max-content to wrap this element */
        width: max-content;
    }

        .fixedHeaderWhenScrolling .wrapHeaderTable .fixedColumn {
            display: inline-block;
            color: #272B35;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 16px;
            vertical-align: middle;
            padding: 15px 8px;
        }

.backToTopDetailPage {
    position: fixed;
    bottom: 15px;
    right: 10px;
    font-size: 30px;
    opacity: 0.7;
}

    .backToTopDetailPage:hover {
        opacity: 1;
    }
/* ======= END - CUSTOM CSS FOR SALES ORDER DETAIL PAGE ===========*/

.warehouse-section-dropdown-display {
    width: 290px;
    text-overflow: ellipsis;
}

.nav a#viewDocumentPDF,
.nav span#viewDocumentPDF {
    margin-left: 15px;
    padding: 5px 12px;
    margin-top: 7px;
    font-weight: bold;
    border-color: #ccc;
}

    .nav a#viewDocumentPDF:hover,
    .nav span#viewDocumentPDF:hover {
        background-color: #dbdbdb;
    }

.wrapPopoverMessage .popover-content {
    min-width: 200px;
}

.quick-create-button {
    padding: 5px;
    background-color: #48B0F7;
    border-radius: 22px;
    display: flex;
    margin-top: 16px;
    margin-bottom: 10px;
}

    .quick-create-button:hover {
        background-color: #6DC0F9;
        transition: background-color 1000ms linear;
    }

.page-sidebar .quick-create a {
    color: black;
}

    .page-sidebar .quick-create a:hover {
        color: #48B5E4;
    }

    .page-sidebar .quick-create a:active {
        color: black;
    }

.animation-display {
    transition: visibility 0s, opacity 0.5s linear;
}

/* intercom position override (bottom-left) */
.intercom-launcher-discovery-frame {
    left: 20px !important;
}

.intercom-launcher-frame {
    left: 20px !important;
    right: auto !important;
}

.intercom-messenger-frame {
    left: 20px !important;
    right: auto !important;
}

.intercom-launcher-badge-frame {
    left: 20px !important;
    right: auto !important;
}

.intercom-borderless-frame {
    left: 0 !important;
}

.intercom-borderless-frame {
    left: 0 !important;
}

#intercom-container .intercom-notifications-frame {
    left: 20px !important;
}

.intercom-lightweight-app .intercom-lightweight-app-launcher.intercom-launcher {
    left: 20px !important;
}

.intercom-lightweight-app-messenger {
    left: 20px !important;
}
/* ======================================== */

.dropdown .video-instruction-dropdown {
    right: -50px;
    margin-top: 10px;
    box-shadow: 3px 3px 9px #cdcaca;
}

    .dropdown .video-instruction-dropdown.video-general-setting {
        right: 0px;
    }

.instr-video video {
    background: #ffffff url('../pages/img/progress/progress-circle-success-itp.svg') no-repeat center center;
}

.instr-video {
    position: fixed;
    width: 495px;
    height: 280px;
    bottom: 10px;
    right: 10px;
    z-index: 10000;
    cursor: auto;
    resize: both;
    box-shadow: 3px 3px 9px #cdcaca;
    border: 1px solid #48B5E4;
}

    .instr-video .header-instruction-video {
        height: 50px;
        position: absolute;
        z-index: 2;
        background: linear-gradient(to bottom, rgba(150, 150, 150, 1), rgba(0, 0, 0, 0));
        display: flex;
        align-items: stretch;
        opacity: 0.7;
        top: 0;
        left: 0;
        width: 100%;
    }

    .instr-video .drag-instr-video {
        width: 100%;
    }

        .instr-video .drag-instr-video:hover {
            cursor: move;
        }

    .instr-video .close-instr-video {
        width: 30px;
        text-align: center;
        margin-top: 2px;
    }

    .instr-video .bot-resize-video {
        width: 10px;
        height: 10px;
        position: absolute;
        z-index: 2;
        bottom: 0;
        right: 0;
    }

        .instr-video .bot-resize-video:hover {
            cursor: se-resize;
        }

    .instr-video .top-resize-video {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        height: 15px;
        width: 15px;
    }

    .instr-video .top-resize-video-icon {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        background: url('../img/icon-svg/scale-up.svg') no-repeat;
        height: 20px;
        width: 20px;
        margin: 5px 0 0 5px;
    }

    .instr-video .top-resize-video:hover {
        cursor: se-resize;
    }

    .instr-video .active-instruction-video {
        transition: all 50ms ease;
        transition-duration: 0.05s;
    }

.instr-video-button-sub-content {
    position: relative;
}

    .instr-video-button-sub-content > .firsttimeTooltip {
        margin-top: -4px;
        position: absolute;
        z-index: 1000;
        right: 340px;
    }

        .instr-video-button-sub-content > .firsttimeTooltip > .big-button-bubble::after {
            content: ' ';
            position: absolute;
            left: 295px;
            top: 7px;
            border-right: none;
            border-left: 16px solid #f9cc4e;
            border-bottom: 13px solid transparent;
            border-top: 13px solid transparent;
        }

.instr-video-button-content {
    position: relative;
}

    .instr-video-button-content > .firsttimeTooltip > .big-button-bubble::after {
        content: ' ';
        position: absolute;
        left: calc(80% - 16px);
        top: -13px;
        width: 0;
        height: 0;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 16px solid #f9cc4e;
        border-top: none;
    }

    .instr-video-button-content > .firsttimeTooltip {
        margin-top: 50px;
        position: absolute;
        z-index: 1000;
        right: 250px;
    }

#managerACPopover {
    margin-top: 50px;
    position: absolute;
    z-index: 1000;
    right: -180%;
    left: auto;
    width: auto;
}

#productManufacturingPopover {
    margin-top: 80px;
    position: absolute;
    z-index: 1000;
    right: -9%;
    left: auto;
}

    #managerACPopover > .big-button-bubble, #productManufacturingPopover > .big-button-bubble {
        background-color: #10cfbd;
        border-radius: 5px;
        color: #fff;
        line-height: 40px;
        display: inline-block;
        height: 40px;
        position: relative;
        top: -30px;
        width: 100%;
        font-size: 14px;
        left: -240px;
    }

        #managerACPopover > .big-button-bubble::after, #productManufacturingPopover > .big-button-bubble::after {
            content: ' ';
            position: absolute;
            left: calc(50% - 10px);
            top: -13px;
            width: 0;
            height: 0;
            border-left: 13px solid transparent;
            border-right: 13px solid transparent;
            border-bottom: 16px solid #10cfbd;
            border-top: none;
        }


/* ======================================== */

/* Tai: custom grid form for user company access */
.customized-grid-form.row [class*=col-]:first-child {
    padding-left: 7px;
}

.customized-grid-form .row [class*=col-]:last-child {
    padding-right: 7px;
}
/* ============================================= */

/* Company setting modal */
.row.custom-col-padding > [class*="col-"] {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.w-new-company .close-modal-icon {
    position: absolute;
    right: 10px;
    top: 10px;
}

.w-new-company .new-company-form-step-title {
    margin-top: 15%;
}

.w-new-company .new-company-name-text-container {
    padding-top: 55px;
}

.w-new-company .new-company-form-submit-button {
    margin-top: 30px;
}

.w-new-company .new-company-user-listing-scrollable {
    height: 155px;
    overflow-y: auto;
    overflow-x: hidden;
}

.manage-company-user-access-modal .modal-header h2 {
    font-weight: 400;
}

.manage-company-user-access-modal .modal-header p {
    font-size: 16px;
}

.manage-company-user-access-modal .modal-header .close-modal-icon {
    position: absolute;
    top: 5px;
    right: 10px;
}

.manage-company-user-access-modal .modal-dialog.modal-lg {
    margin-top: 10%;
}
/* ===================== */
.table-with-scrolling {
    display: block;
    height: 65vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.custom-padding-for-company-access {
    padding: 0px 20px;
}

tr.table-white-row td {
    background-color: white !important;
}

.link-setting-listting-page {
    position: absolute;
    bottom: 30px;
    left: 230px;
    width: 500px;
}

/* Dashboard Order reminder */
.dashboard-order-reminder-list-container table thead tr.productlist-customized-td th {
    padding-left: 10px !important;
    padding: 10px;
    border-bottom: none;
}

.dashboard-order-reminder-list-container table tbody {
    overflow-y: scroll;
    display: block;
    max-height: 150px;
}

    .dashboard-order-reminder-list-container table tbody tr.productlist-customized-td td {
        border-bottom: none;
        padding: 10px;
    }

        .dashboard-order-reminder-list-container table tbody tr.productlist-customized-td td a {
            text-decoration: none;
            color: #48B5E4;
            font-weight: normal;
        }

    .dashboard-order-reminder-list-container table tbody tr td a:hover {
        color: #3CA0DC;
    }

.cursor-pointer {
    cursor: pointer;
}

div#reorderQty a {
    text-decoration: none;
}
/* ======================== */

/* Import preview data modal */
.custom-import-preview .table.table-condensed tbody tr td, .table.table-condensed tbody tr td *, .table.table-condensed thead tr th {
    vertical-align: top;
}

.custom-import-preview .tab-container .nav.nav-tabs.nav-tabs-linetriangle li {
    width: 50%;
    text-align: center;
}

.custom-import-preview .vertical-overflow {
    overflow-y: auto;
    max-height: 50vh;
}

.custom-import-preview .close-modal-icon {
    position: absolute;
    right: 10px;
    top: 10px;
}
/* ========================= */

/* ======================== */
.subscription-header .radio input[type="radio"]:focus + label {
    color: #48B5E4;
}

.tranform-none {
    text-transform: none !important;
}

/* ============= Start - Onboarding step 1 - checkbox css */
.onboardingCheckbox.checkbox {
    min-height: 30px;
}

    .onboardingCheckbox.checkbox label {
        font-size: 16px !important;
    }

.neverShowNoticeCheckbox.checkbox label::after {
    left: 0px;
}
/* ============= End - Onboarding step 1 - checkbox css */

/* ============= Start - Delivery Order - Dispatch Modal CSS ================== */
.scrollableDispatchPrdList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: transparent;
}

.scrollableDispatchPrdList::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

.scrollableDispatchPrdList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #ccc;
}

.dispatchScanTextbox {
    background: #4EB1F4;
    position: relative;
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 15px;
    border-radius: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #4EB1F4;
    transition: all ease-in 0.5s;
}

    .dispatchScanTextbox.isBlured {
        background: white;
        border: 1px solid #4EB1F4;
    }

        .dispatchScanTextbox.isBlured .mainText .dispatch--text {
            color: #4EB1F4;
        }

    .dispatchScanTextbox input {
        position: absolute;
        width: 100%;
        left: 0px;
        height: 100%;
        top: 0px;
        opacity: 0;
        z-index: 2;
    }

    .dispatchScanTextbox .mainText {
        position: relative;
        z-index: 1;
    }

        .dispatchScanTextbox .mainText .dispatch--icon,
        .dispatchScanTextbox .mainText .dispatch--text {
            font-size: 18px;
            color: white;
        }
/* ============= End - Delivery Order - Dispatch Modal CSS ================== */

/* ============= Start - Button for integrations ============= */
.btn-with-integrations-img {
    background: transparent;
    border: none;
}
/* ============== End - Button for integrations ============== */

/* ============== Start - CSS for Search input in Dispatch Modal ============== */
.searchDispatchItems {
    position: relative;
    width: 100%;
}

    .searchDispatchItems .searchIcon {
        width: 5%;
        font-size: 20px;
        text-align: center;
    }

    .searchDispatchItems .searchInput {
        width: 85%;
        height: 35px;
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #ddd;
        color: #333;
    }

        .searchDispatchItems .searchInput:focus {
            border-bottom-color: #48B5E4;
            transition: all 1s !important;
        }

    .searchDispatchItems .searchClear {
        width: 5%;
        font-size: 15px;
        cursor: pointer;
        text-align: center;
    }

.plusMinusIcon {
    cursor: pointer;
}
/* ============== End - CSS for Search input in Dispatch Modal ============== */

tr.no-border-bottom > td {
    border-bottom: 1px solid white !important;
}
/* ============== Start - For show line breaks in item description =============== */
.table.table-condensed tbody tr td.white-space-impt--pre-line {
    white-space: pre-line !important;
}
/* ============== Start - For show line breaks in item description =============== */
.box-shadow-grey {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.price-list-filter-highlight {
    background-color: #10CFBD14;
    margin-left: -10px !important;
    padding-left: 10px;
}

.price-list-option {
    margin-top: 10px;
    border: 1px solid #ddd;
    padding: 3px 0px 3px 3px;
    border-radius: 2px;
    position: absolute;
    background-color: white;
    z-index: 1;
    width: 250px;
    left: -75px;
}

    .price-list-option .close-pricelist-option {
        position: absolute;
        right: 7px;
        top: 0;
    }

    .price-list-option .radio label {
        margin-right: 0;
    }

    .price-list-option .arrow {
        height: 7px;
        width: 7px;
        border-style: solid;
        border-color: #c1c1c1;
        border-width: 1px 0px 0px 1px;
        transform: rotate(45deg);
        transition: border-width 150ms ease-in-out;
        position: absolute;
        top: -5px;
        left: 50%;
        background-color: white;
    }


/* ================ Start - For Copy shipping or billing address (customer, supplier) ======= */
ul.copyAddress__hover li:hover,
ul.copyAddress__hover li:hover pre.showTextWithMultipleLines {
    color: #48B5E4;
}
/* ================ Start - For styling the last priority country in country ddl ======= */
.select2-results .lastPriorityCountry {
    border-bottom: 1px dashed #ccc;
}

.customErrorTextAngularPdf.error {
    border: 1px solid red;
    outline: none;
    border-radius: 5px;
}

/* ================ START CSS FOR UI-GRID ANGULAR PLUGIN ================ */
.ui-grid-cell-contents.ui-grid-custom-selected,
.ui-grid-cell-contents.ui-grid-custom-selected {
    background-color: rgba(0,119,204, 0.15);
}

.ui-grid-custom-selected-scrolling .ui-grid-cell-contents.ui-grid-custom-selected {
    background-color: transparent;
}

.ui-grid-custom-selection-input {
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 10px;
    height: 10px;
    display: block;
    font-size: 1;
    z-index: -1;
    color: transparent;
    background: transparent;
    overflow: hidden;
    border: none;
    padding: 0;
    resize: none;
    outline: none;
    -webkit-user-select: text;
    user-select: text; /* Because for user-select:none, Safari won't allow input */
}

.grid.prdQuickImportGrid {
    border: 1px solid #e6e6e6;
    height: 70vh;
}

    .grid.prdQuickImportGrid div[role="presentation"].ui-grid-render-container.ui-grid-render-container-body .ui-grid-viewport {
        overflow: scroll !important;
    }

    .grid.prdQuickImportGrid .ui-grid-cell > .tooltip.ui-grid-cell-focus {
        background-color: inherit;
    }

    .grid.prdQuickImportGrid .ui-grid-header {
        border-bottom: 1px solid #e6e6e6;
        text-transform: uppercase;
    }

        .grid.prdQuickImportGrid .ui-grid-header .ui-grid-top-panel {
            background-color: #DDF2FA;
        }

    .grid.prdQuickImportGrid .ui-grid-header-cell .headerAction--btn {
        background: none;
        border: none;
        position: absolute;
        right: 5px;
        top: 3px;
    }

    .grid.prdQuickImportGrid .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {
        border-right: none;
    }

    .grid.prdQuickImportGrid .ui-grid-cell-contents {
        padding: 5px 10px;
    }

    .grid.prdQuickImportGrid .ui-grid-row .ui-grid-cell-contents.ui-grid-cell-focus {
        background-color: transparent;
    }

    .grid.prdQuickImportGrid .ui-grid-cell-contents.ui-grid-custom-selected {
        border: 2px solid #48B5E4;
        background-color: white;
    }

    .grid.prdQuickImportGrid .ui-grid-focuser:focus {
        box-shadow: none;
    }

    .grid.prdQuickImportGrid .uiGrid-textareaEditable {
        height: 100%;
        width: 100%;
        min-height: 200px;
    }

    .grid.prdQuickImportGrid .cellEditbale--btn {
        /*display: none;*/
        background: none;
        border: none;
        box-shadow: none;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .grid.prdQuickImportGrid .ui-grid-row .ui-grid-cell:hover .cellEditbale--btn {
        display: inline-block;
    }

    .grid.prdQuickImportGrid .customCheckbox--prdGrid {
        padding: 1px 8px;
        border: 2px solid transparent;
        height: 100%;
    }

        .grid.prdQuickImportGrid .customCheckbox--prdGrid .i-switch {
            height: 18px;
        }

    .grid.prdQuickImportGrid .ui-grid-cell-contents.invalid {
        border-width: 2px;
    }

    .grid.prdQuickImportGrid .customCheckbox--prdGrid.ui-grid-cell-focus {
        border-color: #48B5E4;
    }

    .grid.prdQuickImportGrid .tooltip.bottom.gridPrdImport--ErrorMsg .tooltip-arrow {
        border-bottom-color: #fc8f8f;
    }

    .grid.prdQuickImportGrid .tooltip.bottom.gridPrdImport--ErrorMsg .tooltip-inner {
        background-color: #fc8f8f;
    }

.dropdown-menu.uiGrid-menuActions {
    background: white;
    border: 1px solid #ddd;
}

    .dropdown-menu.uiGrid-menuActions li:last-child {
        padding-top: 9px;
    }

        .dropdown-menu.uiGrid-menuActions li:last-child small {
            padding: 0px 20px;
        }

.headerCell-updateColumnData {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 16px;
    padding: 10px;
    font-size: 12px;
}

.grid .customInputQuickImport {
    height: 100%;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    background-color: white;
    border-bottom: 1px solid #48B5E4;
    border-top: none;
    border-right: none;
    border-left: none;
}

.popover .popover-content .custom-ui-grid-contents.ui-grid-cell-contents {
    overflow: unset;
}

.popover.grid--customAdditonalUOMPopover {
    max-width: unset;
    width: 500px;
}

.popover.left.grid--tagsPopover > .arrow:after {
    border-left-color: white;
}

.popover.grid--descriptionPopover {
    max-width: unset;
    width: 350px;
}

.row.customPopoverRow::before,
.row.customPopoverRow::after {
    display: none;
}

.row.customPopoverRow > div {
    padding-bottom: 5px;
}

.btn--forIcon {
    padding: 0px;
    background: none;
    box-shadow: none;
    border: none;
}
/* ================ END CSS FOR UI-GRID ANGULAR PLUGIN ================ */

.column .pricelist-left-row {
    padding: 8px;
    margin: 0px;
    width: 50%;
}

.pricelist-category-column {
    height: 310px;
    overflow: auto;
}

.purchasingStep .price-list-loading-over {
    width: 100%;
    height: 535px;
    position: absolute;
    z-index: 99;
}
/* ================ END CSS FOR UI-GRID ANGULAR PLUGIN ================ */

/* ================ PURCHASE ADDTIONAL FIND OUT MORE LINK =================*/
.purchase-additional-find-out-more {
    position: absolute;
    top: -1px;
    font-size: 15px;
}

    .purchase-additional-find-out-more.cn_CN {
        left: 95px;
    }

    .purchase-additional-find-out-more.en_EN {
        left: 180px;
    }

.display-flex {
	display: flex
}

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

    .row.display-flex > [class*='col-'] {
        display: flex;
        flex-direction: row;
    }

button.block {
    width: 100%;
    text-align: center;
}
/* == Fix select 2 dropdown overflow text ==*/
.search-listing.full-width .select2-container .select2-choice .select2-chosen {
    width: 194px;
}
/* ======================================== */

/* ===================== START - MATRIX VARIANT TABLE =================== */
table.matrixVariantTable tr td.customDisabledCell,
table.matrixVariantTable tr:hover td.customDisabledCell {
    background-color: #ddd;
}
/* ===================== END - MATRIX VARIANT TABLE =================== */

/* ===================== START - APP SETTINGS - ESTIMATE DELIVERY DATE =================== */
.appSettingEstDODate input.specificDate {
    text-align: center;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #ddd;
    padding: 5px 15px;
    width: 70px;
}
/* ===================== END - APP SETTINGS - ESTIMATE DELIVERY DATE =================== */

/* ===================== START - NEW DASHBOARD SPRINT 53 =================== */
.analytics-dashboard {
    background-color: white;
    /*border: 1px solid #ccc;*/
    padding: 15px;
    box-shadow: 3px 3px 32px -14px rgba(0,0,0,0.75);
}

    .analytics-dashboard .salesTargetTitle {
        line-height: 35px;
        vertical-align: middle;
    }

    .analytics-dashboard .my-sales-progress-bar {
        width: 100%;
        background: #48B5E4;
        height: 35px;
        border-radius: 2px;
        position: relative;
    }

        .analytics-dashboard .my-sales-progress-bar .currentProgress {
            position: absolute;
            width: 44%;
            height: 100%;
            background-color: #10cfbd;
            left: 0px;
            border-radius: 2px;
        }

        .analytics-dashboard .my-sales-progress-bar .editSalesTarget {
            position: absolute;
            height: inherit;
            left: 0px;
            border: none;
        }

            .analytics-dashboard .my-sales-progress-bar .editSalesTarget input {
                height: 100%;
                padding: 0 15px;
                box-shadow: none;
                border-style: dashed;
                border-width: 1px;
            }

            .analytics-dashboard .my-sales-progress-bar .editSalesTarget .saveSalesTarget {
                position: relative;
                left: -30px;
                cursor: pointer;
            }

        .analytics-dashboard .my-sales-progress-bar.companySalesProfits {
            background: transparent;
        }

        .analytics-dashboard .my-sales-progress-bar .profits {
            background: #10cfbd;
        }

        .analytics-dashboard .my-sales-progress-bar.sales::before {
            background: transparent;
        }

        .analytics-dashboard .my-sales-progress-bar .targetValue {
            display: block;
            padding-left: 15px;
            line-height: 35px;
            height: 35px;
            font-weight: bold;
            z-index: 1;
            position: relative;
        }

        .analytics-dashboard .my-sales-progress-bar .targetPercentage {
            position: absolute;
            top: 8px;
            font-weight: bold;
            left: 15px;
        }

/*.analytics-dashboard .my-sales-progress-bar::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 100%;
    background-color: #10cfbd;
    left: 0px;
    border-radius: 2px;
}*/
/* ===================== END - NEW DASHBOARD SPRINT 53 =================== */

.dropdown.dropdown-light--blue {
    display: inline-block;
}

    .dropdown.dropdown-light--blue .dropdown-menu {
        background-color: white;
        border: 1px solid #ddd;
    }

.modal-body.batch-modal .batch-list label {
    font-weight: bold;
    color: rgba(44,44,44,.35);
    line-height: 13px;
    margin: 0px;
    text-transform: uppercase;
}

.batch-modal .formData-modal button.btn-default {
    color: rgba(98,98,98,.7);
}

.batch-modal input#batchExpiryInput {
    padding: 3px 12px;
}

.batch-modal .batch-description {
    color: rgba(98,98,98,.7);
}

.flex-intro .wrapper-popover.m-b-2 {
    margin-bottom: 2px;
}

.integration-box .integration-name {
    color: #808285;
    font-size: 25px;
}

.total-packing-units a.text-link, a.text-link:hover, a.text-link:focus {
    text-decoration: underline;
}

.p-5 {
    padding: 5px;
}

.custom-packing-list-how-to {
    position: fixed;
    top: 85px;
    right: 25px;
    display: flex;
}

    .custom-packing-list-how-to .fa.fa-info-circle {
        color: #3a8fc8;
        margin-right: 10px;
        font-size: 20px;
    }

    .custom-packing-list-how-to a {
        font-size: 15px;
        text-decoration: underline;
    }

.prdTrendRpt.selectize-control.multi.plugin-remove_button [data-value] .remove:before {
    color: #f55753;
}

.prdTrendRpt.selectize-control .selectize-input.items {
    border: none;
}

.trendRptRadio.custom-radio-info.radio label:before {
    top: 2px;
}

.salesRpt-p-l-none {
    padding-left: 0px !important;
}

#tableInventoryList > tbody > tr > td,
#tableInventoryList > tbody > tr > th,
#tableInventoryList > tfoot > tr > td,
#tableInventoryList > tfoot > tr > th,
#tableInventoryList > thead > tr > td,
#tableInventoryList > thead > tr > th {
    padding-top: 8px;
    padding-right: 0px;
    padding-bottom: 8px;
    padding-left: 0px;
}

#inventory-fixed-bar-header > thead > tr > td,
#inventory-fixed-bar-header > thead > tr > th {
    padding-top: 8px;
    padding-right: 0px;
    padding-bottom: 8px;
    padding-left: 0px;
}

#inventory-fixed-bar {
    position: fixed;
    top: 0;
    left: 250px;
    z-index: 999;
    width: calc(100vw - 250px);
    padding: 0px 40px 0px 20px;
    background-color: wheat;
}
.panel.panel-default.wrapper .select2-container.select2-container-multi {
    height: fit-content !important;
}
div .flex-row-wrap {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    flex-direction: row-reverse;
}


#stripeTabs .tab-container .tab-content {
    padding-top: 0px;
}

.whitespace-prewrap {
    white-space: pre-wrap !important;
}

/* Start - Mass Upload Photos in Product, Raw Material */
.upload-mass-photos-progress-bar {
    width: 85%;
    height: 15px;
    background-color: #DCF0F6;
    text-align: center;
    display: block;
    margin: 0 auto;
    position: relative;
    border-radius: 5px;
    z-index: 1;
}

    .upload-mass-photos-progress-bar > div {
        height: 15px;
        width: 1%;
        display: block;
        background: #5BB7DD;
        z-index: 2;
        position: relative;
        border-radius: 5px;
        -webkit-transition: width 1s;
        transition: width 1s;
    }
/* End - Mass Upload Photos in Product, Raw Material */


.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    border-color: #dc3545;
}

    .btn-outline-danger:hover {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .btn-outline-danger:focus, .btn-outline-danger.focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
    }

    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
        color: #dc3545;
        background-color: transparent;
    }

    .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
    .show > .btn-outline-danger.dropdown-toggle {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

        .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
        }

.relevant-document li {
    text-align: center;
}

.coupon-modal .coupon-modal-input {
    height: 40px;
    width: 300px;
    border-bottom: 2px solid #48B5E4;
    font-size: 25px;
    padding-left: 0px;
    border-radius: initial;
    margin-bottom: 5px;
}

.coupon-modal .coupon-image {
    position: absolute;
    width: 360px;
    top: -2px;
}

.stripe-payment-img {
    width: 300px;
    height: 253px;
    float: right;
    margin-right: 25px !important;
    background-image: url('../img/plugins/stripe/stripe-payment.svg');
}

.stripe-payment-img2 {
    width: 440px;
    height: 250px;
    float: right;
    margin-right: 25px !important;
    background-image: url(../img/plugins/stripe/payment-form-ex.png);
    box-shadow: 7px 7px 15px #aaaaaa;
    background-size: cover;
}


.stripe-payment-info {
    margin: 0;
    padding-left: 25px !important;
    padding-top: 25px;
}

    .stripe-payment-info ul {
        margin: 0;
        padding-left: 0px;
    }

        .stripe-payment-info ul li {
            padding: 5px 5px 5px 30px;
            list-style-type: none;
            background: url('../img/plugins/stripe/blue-check.svg') no-repeat;
            background-size: 16px;
            background-position: 0px center;
            color: #000000;
        }

    .stripe-free-img::after {
        position: absolute;
        width: 52px;
        height: 52px;
        background-image: url('../img/plugins/stripe/free-icon.svg');
        background-repeat: no-repeat;
        top: -25px;
        right: -15px;
        content: "";
    }

.app-setting-checkbox-wrapper {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

    .app-setting-checkbox-wrapper .app-setting-checkbox-inline {
        display: inline-flex;
    }

        .app-setting-checkbox-wrapper .app-setting-checkbox-inline label {
            margin: 0;
        }
/*Override datepicker css*/
.bootstrap-datetimepicker-widget.dropdown-menu.top {
    color: #626262;
}

/* .datepicker.datepicker-dropdown.datepicker-orient-top {
    margin-top: 50px;
} */

.datepicker-dropdown.datepicker-orient-bottom:before {
    border: none;
}


.table thead tr th a.sort-arrow {
    position: relative;
    margin-top: 8px;
}

a.sort-arrow:before,
a.sort-arrow:after {
    border: 4px solid transparent;
    content: "";
    display: block;
    height: 0;
    right: -15px;
    top: 50%;
    position: absolute;
    width: 0;
}

a.sort-arrow:before {
    border-bottom-color: #666;
    margin-top: -9px;
}

a.sort-arrow:after {
    border-top-color: #666;
    margin-top: 1px;
}

a.table-header.sort-arrow {
    vertical-align: inherit;
}

    a.table-header.sort-arrow:before {
        border-bottom-color: #48B5E4;
    }

    a.table-header.sort-arrow:after {
        border-top-color: #48B5E4;
    }

    a.table-header.sort-arrow:hover {
        color: rgba(44,44,44,.35)
    }
/* START - ECART DISPLAY STOCK */
    .table-responsive.ecartDisplayStock .table thead tr th {
        padding: unset;
    }

    .table-responsive.ecartDisplayStock .table thead tr td,
    .table-responsive.ecartDisplayStock .table tbody tr td,
    .table-responsive.ecartDisplayStock .table tfoot tr td {
        vertical-align: middle;
    }

    .table-responsive.ecartDisplayStock .table thead tr th:first-child {
        padding-left: 8px !important;
    }

    .emergeSearchBox ul {
        display: inline-block;
        list-style: none;
        padding: 0;
    }

        .emergeSearchBox ul > li {
            display: block;
            height: 40px;
            float: left;
        }

            .emergeSearchBox ul > li.searchField {
                position: relative;
                border: 1px solid #ccc;
                border-right: none;
                padding: 5px 40px 5px 5px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }

                .emergeSearchBox ul > li.searchField input {
                    min-width: 270px;
                    border: none;
                    padding: 5px;
                }

                .emergeSearchBox ul > li.searchField .closeSearchItem {
                    background: none;
                    border: none;
                    position: absolute;
                    right: 5px;
                    top: 8px;
                    font-size: 20px;
                }

            .emergeSearchBox ul > li.searchIcon {
                background-color: #48B5E4;
                color: white;
                cursor: pointer;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                text-align: center;
                padding: 10px;
            }

                .emergeSearchBox ul > li.searchIcon i {
                    width: 20px;
                }
/* END - ECART DISPLAY STOCK */

.free-trial-reminder {
    width: 100%;
    background-color: #48B5E4;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1062;
    text-align: center;
    color: white;
    font-weight: bold;
    animation-delay: 1s;
    padding: 14px 45px;
    display: block;
}

.show-free-trial-reminder {
    margin-top: 60px;
}

.table-responsive .row-header {
    text-transform: uppercase;
    font-weight: 600;
    font-family: Montserrat;
    font-size: 13px !important;
}

.table-responsive.table-col-row .col-lg-1, .table-responsive.table-col-row .col-lg-10, .table-responsive.table-col-row .col-lg-11, .table-responsive.table-col-row .col-lg-12, .table-responsive.table-col-row .col-lg-2,
.table-responsive.table-col-row .col-lg-3, .table-responsive.table-col-row .col-lg-4, .table-responsive.table-col-row .col-lg-5, .table-responsive.table-col-row .col-lg-6, .table-responsive.table-col-row .col-lg-7,
.table-responsive.table-col-row .col-lg-8, .table-responsive.table-col-row .col-lg-9, .table-responsive.table-col-row .col-md-1, .table-responsive.table-col-row .col-md-10, .table-responsive.table-col-row .col-md-11,
.table-responsive.table-col-row .col-md-12, .table-responsive.table-col-row .col-md-2, .table-responsive.table-col-row .col-md-3, .table-responsive.table-col-row .col-md-4, .table-responsive.table-col-row .col-md-5,
.table-responsive.table-col-row .col-md-6, .table-responsive.table-col-row .col-md-7, .table-responsive.table-col-row .col-md-8, .table-responsive.table-col-row .col-md-9, .table-responsive.table-col-row .col-sm-1,
.table-responsive.table-col-row .col-sm-10, .table-responsive.table-col-row .col-sm-11, .table-responsive.table-col-row .col-sm-12, .table-responsive.table-col-row .col-sm-2, .table-responsive.table-col-row .col-sm-3,
.table-responsive.table-col-row .col-sm-4, .table-responsive.table-col-row .col-sm-5, .table-responsive.table-col-row .col-sm-6, .table-responsive.table-col-row .col-sm-7, .table-responsive.table-col-row .col-sm-8,
.table-responsive.table-col-row .col-sm-9, .table-responsive.table-col-row .col-xs-1, .table-responsive.table-col-row .col-xs-10, .table-responsive.table-col-row .col-xs-11, .table-responsive.table-col-row .col-xs-12,
.table-responsive.table-col-row .col-xs-2, .table-responsive.table-col-row .col-xs-3, .table-responsive.table-col-row .col-xs-4, .table-responsive.table-col-row .col-xs-5, .table-responsive.table-col-row .col-xs-6,
.table-responsive.table-col-row .col-xs-7, .table-responsive.table-col-row .col-xs-8, .table-responsive.table-col-row .col-xs-9 {
    padding-right: 5px;
    padding-left: 5px;
}

.table-responsive.table-col-row .row {
    padding-top: 10px;
    border-bottom: 1px solid #E0E0E0;
    margin-right: -7px;
    margin-left: -7px;
}

    .table-responsive.table-col-row .row input[class*='form-control'] {
        margin-bottom: 5px;
    }

[disabled] label {
    pointer-events: none;
    opacity: .8;
}

[disabled] .checkbox label:before {
    background: #626262;
}

[disabled] input {
    background: #f8f8f8;
    color: #626262;
}

li.list-style-none {
    list-style: none;
}
ul.list-inline > li.list-inline-item {
    margin-top: 0px;
    margin-bottom: 0px;
}
li.list-inline-item.radio + .radio {
    margin-top: 0px;
}

.no-border-radius {
    border-radius: 0;
}

.cursor-auto {
    cursor: auto !important;
}

.no-hover:hover {
    color: inherit !important;
}

.check-fix-alignment label::after {
    left: 1.2px;
}

.init-stock-prompt button.btn {
    min-width: 250px;
}

.radio.radio-inline.radio-green,
.radio.radio-inline.radio-blue {
    margin-top: 0px;
}

.circle-num {
    border-radius: 50%;
    font-weight: bold;
    color: white;
    line-height: 35px;
    text-align: center;
    background-color: #48B5E4;
    height: 40px;
    width: 40px;
    font-size: 20px;
}

.margin-auto {
    margin: auto;
}

.top-left-close-modal-icon {
    position: absolute;
    top: 5px;
    right: 10px;
}

.customer-overview-container .customer-statistics {
    display: flex;
    direction: ltr;
}

@media screen and (min-width: 1366px) {
    .description-invoice {
        width: 60%;
    }
}
@media screen and (min-width: 1366px) {
    .description-shipment {
        width: 24%;
    }

    .customer-overview-container .customer-statistics .item-block {
        max-width: 280px;
        margin-left: 50px;
    }

        .customer-overview-container .customer-statistics .item-block .item-block-value {
            font-size: 26px;
        }

        .customer-overview-container .customer-statistics .item-block h4 {
            font-size: 24px;
        }
}

@media screen and (max-width: 1366px) {
    .description-shipment {
        width: 22%;
    }

    .customer-overview-container .customer-statistics .item-block {
        max-width: 200px;
        margin-left: 20px;
    }

        .customer-overview-container .customer-statistics .item-block .item-block-value {
            font-size: 18px;
        }

        .customer-overview-container .customer-statistics .item-block h4 {
            font-size: 20px;
        }
}

.text-overflow-unset {
    text-overflow: unset !important;
}

a.text-link[disabled] {
    opacity: 0.3;
}

hr.bold {
    border: 1.5px solid #AFB1B3;
    margin: 0px;
}

hr.thin {
    border: 0.5px solid #AFB1B3;
    margin: 0px;
}

.p-l-105 {
    padding-left: 105px !important;
}
.fafafa-background-color {
    background-color: #fafafa;
}
.disabled-element {
    pointer-events: none;
    opacity: 0.4;
}
.video-center
{
    display: block; margin: auto;
}
.horizontal-vertical-center {
	display: flex;
	justify-content: center;
	align-items: center
}

.remove-header-footer-image{
    position: absolute;
    right: 3px;
    top: 23px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Margin */
.mt-1{
    margin-top: 0.5em;
}

/*firsttimeTooltip custom*/
#managerACPopoverView.firsttimeTooltip{
    bottom: -16px;
    left: 0;
}
#managerACPopoverView.firsttimeTooltip .big-button-bubble{
    background-color: #10cfbd;
}
#managerACPopoverView.firsttimeTooltip .big-button-bubble::after{
    content: ' ';
    position: absolute;
    top: -16px;
    width: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #10cfbd;
    border-top: 0;
}

.directive-tooltip {
    position: absolute;
    top: -50px;
}
.directive-tooltip .big-button-bubble{
    background-color: #10cfbd;
}
.directive-tooltip .big-button-bubble::after {
    content: ' ';
    position: absolute;
    left: 50px;
    top: 35px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid #10cfbd;
}

input.custom-placeholder::placeholder {
    font-size: 11px;
}
/* table collapse */

.child-collapse.hide-opacity {
    opacity: 0;
}

.child-collapse {
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

    .child-collapse.close {
        display: none !important;
    }

    .animate-repeat {
        line-height:30px;
        list-style:none;
        box-sizing:border-box;
      }
      
      .animate-repeat.ng-move,
      .animate-repeat.ng-enter,
      .animate-repeat.ng-leave {
        transition:all linear 0.5s;
      }
      
      .animate-repeat.ng-leave.ng-leave-active,
      .animate-repeat.ng-move,
      .animate-repeat.ng-enter {
        opacity:0;
        max-height:0;
      }
      
      .animate-repeat.ng-leave,
      .animate-repeat.ng-move.ng-move-active,
      .animate-repeat.ng-enter.ng-enter-active {
        opacity:1;
        max-height:30px;
      }
.text-capitalize {
    text-transform: capitalize;
}
.text-capitalize-important {
    text-transform: capitalize !important;
}

#ecartToolTip{
    position: absolute;
    left: -100%;
}
.modal-dialog.modal-product-tree {
    margin-top: 4rem;
    min-width: 800px;
    border: none;
}
.un-disabled {
    pointer-events: auto !important;
    opacity: 1 !important;
}
.text-underline {
    text-decoration: underline;
    text-decoration-color: #48b5e4;
}
.input-date-clear > input[type=date] {
    float: left;
}
.input-date-clear > i.fa.fa-times {
    position: absolute;
    right: 55px;
    top: 7px;
    cursor: pointer;
}

table tbody.height-300{
    height: 300px;
    overflow-y:scroll;
}

.max-h-45{
    height: 45px;
    max-height: 45px;
}

.font-main {
    font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.sortable{
    cursor: pointer !important;
}

.onboarding-btn-padding{
    padding: 10px 20px;
}

.onboarding-step-2-action {
    margin-top: 60px;
}

.min-height-100 {
    min-height: 100px;
}
.emerge-video-border
{
    border: 2px solid #48B5E4;
}
.border-top {
    border-top: 1px solid black !important;
    background-color: #e6e6e6 !important;
}
.border-right {
    border-right: 1px solid black !important;
    background-color: #e6e6e6 !important;
}
.border-bottom {
    border-bottom: 1px solid black !important;
    background-color: #e6e6e6 !important;
}
.constrain {
  height: 400px;
  overflow: scroll;
}
/*Table scroll Example code */
.table.invoice-edit-details-table tbody {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

    .table.invoice-edit-details-table tbody tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }

        .table.invoice-edit-details-table tbody tr td:first-of-type {
            width: 20px;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(2n) {
            width: 20px;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(3n) {
            width: 30%;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(4n) {
            width: 12%;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(5n) {
            width: 13%;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(6n) {
            width: 10%;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(7n) {
            width: 12%;
        }
        .table.invoice-edit-details-table tbody tr td:nth-child(8n) {
            width: 15%;
        }
.row.dashboard-new-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.row.dashboard-new-col [class*='col-'] {
        flex-direction: column;
}

  .table-scroll {
    position: relative;
    width:100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 500px;
  }
  .table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  .table-wrap {
    position: relative;
  }
  .table-scroll th,
  .table-scroll td {
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #f8f8f8;
    background: #fff;
    vertical-align: middle;
  }
  .table-scroll thead th {
    background: #DAF0FB;
    color: gray;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  } 
  .table-scroll th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #DAF0FB;
    color: gray;
  }
  .table-scroll thead th:first-child
  {
    z-index: 5;
  }

/* Ecart / Invitation page */
.table-ecart-pricing-plan {
    position: relative;
    width:100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
  }
  .table-ecart-pricing-plan table {
    width: 100%;
    margin: auto;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .table-ecart-pricing-plan th,
  .table-ecart-pricing-plan td {
    text-align: center;
    padding: 5px 10px;
    border: 1px solid #9090907d;
    background: #fff;
    vertical-align: middle;
    font-weight: 500 !important;
    color: black;
  }
  .table-ecart-pricing-plan thead th {
    background: #DAF0FB;
    border: 1px solid #9090907d;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  } 
  .table-ecart-pricing-plan tbody td p {
    margin : 0px;
  } 
  @media screen and (max-width: 1366px) {
    .table-ecart-pricing-plan th,
    .table-ecart-pricing-plan td {
        padding: 5px 5px;
    }
}
/* START - TOTAL FOOTER */
table.total-footer > tfoot > tr > th,
table.total-footer > tfoot > tr > td {
    border-bottom: 2px solid #E6E6E6;
}
table.total-footer > tfoot > tr > th:first-child,
table.total-footer > tfoot > tr > td:first-child {
    padding-left: 15px !important; 
}
table.total-footer > tfoot > tr > th:last-child,
table.total-footer > tfoot > tr > td:last-child {
    padding-right: 15px !important;
}
table.total-footer > tfoot > tr:last-child > th,
table.total-footer > tfoot > tr:last-child > td {
    border-bottom: none;
}
/* END - TOTAL FOOTER */

  /***************************** Variant Option Order Modal Styling *****************************/

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.advancedDemo .dropzone ul[dnd-list] {
    min-height: 42px;
    margin: 0px;
    padding-left: 0px;
}

.advancedDemo .dropzone li {
    display: block;
}

/**
 * Reduce opacity of elements during the drag operation. This allows the user
 * to see where he is dropping his element, even if the element is huge. The
 * .dndDragging class is automatically set during the drag operation.
 */
.advancedDemo .dropzone .dndDragging {
    opacity: 0.7;
}

/**
 * The dndDraggingSource class will be applied to the source element of a drag
 * operation.
 */
.advancedDemo .dropzone .dndDraggingSource {
    opacity: 0.5;
}

/**
 * An element with .dndPlaceholder class will be added as child of the dnd-list
 * while the user is dragging over it.
 */
.advancedDemo .dropzone .dndPlaceholder {
    background-color: #ddd !important;
    display: block;
    min-height: 42px;
}

/***************************** Element type specific styles *****************************/
.cursor-move {
    cursor: move;
}
ul[dnd-list] li {
    /* Disable text selection if item is not draggable */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
ul[dnd-list] .dndDraggingSource {
    display: none;
  }
ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    padding: 10px 15px;
  }
.drag-row .dndPlaceholder {
    min-height: 50px;
  }
.advancedDemo .dropzone .itemlist {
    min-height: 120px !important;
}

.advancedDemo .dropzone .itemlist > li {
    background-color: #62B0F2;
    border: none;
    border-radius: .25em;
    color: #fff;
    float: left;
    font-weight: 700;
    height: 50px;
    margin: 5px;
    padding: 0px;
    text-align: center;
    width: 80px;
}
.advancedDemo .dropzone .itemlist > li> button {
    background-color: #62B0F2;
    border: none;
    border-radius: .25em;
    color: #fff;
    float: left;
    font-weight: 700;
    height: 50px;
    text-align: center;
    width: 80px;
}
.advancedDemo .dropzone .itemlist > li :active {
  background-color: #308AD7;
}
.advancedDemo .dropzone .container-element {
    margin: 10px;
}
.b2b-brand{
    font-family: Montserrat;
    font-size: 11px;
    font-weight: 600;
}
input.animate-search-box{
    width: 75px;
    -webkit-transition: width 0.4s ease-in-out !important;
    transition: width 0.4s ease-in-out !important;
}
input.animate-search-box:focus{
    width: 100%;
}
#profileImage {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D0D2D3;
    font-size: 15px;
    font-family: 'Montserrat';
    color: #fff;
    text-align: center;
    line-height: 15px;
  }
  /*START - CSS FOR excel translation*/
.excel-translate .left-title {
    font-family: Montserrat;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.8;
}

.excel-translate label {
    font-size: 13px;
}

.excel-translate .description {
    margin-left: 20px;
}

.excel-translate .col-sm-6,
.excel-translate .col-sm-3,
.excel-translate .col-sm-9 {
    margin: 0;
    padding: 0;
}

.excel-translate .p-l-6 {
    padding-left: 6px;
}

.excel-translate .m-t-3 {
    margin-top: 3px;
}
/*END - CSS FOR excel translation*/
.striped-row td{
    background: #fafbfc !important;
  }

#dropship-rpt-table th .wrapper-popover{
    width:auto;
}
.dashboard-tab-no-splitter{
    margin-top: -32px;
}
.dashboard-tab-no-splitter .tab-content{
    background-color: transparent;    
}

.dashboard-tab-no-splitter .nav-tabs-linetriangle:after{
    border-bottom: none;
}
.dashboard-tab-no-splitter .nav-tabs-linetriangle>li>a{
    padding-bottom: 0px;
    padding-top: 0px;
}
.dashboard-tab-no-splitter .nav-tabs-linetriangle>li.active>a:after,
.dashboard-tab-no-splitter .nav-tabs-linetriangle>li.active>a:before{
    content: none !important;
}
.datepicker-input > input  {
    position: absolute;
    background: transparent;
    width: 200px;
}
.grey-solid-border > div> ul
{ 
    border: 1px solid #d0d0d0 !important;
}
/* --------------------Start goldFeature introduction carousel --------------------*/
.carousel .carousel-indicators li {
    width: 15px;
    height: 15px;
    margin: 5px;
    background-color: #e6e7e8;
  }

  .carousel .carousel-indicators li.active {
    width: 16px;
    height: 16px;
    margin: 5px;
    background-color: #48b5e4;
  }
  .carousel-caption {
    color: #626262;
    text-shadow: none;
  }

  .carousel-inner>.item>img,
  .carousel-inner>.item>a>img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

  #goldFeatureCarousel.container {
    width: 776px;
  }

  #goldFeatureCarousel .portrait {
    width: 770px;
    height: 420px;
  }
  .carousel-item img {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

  .carousel-control.left,
  .carousel-control.right {
    background-image: none;
  }
  #goldFeatureCarousel .carousel-caption {
    right: 3%;
    left: 3%;
  }
  /* -------------------- End goldFeature introduction carousel --------------------*/
  /* ---Show tag of invoice show more---*/
.tags-content{
    float: left;
    padding-right: 30px;
}
.listing-btn-show-tag{
    float: right;
    margin-top: -18px;
    padding: 0px 5px;
    background: white;
}
.height-two-line{
    height: 33px;    
}
.height-one-line{
    height: 17px;
}
/* Start Product listing page description */
.show-more {
    padding: 10px 0;
    text-align: center;
}
    span.more-text {
        display: none;
    } 
    span.more-text.show {
        display: inline !important;
    }
    /* End Product listing page description */

.fade-in {
    opacity: 100% !important;
    transition: opacity 1s;
}
.fade-out {
    opacity: 0% !important;
    transition: opacity 1s;
}
/* Inventory Forecast report */
#inventoryforecastReportTable {
    overflow: auto;
    max-height: 720px;
}

.mass-action-freeze {
    position: sticky !important;
    left: 0;
    top: 105px;
    z-index: 2;
}

.first-col-freeze {
    position: sticky !important;
    left: 44px;
    top: 105px;
    z-index: 2; 
    /* background-color: #fff; */
}

.second-col-freeze {
    position: sticky !important;
    left: 344px;
    top: 105px;
    z-index: 2; 
    /* background-color: #fff; */
}


.pagination-freeze {
    position: sticky !important;
    left: 500px;
    z-index: 2; 
} 

#inventoryForecastData thead {
    position: sticky !important;
    top: 0;
    z-index: 2; 
    background-color: #fff;
}

#inventoryForecastData tfoot {
    position: sticky !important;
    left: 0;
    z-index: 2; 
    background-color: #fff;
    bottom: 0;
}

.w-35 {
    width: 35px !important;
}

.w-45 {
    width: 45px !important;
}

.w-65 {
    width: 65px !important;
}

.m-w-20 {
    min-width: 20px !important; 
}

.m-w-25 {
    min-width: 25px !important; 
}

.m-w-44 {
    min-width: 44px !important;
}

.m-w-50 {
    min-width: 50px !important;
}
.m-w-100 {
    min-width: 100px !important;
}
.m-w-150 {
    min-width: 150px !important;
}

.m-w-300 {
    min-width: 300px !important;
}

.m-w-450 {
    min-width: 450px !important;
}

.m-w-600 {
    min-width: 600px !important;
}

.m-w-750 {
    min-width: 750px !important;
}

.m-w-900 {
    min-width: 900px !important;
}

#forecast-body-table tr td {
    text-align: left !important;
    min-width: 150px;
    font-weight: bold;
} 

#header-inventoryforecast td {
    min-width: 150px;
    font-weight: bold;
}

#inventoryforecastReportTable {
    margin-top: 50px;   
}

th.date-width > div{
    min-width: 125px;
}
td.date-width > div{
    min-width: 125px;
}

.pull-left {
    float: left;
}

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

.m-b-5 {
    margin-bottom: 5px !important; 
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-7 {
    margin-left: 7px !important;
}

.m-l-8 {
    margin-left: 8px !important;
}

.p-l-7 {
    padding-left: 7px !important;
}

.p-l-8 {
    padding-left: 8px !important;
}

.p-t-8 {
    padding-top: 8px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-80 {
    margin-top: 80px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.filter-text-color {
    color: #626262 !important;
}

.listing-page-fixed-header {
    position: fixed;
    right: 0;
    left: 250px;
    width: auto;
}

.detail-page-fixed-header {
    position: fixed;
    right: 0;
    left: 250px;
    top: 60px;
    z-index: 1040;
}

.limited-1-lines {
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.limited-2-lines {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Flex Section */
.flex{
    display: flex;
    flex-grow: 1;
}
.flex-col{
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
}
.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-1{
    flex: 1
}
.open > button.dropdown-toggle.btn-default.dropdown-download-pdf-button,
button.dropdown-toggle.btn-default.dropdown-download-pdf-button:active,
button.dropdown-toggle.btn-default.dropdown-download-pdf-button:hover {
    background-color: transparent;
    color: #48B5E4;
}
.dropdown-menu.dropdown-download-pdf-document > li[disabled="disabled"] {
    color: #ababab;
}

 /* Box moving loading */
.tetrominos {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-112px, -96px);
  }
  
  .tetromino {
    width: 90px; /* $w */
    height: 105px; /* $h */
    position: absolute;
    transition: all ease 0.3s;    
    background: url('../img/icon-svg/box.svg') no-repeat top center;
    background-size: cover;
  }
  
  .box1 {
    animation: tetromino1 1.5s ease-out infinite; /* $speed = 1.5s */
  }
  
  .box2 {
    animation: tetromino2 1.5s ease-out infinite; /* $speed = 1.5s */
  }
  
  .box3 {
    animation: tetromino3 1.5s ease-out infinite; /* $speed = 1.5s */
    z-index: 2;
  }
  
  .box4 {
    animation: tetromino4 1.5s ease-out infinite; /* $speed = 1.5s */
  }
  
  @keyframes tetromino1 {
    0%, 40% {
      transform: translate(0, 0); /* Initial position */
    }
    50% {
      transform: translate(48px, -27px); /* $xspace = $w/2 = 48px, $yspace = $h/4 - 1 = 27px */
    }
    60%, 100% {
      transform: translate(96px, 0); /* $xspace*2 = 96px */
    }
  }
  
  @keyframes tetromino2 {
    0%, 20% {
      transform: translate(96px, 0); /* $xspace*2 = 96px */
    }
    40%, 100% {
      transform: translate(144px, 27px); /* $xspace*3 = 144px, $yspace = 27px */
    }
  }
  
  @keyframes tetromino3 {
    0% {
      transform: translate(144px, 27px); /* $xspace*3 = 144px, $yspace = 27px */
    }
    20%, 60% {
      transform: translate(96px, 54px); /* $xspace*2 = 96px, $yspace*2 = 54px */
    }
    90%, 100% {
      transform: translate(48px, 27px); /* $xspace = 48px, $yspace = 27px */
    }
  }
  
  @keyframes tetromino4 {
    0%, 60% {
      transform: translate(48px, 27px); /* $xspace = 48px, $yspace = 27px */
    }
    90%, 100% {
      transform: translate(0, 0); /* Reset position */
    }
  }
/* End box moving loading */  

a.btn.btn-create-new-account {
    min-width: 200px;
    height: 32px;
}

.header-with-scrollable-content {
    margin-left: -9px;
}

/** Fix ITP */

.introjs-overlay,
.introjs-helperLayer {
    z-index: 1999;
}

.introjs-helperLayer.introjs-fixedTooltip {
    z-index: 2000;
}

.introjs-fixParent {
    z-index: 2001 !important;
}

label.normal-label {
    text-transform: none !important;
    font-weight: normal !important;
    font-family: inherit !important;
}

/* Export Customer Access Product List */

a#exportCustomerAccessProductList {
    position: relative;
    margin-bottom: 20px;
    z-index: 1000;
}

/* PDF Modal Fixed Header Styles */
.pdf-modal-right-panel {
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
    padding-top: 0; /* Remove padding */
}

.pdf-fixed-footer {
    position: sticky;
    top: 0;
    background: white;
    padding: 0 0 10px 0;
    z-index: 100;
    border-bottom: 1px solid #e8e8e8;
}

.pdf-fixed-footer > h5 {
    margin:0;
}

.back-to-login-btn {
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    color: rgb(72, 181, 228);
}

.border-radius-5 {
    border-radius: 5px;
}

.wrapper-sm-i {
    padding: 10px !important;
}

.wrapper-md-i {
    padding: 20px !important;
}

.border-bottom-i {
    border-bottom: 1px solid #e6e6e6 !important;
}

.ebic-payment-info {
    width: 51%;
    margin: 0 auto;
}
.ebic-payment-info .payment-methods {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.ebic-payment-info .payment-methods .payment-method {
    flex: 1;
    min-width: 250px;
    font-size: 15px;
}
.ebic-payment-info .payment-methods .payment-method p {
    margin: 0;
    font-weight: bold;
    text-align: left;
    font-size: 15px;
}
.ebic-payment-info .payment-methods .payment-method .qr-code {
    margin-top: 0;
    float: left;
}
.ebic-payment-info .thank-you-message p,
.ebic-payment-info .company-name p {
    margin: 0;
    font-weight: bold;
    font-size: 14px;
}
.btn-group.dropup>.btn+.dropdown-toggle {
    padding-top: 4px;
    padding-bottom: 6px;
    padding-left: 0px;
}
.btn-group.dropup>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    padding-right:10px;
}
.btn-group.dropup>.btn+.dropdown-toggle:before {
    content: ' ';
    font-size: 15px;
    line-height: 1em;
    border-left: 1px solid #fff;
    margin-right: 5px;
    padding-top: 0px;
    padding-bottom: 5px;
}

#hitpay-checkout-container .btnLink {
    background: #fff;
    border:none;
    border-radius: 3px;
    box-shadow: 0px 0px 1px 1px #ebebeb;
    padding: 15px 5px;
    width: 100%;
    text-align: left;
}
#hitpay-checkout-container .btnLink:hover {
    background-color: #DAF0FA;
}
#hitpay-checkout-container .btnLink em,
#hitpay-checkout-container .payment-info em {
    color: #000;
    font-style: normal;
    font-family: 'Tahoma', sans-serif;
    font-size: 17px;
}
#hitpay-checkout-container .payment-info em {
    font-size: 15px;
}
#hitpay-checkout-container .btnLink .cards,
#hitpay-checkout-container .btnLink .calendar {
    padding: 0px 20px;
}
#hitpay-checkout-container .btnLink .cards:before {
    position: relative;
    font-family: 'FontAwesome';
    top: 4px;
    left: 0px;
    content: "\f09d";
    color: #48B5E4;
    font-size: 25px;
}
#hitpay-checkout-container .btnLink .calendar:before {
    position: relative;
    font-family: 'FontAwesome';
    top: 4px;
    left: 0px;
    content: "\f073";
    color: #48B5E4;
    font-size: 25px;
}

.t-120 {
    top: 120px;
}
.h-15 {
    height: 15px;
}
form[name="workflowTaskForm"] .form-control[readonly] {
    pointer-events: all;
    cursor: default;
}
.line-height-normal {
    line-height: normal !important;
}
.clear-search-input-header {
    width: 100%;
    display: block;
    position: relative;
    margin-top: 20px;
}
/* Production Order Filter Popover Styles - More Specific Targeting */
.production-order-filter-popover {
    position: relative;
    z-index: 1060 !important;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    max-height: 200px !important;
    overflow: hidden !important;
}

/* Target the specific popover that contains our production order filter */
.popover:has(.production-order-filter-popover) {
    max-height: 250px !important;
    height: auto !important;
    z-index: 1060 !important;
    position: absolute !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Alternative approach - target popover by content */
.popover .popover-content:has(.production-order-filter-popover) {
    max-height: 200px !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Fallback for browsers that don't support :has() */
.popover[uib-popover-template*="productionOrderFilterPopover"] {
    max-height: 250px !important;
    height: auto !important;
    z-index: 1060 !important;
}

.popover[uib-popover-template*="productionOrderFilterPopover"] .popover-content {
    max-height: 200px !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Multi production order modal styles */
.modal-sales-production-order .modal-dialog {
    width: 90% !important;
    max-width: 1200px !important;
    min-width: auto !important;
    height: 80vh !important;
    max-height: 800px !important;
}

.modal-sales-production-order .modal-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.modal-sales-production-order .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
}

.modal-sales-production-order .picking-list-content {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

.modal-sales-production-order .picking-list-content .stepContainer {
    height: auto !important;
}

.modal-sales-production-order .picking-list-content .stepContainer .step-content {
    height: auto !important;
    float: none !important;
}

.modal-sales-production-order .tab-content {
    height: 100% !important;
    overflow-y: auto !important;
}

.modal-sales-production-order .tab-pane {
    height: auto !important;
    overflow-y: visible !important;
    padding: 15px !important;
}

.modal-sales-production-order .tab-pane .modal-footer,
.modal-sales-production-order .tab-pane .modal-header .fa-times-circle {
    display: none !important;
}

.modal-sales-production-order .modal-footer {
    flex-shrink: 0 !important;
    padding: 15px 20px !important;
    border-top: 1px solid #ddd !important;
    background-color: #f5f5f5 !important;
}
.imtegration-item img {
    height: auto;
}

.general-setup.table.table-striped tbody tr:hover td,
.general-setup.table.table-condensed tbody tr:hover td
{
    /* Have to do this to override existed styling by increase specificity */
    background-color: #c2eafd !important;
}