/*===============================================
/*===============================================
    DEFAULT SETTINGS
================================================= */
@import url("spacing.css");
@import url("top-bar.css");
@import url("j-table.css");
@import url("cog-period.css");
@import url("custom-range.css ");
@import url("custom-popup.css");
@import url("custom-form.css");
@import url("quickview.css");
@import url("bs-box.css");
@import url("custom_wizard.css");
@import url("custom-chart.css");
@import url("custom-table.css");
@import url("custom-modals.css");
@import url("notification.css");
@import url("shortcut-links.css");
@import url("custom-hz.css");
@import url("responsive-list.css");
@import url("dropdown.css");
@import url("buttons.css");
@import url("breakdown.css");
@import url("select2.css");

html {
    height: 100%;
    font-size: var(--body-size);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}


body {
    font-family: var(--font-general);
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    direction: ltr;
    -moz-osx-font-smoothing: grayscale;
    color: var(--body-text-color);
    font-size: var(--body-size);
    font-weight: 400;
    letter-spacing: 0.25px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern" 1
}


/*custom start*/
.link-text {
    color: var(--primary);
    text-decoration: underline;
}

.text-secondary {
    color: var(--text-secondary);
}

.text-dark {
    color: var(--text-primary);
}


.input-border {
    border: var(--input-border);
}

.sm-rounded {
    border-radius: var(--sm-rounded);
}

.grid {
    display: grid;
}

.no-bg {
    background: none !important;
}

.align-items-center {
    align-items: center !important;
}

.devider {
    margin-top: var(--primary-devide);
    margin-bottom: var(--primary-devide);
    border-bottom: var(--input-border);
}

.intro-image {
    display: grid;
    grid-template-columns: 50%;
    justify-content: right;
    animation-name: right-drag;
    animation-duration: 0.4s;
}

.intro-image img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--spacing_half) 0 0 var(--spacing_half);
}

.form-title {
    font-size: var(--page-title);
    color: var(--text-primary);
    line-height: var(--title-lign-height);
}


/* Custom CSS for styling */

.modal.show {
    display: block !important;
}


.fieldset-container {
    width: 100%;
}

.fieldset-container .nav-steps {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--nav-gap);
}

.fieldset-container .nav-steps .nav-item {
    width: 100%;
    padding: 3px;
    position: relative;
}

.fieldset-container .nav-steps .nav-item .nav-link {
    padding: 5px 0px;
    text-transform: uppercase;
    width: 100%;
}

.fieldset-container .nav-steps .nav-item .nav-link:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    bottom: 0px;
    left: 0;
    background-color: var(--default);
}

.fieldset-container .nav-steps .nav-item .nav-link span {
    display: none;
    text-align: left;
    font-size: var(--body-size-sm);
    font-weight: 600;
}

.fieldset-container .nav-steps .nav-item.active .nav-link:after {
    background-color: var(--success) !important;
}

.fieldset-container .nav-steps .nav-item.active .nav-link span {
    display: block !important;
}

.fieldset-container .nav-steps .nav-item.filled .nav-link:after {
    background-color: var(--primary);
}


.numbers {
    font-family: 'Fira Code', monospace;
    font-weight: 400;
}


/*custom end */

.body-color {
    color: var(--body-text-color);
}


.collapse.navbar-collapse {
    float: right;
}

a {
    outline: 0 !important;
    color: var(--link-color-normal);
    text-shadow: none !important;
    text-decoration: none;
}

a:focus,
a:active,
a:hover {
    color: var(--link-color-active);
    text-decoration: none;
}

a.no_decoration {
    text-decoration: none !important;
}

.container {
    width: 1280px;
}

.media-list .media .media-object {
    width: 50px;
}

section {
    float: left;
    width: 100%;
}

a.badge {
    margin-bottom: var(--spacing_half);
    background: none;
    padding: 12px var(--spacing);
    font-size: 16px;
    border-radius: var(--spacing);
}

.fullscreen-message {
    display: none;
}

.dataTables_wrapper {
    clear: both;
}

.edit.sorting_disabled {
    width: 80px !important;
}

.change_password.sorting_disabled {
    width: 125px !important;
}

#table_users .stage {
    width: 0;
}



.form-group.form-options {
    padding: 15px 0;
    margin-left: -26px;
    margin-right: -26px;
    margin-bottom: -15px;
}

.form-group.form-options > .btn.form-control {
    width: auto;
    min-width: 100px;
}

.cog {
    width: 100%;
    float: left;
    border-radius: 3px;
    margin-bottom: 15px;
}

.cog:last-child {
    margin-bottom: 15px;
}

.cog > .table {
    margin-bottom: 0;
}

.cog > div {
    min-height: 40px;
}

.cog-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 17px;
    position: relative;
    top: -2px;
    color: var(--heading-color);
}

.cog form {
    margin: 8px;
}

.cog label {
    width: 50px;
}

.cog th,
.cog td {
    vertical-align: middle;
}

.cog-head .btn {
    margin-left: 0 !important;
    vertical-align: top;
}

.cog-body .form-group {
    margin-bottom: var(--spacing_half);
    margin-right: var(--spacing_half);
}

.cog-head h3 {
    margin-top: var(--spacing);
}

.skinny-cell {
    width: 1px;
}


/* COST/PRODUCTS AND ADD COST PERIOD */

.small-cell {
    width: 100px;
}


/* PRODUCT STATISTICS */

.no-margins {
    margin: 0;
}

.tab-content.tab-bottom-space {
    width: 100%;
    float: left;
    margin-bottom: 35px
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}


/* ORDER DETAILS MODAL*/

.pn {
    padding: 0;
}

.icon-beta:before {
    content: 'β';
    font-weight: bold;
    font-size: 120%;
}


/* RIGHT MENU*/

.page-header > span.select2,
.page-header > select.form-control {
    margin-bottom: var(--spacing_half);
}



tfoot td {
    vertical-align: middle;
}

span.comma-separated > *:not(:last-child):after {
    content: ", ";
}

.unclickable {
    pointer-events: none;
    opacity: 0.75;
}

.mbn {
    margin-bottom: 0 !important;
}


.middle-aligned-message {
    margin-top: calc(50vh - var(--spacing));
}

.training-list a {
    white-space: inherit !important;
    font-weight: bold !important;
    padding: var(--spacing_half) var(--spacing_half) !important;
}

strong.admin_user {
    position: relative;
    top: -7px;
}

small.on_trial {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: var(--spacing_half);
    height: 14px;
    padding: 2px 5px;
    line-height: var(--spacing_half);
    width: 100%;
}

.dt-inline-edit {
    width: 100% !important;
    min-width: 75px;
}


/*For inline editables
used in datatables
*/

textarea.dt-inline-edit {
    overflow: hidden;
    resize: none;
}

.tbl-filter-btn .btn {
    margin-right: 5px;
}


#toStringOutput {
    margin: 0 2em 2em;
}


.text-middle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-transform: capitalize;
}

.usr_acc_cred {
    background: var(--bg-primary);
}

.report_not_processed {
    width: 40%;
    margin: 0 auto;
    text-align: center;
}

.title-form-group {
    float: left;
    margin-bottom: 0;
    margin-left: var(--spacing_half);
    margin-top: 16px;
}

.nav-pills > li + li {
    margin-left: 4px;
}

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



/*===============================================
    >>>>> END OF DEFAULT SETTINGS
================================================= */


/*===============================================
    NAVBAR
================================================= */

header {
    float: left;
    width: 100%;
}

.navbar {
    border: medium none;
}

.navbar .navbar-header {
    margin-right: -15px !important;
}

.navbar-default .navbar-nav > li > a {
    position: relative;
}

.navbar-default .navbar-nav > li > a .badge {
    position: absolute;
    border-radius: 50%;
    line-height: 12px;
    top: 5px;
    right: 4px;
    font-size: var(--spacing_half);
}

.navbar .nav > li > a {
    padding: 17px var(--spacing_half) 15px var(--spacing_half);
}


/*===============================================
    >>>> END OF NAVBAR
================================================= */


/*===============================================
    FILTERS AND SEARCH BAR AT TOP RIGHT CORNER
================================================= */

.search-section .top-menu-input {
    float: left;
    background: rgba(240, 240, 240, 0.25098039215686274);
    line-height: 16px;
    padding: 6px 0 7px 0;
    margin-right: 8px;
    border-radius: 3px;
    border: 1px solid var(--light);
}

.top-menu-input > span {
    position: relative;
    float: left;
}

.top-menu-input > span input {
    border: none;
    margin-top: -8px;
    padding: 3px 8px;
    height: 35px;
    border-radius: 2px;
    font-size: 15px;
    box-shadow: inherit;
}

.top-menu-input > span input + i {
    position: absolute;
    right: 8px;
    top: 2px;
    cursor: pointer;
}

.top-menu-input span input:focus {
    box-shadow: inherit;
}


/*===============================================
    >>>>> END OF FILTERS AND SEARCH BAR AT TOP RIGHT CORNER
================================================= */


/*===============================================
    PL AND SETTLEMENT PERIOD
================================================= */

.settlment_period .tab-pane {
    padding: 0;
}

.settlment_period .nav-pills {
    margin-bottom: 8px;
}

.shadow {
    border-radius: 0;
}


/*===============================================
    >>>>> END PL AND SETTLEMENT PERIOD
================================================= */


/*===============================================
    NOTIFICATION/SETTLEMENT PERIODS
================================================= */

.timeline-item .panel-body {
    padding-top: 0;
}

.timeline-item .panel-body > .row:first-child {
    padding: 14px 15px;
    font-family: var(--font-general);
    font-size: 14px;
}

.timeline-item h6 {
    margin-bottom: 0;
}

.timeline-item h1 {
    margin-top: 8px;
}

.timeline-single-item .timeline-icon {
    display: none;
}

ul.fancytree-container {
    font-family: inherit !important;
    border: none !important;
}

.fancytree-title {
    width: calc(100% - var(--spacing));
}


/*===============================================
    >>>>> END OF NOTIFICATION/SETTLEMENT PERIODS
================================================= */


/*===============================================
    PL AND SETTLEMENT PERIOD
================================================= */


.choice-wrapper .ads-options-wrapper {
    padding: 5px 0;
    border-bottom: 1px dashed #EFEFEE;
    overflow: hidden;
    border-bottom: 1px dashed #EFEFEE;
    border-bottom: 1px dashed #efefef;
}

.ads-options-wrapper > .iradio_square-blue {
    float: left;
}

.ads-options-wrapper {
    padding: 5px 0;
    border-bottom: 1px dashed #efefef;
    overflow: hidden;
    display: flex;
    width: 100%;
}

.ads-options-wrapper:last-child {
    border-bottom: none;
}


/*===============================================
    >>>>> END PL AND SETTLEMENT PERIOD
================================================= */


/*===============================================
    FOR FILTERS
================================================= */



@media (max-width: 991px) {
    .bg-pic {
        display: none !important;
    }

    :root {
        --page-title: 18px;
        --title-lign-height: 24px;
    }

    .login-wrapper .login-container {
        grid-template-columns: 70% !important;
    }
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25px;
    z-index: 9999;
}

.alert {

}

.tab-pane > .alert {
    margin-left: -11px;
    margin-right: -11px;
    margin-top: 5px;
}


/*===============================================
   OTHER OPERATING EXPENSES
================================================= */

.repeat-summary {
    width: 175px;
    float: left;
    margin-bottom: 3px;
}

.tt-dropdown-menu,
.tt-menu,
.gist {
    text-align: left;
}

.typeahead,
.tt-query,
.tt-hint {
    width: 100%;
    height: 30px;
    padding: 4px 8px;
    font-size: 24px;
    line-height: 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: none;
}

.tt-input {
    background-color: var(--sidebar-bg) !important;
}

.tt-hint {
    display: none;
}

.tt-dropdown-menu,
.tt-menu {
    margin: 12px 0;
    padding: 8px 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.gist {
    font-size: 14px;
}

#expensesElementContainer .for-modal {
    cursor: pointer;
    float: right;
}


/*===============================================
   >>>> END OF OPERATING EXPENSES
================================================= */


/*===============================================
    FLAGS ICONS
================================================= */

.flag-xs,
.flag-sm,
.flag,
.flag-lg {
    display: inline-block;
    vertical-align: middle;
}

.flag-xs {
    width: 16px;
    height: 16px;
    background: url('../img/sprites/flag-xs.png') no-repeat top left;
}

.flag-sm {
    width: 32px;
    height: 32px;
    background: url('../img/sprites/flag-sm.png') no-repeat top left;
}

.flag-sm.flag-fr {
    background-position: 0 0;
}

.flag-sm.flag-de {
    background-position: 0 -33px;
}

.flag-sm.flag-in {
    background-position: 0 -66px;
}

.flag-sm.flag-es {
    background-position: 0 -99px;
}

.flag-sm.flag-tr {
    background-position: 0 -132px;
}

.flag-sm.flag-us {
    background-position: 0 -165px;
}

.flag-xs.flag-fr {
    background-position: 0 -1px;
}

.flag-xs.flag-de {
    background-position: 0 -18px;
}

.flag-xs.flag-es {
    background-position: 0 -35px;
}

.flag-xs.flag-tr {
    background-position: 0 -52px;
}

.flag-xs.flag-us {
    background-position: 0 -69px;
}

.flag-xs.flag-in {
    background-position: 0 -86px;
}

h6.flag-icon {
    margin: 0;
    font-size: var(--body-size);
}

/*.btn span {*/
/*    line-height: 14px;*/
/*}*/
.time-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    padding-bottom: var(--spacing);
    margin-bottom: var(--spacing);
    border-bottom: 1px solid var(--light);
}

/*===============================================
    >>>> END OF FLAGS
================================================= */


/*===============================================
    NOTIFICATION TIMELINE
================================================= */

ol.timeline-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

ol.timeline-list li.timeline-item {
    position: relative;
    padding: 15px var(--spacing) 5px 25px;
    margin-left: 25px;
}

ol.timeline-list li.timeline-item:hover .timeline-icon,
ol.timeline-list li.timeline-item:focus .timeline-icon {
    opacity: 1;
}

ol.timeline-list li.timeline-item:after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: dashed 1px #dddddd;
}

ol.timeline-list li.timeline-item .timeline-desc {
    letter-spacing: 0.2px;
}

ol.timeline-list li.timeline-item .timeline-desc b,
ol.timeline-list li.timeline-item .timeline-desc strong {
    font-weight: 600;
}

ol.timeline-list li.timeline-item .timeline-desc a {
    padding: 0 2px;
}

ol.timeline-list li.timeline-item .timeline-icon {
    opacity: 0.85;
    z-index: 2;
    position: absolute;
    left: -15px;
    top: 12px;
    width: 30px;
    height: 30px;
    line-height: 26px;
    text-align: center;
    border-radius: 26px;
    font-size: 13px;
}

ol.timeline-list li.timeline-item .timeline-date {
    margin-top: 0;
    font-size: 11px;
    color: #aaaaaa;
}

li.notification-item.timeline-item {
    padding-right: 5px !important;
}


/* marketplace sidebar buttons */

.notification-buttons {
    padding: 16px var(--spacing_half) 8px;
    display: flex;
    justify-content: space-between;
}


/* //marketplace sidebar buttons */


.notification-small-container {
    width: 100%;
}

.notification-small-container .timeline-list .timeline-item .timeline-desc {
    letter-spacing: 0;
    font-size: 15px;
    white-space: normal;
    padding-right: 15px;
}


/*===============================================
    >>>> END OF NOTIFICATION TIMELINE
================================================= */


/*===============================================
    >>>> END OF MENU RELATED CLASSES
================================================= */

#selected_products_list span.label {
    white-space: normal;
    margin: 2px;
    display: inline-block;
}

#selected_products_list span.label i {
    cursor: pointer;
}


/*===============================================
    >>>> END OF GLOBAL PRODUCT  MODAL CLASSES
================================================= */


/*===============================================
    GLOBAL ORDERS MODAL
================================================= */

#modal-order-details .panel {
    box-shadow: none;
}

#modal-order-details .panel-heading {
    border-radius: 0;
    min-height: 35px;
}

#modal-order-details .panel-heading h4 {
    margin: 5px 0;
    text-transform: capitalize;
    font-weight: 700;
    font-family: var(--font-general);
    font-size: 14px;
    letter-spacing: .06em;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--table-cell-text);
    background: var(--table-head-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#modal-order-details .panel label.control-label {
    font-family: var(--font-general);
    text-align: left;
    font-size: 12px;
    padding-bottom: 0;
    padding-top: 0;
    color: var(--site-secondary-color);
    font-weight: 500 !important;
    text-transform: uppercase;
    margin: 0;
    white-space: normal;
}

#modal-order-details .panel td {
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    font-size: 13px;
    overflow: hidden;
    background: var(--table-head-bg);
}

#modal-order-details .panel table {
    margin-bottom: 0;
}


/*===============================================
    >>>> END OF GLOBAL ORDER MODAL CLASSES
================================================= */


/*===============================================
    PPC DASHBOARD
================================================= */

.dt-search {
    float: right;
    padding: 7px 5px 5px 5px;
}

.dt-search .dataTables_filter label {
    margin-bottom: 0;
}



/*===============================================
    >>>> END OF PPC DASHBOARD
================================================= */


/*===============================================
    APPLIED FILTERS
================================================= */

.applied_filters {
    position: relative;
    width: 100%;
}

.applied_filters .well {
    margin-bottom: 0px !important;
}

.applied_filters .well .label-group {
    display: inline-flex;
    justify-content: stretch;

}

.applied_filters .well .label-group.omni .label {
    background-color: var(--primary);
    border-color: var(--primary);
}

.applied_filters .well span.label {
    font-weight: normal;
    padding: calc(var(--spacing) / 4);
    text-align: left;
    white-space: normal;
}

.load_filter_table .well-condition {
    margin-left: 3px;
}

.applied_filters .well-condition {
    font-style: italic;
}

.applied_filters .well-condition:before {
    content: " ["
}

.applied_filters .well-condition:after {
    content: "]"
}

.tags-well .well {
    background-color: transparent;
    padding: var(--spacing_half) 0;

    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing_half);
}

.applied_filters.tags-well > .well > .badge-close {
    position: absolute;
    border-radius: 4px;
    line-height: 16px;
    right: 0px;
    background: #dedede;
    font-size: 14px;
    top: 0;
    display: flex;
    align-items: center;
    padding: var(--spacing_half) 8px;
    color: #717171;
}

.applied_filters.tags-well > .well > .badge-close:hover {
    color: #3a3a3a;
}

.admin-panels .applied_filters.tags-well > .well > .badge-close {
    top: 7px;
    right: 7px;
}

.tags-well > .well > .badge-close:hover,
.tags-well > .well > .badge-close:focus,
.tags-well > .well > .badge-close:active {
    cursor: pointer;
    background-color: #ddd;
    border-color: #ddd;
}

.label-tag {
    display: inline-block;
    padding: 6px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--bg-primary);
    background-color: #5489cf;
    border: 1px solid #fafafa;
    border-radius: 4px;
}

.label-custom {
    background-color: #5cb85c;
    border: 1px solid #fafafa;
    /*margin-right: 3px;*/
}

.label-group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.label-group > .label-tag {
    position: relative;
    float: left;
    vertical-align: middle;
}

.label-group > .label-tag:hover,
.label-group > .label-tag:focus,
.label-group > .label-tag:active {
    z-index: 2;
}

.label-group > .label-close:hover,
.label-group > .label-close:focus,
.label-group > .label-close:active {
    cursor: pointer;
    background-color: #ddd;
    border-color: #ddd;
}

.label-group .label-tag + .label-tag {
    margin-left: -1px;
}

.label-group > .label-tag:not(:first-child):not(:last-child):not(.label-close) {
    border-radius: 0;
}

.label-group > .label-tag:first-child {
    margin-left: 0;
}

.label-group > .label-tag:first-child:not(:last-child):not(.label-close) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.label-group > .label-tag:last-child:not(:first-child),
.label-group > .label-close:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.label-group .label-close:active {
    outline: 0;
}

.label-group > .label-tag + .label-close {
    padding-right: 8px;
    padding-left: 8px;
}


/*===============================================
    >>>>> END OF APPLIED FILTERS
================================================= */


/*===============================================
    LISTING HISTORY
================================================= */

table.diff {
    width: 100%;
}

.diff td {
    padding: 0;
    vertical-align: top;
    white-space: pre-wrap;
    font-family: Consolas, 'Courier New', Courier, monospace;
    font-size: 1em;
    line-height: 1.333;
}

.diff td:first-child {
    width: 50%;
}

.diff span {
    text-align: left;
    display: block;
    min-height: 1.333em;
    margin-top: -1px;
    padding: 3px;
}

* html .diff span {
    height: 1.333em;
}

.diff span:first-child {
    margin-top: 0;
}

.listing-navigator {
    width: 200px;
    float: right;
    margin-top: -5px;
}

.listing-navigator a {
    margin-left: 5px;
    margin-right: 5px;
    width: 90px;
}

.listing-history {
    background: transparent;
    border-radius: 4px;
    padding: 0 15px;
}

.listing-buttons > a {
    margin: 5px 0;
}

.diffInserted span.diffContent h3 {
    background: var(--diffContent-bg);
    margin: -3px -3px 0 -4px;
    padding: var(--spacing_half);
    font-weight: 600;
    font-family: var(--font-general);
    font-size: 16px;
}

.diffUnmodified span.diffContent {
    padding: 5px 5px;
    background: var(--ohd-bg);
    border: 1px solid var(--shortcut-link-border-color);
}

.diffUnmodified span.diffContent:first-child {
    border-top: none;
}

td.diffUnmodified {
    position: relative;
    top: -5px;
}

span.diffContent {
    border: none;
    padding-bottom: 0;
}

.diffInserted span:first-child + span {
    border-top: 0;
}

tr.inside-diff-table-row .diffInserted .diffContent {
    margin-top: -5px;
    background: var(--diffContent-bg);
    margin-bottom: 5px;
}

tr.inside-diff-table-row .diffDeleted .diffContent {
    margin-top: -5px;
    background: #ffe0e0;
}

.listing-history-changes {
    margin-bottom: 15px;
}

.listing-buttons a {
    margin-left: var(--spacing_half);
}


/*===============================================
    >>>> END OF LISTING HISTORY
================================================= */


/*===============================================
    RECENT PRODUCTS
================================================= */

.history-item {
    float: left;
    width: 100%;
}

.history-item > a {
    float: left;
    width: 100%;
    padding: 0 !important;
}

.history-item > a > div {
    float: left;
}

.history-item .name-container {
    margin-left: 5px;
}

.history-item img {
    width: 42px !important;
    margin-right: 7px;
}


/*===============================================
    >>>> END OF RECENT PRODUCTS
================================================= */


/*===============================================
    BOOKMARKS
================================================= */

.bookmark-link {
    position: relative;
    float: left;
    width: 100%;
}

.bookmark-link:hover {
    background: #f5f5f5;
}

.bookmark-link a {
    float: left;
}

.bookmark-link span {
    float: right !important;
    margin: 0 6px 8px 5px;
}

.bookmark-link span.remove_link {
}


/*===============================================
    >>>> END OF BOOKMARKS
================================================= */


.account-switcher tr td {
    border-bottom: 1px solid var(--shortcut-link-border-color);
}

.account-switcher tr.multiple td {
}

.account-switcher tr.active td {
    background-color: var(--table-head-bg);
}

.account-switcher .account-group-drag-handler {
    color: #888888;
    cursor: move;
}

.account-switcher .group-icon {
    font-size: 25px;
    width: 22px;
    margin: 0;
}

.custom-tr .group-icon {
    font-size: var(--body-size);

    margin: 0;
    font-size: 20px;
    margin-left: var(--spacing_half);
}

.account-switcher td:not(:first-child):not(:last-child) {
    padding-left: calc(var(--spacing) / 2);
    padding-right: calc(var(--spacing) / 2);
}

.account_detail > .table:not(.account-header):not(.account-switcher) td:first-child {
    width: 50%;
}

.account_detail .tile-progress .progress {
    margin-bottom: 5px !important;
}

.account_detail .tile-progress {
    margin-bottom: 0;
    padding: var(--spacing_half);
    border-bottom: dashed 1px #ddd;
}

.account_detail .tile-progress h4 {
    font-weight: 600;
    font-size: 14px;
    margin: 5px 0
}

.account_detail .ob {
    background: var(--site-primary-bg);
    color: var(--bg-primary);
    font-weight: bold;
    padding: 5px 9px;
    border-radius: 2px;
    font-size: 11px;
    font-family: var(--font-general);
}

.sl-panel-container .account_detail .ob {
    padding: 4px 6px;
    font-size: var(--spacing_half);
}


/*===============================================
    >>>>> END OF ACCOUNT DETAILS RELATED CLASSES
================================================= */


/*===============================================
    REFUND MANAGER
================================================= */

.refund_status {
    margin: 5px 0;
    float: left;
    color: #333333 !important;
}



#table_refunds_manager .units-customer {
    border-bottom: solid 1px var(--warning);
}

#table_refunds_manager .units-amazon {
    border-bottom: solid 1px #85d27a;
}


/*===============================================
    >>>> END OF REFUND MANAGER
================================================= */




/*===============================================
  Text Helpers
================================================= */

.text-uppercase {
    text-transform: uppercase !important;
}

.fw200 {
    font-weight: 200 !important;
}

.fw300 {
    font-weight: 300 !important;
}

.fw400 {
    font-weight: 400 !important;
}

.fw600 {
    font-weight: 600 !important;
}

.fs3 {
    font-size: 4px !important;
}

.fs4 {
    font-size: 4px !important;
}

.fs5 {
    font-size: 5px !important;
}

.fs6 {
    font-size: 6px !important;
}

.fs7 {
    font-size: 7px !important;
}

.fs8 {
    font-size: 8px !important;
}

.fs9 {
    font-size: 9px !important;
}

.fs10 {
    font-size: var(--spacing_half) !important;
}

.fs11 {
    font-size: 11px !important;
}

.fs12 {
    font-size: 12px !important;
}

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

.fs14 {
    font-size: 14px !important;
}

.fs15 {
    font-size: 15px !important;
}

.fs16 {
    font-size: 16px !important;
}

.fs17 {
    font-size: 17px !important;
}

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

.fs20 {
    font-size: var(--spacing) !important;
}

.fs22 {
    font-size: 22px !important;
}

.fs24 {
    font-size: 24px !important;
}

.fs26 {
    font-size: 26px !important;
}

.fs28 {
    font-size: 28px !important;
}

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

.fs35 {
    font-size: 35px !important;
}

.fs40 {
    font-size: 40px !important;
}

.fs45 {
    font-size: 45px !important;
}

.fs50 {
    font-size: 50px !important;
}

.fs60 {
    font-size: 60px !important;
}

.fs70 {
    font-size: 70px !important;
}

.fs80 {
    font-size: 80px !important;
}

.fs90 {
    font-size: 90px !important;
}

.fs100 {
    font-size: 100px !important;
}


/*===============================================
    >>>> End of Text Helpers
================================================= */


/*===============================================
    MEDIA QUERIES
================================================= */

@media (max-width: 970px) {
    .logout strong,
    .lang strong {
        display: none;
    }

    .logout .fa.fa-angle-down {
        display: none;
    }
}

@media (max-width: 768px) {

    .navbar-header {
        float: left;
    }

    .navbar {
        border-radius: 0;
        min-width: var(--spacing);;
    }

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

    .nav-justified > li {
        display: table-cell;
        width: 1%;
    }

    .nav-justified > li > a {
        margin-bottom: 0;
    }

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

    .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
    }

    .nav-tabs.nav-justified > li > a {
        margin-bottom: 0;
    }

    .container {
        min-width: 400px;
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    .navbar-collapse.in {
        overflow-y: visible;
    }

    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }

    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }

    .navbar-static-top {
        border-radius: 0;
    }

    .navbar-fixed-top,
    .navbar-fixed-bottom {
        border-radius: 0;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav {
        float: left;
        margin: 0;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 16px;
    }

    .navbar-left {
        float: left !important;
    }

    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .navbar-form .control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .radio,
    .navbar-form .checkbox {
        display: inline-block;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .radio input[type="radio"],
    .navbar-form .checkbox input[type="checkbox"] {
        float: none;
        margin-left: 0;
    }

    .navbar-form .has-feedback .form-control-feedback {
        top: 0;
    }

    .navbar-form {
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-text {
        float: left;
        margin-right: 15px;
        margin-left: 15px;
    }

}

@media (max-width: 660px) {
    .nav > li > a {
        padding: 15px var(--spacing_half) 15px var(--spacing_half);
    }

    #loader {
        top: 0;
    }

    /* sale order modals tab buttons */
    .product-details-modal-body ul.global-product-tabs li a {
        padding: var(--spacing_half) var(--spacing_half);
    }
}

@media (max-width: 480px) {
    .sub-menu ul li a i {
        margin-right: 3px;
        font-size: 13px;
    }

    ul.column_names {
        margin-top: 17px;
        border-radius: 0;
        width: 100vw !important;
    }
}

.dashed-border {
    border-bottom: dashed 1px #cfcece;
    text-align: left;
    padding-bottom: 15px;
}


/*****************START OF NEW THEME******************************/

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}


/* ajax loader */


/*.pace .pace-progress {*/


/*background: #10cfbd;*/


/*height: 3px*/


/*}*/


/*.pace .pace-progress-inner {*/


/*box-shadow: none*/


/*}*/


/*.pace .pace-activity {*/


/*-webkit-animation: none;*/


/*animation: none;*/


/*top: 73px;*/


/*background: url(../img/progress/progress-circle-success.svg) no-repeat top left;*/


/*background-size: 100% auto;*/


/*margin: 0 auto;*/


/*border-width: 0;*/


/*border-radius: 0;*/


/*width: 28px;*/


/*height: 40px;*/


/*right: 19px;*/


/*left: auto*/


/*}*/


/* end of ajax loader */


/* general styling*/

body.fixed-header .header.main-header-top {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 998;
    display: none;
}

body.no-header .page-container .page-content-wrapper .content {
    padding-top: 0
}

body.no-header .header {
    border-bottom-color: transparent
}

body.dashboard {
    background: #f5f5f5
}

body.dashboard .page-container {
    background: #f5f5f5
}

body.rtl[class^=col-],
body.rtl[class*=col-] {
    float: left
}

.page-container {
    width: 100%;
    height: 100%;
    padding-left: 0;
    padding-top: var(--topbar-height);
}

.page-container .page-content-wrapper {
    min-height: 100%;
    position: relative;
    background-color: var(--bg-secondary);
}

.page-container .page-content-wrapper .content {
    min-height: 100%;
    position: relative;
}

.page-container .page-content-wrapper th.content,
.page-container .page-content-wrapper td.content {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.page-container .page-content-wrapper .content.full-width {
    width: 100%
}

.page-container .page-content-wrapper .content .content-inner {
    display: inline-block;
    vertical-align: top;
    height: 100%;
    padding-left: 30px;
    position: relative
}

.page-container .page-content-wrapper .content:only-child {
    padding-bottom: var(--spacing);
}

.page-container .page-content-wrapper .content.overlay-footer {
    padding-bottom: 0
}

.page-container .page-content-wrapper #content {
    > div:not(.modal) {
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: var(--spacing);
    }
}


.page-container .page-content-wrapper .footer {
    width: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: left .3s ease;
    transition: left .3s ease
}

.page-container .page-content-wrapper .footer.fixed {
    position: fixed
}


/* end of general styling */

.page-title {
    margin-top: 0;
    display: flex;
    align-items: start;
    flex-direction: column;


    h4 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing_half);
        font-weight: bold;
        font-size: 1.33rem;

        flex-wrap: wrap;
        justify-content: center;

        .dropdown-toggle::after{
            margin-left: 0
        }
    }

    .last_updated {
        font-size: 0.8rem;
    }
}

.group-container {
    white-space: nowrap !important
}

.group-container .single-group {
    vertical-align: top;
    display: inline-block;
    white-space: normal
}


/* title container */


/* Header search container */


.heading {
    padding-bottom: var(--spacing_half);
}

.heading > span.last_updated {
    font-family: var(--font-general);
    font-size: 12px;
    text-transform: uppercase;
}

span.last_updated:before {
    content: "(";
}

span.last_updated:after {
    content: ")"
}

.heading > small {
    display: inline-block;
    margin-left: var(--spacing_half);
}


/* end of page title only */


/*========= modal search ========*/

.search-model {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 9991;
}

.search-model-back {
    z-index: 9992;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.3;
}

.search-model-content {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    background: var(--searchbox-bg);
    margin: 0 auto;
    z-index: 9999;
    width: 560px;
    max-width: 100%;
    transition: all 0.30s ease-in-out;
    padding: var(--spacing_half) var(--spacing_half) 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 0px 0px 4px 4px;
    box-shadow: var(--searchbox-shadow);
    -moz-box-shadow: var(--searchbox-shadow);
    -o-box-shadow: var(--searchbox-shadow);
}

.search-model-content .search-container {
    background-color: #efefef;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 var(--spacing_half);
}

.search-container .search-result {
    padding: 0 var(--spacing_half) var(--spacing);
}

.search-model-content .close-searchModal {
    padding: 4px 0px;
}

.search-model-content .close-searchModal p {
    margin: 0;
    font-size: 13px;
    text-align: left;
}

.search-model-content.show {
    display: block;
    transition: all 0.3s
}

.mainSearch i.fa-search {
    padding: 8px var(--spacing_half);
    color: #777;
    transition: 0.24s;
    font-size: 17px;
    line-height: 18px;
    text-align: center;
}

.search-model-content i.fa-close {
    position: absolute;
    right: var(--spacing_half);
    padding: 15px var(--spacing_half);
    font-size: var(--spacing);
}

.search-model-content input {
    background-color: var(--searchbox-bg);
    color: var(--body-text-color);
    border: 1px solid var(--shortcut-link-border-color);
    border-radius: 4px;
    width: 100%;
    padding: 6px var(--spacing_half);
    height: 50px;
    font-size: 28px;
    font-family: var(--font-general);
}


/* end of extra buttons */




/* end of title container */

.container-fluid {
    position: relative;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}

.copyright {
    padding: 25px 0;
    border-top: 1px solid rgba(98, 98, 98, .07);
}


/* dropdown when clicking on the profile image */

.m-dropdown__header {
    padding: var(--spacing_half) 15px 5px;
    border-radius: 4px 4px 0 0;
    background: #272b35;
    margin-top: 0;
    margin-bottom: 0;
}

.profile-dropdown a.dropdown-item {
    font-size: 12px;
    padding: 1px var(--spacing_half);
    font-weight: 500;
    border-bottom: 1px solid var(--light);
    border-radius: 0;
    line-height: 30px;
    color: #7b7d82;
}

.profile-dropdown a.dropdown-item i {
    font-size: 14px;
    width: var(--spacing);
    text-align: center;
}

.profile-dropdown a.dropdown-item:hover {
    background: #f5f5f5;
    opacity: 1;
}

.profile-dropdown a.dropdown-item + span {
    display: inherit;
    width: 100%;
    text-align: center;
    color: var(--primary);
    padding: 5px 0 0 0;
}

span.m-card-title {
    font-family: var(--font-general);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    color: var(--ohd-text-color);
}

.m-card-user {
    padding: 15px;

    margin: 0 -15px 0 -15px;
    border: solid 1px;
    border-top: solid 1px;
    border-color: var(--shortcut-link-border-color);
}

.m-dropdown__header a.m-card-txt {
    color: #b7b4b4;
}

.m-card-user .m-card-user__pic {
    display: table-cell;
    text-align: right;
    padding: 0 5px 0 0;
    vertical-align: middle;
    width: 70px;
}

.m-card-user .m-card-user__details {
    width: 100%;
    padding: 0 0px;
}

.m-card-user .m-card-user__details > *:not(:last-child) {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}


/* end dropdown when clicking on the profile image */


/* flag styling */

span.flag {
    position: absolute;
    width: 26px;
    height: 26px;
    right: 0;
    background: url(../img/us.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    top: 17px;
}


/* end of flag styling */


/* knowledge base question marks */

a.questionMark {
    padding: var(--spacing) 15px;
    font-size: 12px;
    border-left: 1px solid var(--light) !important;
    font-family: var(--font-general);
    font-weight: bold;
}

a.questionMark .fa-question {
    display: none;
}


/* end of knowledge base question mark */

.settings-form-container > .marketPlace {
    width: 100%;
}

.marketPlace > h5 {
    margin: -15px -15px 0 -15px;
    background: #272b35;
    color: var(--bg-primary);
    padding: 15px;
    font-weight: 500 !important;
}

.marketPlace .checkbox.check-info {
    margin: 0;
    border-bottom: 1px dashed #d4d4d4;
    padding: 5px 0;
    height: 55px;
}

.marketPlace .checkbox label {
    font-size: 12px;
    line-height: 19px;
    font-family: var(--font-general) !important;
    font-weight: 600;
    margin-left: -30px;
}


/* end right panel settings container (marketplace switcher) */


/* end of marketplace icon */


/************************
Table Notes
************************/

.notes-table-tr {
    display: flex;
    margin-bottom: var(--spacing_half);
}

.note-table-desc {
    background: var(--advanced-settings-bg);
    padding: 15px;
    flex: 2;
}

.note-table-desc p {
    margin: 0 0 5px;
}

.note-table-links {
    background: var(--dropdown-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing_half);
}

.note-table-links > a {
    margin: 0 7px;
    font-size: 16px;
    color: #666;
}

.note-table-desc em {
    color: var(--site-primary-color);
    font-family: var(--font-general);
    font-weight: 600;
    font-size: 11px;
}

.leftside {
    display: inline-block;
    width: 90%;
    padding-left: 27px;
}

.checkbox .leftside label:before {
    width: 19px;
    height: 19px;
    margin-top: 11px;
    left: -3px;
    border-radius: var(--spacing);
}

.checkbox .leftside label::after {
    top: 12px;
    left: 1px;
}

.leftside > p {
    font-size: 12px;
}

.search-section button {
    margin-left: var(--spacing);
    border-radius: 4px !important;
    line-height: 18px;
}

.pager {
    margin: 0
}

.split-view {
    position: relative;
    height: 100%
}

.split-view .split-list {
    float: left;
    width: 360px;
    background: var(--bg-primary);
    height: 100%;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid #e6e6e6;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.split-view .split-list .list-view-fake-header {
    font-size: 10.8px !important;
    line-height: normal !important
}

.split-view .split-list.slideLeft {
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0)
}

.split-view .split-list .list-refresh {
    position: absolute;
    right: 18px;
    top: 4px;
    color: #626262;
    opacity: .34;
    z-index: 101
}

.split-view .split-list .list-refresh i {
    font-size: 11px
}

.split-view .split-list .list-view-fake-header,
.split-view .split-list .list-view-group-header {
    background: var(--light);
    height: 28px;
    color: rgba(98, 98, 98, .7);
    font-family: var(--font-general);
    text-transform: uppercase;
    font-size: 10.8px;
    padding-left: 12px;
    padding-top: 6px;
    letter-spacing: .07em;
    width: 100%
}

.split-view .split-list .item {
    height: 111px;
    list-style: none;
    position: relative;
    border-bottom: 1px solid rgba(230, 230, 230, .7);
    cursor: pointer
}

.split-view .split-list .item .inline {
    width: 230px
}

.split-view .split-list .item .inline > * {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: arial
}

.split-view .split-list .item .recipients {
    letter-spacing: .01em;
    padding-bottom: 2px
}

.split-view .split-list .item .checkbox {
    float: left;
    clear: left;
    display: none;
    max-width: 32px
}

.split-view .split-list .item .subject {
    font-family: helvetica;
    font-size: 14.33px;
    color: var(--info);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 38px;
    display: -webkit-box;
    white-space: normal;
    line-height: 18px
}

.split-view .split-list .item .body {
    font-size: 12.6px;
    opacity: .52;
    height: 22px
}

.split-view .split-list .item .datetime {
    color: #121212;
    font-family: arial;
    font-size: 11.1px;
    position: absolute;
    right: var(--spacing);
    top: 15px;
    opacity: .46
}

.split-view .split-details {
    position: relative;
    overflow: auto;
    height: 100%
}

.split-view .split-details .no-result {
    bottom: 0;
    left: 0;
    margin-top: -34px;
    opacity: .5;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%
}

.split-view .split-details .actions {
    height: 50px;
    float: left
}

.split-view .split-details .actions li {
    list-style: none;
    position: relative
}

.split-view .split-details .actions li:last-child:after {
    display: none
}

.split-view .split-details .actions li:after {
    content: "";
    height: 14px;
    position: absolute;
    right: -4px;
    top: 18px;
    width: 1px;
    background: rgba(0, 0, 0, .07)
}

.split-view .split-details .actions li a {
    font-size: 13.1px;
    color: #626262;
    font-weight: 600;
    padding: 0 13px;
    line-height: 50px;
    white-space: nowrap
}

.windows h4.c-heading-medium {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.inner-content {
    margin-top: 0;
    padding: 0;
    overflow: auto;
    min-height: 100%;
    margin-left: 250px
}

.toggle-secondary-sidebar {
    display: none
}

#mp-search {
    padding: var(--spacing_half);
    overflow: hidden;
    border: var(--input-border);
    border-radius: var(--md-rounded);
    background: var(--bg-primary);

    input.header-search {
        background: transparent;
        border: none;
        display: inline-block;
        color: var(--ohd-text-color);
        font-size: 1.2rem;

        width: calc(100% - 50px);
        line-height: 16px;

        &::placeholder{
            font-weight: bold;
        }
    }

    .mp-search {
        display: inline-block;
        font-size: 1rem;

        i {
            margin-right: 15px;
            font-size: 16px;
            vertical-align: middle;
        }
    }
}



.top-input-area {
    background: var(--bg-primary);
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9;
    -webkit-animation: expand 1s;
    padding: 15px 15px;
}

.top-input-area .top-menu-input {
    width: 100%;
}


.breadcrumb {
    font-family: var(--font-general);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 15px 0;
    margin: 0;
    border: 0;
    text-transform: uppercase;
}

.breadcrumb.breadcrumb-alt {
    padding: 8px 0;
    text-transform: none
}

.breadcrumb.breadcrumb-alt a {
    letter-spacing: normal;
    color: #000;
    font-size: 12px !important
}

.breadcrumb.breadcrumb-alt > .breadcrumb-item,
.breadcrumb.breadcrumb-alt > .breadcrumb-item.active {
    letter-spacing: normal;
    opacity: .46;
    color: #000;
    font-size: 12px !important
}

.breadcrumb a {
    font-size: 12px !important;
    letter-spacing: .06em;
    color: var(--body-text-color);
    text-decoration: none;
}

.breadcrumb .breadcrumb-item {
    padding-left: 0;
    line-height: 16px;
}

.breadcrumb > .breadcrumb-item + .breadcrumb-item:before {
    padding: 0 5px;
    content: "/";
}

.breadcrumb > .breadcrumb-item.active {
    color: var(--site-secondary-color);
}

body.mobile .sidebar-menu {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

body.mobile .sidebar-menu > ul {
    height: auto !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important
}


/*========= left main menu new =============*/

.app-sidebar {
    background-color: var(--sidebar-bg);
    z-index: 9990;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
}

body.vertical-menu .app-sidebar {
    bottom: 0;
    width: var(--left-menu-width);
    flex-direction: column;
}

.app-sidebar-menu {
    display: flex;
}

body.vertical-menu .app-sidebar .app-sidebar-menu {
    flex-direction: column;
}

.app-sidebar ul.menu-items {
    display: flex;
}

body.vertical-menu .app-sidebar ul.menu-items {
    flex-direction: column;
}

body.horizontal-menu .app-sidebar {
    left: 0;
    right: 0;
    width: 100%;
    height: var(--left-menu-width);
    flex-direction: row;
}

body.horizontal-menu .app-sidebar .app-sidebar-menu {
    flex-direction: row;
}

body.horizontal-menu .app-sidebar ul.menu-items {
    flex-direction: row;
}

.app-sidebar.left {
    left: calc(-1 * var(--left-menu-width));
    box-shadow: var(--left-sidebar-shadow);
}

.app-sidebar.right {
    right: calc(-1 * var(--left-menu-width));
    box-shadow: var(--right-sidebar-shadow);
}

.app-sidebar.top {
    top: 0;
    box-shadow: var(--top-sidebar-shadow);
}

body.left-menu-open .app-sidebar.left {
    left: 0;
}

body.left-menu-open .app-sidebar.right {
    right: 0;
}

body.left-menu-open.vertical-menu .page-container {
    padding-left: var(--left-menu-width);
}

body.left-menu-open.horizontal-menu .page-container {
    padding-top: var(--left-menu-width);
}

body.left-menu-open #content .sidebar-logo {
    display: none;
}

#content > .container-fluid {
    clear: both;
}

.spacing-h {
    padding: 0 var(--spacing);
}

.mobile-actions {
    position: fixed;
    left: 0;
    z-index: 9991;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
    top: calc(50vh - 17px);
    transition: ease-in-out 0.5s;
    width: 40px;
    flex-wrap: wrap;
}

body.horizontal-menu .mobile-actions {
    display: none;
}

body.left-menu-open .mobile-actions {
    left: calc(var(--left-menu-width) - var(--spacing));
}

body.left-menu-open .mobile-actions .round-btn.toggle-left-menu {
    transform: rotate(180deg);
}

.mobile-actions .menu-btn {
    left: 0;
}

body.left-menu-open .mobile-actions .menu-btn {
    left: calc(-1 * (var(--left-menu-width) + var(--spacing)));
}

.mobile-actions .round-btn {
    display: block;
    position: relative;
}






body.left-menu-open #content > .logo-section {
    display: none;
}

.app-sidebar-menu {
    clear: both;
}

.sidebar-user ul.menu-items,
.app-sidebar-menu ul.menu-items {
    list-style: none;
    padding-left: 0px;
    color: var(--bg-primary);
    text-align: center;
    margin-bottom: 0px;
}

.sidebar-user ul.menu-items li,
.app-sidebar-menu ul.menu-items li {
    padding-left: 0px;
    display: flex;
}

.sidebar-user ul.menu-items li a.menu-link,
.logo-section a.menu-link,
.app-sidebar-menu ul.menu-items li a.menu-link {
    color: var(--sidebar-text-color);
    font-size: 15px;
    font-weight: bold;
    line-height: 24px;
    padding: var(--left-menu-padding) 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--left-menu-width);
}

a.menu-link > svg {
    width: 24px;
}

.sidebar-user ul.menu-items li a .flag-icon {
    -webkit-background-size: cover;
    background-size: cover;
}

.logo-section a.menu-link:hover,
.app-sidebar li.sub-menu > a:hover {
    background: var(--sidebar-bg-alpha);
    transition: .3s ease-in-out;
}

.menu-items .menu-link.active,
.sidebar-user ul.menu-items li a.side-btn.active {
    position: relative;
}

.menu-items .menu-link.active:after,
.sidebar-user ul.menu-items li a.side-btn.active:after {
    position: absolute;
    content: '';
    right: -1px;
    top: calc(50% - var(--spacing_half));
    border-right: var(--spacing_half) solid var(--ohd-bg);
    border-bottom: var(--spacing_half) solid transparent;
    border-top: var(--spacing_half) solid transparent;
}

.sub-menu.user > .label {
    padding: 0;
}

.fixed-warning-label {
    position: absolute;
    right: 0;
    top: -5px;
    z-index: 9;
    text-align: right;
}

.fixed-warning-label .label {
    display: inline-block;
    cursor: pointer;
    padding: 2.5px 7.5px;
}


.or-seperator {
    width: 100%;
    text-align: center;
    border-bottom: 2px dashed #ddd;
    line-height: 0.1em;
    margin: 30px 0;
}

.or-seperator span {
    padding: 0 15px;
    background: var(--ohd-bg);
}

.sub-menu.user .profile {
    border: solid 2px #444444;
    background-color: #444444;
    border-radius: 100%;
    padding: 7px var(--spacing_half);
    color: #dddddd;
}

.sub-menu .unread-count {
    position: absolute;
    top: 2px;
    left: 26px;
}

.trial-on-hover p {
    margin: 0px;
}

.trial-on-hover p a {
    color: var(--bg-primary);
    text-decoration: underline;
}

.trial-warning.dropdown:hover .dropdown-content {
    display: block;
}


/*========= left main menu ends =============*/

.header-logo {
    display: inline-block;
    width: 78px;
    float: right;
    margin-right: -44px;
    margin-top: -2px;
}


.overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    /*z-index:1010;*/
    padding-left: 64px;
    overflow: auto;
}

.overlay.filters-container {
    background: rgba(255, 255, 255, .95);
}

.overlay .inline-block {
    display: inline-block
}

.overlay .overlay-brand {
    margin-left: 7px
}

.overlay > div {
    width: 100%;
    height: 260px;
    display: block;
    overflow: hidden
}

.overlay .has-results {
    overflow: visible
}

.overlay .overlay-search {
    font-weight: 700;
    font-size: 77px;
    height: 100px;
    letter-spacing: -1.925px;
    line-height: 100px;
    width: 100%;
    padding-left: 0 !important
}

.overlay .overlay-close {
    position: absolute;
    right: var(--spacing);
    top: 5px
}


.scroll {
    position: relative;
    overflow: auto
}

.leftside {
    display: inline-block;
    width: 90%;
    padding-left: 27px;
}

.scroll-wrapper > .scroll-element,
.scroll-wrapper > .scroll-element div {
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10
}

.scroll-wrapper > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.scroll-wrapper > .scroll-element.scroll-x {
    bottom: 2px;
    height: 7px;
    left: 0;
    min-width: 100%;
    width: 100%
}

.scroll-wrapper > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 2px;
    top: 0;
    width: 4px
}

.scroll-wrapper > .scroll-element .scroll-element_outer {
    opacity: .3
}

.scroll-wrapper > .scroll-element .scroll-element_size {
    background-color: rgba(0, 0, 0, .07);
    opacity: 0
}

.scroll-wrapper > .scroll-element .scroll-bar {
    background-color: #697686
}

.scroll-wrapper > .scroll-element.scroll-x .scroll-bar {
    bottom: 0;
    height: 4px;
    min-width: 24px;
    top: auto
}

.scroll-wrapper > .scroll-element.scroll-x .scroll-element_outer {
    bottom: 0;
    top: auto;
    left: 2px;
    -webkit-transition: height .2s;
    transition: height .2s
}

.scroll-wrapper > .scroll-element.scroll-x .scroll-element_size {
    left: -4px
}

.scroll-wrapper > .scroll-element.scroll-y .scroll-bar {
    left: auto;
    min-height: 24px;
    right: 0;
    width: 4px
}

.scroll-wrapper > .scroll-element.scroll-y .scroll-element_outer {
    left: auto;
    right: 0;
    top: 2px;
    -webkit-transition: all .2s;
    transition: all .2s
}

.scroll-wrapper > .scroll-element.scroll-y .scroll-element_size {
    top: -4px
}

.scroll-wrapper > .scroll-content {
    box-sizing: inherit !important
}

.scroll-wrapper.auto-hide > .scroll-element .scroll-element_track {
    display: none
}

.scroll-wrapper > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
    left: -11px
}

.scroll-wrapper > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
    top: -11px
}

.scroll-wrapper > .scroll-element:hover .scroll-element_outer,
.scroll-wrapper > .scroll-element.scroll-draggable .scroll-element_outer {
    overflow: hidden;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
    opacity: .7
}

.scroll-wrapper > .scroll-element:hover .scroll-element_outer .scroll-element_size,
.scroll-wrapper > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
    opacity: 1
}

.scroll-wrapper > .scroll-element:hover .scroll-element_outer .scroll-bar,
.scroll-wrapper > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
    height: 100%;
    width: 100%
}

.scroll-wrapper > .scroll-element.scroll-x:hover .scroll-element_outer,
.scroll-wrapper > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
    height: var(--spacing_half);
    min-height: 7px
}

.scroll-wrapper > .scroll-element.scroll-y:hover .scroll-element_outer,
.scroll-wrapper > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
    min-width: 7px;
    width: 7px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: var(--spacing_half) 0;
    font-family: var(--font-general);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-weight: 300;
    color: var(--heading-color)
}

h1 {
    font-size: 44px;
    line-height: 55px;
    letter-spacing: -.08px
}

h2 {
    font-size: 31px;
    line-height: 40px
}

h3 {
    font-size: 27px;
    line-height: 35px
}

h4 {
    font-size: 22px;
    line-height: 31.88px
}

h5 {
    font-size: 18px;
    line-height: 25.88px
}

h3 small,
h4 small,
h5 small {
    font-weight: 300
}

h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
    padding-bottom: var(--spacing_half)
}

br {
    line-height: normal;
    clear: both
}

code:hover {
    background-color: #fddddd
}

p {
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.25px;
    line-height: 22px;
    margin: 0 0 15px;
    font-style: normal;
    white-space: normal
}

small,
.small {
    line-height: 18px;
    font-size: 85%
}

label.inline {
    display: inline-block;
    position: relative;
    top: 0;
    font-size: 13px
}

ul,
ol {
    margin-bottom: var(--spacing_half)
}

ul > li,
ol > li {

}

ul.lg-icon > li,
ol.lg-icon > li {
    font-size: 21px
}

ul.lg-icon > li span,
ol.lg-icon > li span {
    font-size: 14px
}

ul.no-style,
ol.no-style {
    list-style: none;
    padding-left: 5px
}

address {
    margin-bottom: 0
}

address a {
    color: #626262
}

blockquote {
    padding: 0 0 0 18px;
    border-left: 0
}

blockquote:before {
    content: '';
    font-family: FontAwesome;
    content: "\f10d";
    margin-right: 13px;
    float: left
}

blockquote p {
    font-size: 16px
}

blockquote small {
    line-height: 29px;
    color: #8b91a0;
    padding-left: 30px
}

blockquote small:before {
    content: ""
}

blockquote.pull-right {
    border-right: 0
}

blockquote.pull-right:before {
    float: right;
    content: '';
    font-family: FontAwesome;
    content: "\f10d";
    margin-left: 13px;
    margin-right: 0
}

blockquote.pull-right small {
    padding-right: 30px
}

blockquote.pull-right small:after {
    content: ""
}

hr {
    border-color: #e6e6e6
}

hr.double {
    border-width: 2px
}

hr.dotted {
    border-style: dotted none none
}

.small-text {
    font-size: 12px !important
}

.normal-text {
    font-size: 13px !important
}

.large-text {
    font-size: 15px !important
}

.normal {
    font-weight: 400
}

.semi-bold {
    font-weight: 400 !important
}

.bold {
    font-weight: 700 !important
}

.light {
    font-weight: 300 !important
}

.logo {
    margin: 18px 14px
}

.all-caps {
    text-transform: uppercase
}

.muted {
    color: #e2e2e2
}

.hint-text {
    opacity: .7
}

.no-decoration {
    text-decoration: none !important
}

.bg-master {
    background-color: #626262
}

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

.bg-master-lighter {
    background-color: var(--light)
}

.bg-master-lightest {
    background-color: #fafafa
}

.bg-master-dark {
    background-color: var(--text-primary)
}

.bg-master-darker {
    background-color: var(--text-primary)
}

.bg-master-darkest {
    background-color: #121212
}

.bg-primary {
    background-color: #04b5e0 !important;
}

.bg-primary-dark {
    background-color: #584b8d
}

.bg-primary-darker {
    background-color: #413768
}

.bg-primary-light {
    background-color: #8a7dbe
}

.bg-primary-lighter {
    background-color: #e2deef
}

.bg-complete {
    background-color: var(--info)
}

.bg-complete-dark {
    background-color: #3a8fc8
}

.bg-complete-darker {
    background-color: #2b6a94
}

.bg-complete-light {
    background-color: #6dc0f9
}

.bg-complete-lighter {
    background-color: #daeffd
}

.sidebar-menu .bg-success {
    background-color: var(--site-secondary-bg) !important;
}

.bg-panel{
    background-color: var(--panel-bg);
}

.bg-success {
    background-color: #049854 !important;
}

.bg-success-dark {
    background-color: var(--success)
}

.bg-success-darker {
    background-color: #0a7c71
}

.bg-success-light {
    background-color: var(--success)
}

.bg-success-lighter {
    background-color: var(--success)
}

.bg-info {
    background-color: var(--info) !important
}

.bg-info-dark {
    background-color: var(--info)
}

.bg-info-darker {
    background-color: var(--info)
}

.bg-info-light {
    background-color: var(--info)
}

.bg-info-lighter {
    background-color: #d8dadc
}

.bg-danger {
    background-color: #d24b3a !important;
}

.bg-danger-dark {
    background-color: var(--danger)
}

.bg-danger-darker {
    background-color: #933432
}

.bg-danger-light {
    background-color: var(--danger)
}

.bg-danger-lighter {
    background-color: #fddddd
}

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

.bg-warning-dark {
    background-color: #c9a843
}

.bg-warning-darker {
    background-color: #957d32
}

.bg-warning-light {
    background-color: #f9d975
}

.bg-warning-lighter {
    background-color: #fef6dd
}

.bg-menu-dark {
    background-color: #21252d
}

.bg-menu {
    background-color: #2b303b
}

.bg-menu-light {
    background-color: #788195
}

.gradient-grey {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%)
}

.gradient-black {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%)
}

.bg-white {
    background-color: var(--bg-primary)
}

.bg-transparent {
    background-color: transparent !important
}

.link {
    opacity: .7
}

.link:hover {
    opacity: 1
}

.text-master {
    color: #626262 !important
}

.text-master-light {
    color: #e6e6e6 !important
}

.text-black {
    color: var(--text-primary) !important
}

.text-white {
    color: var(--bg-primary) !important
}

.text-complete {
    color: var(--info) !important
}

.text-success {
    color: #10cfbd !important
}

.text-info {
    color: var(--info) !important
}

.text-warning {
    color: var(--warning) !important
}

.text-warning-dark {
    color: #c9a843 !important
}

.text-danger {
    color: var(--danger) !important
}

.text-primary {
    color: var(--primary) !important
}

.text-right {
    text-align: right !important
}

.text-left {
    text-align: left !important
}

.text-center {
    text-align: center !important
}

.label {
    padding: 4px 9px;
    font-size: 11px;
    line-height: 1;
    text-shadow: none;
    font-weight: 600;
    color: #000;
    border-radius: .25em;
}

.label-tag {
    padding: 4px 9px 3px 9px;
}

.label.label-close {
    padding: 4px 0;
}

.label.label-close:hover {
    border: 1px solid #c5c3c3;
}

span.label.label-tag,
span.label.label-tag:hover {
    background: var(--primary);
    border: 1px solid var(--primary);
}

span.label.label-tag {
    color: var(--light-text);
}

span.label.label-tag .badge-tag {
    font-weight: bold;
    margin-left: 5px;
    white-space: normal;
}

span.label.label-tag .badge-tag:before {
    content: "\"";
}

span.label.label-tag .badge-tag:after {
    content: "\"";
}

span.label.label-tag.label-custom,
span.label.label-tag.label-custom + .label-close,
span.label.label-tag.label-custom:hover {
    background: #bbbbbb;
    border: 1px solid #bbbbbb;
}

span.label.label-tag.label-custom {
    color: var(--bg-primary);
    /*margin-right: 5px;*/
}

span.label.label-tag.label-custom .badge-tag {
    color: #444444;
    white-space: pre-line;
    -ms-word-wrap: anywhere;
    word-wrap: anywhere;
}

.load_filter_table .label {
    padding: 5px 9px;
    font-size: 11px;
    line-height: 1;
    text-shadow: none;
    background-color: #eadadb;
    font-weight: 600;
    color: #000000;
    border-radius: 3px;
    text-align: left;
}

.load_filter_table .label-tag .badge-tag {
    font-size: 13px;
    margin-left: 5px;
    margin-right: 5px;
}

.label-success {
    background-color: #10cfbd;
    color: var(--bg-primary)
}

.label-warning {
    background-color: var(--warning);
    color: var(--bg-primary)
}

.label-important,
.label-danger {
    background-color: var(--danger);
    color: var(--bg-primary);
    border: 1px solid var(--danger);
}

.label-info {
    background-color: var(--info);
    color: var(--bg-primary)
}

.label-inverse {
    background-color: #3a8fc8;
    color: var(--bg-primary)
}

.label-white {
    background-color: var(--bg-primary);
    color: #626262
}

.fs-10 {
    font-size: var(--spacing_half) !important
}

.fs-11 {
    font-size: 10.5px !important
}

.fs-12 {
    font-size: 12px !important
}

.fs-13 {
    font-size: 13px !important
}

.fs-14 {
    font-size: 14px !important
}

.fs-15 {
    font-size: 15px !important
}

.fs-16 {
    font-size: 16px !important
}

.lh-normal {
    line-height: normal
}

.lh-10 {
    line-height: var(--spacing_half)
}

.lh-11 {
    line-height: 11px
}

.lh-12 {
    line-height: 12px
}

.lh-13 {
    line-height: 13px
}

.lh-14 {
    line-height: 14px
}

.lh-15 {
    line-height: 15px
}

.lh-16 {
    line-height: 16px
}

.font-var {
    font-family: var(--font-general) !important
}

.font-heading {
    font-family: var(--font-general)
}

.well {
    background-color: #e6e6e6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: 0;
    background-image: none
}

.well.well-large {
    padding: 24px;
    width: auto
}

.well.well-small {
    padding: 13px;
    width: auto
}

.well.green {
    background-color: var(--info);
    color: var(--bg-primary);
    border: 0
}

.overflow-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}


.alert > p,
.alert > ul {
    margin-bottom: 0
}


.alert {
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 3px;
    font-size: 14px;
    border-width: 0;
    -webkit-transition: all .2s linear 0s;
    transition: all .2s linear 0s;
}

.alert.alert-danger a {
    color: #b55f5f;
    font-weight: 500;
    text-decoration: underline;
}

.alert.alert-success a {
    color: var(--header-bg);
    font-weight: 500;
    text-decoration: underline;
}

.alert.bordered {
    border-width: 1px
}

.alert .link {
    color: #ce8f22;
    font-weight: 700
}

.alert .alert-heading {
    color: #ce8f22 !important;
    margin-bottom: 5px;
    font-weight: 600
}

.alert .btn-small {
    position: relative;
    top: -3.5px
}

.alert .button-set .btn {
    position: relative;
    top: 8px
}

.alert .close {
    background: url(../img/icons/noti-cross.png) no-repeat scroll 0 0 transparent;
    background-position: -9px -10px;
    width: var(--spacing_half);
    height: 14px;
    position: relative;
    opacity: .8;
    top: 4.5px;
    float: right;
    margin-left: var(--spacing);
    font-size: 0;
}

.alert .close:hover {
    opacity: 1
}

.alert-danger,
.alert-error {
    background-color: #fddddd;
    color: #933432;
    border-color: #933432
}

.alert-danger .close,
.alert-error .close {
    background-position: -95px -10px !important
}

.option-btn {
    width: 100%;
    border: none;
    border-radius: 0;
    border-left: 1px solid var(--light);
}

.option-btn:first-child {
    border: none;
}

.option-btn i {
    font-size: 18px;
}

.option-btn:hover i {
    color: var(--hover-color);
}

.alert-warning {
    background-color: var(--warning);
    border-color: var(--warning);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-bg);
}


.alert-info .close {
    background-position: -67px -8px !important;
}

.alert-primary {
    background-color: var(--primary);
    color: var(--header-bg);
    border-color: var(--primary)
}

.alert-success {
    background-color: var(--success);
    color: var(--header-bg);
    border-color: #0a7c71
}



.alert-success .close {
    background-position: -38px -10px !important;
}

.alert-default {
    background-color: var(--bg-primary);
    color: #626262;
    border-color: #e6e6e6
}

.alert-default .close {
    background-position: -67px -10px !important
}

.btn .badge {
    top: 2px;
    right: 2px;
}

.badge {
    text-shadow: none;
    font-family: var(--font-general);
    font-weight: 600;
    background-color: #e6e6e6;
    font-size: 10px;
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    padding: 5px;
    color: #626262;
    border-radius: var(--spacing_half)
}

.badge-success {
    background-color: var(--success);
    color: var(--bg-primary)
}

.badge-warning {
    background-color: var(--warning);
    color: var(--bg-primary)
}

.badge-important {
    background-color: var(--danger);
    color: var(--bg-primary)
}

.badge-danger {
    background-color: var(--danger);
    color: var(--bg-primary)
}

.badge-info {
    background-color: var(--info);
    color: var(--bg-primary)
}

.badge-inverse {
    background-color: #2b6a94;
    color: var(--bg-primary)
}

.badge-white {
    background-color: var(--bg-primary);
    color: #626262
}

.badge-disable {
    background-color: var(--text-primary);
    color: #626262
}

.progress.transparent {
    background-color: rgba(0, 0, 0, .28);
}

.progress.progress-small {
    height: 3px
}

.progress-bar {
    box-shadow: none;
    border-radius: 0;
    background-color: #626262;
    background-image: none;
    -webkit-transition: all 1000ms cubic-bezier(.785, .135, .15, .86);
    transition: all 1000ms cubic-bezier(.785, .135, .15, .86);
    -webkit-transition-timing-function: cubic-bezier(.785, .135, .15, .86);
    -moz-transition-timing-function: cubic-bezier(.785, .135, .15, .86);
    -ms-transition-timing-function: cubic-bezier(.785, .135, .15, .86);
    -o-transition-timing-function: cubic-bezier(.785, .135, .15, .86);
    transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}

.progress-bar-primary {
    background-color: var(--primary);
    background-image: none
}

.progress-bar-complete {
    background-color: var(--info);
    background-image: none
}

.progress-bar-success {
    background-color: var(--success);
    background-image: none
}

.progress-bar-info {
    background-color: var(--info);
    background-image: none
}

.progress-bar-warning {
    background-color: var(--warning);
    background-image: none
}

.progress-bar-danger {
    background-color: var(--danger);
    background-image: none
}

.progress-bar-white {
    background-color: var(--bg-primary);
    background-image: none
}

.progress-bar-black {
    background-color: #000;
    background-image: none
}

.progress-info .bar,
.progress .bar-info {
    background-color: var(--info);
    background-image: none
}

.progress-warning .bar,
.progress .bar-warning {
    background-color: #957d32;
    background-image: none
}

.progress-danger .bar,
.progress .bar-danger {
    background-color: #933432;
    background-image: none
}

.progress-white .bar,
.progress .bar-white {
    background-color: var(--bg-primary);
    background-image: none
}

.progress-success.progress-striped .bar,
.progress-striped .bar-success {
    background-color: var(--success)
}

.progress-info.progress-striped .bar,
.progress-striped .bar-info {
    background-color: var(--info)
}


/* sales order modal body style */



@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

@media (max-width: 768px) {
    .modal.fill-in .modal-dialog {
        width: calc(100% - var(--spacing))
    }

    .modal.slide-up .modal-dialog {
        width: calc(100% - var(--spacing))
    }

    .search-section .primary-btn:not(:disabled):not(.disabled):active,
    .search-section .primary-btn:focus,
    .search-section .primary-btn:active,
    .search-section .primary-btn:hover {
        background-color: transparent !important;
    }

    .kpi-list-container {
        padding: 5px 7px !important;
        margin: 0 0 8px !important;
    }
}


.dd-handle {
    border-color: rgba(230, 230, 230, .7);
    color: #626262
}

.dd-handle:hover {
    background-color: #fafafa
}

.dark .dd-handle {
    color: #626262;
    background: var(--light)
}

.dark .dd-handle:hover {
    background-color: #fafafa
}

.dark .dd-placeholder {
    background-color: #e6e6e6
}

.dd3-content {
    background: var(--bg-primary);
    border-color: rgba(230, 230, 230, .7);
    color: #626262
}

.dd3-content:hover {
    background-color: #fafafa
}

.dd3-handle {
    background: 0 0;
    text-indent: 9999px
}

.dd3-handle:before {
    font-family: pages-icon;
    color: #626262;
    content: "\e660";
    font-size: 11px;
    top: 5px
}

.dd-placeholder {
    background: var(--light);
    border-color: rgba(98, 98, 98, .35)
}

.dd-empty {
    background-image: none;
    background: var(--light);
    border-color: rgba(98, 98, 98, .5)
}

.dd-item > button {
    font-size: 11px
}

.dd-item > button:before {
    font-family: pages-icon;
    content: "\e63b"
}

.dd-item > button[data-action=collapse]:before {
    font-family: pages-icon;
    content: "\e635"
}

@media only screen and (min-width: 700px) {
    .dd {
        width: 100%
    }

    .nestable-lists .dd {
        float: left
    }
}

span.dynatree-active a {
    color: var(--text-primary) !important;
    background-color: transparent !important
}

span.dynatree-selected a {
    color: var(--text-primary) !important;
    font-style: normal
}

ul.dynatree-container a:focus,
span.dynatree-focused a:link {
    background-color: transparent
}

ul.dynatree-container {
    background-color: transparent
}

ul.dynatree-container a:hover {
    color: #626262;
    opacity: .7;
    background-color: transparent
}

ul.dynatree-container a {
    color: #626262
}

span.dynatree-empty,
span.dynatree-vline,
span.dynatree-connector,
span.dynatree-expander,
span.dynatree-icon,
span.dynatree-checkbox,
span.dynatree-radio,
span.dynatree-drag-helper-img,
#dynatree-drop-marker {
    height: 17px;
    position: relative;
    top: 3px
}

.view-port {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    word-spacing: 0;
    font-size: 0;
    overflow: hidden
}

.view-port > * {
    font-size: initial
}

.view-port .navbar {
    border-radius: 0;
    padding-left: 0;
    margin-bottom: 0;
    border-left: 0;
    display: table;
    width: 100%;
    top: 0;
    border-top: 0;
    padding: 0;
    border-bottom: 1px solid #e7e7e7
}

.view-port .navbar .navbar-inner {
    display: table-cell;
    height: 50px;
    vertical-align: middle
}

.view-port .navbar .action {
    position: absolute;
    top: 0;
    line-height: 50px;
    z-index: 1
}

.view-port .navbar .action.pull-right {
    right: 0
}

.view-port .navbar .view-heading {
    font-size: 15px;
    text-align: center
}

.view-port .navbar > p {
    line-height: 12px;
    font-size: 12px;
    margin: 0
}

.view-port .navbar.navbar-sm {
    min-height: 35px
}

.view-port .navbar.navbar-sm .navbar-inner {
    height: 35px
}

.view-port .navbar.navbar-sm .action {
    line-height: 35px
}

.view-port .view {
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    transition: all .4s ease
}

.view-port .view:first-child:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
    z-index: -1
}

.view-port .view:only-child {
    margin: 0
}

.view-port.from-top > .view:last-child {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -ms-transform: translate(-100%, 0)
}

.view-port.push > .view:first-child {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -ms-transform: translate(-100%, 0)
}

.view-port.push > .view:last-child {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -ms-transform: translate(-100%, 0)
}

.view-port.push-parrallax > .view:first-child {
    -webkit-transition: all 400ms cubic-bezier(.1, .7, .1, 1);
    transition: all 400ms cubic-bezier(.1, .7, .1, 1);
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
    -ms-transform: translate(-25%, 0)
}

.view-port.push-parrallax > .view:first-child:before {
    opacity: 0;
    z-index: 100
}

.view-port.push-parrallax > .view:last-child {
    -webkit-transition: all 400ms cubic-bezier(.1, .7, .1, 1);
    transition: all 400ms cubic-bezier(.1, .7, .1, 1);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -ms-transform: translate(-100%, 0);
    box-shadow: 0 0 9px rgba(191, 191, 191, .36)
}

.card {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    position: relative;
    margin-bottom: 15px;
    width: 100%;
    word-wrap: none;
    border: 1px solid var(--panel-border-color);
}

.card .card-header {
    background: 0 0;
    border-radius: 0;
    border-bottom: 0;
    padding: var(--spacing) var(--spacing) 7px;
    position: relative;
    z-index: 3;
    min-height: 48px
}

.card .custome-card-header {
    padding: 25px 30px 0 25px;
}

.card .card-header.separator:after {
    content: "";
    height: 1px;
    background: rgba(0, 0, 0, .08);
    left: 16px;
    right: 16px;
    position: absolute;
    bottom: 0
}

.card .card-header + .card-body {
    padding-top: 0
}

.card .card-header .card-title {
    font-family: var(--font-general);
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: .06em;
    font-size: 10.5px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-stroke: 0;
    filter: alpha(opacity=40);
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.card .custome-card-header .card-title {
    font-size: 16px;
    font-weight: 600;
}

.card .card-header .card-controls {
    float: right;
    margin-top: -3px
}

.card .card-header .card-controls ul {
    margin: 0;
    padding: 0
}

.card .card-header .card-controls ul li {
    display: inline-block;
    list-style: none;
    line-height: 0
}

.card .card-header .card-controls:after {
    content: "";
    display: table;
    clear: both
}

.card .card-header.card-header-hover .card-title {
    opacity: .4
}

.card .card-header.card-header-hover:hover .card-title {
    opacity: 1
}

.card.card-default {
    border: 1px solid rgba(0, 0, 0, .07)
}

.card.card-default > .card-header {
    color: #333
}

.card.card-bordered {
    border: 1px solid rgba(230, 230, 230, .7)
}

.card.card-borderless {
    border: 0
}

.card.card-condensed .card-header {
    padding: 13px 13px 0;
    min-height: 30px
}

.card.card-condensed .card-header .card-title {
    opacity: .4
}

.card.card-condensed .card-body {
    padding: 13px
}

.card.card-hover .card-header .card-title {
    opacity: .4
}

.card.card-hover:hover .card-header .card-title {
    opacity: 1
}

.card.card-transparent.card-body-scroll,
.card.card-transparent .card-body.card-body-scroll {
    overflow: auto;
}

.card.card-transparent {
    background: var(--bg-primary);
    border: solid 1px var(--table-border);
    padding: var(--spacing);

    -webkit-box-shadow: none;
    box-shadow: none
}

.card.card-transparent .card-body {
    background: 0 0;
}

.card.card-transparent.card-body-scroll,
.card.card-transparent .card-body.card-body-scroll {
    overflow: auto;
}

.notifications-container {
    overflow: hidden;
}

.card.full-height {
    height: calc(100%)
}

.card.full-height .card-body {
    width: 100%;
    height: 100%
}

.card.card-featured {
    -webkit-box-shadow: -1px 1px 3px 0 rgba(121, 129, 135, .14);
    box-shadow: -1px 1px 3px 0 rgba(121, 129, 135, .14);
    width: calc(100% - 50px);
    float: right
}

.card.card-featured .card-title h4 {
    font-family: var(--font-general);
    font-size: 16px;
    text-transform: uppercase;
    color: var(--light)
}

.card.card-featured .card-body h3 {
    line-height: 34px;
    font-size: 26px
}

.card.card-featured .footer .username {
    line-height: 8px;
    padding-top: var(--spacing_half);
    font-size: 16px
}

.card.card-featured .footer .buttons li {
    display: inline;
    list-style: none;
    font-weight: 700;
    margin-left: var(--spacing)
}

.card.card-featured .footer .buttons li:first-child {
    margin-left: 0
}

.card.card-featured .footer .buttons .heart {
    color: var(--danger)
}

.card.card-featured .footer .buttons .comment {
    color: #626262
}

.card.card-featured .ribbon {
    width: 38px;
    height: 38px;
    margin-left: -39px;
    float: left;
    -webkit-box-shadow: inset -3px 0 3px 0 rgba(0, 0, 0, .14);
    box-shadow: inset -3px 0 3px 0 rgba(0, 0, 0, .14)
}

.card.card-featured .ribbon.green {
    background: var(--info)
}

.card.card-featured .ribbon.blue {
    background: var(--success)
}

.card.hover-fill:hover {
    background: var(--light)
}

.card.hover-stroke:hover {
    border: 1px solid #e6e6e6
}

.card .card-body {
    padding: 15px
}

.card .card-body.p-0 .row {
    margin-left: 0;
    margin-right: 0
}

.card .card-body.no-bottom-padding {
    padding-bottom: 0
}

.card .card-body.no-top-padding {
    padding-top: 0
}

.card .card-body .title {
    margin-top: 0
}

.card .card-body.scrollable {
    margin-bottom: 15px
}

.card-progress {
    background: rgba(255, 255, 255, .8);
    bottom: 0;
    left: 0;
    position: absolute !important;
    right: 0;
    top: 0;
    display: none;
    z-index: 2
}

.card-progress > .progress,
.card-progress > .progress.progress-small {
    height: 3px
}

.card-progress > .progress-circle-indeterminate,
.card-progress > .card-bar-indeterminate {
    display: block;
    left: 50%;
    margin-left: -17px;
    margin-top: -17px;
    position: absolute;
    top: 50%
}

.card-progress > .progress-circle-indeterminate {
    width: 35px;
    height: 35px
}

.card-maximized {
    position: fixed !important;
    left: 280px;
    top: 59px;
    bottom: 0;
    right: 0;
    z-index: 600;
    margin: 0;
    width: auto
}

.card-header a:not(.btn):not(.action-link) {
    color: #626262 !important;
    opacity: .4;
    padding-top: var(--spacing_half);
    padding-bottom: var(--spacing_half)
}

.card-header a:not(.btn).card-refresh {
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.card-header a:not(.btn).card-refresh.refreshing {
    opacity: 1
}

.card-header .dropdown-menu .dropdown-item {
    padding: 0 var(--spacing) !important
}

.card-header .dropdown-menu .dropdown-item:hover {
    opacity: 1;
    background-color: transparent
}

.card-header a[data-toggle]:hover {
    opacity: 1
}

.card-full-transparent{
    padding: var(--spacing) 0 !important;
    background: var(--bg-secondary) !important;
    border: none !important;
}

.sortable .card-header {
    cursor: move
}

.ui-sortable-handle {
    transition: max-height .3s ease 0s;
}

.ui-sortable-handle:nth-child(even) {
    background-color: var(--light) !important;
}

.sortable .grid .grid-title {
    cursor: move
}

.ui-sortable {
    min-height: 0 !important;
    border-color: var(--shortcut-link-border-color);

    > li {
        color: var(--ohd-text-color) !important;
    }
}

.ui-sortable-placeholder {
    border: 1px dotted #000;
    visibility: visible !important;
    height: 100% !important
}

.ui-sortable-placeholder * {
    visibility: hidden
}

.sortable-box-placeholder {
    background-color: var(--light);
    border: 1px dashed #e6e6e6;
    display: block;
    margin-top: 0 !important;
    margin-bottom: 24px !important
}

.table.table .table-product-details {
    background-color: var(--ohd-bg) !important;
}

.sortable-box-placeholder * {
    visibility: hidden
}

.sortable .card {
    transition: none
}

.sortable-column {
    padding-bottom: 100px
}

.demo-card-scrollable {
    height: 158px
}

.card-body {
    padding: 0 !important;
}

#modal-preview-po_modal_body .form-group label {
    font-weight: 700;
}

#modal-preview-po_modal_body .form-control[readonly] {
    background-color: var(--bg-primary);
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
    color: var(--success)
}

.has-success .form-control {
    border-color: var(--success);
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-success .form-control:focus {
    border-color: #09786e;
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-success .input-group-addon {
    background: var(--light);
    border: 1px solid rgba(0, 0, 0, .07);
    color: rgba(98, 98, 98, .47)
}

.has-success .form-control-feedback {
    color: var(--success)
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
    color: #c9a843
}

.has-warning .form-control {
    border-color: #c9a843;
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-warning .form-control:focus {
    border-color: #a98b31;
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-warning .input-group-addon {
    background: var(--light);
    border: 1px solid rgba(0, 0, 0, .07);
    color: rgba(98, 98, 98, .47)
}

.has-warning .form-control-feedback {
    color: #c9a843
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: var(--danger)
}

fieldset.has-error .form-control,
.has-error .form-control {
    border-color: var(--danger);
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-error .form-control:focus {
    border-color: #f22823;
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-error .input-group-addon {
    background: var(--light);
    border: 1px solid rgba(0, 0, 0, .07);
    color: rgba(98, 98, 98, .47)
}

.has-error .form-control-feedback {
    color: var(--danger)
}

input.has-error {
    color: var(--danger)
}

p.has-error {
    color: var(--danger)
}

.error {
    font-size: 12px;
    color: var(--danger);
    display: block
}


.bootstrap-datetimepicker-widget.bottom:after,
.bootstrap-datetimepicker-widget.bottom:before {
    border-bottom-color: var(--btn-bg) !important;
}

.input-daterange .input-group-addon {
    text-shadow: none;
    border: 0;
    margin: 0
}

.bootstrap-timepicker-widget table td a i {
    font-size: 12px
}

.bootstrap-timepicker-widget a.btn,
.bootstrap-timepicker-widget .bootstrap-timepicker-widget input {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px
}

.bootstrap-timepicker-widget.dropdown-menu {
    background: var(--bg-primary);
}


.ui-select-bootstrap .ui-select-choices-row.active > span {
    background: var(--light);
    border-radius: 3px;
    color: #626262
}

.ui-select-bootstrap > .ui-select-choices {
    background-color: var(--bg-primary)
}

.ui-select-choices-group-label {
    color: var(--text-primary);
    font-weight: 700
}

.modal-open .select2-drop-active {
    z-index: 1051
}

.modal-open .datepicker.dropdown-menu {
    z-index: 1051 !important
}

.modal-open .select2-drop-mask {
    z-index: 1050
}

.modal-open .cs-skin-slide.cs-active {
    z-index: 1050
}

.dropdown-placeholder {
    display: inline-block;
    vertical-align: middle
}

.dropdown-mask {
    bottom: 0;
    display: none;
    left: 0;
    outline: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 600
}

.ui-select-bootstrap *:focus {
    outline: 0
}

.ui-select-bootstrap .ui-select-choices-row > span {
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 24px;
    font-size: 14px
}

.ui-select-bootstrap .ui-select-match {
    box-shadow: none
}

.ui-select-bootstrap .ui-select-choices-group-label {
    padding-left: 15px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 700;
    color: #626262
}

.ui-select-bootstrap .ui-select-match.default-btn-focus {
    background-color: transparent
}

.form-group-default-select {
    padding-bottom: 2px
}

.form-group-default-select .ui-select-bootstrap .ui-select-dropdown {
    width: calc(100% + 24px) !important;
    margin-left: -12px;
    padding: var(--spacing_half)
}

.form-group-default-select .ui-select-bootstrap .ui-select-match-text {
    width: calc(100% + 24px);
    margin-top: -17px;
    margin-left: -16px;
    padding: 16px 16px 0
}

.form-group-default-select .ui-select-bootstrap .ui-select-match {
    padding-top: 2px !important
}

.form-group-default-select .ui-select-bootstrap .ui-select-match i.caret {
    margin-top: var(--spacing_half)
}

.form-group-default-select .ui-select-bootstrap .ui-select-match.default-btn-focus {
    outline: 0
}

.form-group-default-select .ui-select-bootstrap .ui-select-match > .ui-select-toggle {
    width: calc(100% + 27px);
    height: 50px;
    margin-top: -34px;
    margin-left: -16px;
    padding: 32px 16px 16px
}

.form-group-default-select .ui-select-bootstrap .dropdown-menu .divider {
    display: none
}

.form-group-default-select .ui-select-bootstrap.ui-select-container {
    margin-top: -3px;
    padding-bottom: 2px
}

.form-group-default-select .ui-select-multiple {
    margin-top: -7px
}

.form-group-default-select .ui-select-multiple .select2-search-field input {
    height: 23px !important
}

.form-group-default-select .ui-select-multiple .select2-search-choice {
    margin-top: 2px;
    margin-bottom: 0
}

.form-group-default-select .ui-select-multiple .select2-search-choice:first-child {
    margin-left: 0
}

.form-group-default-select .select2-container-multi .select2-choices {
    background-color: transparent
}

.form-group-default .bootstrap-tagsinput {
    border: 0;
    margin-bottom: 0;
    padding-top: 0;
    vertical-align: top;
    padding-bottom: 0;
    padding-left: 0;
    margin-top: -3px
}

.form-group-default .bootstrap-tagsinput .tag {
    padding: 2px 9px;
    line-height: 18px;
    margin-bottom: 2px;
    margin-left: 0;
    margin-right: 2px
}

.form-group-default .bootstrap-tagsinput .tag[data-role=remove] {
    display: inline-block;
    vertical-align: top
}

.form-group-default .bootstrap-tagsinput input {
    min-height: var(--spacing)
}

.form-group-default .bootstrap-tagsinput input:first-child {
    margin-left: 0
}

.bootstrap-tagsinput {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 4px;
    padding: 0;
    padding-top: 5px;
    padding-right: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    -webkit-transition: background .2s linear 0s;
    transition: background .2s linear 0s
}

.bootstrap-tagsinput.active-element {
    background-color: #e6e6e6
}

.bootstrap-tagsinput input {
    border: 0;
    margin: 5px;
    margin-top: 0;
    margin-right: 0;
    min-height: 25px;
    min-width: 10em !important;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-flex-shrink: 0;
    -webkit-flex-grow: 1;
    -webkit-flex-basis: auto
}

.bootstrap-tagsinput .tag {
    padding: 3px 9px;
    padding-right: 6px;
    border-radius: 3px;
    line-height: 18px;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-flex-shrink: 0;
    -webkit-flex-grow: 1;
    -webkit-flex-basis: auto;
    margin: 5px;
    margin-top: 0;
    margin-right: 0
}

.bootstrap-tagsinput .tag[data-role=remove] {
    margin-left: 4px;
    float: right;
    vertical-align: middle
}

.bootstrap-tagsinput .tag[data-role=remove]:hover:active,
.bootstrap-tagsinput .tag[data-role=remove]:hover {
    box-shadow: none
}

.bootstrap-tagsinput .tag[data-role=remove]:after {
    font-family: pages-icon;
    content: "\e60a";
    padding: 0
}

input,
input:focus {
    -webkit-transition: none !important
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset !important
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--light) inset !important
}

input.error:-webkit-autofill,
input.error:-webkit-autofill:focus,
.has-error input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f9e9e9 inset !important
}

div.cs-select {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
    background: var(--bg-primary);
    width: 100%;
    max-width: 500px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

div.cs-select:focus {
    outline: 0
}

.cs-select select {
    display: none
}

.cs-select span {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cs-select > span {
    padding-right: 3em
}

.cs-select > span::after,
.cs-select .cs-selected span::after {
    speak: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.cs-select > span::after {
    content: '\25BE';
    right: 1em
}

.cs-select .cs-selected span::after {
    content: '\2713';
    margin-left: 1em
}

.cs-select.cs-active > span::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg)
}

.cs-select .cs-options {
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: var(--bg-primary);
    visibility: hidden
}

.cs-select.cs-active .cs-options {
    visibility: visible
}

.cs-select ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}

.cs-select ul span {
    padding: 1em
}

.cs-select ul li.cs-focus span {
    background-color: #ddd
}

.cs-select li.cs-optgroup ul {
    padding-left: 1em
}

.cs-select li.cs-optgroup > span {
    cursor: default
}

div.cs-skin-slide {
    color: var(--bg-primary);
    width: 300px
}

@media screen and (max-width: 30em) {
    div.cs-skin-slide {
        font-size: 1em;
        width: 250px
    }
}

div.cs-skin-slide::before {
    content: '';
    background: #282b30;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.cs-skin-slide.cs-active::before {
    -webkit-transform: scale3d(1.1, 3.5, 1);
    transform: scale3d(1.1, 3.5, 1)
}

.cs-skin-slide > span {
    height: 80px;
    line-height: 32px;
    -webkit-transition: text-indent .3s, opacity .3s;
    transition: text-indent .3s, opacity .3s
}

@media screen and (max-width: 30em) {
    .cs-skin-slide > span {
        height: 60px;
        line-height: 28px
    }
}

.cs-skin-slide.cs-active > span {
    text-indent: -290px;
    opacity: 0
}

.cs-skin-slide.cs-active > span::after {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.cs-skin-slide .cs-options {
    background: 0 0;
    width: 70%;
    height: 400%;
    padding: 1.9em 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate(-50%, -50%)
}

@media screen and (max-width: 30em) {
    .cs-skin-slide .cs-options {
        padding-top: 3em
    }
}

.cs-skin-slide .cs-options li {
    opacity: 0;
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0);
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s
}

.cs-skin-slide.cs-active .cs-options li {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

.cs-skin-slide.cs-active .cs-options li:first-child {
    -webkit-transition-delay: .05s;
    transition-delay: .05s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(2) {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(3) {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(4) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(5) {
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

.cs-skin-slide .cs-options li span {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 65%;
    padding: .8em 1em .8em 2.5em
}

.cs-skin-slide .cs-options li span:hover,
.cs-skin-slide .cs-options li.cs-focus span,
.cs-skin-slide .cs-options li.cs-selected span {
    color: #eb7e7f;
    background: 0 0
}

.cs-skin-slide .cs-selected span::after {
    content: ''
}

.form-group-default .cs-skin-slide > span {
    padding: 0 30px 0 0;
    height: 22px;
    line-height: 21px
}

.form-group-default .cs-wrapper {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.cs-wrapper {
    display: inline-block
}

.form-control.cs-select:not(.cs-active) {

}

.cs-select {
    background-color: transparent
}

.cs-select span {
    text-overflow: initial
}

.cs-select .cs-placeholder {
    width: 100%
}

div.cs-skin-slide {
    width: auto;
    font-family: Arial, sans-serif;
    color: #5e5e5e
}

div.cs-skin-slide:before {
    background-color: transparent
}

div.cs-skin-slide.cs-transparent {
    background: 0 0
}

div.cs-skin-slide.cs-transparent .cs-backdrop {
    border-color: transparent;
    background: 0 0
}

div.cs-skin-slide.cs-transparent.cs-active .cs-backdrop {
    background: #fafafa
}

div.cs-skin-slide > span {
    height: 35px;
    padding: 6px 33px 6px 17px;
    line-height: 23px;
    z-index: 1
}

div.cs-skin-slide.cs-active {
    z-index: 790
}

div.cs-skin-slide.cs-active:before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
}

div.cs-skin-slide.cs-active .cs-backdrop {
    border: transparent;
    background: #fafafa;
    box-shadow: -1px 0 1px #ccc, 1px 0 1px #ccc
}

div.cs-skin-slide > span:after,
div.cs-skin-slide.cs-active > span:after {
    content: "\f0d7";
    font-family: FontAwesome;
    color: #5e5e5e
}

div.cs-skin-slide .cs-options {
    height: auto;
    padding: 9px 0;
    width: auto;
    padding: var(--spacing_half);
    max-height: 350px;
    transform: translate3d(1, 1, 1);
    overflow: hidden;
    z-index: 1
}

div.cs-skin-slide .cs-options ul {
    width: 100%;
    display: table
}

div.cs-skin-slide .cs-options ul li {
    display: table-row
}

div.cs-skin-slide .cs-options ul li span {
    display: table-cell;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    padding: 5px 0;
    text-transform: none;
    max-height: 350px;
    overflow-y: auto
}

div.cs-skin-slide .cs-options ul li span:hover,
div.cs-skin-slide .cs-options ul li.cs-focus span,
div.cs-skin-slide .cs-options ul li.cs-selected span {
    color: var(--text-primary)
}

.cs-backdrop {
    background: none repeat scroll 0 0 var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, .07);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.cs-skin-slide.cs-active .cs-options li:nth-child(6) {
    transition-delay: .3s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(7) {
    transition-delay: .35s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(8) {
    transition-delay: .4s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(9) {
    transition-delay: .45s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(10) {
    transition-delay: .5s
}

.cs-skin-slide.cs-active .cs-options li:nth-child(11) {
    transition-delay: .55s
}

.cs-input-group-addon {
    background: var(--light);
    border: 1px solid rgba(0, 0, 0, .07);
    padding: 6px var(--spacing_half)
}

.twitter-typeahead {
    width: 100%
}

.tt-dropdown-menu,
.tt-menu {
    width: 100%;
    padding: 3px var(--spacing_half) 3px 3px;
    background-color: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, .07);
    border-top: 0;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
    box-shadow: 0 4px 5px rgba(0, 0, 0, .15)
}

.form-group-default.typehead {
    overflow: inherit
}

.form-group-default .tt-dropdown-menu,
.tt-menu {
    width: calc(100% + 24px);
    margin: 4px -12px
}

.dropzone {
    overflow: hidden
}

.dropzone .dz-default.dz-message {
    width: 100%
}

.dropzone[dropzone=dropzone] input[type=file] {
    visibility: hidden
}

.demo-form-wysiwyg {
    height: 250px
}

.error-form .form-group-default {
    padding: 0;
    justify-content: space-between
}

.error-form .form-group-default label {
    margin-top: 6px;
    padding-left: 12px
}

.error-form .form-group-default .form-control {
    margin-top: -2px;
    margin-bottom: 3px;
    padding-left: 12px
}

.error-container.bottom-container {
    margin-top: 0
}

.h-c-50 {
    height: calc(50px)
}

.card-toolbar .note-editor .btn-toolbar {
    display: block
}

.b-theme {
    border-color: var(--light);
}

.card-light {
    background-color: var(--header-bg);
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.list-view-wrapper {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    -webkit-overflow-scrolling: touch
}

.list-view-container {
    position: relative
}

.list-view-container .list-quickscroll ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    right: var(--spacing_half);
    z-index: 120;
    padding-top: var(--spacing_half);
    padding-bottom: var(--spacing_half)
}

.list-view-container .list-quickscroll ul li a {
    font-size: .7em;
    vertical-align: baseline
}

.list-view-group-container {
    margin: 0;
    min-height: 1px;
    overflow: hidden;
    padding: 26px 0 0;
    position: relative
}

.list-view-group-container:last-child ul {
    border: 0
}

.list-view-group-header,
.list-view-fake-header {
    background: #fafafa;
    color: #232830;
    font: normal 11px/14px 'var( --font-general)', Arial;
    text-transform: uppercase;
    margin: 0;
    padding: 6px 0 5px 15px;
    position: absolute;
    z-index: 10
}

.list-view-group-header {
    bottom: auto;
    min-height: 1px;
    top: 0;
    width: 100%;
    border-top: 0
}

.list-view-fake-header {
    width: 100%;
    z-index: 100;
    font-size: 11px !important;
    line-height: 14px !important
}

.list-view-fake-header.list-view-hidden {
    visibility: hidden
}

.list-view-group-container.list-view-animated .list-view-group-header {
    bottom: 0;
    top: auto
}

input.list-view-search {
    font-size: 15px;
    color: #232830
}

.no-top-border .list-view-fake-header {
    border-top: 0
}

.list-view ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07)
}

.list-view li {
    padding-left: 15px;
    white-space: nowrap;
    cursor: pointer;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.list-view li:hover {
    background-color: #daeffd
}

.list-view li.active {
    background-color: #fef6dd
}

.list-view li p {
    margin: 0;
    line-height: 19px
}

.list-view li > a {
    margin-right: 15px;
    width: 100%
}

.list-view li > * {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: row !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.list-view.boreded li > a {
    border-bottom: 1px solid rgba(0, 0, 0, .07)
}

.list-view.boreded li:last-child > a {
    border-bottom: 0
}

.list-view.boreded li + li {
    border-top: 0
}

[data-ios=true] .list-view-group-header,
[data-ios=true] .list-view-fake-header {
    width: 288px
}

.list-group-item {
    border: 1px solid var(--list-group-border);
    background-color: #fbfbfb;
    border-radius: var(--md-rounded) !important;

}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--light-text) !important;

    a{
        color: var(--light-text) !important;
    }
}

.list-group-item:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.list-group-item:hover,
.list-group-item:focus {
    color: var(--ohd-text-color);
    background: var(--heading-skinny-bg);
}

.list-group-item:last-child {
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px
}

.list-inline > li {
    display: inline-block;
    border: none;
}

.list-inline > li.column-conditions-options {
    background-color: transparent !important;
}

body.overflow-hidden {
    overflow: hidden
}

.login-wrapper {
    height: 100%;
    background-color: var(--primary);
}

.login-wrapper > * {
    height: 100%;
    padding-top: var(--fixed-header);
}

#bg-pic {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/login-banner.png');
}

.login-wrapper .bg-pic {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: grid;
    align-items: center;
    background-size: cover;
}

.login-wrapper .bg-pic > img {
    height: 100%;
    width: 100%;
}

h2.shadow.text {
    text-shadow: 0 0 48px #000;
    font-family: var(--font-general);
    font-weight: 500 !important;
    font-size: 26px;
}

.login-wrapper .login-container {
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
    float: right;
    overflow: auto;
}

.login-wrapper .login-container img {
    max-width: 100%;
    max-height: 90px;
}

.login-wrapper .bg-caption {
    width: 500px;
    margin-left: var(--spacing);
    padding: 0 var(--spacing_half);
    border-radius: 4px;
}

.register-container {
    width: 550px;
    margin: auto;
    height: 100%
}

@media (max-width: 768px) {
    .login-wrapper .login-container {
        width: 100%
    }

    .register-container {
        width: 100%;
        padding: 15px
    }
}

@media only screen and (max-width: 321px) {
    .login-wrapper .login-container {
        width: 100%
    }
}


@media only screen and (min-width: 1824px) {
    .ar-3-2:before {
        padding-top: calc(55% - 5px) !important
    }

    .ar-2-3:before {
        padding-top: calc(135% - 5px) !important
    }
}

@media (max-width: 991px) {
    .card {
        height: auto !important
    }
}

@media only screen and (max-width: 575px) {
    .modal-lg {
        max-width: 100% !important;
        margin: .7rem !important;
    }

    /* PPC dashboard modal footer buttons */
    .modal-footer button {
        width: 100%;
        margin: 0 0 5px;
    }

    .breadcrumb a {
        letter-spacing: 0px;
        font-size: 11px !important;
    }


    .total-banner.account-widget {
        display: flex !important;
    }

    .total-banner .title {
        width: auto !important;
    }
}


@media (max-width: 610px) {
    .widget-item,
    .widgets_container {
        width: 100% !important
    }

    .cog-title {
        font-size: 15px;
        line-height: 24px;
    }

    .cog-head .flag-icon {
        font-size: 18px;
        line-height: 26px;
    }

    .cog-head {

    }

    .cog-head .btn {
        border: none;
        padding: 3px 6px;
    }
}


/* media quer for product modal tabs */

@media only screen and (max-width: 575px) {
    .product-details-modal-body ul.global-product-tabs li a {
        font-size: 18px;
        line-height: 22px;
    }

    .product-details-modal-body ul.global-product-tabs li a strong {
        display: none;
    }

    /* supplier table */
    .table-striped.t-supplier .form-group label {
        padding-left: 6px;
    }

    .table-striped.t-supplier span.price-sign,
    .table-striped.t-supplier .form-group label {
        width: 50% !important;
    }

    .ohd {
        padding-bottom: 30px;
    }

    .ohd-close.mobile {
        top: auto;
        position: fixed;
        right: 0;
        bottom: var(--spacing_half);
        background: var(--danger);
        color: var(--bg-primary);
        border-color: var(--danger);
        left: 0;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }

    .ohd-breadcrumbs {
        padding: 0px !important;
    }

    .aggregate-cogs-btn {
        width: 100%;
    }

    .aggregate-cogs-btn .btn.dropdown-toggle {
        width: 100%;
        margin: 0 0 8px;
    }

    .ohd-left {
        border-right: none !important;
    }

    .filter-container form #accordion {
        padding: 0px !important;
    }

    .filter-container form #accordion .form-group-default {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.chat-user-list > a {
    height: 60px
}

.alert-list > a {
    height: 45px;
}

.custom {
    height: 150px
}

.icon-list .fa-item {
    display: block;
    color: #121212;
    line-height: 32px;
    height: 32px;
    padding-left: var(--spacing_half)
}

.icon-list .fa-item > i {
    width: 32px;
    font-size: 14px;
    display: inline-block;
    text-align: right;
    margin-right: var(--spacing_half)
}

.thumbnail-wrapper {
    display: inline-block;
    overflow: hidden;
    float: left
}

.thumbnail-wrapper.circular {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%
}

.thumbnail-wrapper.bordered {
    border-width: 4px;
    border-style: solid
}

.thumbnail-wrapper.bordered.d16 {
    width: var(--spacing);
    height: var(--spacing)
}

.thumbnail-wrapper.bordered.d16 > * {
    line-height: 12px
}

.thumbnail-wrapper.bordered.d24 {
    width: 28px;
    height: 28px
}

.thumbnail-wrapper.bordered.d24 > * {
    line-height: 24px
}

.thumbnail-wrapper.bordered.d32 {
    width: 36px;
    height: 36px
}

.thumbnail-wrapper.bordered.d32 > * {
    line-height: 28px
}

.thumbnail-wrapper.bordered.d48 {
    width: 52px;
    height: 52px
}

.thumbnail-wrapper.bordered.d48 > * {
    line-height: 44px
}

.thumbnail-wrapper.d16 {
    width: 16px;
    height: 16px
}

.thumbnail-wrapper.d16 > * {
    line-height: 16px
}

.thumbnail-wrapper.d24 {
    width: 24px;
    height: 24px
}

.thumbnail-wrapper.d24 > * {
    line-height: 24px
}

.thumbnail-wrapper.d32 {
    width: 32px;
    height: 32px
}

.thumbnail-wrapper.d32 > * {
    line-height: 32px
}

.thumbnail-wrapper.d39 {
    width: 39px;
    height: 39px
}

.thumbnail-wrapper.d39 > * {
    line-height: 39px
}

.thumbnail-wrapper.d48 {
    width: 48px;
    height: 48px
}

.thumbnail-wrapper.d48 > * {
    line-height: 50px
}

.thumbnail-wrapper > * {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center
}

.profile-dropdown {
    background: var(--bg-primary);
    padding: 0
}

.profile-dropdown:before {
    position: absolute;
    top: -7px;
    right: 15px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, .2);
    content: ''
}

.profile-dropdown:after {
    position: absolute;
    top: -6px;
    right: 16px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #272b35;
    border-left: 6px solid transparent;
    content: ''
}

.profile-dropdown > a {
    -webkit-transition: opacity ease .3s;
    transition: opacity ease .3s;
    padding-left: 17px;
    padding-right: 37px;
    min-width: 138px
}

.profile-dropdown > a > i {
    margin-right: 5px
}

.profile-dropdown > a:hover {
    opacity: 1
}

.profile-dropdown > a:last-child {
    margin-top: 4px;
    padding-bottom: 3px !important;
    padding-top: 3px;
    background: var(--light) !important;
}

.profile-dropdown-toggle {
    background: 0 0;
    border: 0
}

.scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}


.no-margin {
    margin: 0 !important
}

.no-overflow {
    overflow: hidden !important
}

.auto-overflow {
    overflow: auto !important
}

.reset-overflow {
    overflow: initial !important
}

.center-margin {
    margin-left: auto;
    margin-right: auto
}

.inherit-size {
    width: inherit;
    height: inherit
}

.inherit-height {
    height: inherit
}

.image-responsive-height {
    width: 100%
}

.image-responsive-width {
    height: 100%
}

.overlayer {
    position: absolute;
    display: block;
    z-index: 21
}

.overlayer.fullwidth {
    width: 100%
}

.overlayer-wrapper {
    position: relative;
    display: block;
    z-index: 10
}

.overlay-fixed {
    position: fixed !important;
    top: auto !important
}

.top-left {
    position: absolute !important;
    top: 0;
    left: 0
}

.top-right {
    position: absolute !important;
    top: 1px;
    right: 0
}

.bottom-left {
    position: absolute !important;
    bottom: 1px;
    left: 0
}

.bottom-right {
    position: absolute !important;
    bottom: 0;
    right: 0
}

.pull-bottom {
    position: absolute !important;
    bottom: 0
}

.pull-up {
    position: absolute !important;
    top: 0
}

.pull-left {
    float: left !important
}

.pull-right {
    float: right !important
}

.pull-center {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    display: table;
    z-index: 1
}

.cursor {
    cursor: pointer
}

.scroll-x-hidden {
    overflow-x: hidden !important
}

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

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

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

.p-b-0 {
    padding-bottom: 0 !important
}

.p-b-1 {
    padding-bottom: 1px !important
}

.padding-0 {
    padding: 0 !important
}

.no-padding{
    padding: 0 !important
}

.p-t-5 {
    padding-top: 5px !important
}

.p-r-5 {
    padding-right: 5px !important
}

.p-l-5 {
    padding-left: 5px !important
}

.p-b-5 {
    padding-bottom: 5px !important
}

.padding-5 {
    padding: 5px !important
}

.p-t-10 {
    padding-top: var(--spacing_half) !important
}

.p-r-10 {
    padding-right: var(--spacing_half) !important
}

.p-l-10 {
    padding-left: var(--spacing_half) !important
}

.p-b-10 {
    padding-bottom: var(--spacing_half) !important
}

.padding-10 {
    padding: var(--spacing_half) !important
}

.p-t-15 {
    padding-top: 15px !important
}

.p-r-15 {
    padding-right: 15px !important
}

.p-l-15 {
    padding-left: 15px !important
}

.p-b-15 {
    padding-bottom: 15px !important
}

.padding-15 {
    padding: 15px !important
}

.padding-sp {
    padding: var(--spacing) !important;
}

.padding-sp-half {
    padding: var(--spacing_half);
}

.padding-sp-t {
    padding-top: var(--spacing) !important;
}

.padding-sp-t-half {
    padding-top: var(--spacing_half) !important;
}

.padding-sp-h {
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}

.padding-sp-v {
    padding-top: var(--spacing) !important;
    padding-bottom: var(--spacing) !important;
}

.padding-sp-v-half {
    padding-top: var(--spacing_half);
    padding-bottom: var(--spacing_half);
}

.padding-sp-h-half {
    padding-left: var(--spacing_half);
    padding-right: var(--spacing_half);
}

.p-t-20 {
    padding-top: var(--spacing) !important
}

.p-r-20 {
    padding-right: var(--spacing) !important
}

.p-l-20 {
    padding-left: var(--spacing) !important
}

.p-b-20 {
    padding-bottom: var(--spacing) !important
}

.padding-20 {
    padding: var(--spacing) !important
}

.p-t-25 {
    padding-top: 25px !important
}

.p-r-25 {
    padding-right: 25px !important
}

.p-l-25 {
    padding-left: 25px !important
}

.p-b-25 {
    padding-bottom: 25px !important
}

.padding-25 {
    padding: 25px !important
}

.p-t-30 {
    padding-top: 30px !important
}

.p-r-30 {
    padding-right: 30px !important
}

.p-l-30 {
    padding-left: 30px !important
}

.p-b-30 {
    padding-bottom: 30px !important
}

.padding-30 {
    padding: 30px !important
}

.p-t-35 {
    padding-top: 35px !important
}

.p-r-35 {
    padding-right: 35px !important
}

.p-l-35 {
    padding-left: 35px !important
}

.p-b-35 {
    padding-bottom: 35px !important
}

.padding-35 {
    padding: 35px !important
}

.p-t-40 {
    padding-top: 40px !important
}

.p-r-40 {
    padding-right: 40px !important
}

.p-l-40 {
    padding-left: 40px !important
}

.p-b-40 {
    padding-bottom: 40px !important
}

.padding-40 {
    padding: 40px !important
}

.p-t-45 {
    padding-top: 45px !important
}

.p-r-45 {
    padding-right: 45px !important
}

.p-l-45 {
    padding-left: 45px !important
}

.p-b-45 {
    padding-bottom: 45px !important
}

.padding-45 {
    padding: 45px !important
}

.p-t-50 {
    padding-top: 50px !important
}

.p-r-50 {
    padding-right: 50px !important
}

.p-l-50 {
    padding-left: 50px !important
}

.p-b-50 {
    padding-bottom: 50px !important
}

.padding-50 {
    padding: 50px !important
}

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

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

.m-spacing {
    margin: var(--spacing)
}

.m-spacing-half {
    margin: var(--spacing_half)
}

.m-spacing-vertical {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing)
}

.m-spacing-horizontal {
    margin-left: var(--spacing);
    margin-right: var(--spacing)
}

.m-spacing-top {
    margin-top: var(--spacing) !important;
}

.m-spacing-bottom {
    margin-bottom: var(--spacing) !important;
}

.m-spacing-top-neg {
    margin-top: var(--spacing_neg);
}

.m-spacing-bottom-neg {
    margin-bottom: var(--spacing_neg);
}

.m-b-half-spacing {
    margin-bottom: var(--spacing_half)
}

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

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

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

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

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

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

.m-t-10 {
    margin-top: var(--spacing_half)
}

.m-r-10 {
    margin-right: var(--spacing_half)
}

.m-l-10 {
    margin-left: var(--spacing_half)
}

.m-b-10 {
    margin-bottom: var(--spacing_half)
}

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

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

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

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

.m-t-20 {
    margin-top: var(--spacing)
}

.m-r-20 {
    margin-right: var(--spacing)
}

.m-l-20 {
    margin-left: var(--spacing)
}

.m-b-20 {
    margin-bottom: var(--spacing)
}

.m-t-25 {
    margin-top: 25px
}

.m-r-25 {
    margin-right: 25px
}

.m-l-25 {
    margin-left: 25px
}

.m-b-25 {
    margin-bottom: 25px
}

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

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

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

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

.m-t-35 {
    margin-top: 35px
}

.m-r-35 {
    margin-right: 35px
}

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

.m-b-35 {
    margin-bottom: 35px
}

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

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

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

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

.m-t-45 {
    margin-top: 45px
}

.m-r-45 {
    margin-right: 45px
}

.m-l-45 {
    margin-left: 45px
}

.m-b-45 {
    margin-bottom: 45px
}

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

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

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

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

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

.m-rl-0 {
    margin-left: 0;
    margin-right: 0;
}

.m-l-auto {
    margin-left: auto;
}

.full-height {
    height: 100% !important
}

.full-width {
    width: 100%
}

.hide {
    display: none !important
}

.inline {
    display: inline-block !important
}

.block {
    display: block !important
}

.b-blank {
    border-color: #000
}

.b-a,
.b-r,
.b-l,
.b-t,
.b-b {
    border-style: solid;
    border-width: 0
}

.b-t-default {
    border-top: 1px solid var(--shortcut-link-border-color);
}

.b-r-default {
    border-right: 1px solid var(--shortcut-link-border-color);
}

.b-r {
    border-right-width: 1px
}

.b-l {
    border-left-width: 1px
}

.b-t {
    border-top-width: 1px
}

.b-b {
    border-bottom-width: 1px
}

.b-a {
    border-width: 1px
}

.b-dashed {
    border-style: dashed
}

.b-thick {
    border-width: 2px
}

.b-transparent {
    border-color: rgba(0, 0, 0, .4)
}

.b-transparent-white {
    border-color: rgba(255, 255, 255, .3)
}

.b-grey {
    border-color: #e6e6e6
}

.b-white {
    border-color: var(--bg-primary)
}

.b-primary {
    border-color: var(--primary)
}

.b-complete {
    border-color: var(--primary)
}

.b-success {
    border-color: var(--success)
}

.b-info {
    border-color: var(--info)
}

.b-danger {
    border-color: var(--danger)
}

.b-warning {
    border-color: var(--warning)
}

.b-rad-sm {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px
}

.b-rad-md {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px
}

.b-rad-lg {
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px
}

.no-border {
    border: 0 !important
}

.profile-img-wrapper {
    float: left;
    border-radius: 100px 100px 100px 100px;
    display: inline-block;
    height: 35px;
    overflow: hidden;
    width: 35px;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1
}

.profile-img-wrapper.big {
    height: 68px;
    width: 68px
}

.profile-img-wrapper.with-left-space-custom {
    margin-left: 7px
}

.relative {
    position: relative
}

.flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

[data-pages-bg-image] {
    background-size: cover
}

.icon-set-preview {
    transition: opacity .1s linear
}

#icon-list {
    transition: all .1s ease-in-out
}

.error-number {
    font-family: var(--font-general);
    font-size: 90px;
    line-height: 90px
}

.error-container-innner {
    margin-left: auto;
    margin-right: auto;
    width: 360px
}

.error-container {
    margin-top: -100px;
    width: 38%
}

.visible-xlg {
    display: none
}

.hidden-xlg {
    display: block
}

.sm-gutter .row > [class^=col-],
.sm-gutter .row > [class*=col-] {
    padding-left: var(--spacing_half);
    padding-right: var(--spacing_half);
}

.sm-gutter .row {
    padding-left: var(--spacing_half);
    padding-right: var(--spacing_half);
}

.ar-1-1 .card,
.ar-2-1 .card,
.ar-1-2 .card,
.ar-3-2 .card,
.ar-2-3 .card {
    margin: 0
}

.ar-1-1 {
    position: relative;
    width: 100%;
    overflow: hidden
}

.ar-1-1:before {
    content: "";
    display: block;
    padding-top: 100%
}

.ar-1-1 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.ar-2-1 {
    position: relative;
    width: 100%;
    overflow: hidden
}

.ar-2-1:before {
    content: "";
    display: block;
    padding-top: calc(50% - 5px)
}

.ar-2-1 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.ar-1-2 {
    position: relative;
    width: 100%;
    overflow: hidden
}

.ar-1-2:before {
    content: "";
    display: block;
    padding-top: calc(150% - 5px)
}

.ar-1-2 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.ar-3-2 {
    position: relative;
    width: 100%;
    overflow: hidden
}

.ar-3-2:before {
    content: "";
    display: block;
    padding-top: calc(75% - 5px)
}

.ar-3-2 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.ar-2-3 {
    position: relative;
    width: 100%;
    overflow: hidden
}

.ar-2-3:before {
    content: "";
    display: block;
    padding-top: calc(125% - 5px)
}

.ar-2-3 > div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.v-align-bottom {
    vertical-align: bottom !important
}

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

.v-align-middle {
    vertical-align: middle !important
}

.col-top {
    vertical-align: top !important
}

.col-middle {
    vertical-align: middle !important
}

.col-bottom {
    vertical-align: bottom !important
}

.container-xs-height {
    display: table;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

.row-xs-height {
    display: table-row
}

.col-xs-height {
    display: table-cell;
    float: none
}

@media (min-width: 768px) {
    .container-sm-height {
        display: table;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed
    }

    .row-sm-height {
    }

    .col-sm-height {
    }
}

@media (min-width: 992px) {
    .container-md-height {
        display: table;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed
    }

    .row-md-height {
        display: table-row
    }

    .col-md-height {
        display: table-cell !important;
        float: none !important
    }
}

@media (min-width: 1200px) {
    .container-lg-height {
        display: table;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed
    }

    .row-lg-height {
        display: table-row
    }

    .col-lg-height {
        display: table-cell !important;
        float: none !important
    }
}


.windows .d-flex {
    -ms-flex-wrap: wrap
}

.visible-xlg {
    display: none
}

.hidden-xlg {
    display: block
}

@media (min-width: 1824px) {
    .visible-xlg {
        display: block !important
    }

    .hidden-xlg {
        display: none !important
    }

    /* .container-fluid.container-fixed-lg {
	width:1700px;
	margin-right:auto;
	margin-left:auto
} */
    .col-xlg-1,
    .col-xlg-2,
    .col-xlg-3,
    .col-xlg-4,
    .col-xlg-5,
    .col-xlg-6,
    .col-xlg-7,
    .col-xlg-8,
    .col-xlg-9,
    .col-xlg-10,
    .col-xlg-11 {
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative
    }

    .col-xlg-12 {
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        flex: 0 0 100%;
        max-width: 100%
    }

    .col-xlg-11 {
        flex: 0 0 91.6667%;
        max-width: 91.6667%
    }

    .col-xlg-10 {
        flex: 0 0 83.3333%;
        max-width: 83.3333%
    }

    .col-xlg-9 {
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xlg-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%
    }

    .col-xlg-7 {
        flex: 0 0 58.3333%;
        max-width: 58.3333%
    }

    .col-xlg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xlg-5 {
        flex: 0 0 41.6667%;
        max-width: 41.6667%
    }

    .col-xlg-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%
    }

    .col-xlg-3 {
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xlg-2 {
        flex: 0 0 16.6667%;
        max-width: 16.6667%
    }

    .col-xlg-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }

    .col-xlg-pull-12 {
        right: 100%
    }

    .col-xlg-pull-11 {
        right: 91.6667%
    }

    .col-xlg-pull-10 {
        right: 83.3333%
    }

    .col-xlg-pull-9 {
        right: 75%
    }

    .col-xlg-pull-8 {
        right: 66.6667%
    }

    .col-xlg-pull-7 {
        right: 58.3333%
    }

    .col-xlg-pull-6 {
        right: 50%
    }

    .col-xlg-pull-5 {
        right: 41.6667%
    }

    .col-xlg-pull-4 {
        right: 33.3333%
    }

    .col-xlg-pull-3 {
        right: 25%
    }

    .col-xlg-pull-2 {
        right: 16.6667%
    }

    .col-xlg-pull-1 {
        right: 8.33333%
    }

    .col-xlg-pull-0 {
        right: 0
    }

    .col-xlg-push-12 {
        left: 100%
    }

    .col-xlg-push-11 {
        left: 91.6667%
    }

    .col-xlg-push-10 {
        left: 83.3333%
    }

    .col-xlg-push-9 {
        left: 75%
    }

    .col-xlg-push-8 {
        left: 66.6667%
    }

    .col-xlg-push-7 {
        left: 58.3333%
    }

    .col-xlg-push-6 {
        left: 50%
    }

    .col-xlg-push-5 {
        left: 41.6667%
    }

    .col-xlg-push-4 {
        left: 33.3333%
    }

    .col-xlg-push-3 {
        left: 25%
    }

    .col-xlg-push-2 {
        left: 16.6667%
    }

    .col-xlg-push-1 {
        left: 8.33333%
    }

    .col-xlg-push-0 {
        left: 0
    }

    .col-xlg-offset-12 {
        margin-left: 100%
    }

    .col-xlg-offset-11 {
        margin-left: 91.6667%
    }

    .col-xlg-offset-10 {
        margin-left: 83.3333%
    }

    .col-xlg-offset-9 {
        margin-left: 75%
    }

    .col-xlg-offset-8 {
        margin-left: 66.6667%
    }

    .col-xlg-offset-7 {
        margin-left: 58.3333%
    }

    .col-xlg-offset-6 {
        margin-left: 50%
    }

    .col-xlg-offset-5 {
        margin-left: 41.6667%
    }

    .col-xlg-offset-4 {
        margin-left: 33.3333%
    }

    .col-xlg-offset-3 {
        margin-left: 25%
    }

    .col-xlg-offset-2 {
        margin-left: 16.6667%
    }

    .col-xlg-offset-1 {
        margin-left: 8.33333%
    }

    .col-xlg-offset-0 {
        margin-left: 0
    }
}

@media only screen and (max-width: 1400px) {
    .footer-widget {
        padding: 11px 21px !important
    }
}

@media only screen and (max-width: 1199px) {
    .visible-xl-down {
        display: block !important
    }
}

@media (max-width: 991px) {
    .hidden-lg-down {
        display: none !important
    }

    .d-flex-lg-down {
        display: flex
    }

    .modal .modal-dialog {
        width: auto !important;
    }

    .justify-between-lg-down {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .pace .pace-activity {
        top: 60px
    }

    .page-container {
        position: relative;
    }

    .page-container .page-content-wrapper .content {
        height: auto;
    }

    .icon-thumbnail {
        margin-right: 24px
    }

    .inner-content {
        margin: 0
    }

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

    .sm-table {
        display: table;
        width: 100%
    }

    .user-profile-wrapper {
        position: absolute;
        right: 50px;
        top: -9px
    }

    .container {
        width: 100%
    }

    .nav-tabs-header.nav-tabs-linetriangle {
        height: 61px
    }

    .overlay {
        padding-left: 15px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /*.page-container .page-content-wrapper .content {*/
    /*padding-top: 60px*/
    /*}*/
    .error-page .error-container {
        width: auto
    }

    .inner-content {
        margin-left: 0
    }

    .secondary-sidebar {
        float: none;
        height: auto;
        left: 50%;
        margin-left: -155px;
        padding: var(--spacing);
        position: absolute;
        right: 0;
        top: 60px;
        z-index: 9999;
        display: none;
        border-radius: var(--spacing_half)
    }

    .secondary-sidebar .btn-compose {
        display: none
    }

    .split-details {
        margin-left: 0
    }

    .toggle-secondary-sidebar {
        display: block;
        font-size: 18px;
        left: 50%;
        margin-left: -36px;
        position: absolute
    }

    .toggle-secondary-sidebar ~ .brand {
        display: none !important
    }
}

@media (max-width: 991px) {
    .sm-b-r,
    .sm-b-l,
    .sm-b-t,
    .sm-b-b {
        border-width: 0
    }

    .sm-b-r {
        border-right-width: 1px
    }

    .sm-b-l {
        border-left-width: 1px
    }

    .sm-b-t {
        border-top-width: 1px
    }

    .sm-b-b {
        border-bottom-width: 1px
    }
}

@media (min-width: 1200px) {
    .row-same-height {
        overflow: hidden
    }

    .row-same-height > [class*=col-lg] {
        margin-bottom: -99999px;
        padding-bottom: 99999px
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .visible-md {
        display: block !important
    }
}

@media (min-width: 992px) {
    .row-same-height {
        overflow: hidden
    }

    .row-same-height > [class*=col-md] {
        margin-bottom: -99999px;
        padding-bottom: 99999px
    }
}

@media (min-width: 768px) {
    .row-same-height {
        overflow: hidden
    }

    .row-same-height > [class*=col-sm] {
        margin-bottom: -99999px;
        padding-bottom: 99999px
    }

    .d-flex-md-up {
        display: flex
    }

    .navbar-toggle {
        display: none
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important
    }

    .dataTables_wrapper.form-inline .checkbox input[type=checkbox],
    .form-inline .radio input[type=radio] {
        position: absolute
    }

    .justify-end-md-up {
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}

@media (min-width: 700px) {
    .dd {
        float: none
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .icon-thumbnail {
        margin-right: 21px
    }

    .error-page .error-container {
        width: auto
    }

    .p-modal .product-actions > a.btn {
        background-color: transparent;
        color: #333 !important;
        padding: 2px 5px;
        border: none !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .visible-sm {
        display: block
    }

    .hidden-sm {
        display: none
    }

    .visible-sm-inline-block {
        display: inline-block !important
    }

    .md-p-t-0 {
        padding-top: 0
    }

    .md-p-r-0 {
        padding-right: 0
    }

    .md-p-l-0 {
        padding-left: 0
    }

    .md-p-b-0 {
        padding-bottom: 0
    }

    .md-p-t-5 {
        padding-top: 5px
    }

    .md-p-r-5 {
        padding-right: 5px
    }

    .md-p-l-5 {
        padding-left: 5px
    }

    .md-p-b-5 {
        padding-bottom: 5px
    }

    .md-p-t-10 {
        padding-top: var(--spacing_half)
    }

    .md-p-r-10 {
        padding-right: var(--spacing_half)
    }

    .md-p-l-10 {
        padding-left: var(--spacing_half)
    }

    .md-p-b-10 {
        padding-bottom: var(--spacing_half)
    }

    .md-p-t-15 {
        padding-top: 15px
    }

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

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

    .md-p-b-15 {
        padding-bottom: 15px
    }

    .md-m-t-5 {
        margin-top: 5px
    }

    .md-m-r-5 {
        margin-right: 5px
    }

    .md-m-l-5 {
        margin-left: 5px
    }

    .md-m-b-5 {
        margin-bottom: 5px
    }

    .md-m-t-10 {
        margin-top: var(--spacing_half)
    }

    .md-m-r-10 {
        margin-right: var(--spacing_half)
    }

    .md-m-l-10 {
        margin-left: var(--spacing_half)
    }

    .md-m-b-10 {
        margin-bottom: var(--spacing_half)
    }

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

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

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

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

@media (max-width: 979px) {
    .toggle-secondary-sidebar {
        font-size: 18px;
        position: static;
        display: block
    }

    .toggle-secondary-sidebar ~ .brand {
        display: none !important
    }

    .secondary-sidebar {
        float: none;
        height: auto;
        left: 50%;
        margin-left: -125px;
        padding: var(--spacing);
        position: absolute;
        right: 0;
        top: 60px;
        z-index: 9999;
        display: none;
        border-radius: var(--spacing_half)
    }

    .secondary-sidebar .btn-compose {
        display: none
    }

    .split-view .split-list {
        width: 100%;
        height: auto;
        bottom: 50px;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 1000;
        float: none
    }

    .split-view .split-list .item {
        padding: 8px
    }

    .split-view .split-list .item .inline {
        width: 188px
    }

    .split-view .split-details {
        margin-left: 0;
        width: 100%
    }

    .split-view .split-details .email-content-wrapper {
        overflow: auto;
        padding: 0;
        height: calc(100% - 50px)
    }

    .split-view .split-details .email-content-wrapper .email-content {
        width: 90%
    }

    .compose-wrapper {
        display: block !important
    }

    .compose-wrapper .btn-compose {
        display: block !important
    }

    .btn-success.product-inventory-form,
    .btn-danger.setting-restore {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    #mp-search input.header-search {
        display: block;
    }

    .page-container .page-content-wrapper .content {
        padding-bottom: 100px;
    }

    .icon-thumbnail {
        margin-right: var(--spacing)
    }

    .secondary-sidebar {
        top: 48px
    }

    .split-details {
        margin-left: 0
    }

    .email-composer {
        padding-left: 30px;
        padding-right: 30px
    }

    .sm-pull-bottom,
    .sm-pull-up {
        position: relative !important
    }

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

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

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

    .sm-p-b-0 {
        padding-bottom: 0 !important
    }

    .sm-padding-0 {
        padding: 0 !important
    }

    .sm-p-t-5 {
        padding-top: 5px !important
    }

    .sm-p-r-5 {
        padding-right: 5px !important
    }

    .sm-p-l-5 {
        padding-left: 5px !important
    }

    .sm-p-b-5 {
        padding-bottom: 5px !important
    }

    .sm-padding-5 {
        padding: 5px !important
    }

    .sm-p-t-10 {
        padding-top: var(--spacing_half) !important
    }

    .sm-p-r-10 {
        padding-right: var(--spacing_half) !important
    }

    .sm-p-l-10 {
        padding-left: var(--spacing_half) !important
    }

    .sm-p-b-10 {
        padding-bottom: var(--spacing_half) !important
    }

    .sm-padding-10 {
        padding: var(--spacing_half) !important
    }

    .sm-p-t-15 {
        padding-top: 15px !important
    }

    .sm-p-r-15 {
        padding-right: 15px !important
    }

    .sm-p-l-15 {
        padding-left: 15px !important
    }

    .sm-p-b-15 {
        padding-bottom: 15px !important
    }

    .sm-padding-15 {
        padding: 15px !important
    }

    .sm-p-t-20 {
        padding-top: var(--spacing) !important
    }

    .sm-p-r-20 {
        padding-right: var(--spacing) !important
    }

    .sm-p-l-20 {
        padding-left: var(--spacing) !important
    }

    .sm-p-b-20 {
        padding-bottom: var(--spacing) !important
    }

    .sm-padding-20 {
        padding: var(--spacing) !important
    }

    .sm-p-t-25 {
        padding-top: 25px !important
    }

    .sm-p-r-25 {
        padding-right: 25px !important
    }

    .sm-p-l-25 {
        padding-left: 25px !important
    }

    .sm-p-b-25 {
        padding-bottom: 25px !important
    }

    .sm-padding-25 {
        padding: 25px !important
    }

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

    .sm-m-r-5 {
        margin-right: 5px !important
    }

    .sm-m-l-5 {
        margin-left: 5px !important
    }

    .sm-m-b-5 {
        margin-bottom: 5px !important
    }

    .sm-m-t-10 {
        margin-top: var(--spacing_half) !important
    }

    .sm-m-r-10 {
        margin-right: var(--spacing_half) !important
    }

    .sm-m-l-10 {
        margin-left: var(--spacing_half) !important
    }

    .sm-m-b-10 {
        margin-bottom: var(--spacing_half) !important
    }

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

    .sm-m-r-15 {
        margin-right: 15px !important
    }

    .sm-m-l-15 {
        margin-left: 15px !important
    }

    .sm-m-b-15 {
        margin-bottom: 15px !important
    }

    .sm-m-t-20 {
        margin-top: var(--spacing) !important
    }

    .sm-m-r-20 {
        margin-right: var(--spacing) !important
    }

    .sm-m-l-20 {
        margin-left: var(--spacing) !important
    }

    .sm-m-b-20 {
        margin-bottom: var(--spacing) !important
    }

    .sm-m-t-25 {
        margin-top: 25px !important
    }

    .sm-m-r-25 {
        margin-right: 25px !important
    }

    .sm-m-l-25 {
        margin-left: 25px !important
    }

    .sm-m-b-25 {
        margin-bottom: 25px !important
    }

    .sm-no-margin {
        margin: 0 !important
    }

    .sm-p-0 {
        padding: 0 !important
    }

    .sm-text-right {
        text-align: right !important
    }

    .sm-text-left {
        text-align: left !important
    }

    .sm-text-center {
        text-align: center !important
    }

    .sm-pull-right {
        float: right !important
    }

    .sm-pull-left {
        float: left !important
    }

    .sm-pull-reset {
        float: none !important
    }

    .sm-block {
        display: block
    }

    .error-container {
        width: auto
    }

    .sm-image-responsive-height {
        width: 100%;
        height: auto
    }

    .email-composer {
        padding-left: 30px;
        padding-right: 30px
    }

    .sm-padding-10 {
        padding: var(--spacing_half) !important
    }

    .lock-box {
        align-items: flex-start;
        height: auto
    }

    .login-box {
        padding-right: 15px;
        padding-left: 15px
    }

    .visible-xs-inline-block {
        display: inline-block !important
    }

    .nav-tabs-linetriangle.nav-cust {
        flex-direction: column
    }

    .nav-tabs-linetriangle li a.active:after,
    .nav-tabs-linetriangle li a.active:before {
        display: none
    }

    .sm-vh-25 {
        height: 25vh !important
    }

    .sm-vh-50 {
        height: 50vh !important
    }

    .sm-vh-75 {
        height: 75vh !important
    }

    .sm-vh-100 {
        height: 100vh !important
    }

    /* orders details modal */
    #global-modal-order-info .panel-heading h4 > a {
        font-size: 13px !important;
    }

    #global-modal-order-info .panel-heading small a {
        font-size: 11px !important;
    }

    .table.table-condensed.modal-table .product-table-detail {
        display: block;
    }

    .table.table-condensed.modal-table .product-name {
        max-width: 100%;
        margin: 0 0 12px;
    }
}

@media (max-width: 480px) {
    body {
        width: 100%
    }

    body #overlay-search {
        font-size: 48px;
        height: 118px;
        line-height: 46px
    }

    .card .card-heading {
        padding-left: 15px
    }

    .card .card-body {
        padding: 15px;
        padding-top: 0
    }

    .error-page {
        padding: 15px
    }

    .error-page .error-container {
        margin-top: 30px;
        width: auto
    }

    .error-page .pull-bottom {
        position: relative
    }

    .map-controls {
        left: var(--spacing_half)
    }

    .register-container {
        height: auto !important
    }

    .error-container-innner {
        width: auto
    }
}

.hidden {
    display: none !important
}

.visible-sm,
.visible-xs {
    display: none
}

@media (max-width: 767px) {
    .visible-xs {
        display: block
    }

    .hidden-xs {
        display: none
    }
}

.display-flex {
    display: flex;
}

/**** Style for Loader **/

@keyframes loading {
    from{
        width: 1%;
    }

    to{
        width: 101%;
    }
}

.loader {
    position: absolute;
    top: 0;
    left: -1%;
    z-index: 99999;
    width: 1%;
    height: 4px;
    background: var(--primary);

    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;

    /*transition: width 2000ms ease-out, opacity 500ms linear;*/

    &.loading{
        animation-duration: 2s;
        animation-name: loading;
        animation-iteration-count: infinite;
    }

    b, i {
        position: absolute;
        top: 0;
        height: 3px;

        box-shadow: var(--primary) 1px 0 6px 1px;

        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
    }

    b {
        clip: rect(-6px, 22px, 14px, 10px);
        opacity: .6;
        width: 20px;
        right: 0;
    }

    i {
        clip: rect(-6px, 90px, 14px, -6px);
        opacity: .6;
        width: 180px;
        right: -80px;
    }
}

.kpi-loader {
    text-align: center;
    padding: 15px 0;
    display: block;
}

.loader-gif {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 100%;
    display: inline-block;
}

.loader-gif-small {
    width: var(--spacing);
    height: var(--spacing);
}

.loader-gif-small > img {
    width: var(--spacing);
}

.inline-loader {
    width: 50px;
    height: 12px;
    background: radial-gradient(circle closest-side, var(--header-bg) 80%, #0000) 0 0/33% 100% space;
    clip-path: inset(0 100% 0 0);
    animation: d1 3s steps(4) infinite;
    display: inline-block;
}

@keyframes d1 {
    to {
        clip-path: inset(0 -34% 0 0)
    }
}

#form-login .checkbox label:before {
    border: 1px solid #d0d0d0;
}

#form-login .checkbox label:after {
    color: var(--site-primary-color) !important;
    background: transparent;
}


/*Global Styles Start*/

.operations-background {
    clear: both;
}

.operations-background .form-group.custom-form.form-group-default {
    /*border-bottom: 1px solid #e6e6e6;*/
    margin-bottom: 5px;
    padding: 7px 7px;
    border: none;
}

.modal.fade .modal-dialog {
    /*webkit-transform: translate(0,0%);*/
    transform: translate(0, 0%);
}

#modal-table-views .modal-dialog {
    width: 70%;
}


/* product details modal */

.modal.fade .modal-dialog .modal-footer {
    justify-content: space-between;
    border-top: 1px solid var(--shortcut-link-border-color);
}

.modal.fade .modal-dialog .modal-footer > :not(:first-child),
.modal.fade .modal-dialog .modal-footer > :not(:last-child) {
    margin-right: 0px;
    margin-left: 0px;
    display: flex;
    gap: var(--spacing_half)
}

.modal-lg {
    max-width: 90%;
}


/*Global Styles End*/


/*Products List Start*/

#bulk_update {
    position: relative;
    top: 0;
    margin-top: 0;
    margin-bottom: 0;
}


/*Products List End*/


/*Notifications timeline start*/

.color-black {
    color: #000;
}

.scroll-wrapper {
    position: relative !important;
}


/*Notifications timeline end*/


/*Products Dashboard Start*/

.page_header {
    position: relative;
    left: 25px;
    /*top: 62px;*/
    font-size: 25px !important;
}


/*Products Dashboard End*/


/*Panel Top Start*/

.bookmark_dropdown_link {
    float: left;
    margin-right: 15px;
}

.page_bookmark_btn {
    display: inline-flex;
    margin: 0px;
}

.page_bookmark_btn > a {
    border-radius: 4px;
    border: none;
    background: transparent;
    padding: 0px 6px;
    font-size: 16px;
    line-height: var(--spacing);
}

.page_bookmark_btn > a > i {
    width: 15px;
}


/*Panel Top End*/


/*Datatables Start*/

.dataTables_wrapper {
    width: 100%;
    position: relative;
}

.modal-backdrop {
    position: initial !important;
}


/*Datatables End*/


/*Comparision Engine Start*/

#comparison-form,
#ppc-comparison-form {
    margin-left: 0;
    margin-right: 0;
}


/*Comparision Engine End*/

.half {
    width: 50%;
}


/* end of old kpis*/


/*product dashboard title*/

.title-padding {
    padding-left: 7px !important;
    padding-right: 7px !important;
}


/*product dashboard title End*/


/*product dashboard top-links*/

.top-link-padding {
    padding-bottom: 0 !important;
}


/*product dashboard title End*/


/*Listing History Start*/

.listing-header {
    margin-left: 0;
    font-size: var(--spacing) !important;
    font-weight: 400;
}


/*Listing History End*/


/*Listing History End*/


/*Add Cost of Goods Start*/

.cog-head td:first-child > input {
    width: 20% !important;
    display: inline;
}

.cog-head td:nth-child(2) a:nth-child(2) {
    margin-right: var(--spacing_half);
}


/*Add Cost of Goods End*/


/*Refund Manager Start*/

#bulk_update_refund {
    position: relative;
    top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}


/*Settings End*/


/*PPC Dashboard Start*/

.applied_filters_ppc {
    position: relative;
    margin-bottom: 5px;
    width: 97%;
    /* float: left; */
    margin-left: 21px;
}


/*PPC Dashboard End*/


/*Settlement Periods KPI's Start*/



/*Settlement Periods KPI's End*/

.modal {
    .modal-body {
        padding: var(--spacing)
    }
}

#modal-lt-editor_modal_body {
    overflow: auto;
}

#modal-filters_modal_body {
    overflow: auto;
}

#modal-filters_modal_body .load_filter_table {
    min-width: 780px;
}


.warehouse_title_modal_head {
    font-weight: bold;
    font-family: var(--font-general);
    text-transform: capitalize;
    font-size: 1.2em;
}

.modal-footer button {
    min-width: 80px;
}

.drag-handler {
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

.widgets-list {
    min-height: 70px !important;
    border: none !important;
    border-radius: var(--md-rounded);
    padding: 0 !important;


}


.widgets-list p {
    text-align: center;
    font-size: 14px;
    margin: var(--spacing_half) 0;
    color: #999;
}

.table {
    margin-top: 0;
}

table.dataTable {
    margin-top: 0 !important;
}


div#cumulative_graph {
    background-color: var(--panel-bg);
}


ul.dropdown_bookmark_links .dropdown > a {
    margin-right: 12px;
    position: relative;
}

ul.dropdown_bookmark_links .dropdown > a:hover {
    color: #000;
}


.icon-in-list {
    position: absolute;
    right: 0;
}

.product_id + span span.selection span.select2-selection {
    background: var(--multi-select-bg) !important;
    height: 42px !important;
    padding: 6px var(--spacing_half) !important;
}

.product_id_container .product_id + span span.selection span.select2-selection {
    background: var(--btn-bg) !important;
    min-height: 38px !important;
    border-radius: 3px;
    height: auto !important;
    border: var(--input-border) !important;
    border-radius: var(--sm-rounded);
    padding: var(--input-padding);
}

.product_id_container > .product_id {
    background-color: var(--btn-bg) !important;
    border: 1px solid var(--shortcut-link-border-color) !important;
    min-width: 400px;
}

.product_id + .select2-container .select2-selection .select2-selection__rendered .select2-selection__clear {
    font-weight: 500;
    right: 0;
    width: 22px;
    text-align: center;
    color: var(--body-text-color);
    font-size: var(--spacing);
}

.product_id + .select2-container .select2-selection .select2-selection__arrow {
    bottom: 1px;
    right: 6px !important;
    left: auto;
    background: 0 0;
    border-left: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    top: 6px !important;
}


#days_breakdown .select2-selection--single .select2-selection__arrow b,
#suppliers_section .select2-selection--single .select2-selection__arrow b,
#warehouses_section .select2-selection--single .select2-selection__arrow b,
.new-panel .form-with-headings .select2-selection--single .select2-selection__arrow b,
.filter-container .form-with-headings .select2-selection--single .select2-selection__arrow b {
    display: none;
}


.history-item-dropdown {
    z-index: 9999 !important;
    background: var(--sidebar-bg);
    padding: 0;
}

.history-item-dropdown li.history-item.recent-product {
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--shortcut-link-border-color);
    padding: 12px 12px;
}

.history-item-dropdown li.history-item.recent-product:hover {
    background: var(--dropdown-hover);
}

.history-item-dropdown li.history-item.recent-product:last-child {
    border: none;
}

.new-panel {

    max-width: 768px;
    margin: 0 auto;
    background: var(--ohd-bg);
    padding: var(--spacing);
    border: 1px solid var(--panel-border-color);
    border-radius: 2px;
    margin-bottom: var(--spacing);
}

.new-panel-sep {
    width: 850px;
    margin: 0 auto;
    padding: 0 var(--spacing);
}

.new-panel.user-form {
    max-width: 100%;
}

.new-panel .form-horizontal .form-group {
    padding-top: 8px;
    padding-bottom: 6px;
    margin-bottom: 0;
    border: none;
}

/**** knowledge-dropdown ****/

.dropdown-menu.knowledge-dropdown {
    margin-top: 0;
    background: var(--bg-primary);
    padding: 0 0;
    width: 25%;
    min-width: 260px;
}

.knowledge-dropdown a.dropdown-item {
    padding: 6px 15px 6px 15px !important;
    border-bottom: 1px solid var(--light);
    border-radius: 0;
    font-weight: 500;
    font-family: var(--font-general);
    opacity: 0.8;
}

.knowledge-dropdown a.dropdown-item i {
    margin-right: 8px;
}

.knowledge-dropdown a.dropdown-item:hover {
    background: #f5f5f5;
    color: var(--site-primary-color);
    opacity: 1;
}

.knowledge-dropdown a.dropdown-item.link-items {
    box-sizing: border-box;
    display: -webkit-inline-flex;
    word-wrap: break-word;
    white-space: pre-line;
    vertical-align: middle;
    line-height: 22px;
}

.knowledge-dropdown a.dropdown-item.link-items i {
    line-height: 26px;
}

.kips_boxes_modal p {
    font-family: var(--font-general);
    font-size: 14px;
}




.p-a {
    padding: 0 15px !important;
}

.filters-container {
    position: fixed;
    top: 0;
    left: -100%;
    bottom: 0;
    z-index: 999;
    overflow-x: hidden;
    right: 0;
    width: calc(100% - 64px);
    transition: all .5s;
    background: var(--header-bg);
    height: 100vh;
}

.filters-container.show {
    left: var(--left-menu-width);
}

body.filters-container.show {
    overflow: hidden;
}

.table-stripped .btn-danger.remove-pm,
.table-stripped .primary-btn.default-pm {
    font-size: 13px;
    padding: 0.4rem .7rem;
}

.card.card-body.advance-filter {
    border: none;
    padding: 0;
    margin-bottom: 0px;
    border-bottom: 1px solid var(--light);
}

.filters-section .card-header {
    padding: 0 7.5px;
    min-height: auto;
}

.filters-section .card-header h5 {
    margin: 0;
    padding-bottom: 0;
}

.filter-container form {
    margin-top: 0px;
}

.filter-container form #accordion .form-group-default {
    border: none;

}

.filter-container .form-group.footer-btn {
    padding: var(--spacing_half) var(--spacing_half);
    background: var(--light);
    display: inherit;
    max-width: inherit;
    margin: 0px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

/*TODO: SIDRA*/

.fade:not(.show) {
    opacity: unset !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.color-white {
    color: var(--bg-primary);
}


/*.icheckbox_square-blue{*/


/*outline: 1px solid #a5a2a2;*/


/*outline-offset: -1px;*/


/*box-shadow: none;*/


/*}*/


.shortcut-links .btn-group.active button::after {
    color: #fefeff;
}

.nav.nav-tabs li a.active {
    border-color: var(--primary);
    color: #efefef;
    background-color: var(--primary);
}


.list-view.boreded.no-top-border.notifaction-list {
    width: 100%;
    background: #fafafa;
}

.list-view.boreded.no-top-border.notifaction-list h2 {
    width: calc(100% - 62px);
    background: #eae9e9;
    font-weight: 700;
    padding: 8px;
    display: none;
}

.notifaction-list ul .list-view-group-header.text-uppercase {
    background: #eae9e9;
    font-weight: 700;
    padding: 8px;
}

.notifaction-list .list-view-group-container {
    margin: 0;
    min-height: 1px;
    overflow: hidden;
    padding: 32px 0 5px;
    position: relative;
}

.notifaction-list li:hover {
    background-color: transparent !important;
}

.tab-pane .list-view.boreded.no-top-border.notifaction-list h2 {
    width: inherit;
    background: #eae9e9;
    font-weight: 700;
    padding: 8px;
}

.input-group .input-group-btn button {
    border-radius: 0 3px 3px 0 !important;
    margin-left: -1px;
}

.customer-basic-info td,
.customer-basic-info th {
    padding: 2px;
}

.customer-basic-info .header {
    font-family: var(--font-general);
    text-align: left;
    font-size: 12px;
    padding-bottom: 0;
    padding-top: 0;
    color: var(--site-secondary-color);
    font-weight: 400 !important;
    text-transform: uppercase;
}

.customer-basic-info td {
    padding-bottom: 11px;
}

.customer-basic-info .header > i {
    width: 17px;
}

.customer-basic-info .details {
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    font-size: 13px;
    padding-left: 26px;
    overflow: hidden;
}

table.basic_info.customer-basic-info {
    padding: var(--spacing_half);
    display: inline-block;
}

.sales-order-items .nav li a {
    background: transparent;
}

.sales-order-items .nav li a:hover {
    background-color: transparent;
}

.sales-order-items .nav li {
    width: 100%;
    text-align: center;
    background: #f5f4f4;
    margin-bottom: 2%;
}

.sales-order-items .nav li a {
    display: block;
}

.sales-order-items .nav li a.active {
    background: #dddddd;
}

.sales-order-items .nav-pills > li:first-child {
    padding-left: 0px;
}

.sales-order-items .nav li h5 {
    font-family: var(--font-general);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0;
    color: #252931;
}

.sales-order-items .nav li h6 {
    margin-top: 0;
    font-size: 15px;
    margin-bottom: 0;
}

#user_onboarding_progress table tr td strong,
.sl-panel-container table tr td strong {
    font-family: var(--font-general);
    font-size: 12px !important;
    padding-bottom: 0;
    padding-top: 0;
    font-weight: 600 !important;
}

#user_onboarding_progress table tr td strong.mp-title,
.sl-panel-container table tr td strong.mp-title {
    font-size: 14px !important;
    display: inline-block;
    text-transform: capitalize;
    vertical-align: top;
}

#user_onboarding_progress table tr td a.edit_account_title,
.sl-panel-container table tr td a.edit_account_title {
    vertical-align: top;
    display: inline-block;
    padding-top: 1px;
    padding-left: 4px;
    font-size: 13px;
}


.form-container-header {
    padding: var(--spacing_half) 0;
    color: var(--heading-color);
    text-align: left;
    flex: none;
    max-width: none;
    font-family: var(--font-general);
    font-weight: 600;
    text-transform: uppercase;
    clear: both;
    width: 100%;
    display: block;

    .control-label {
        font-family: var(--font-general);
        font-weight: 600;
        font-size: 12px;
    }

    .help-block {
        text-transform: none;
    }
}

.quickview-body {
    .settings-form-container {
        width: 100%;
        float: left;
        padding: 0;

        form {
            .form-group {
                width: 100%;
                float: left;
                clear: both;
            }
        }

        &:not(:last-of-type) {
            margin-bottom: var(--spacing);
        }

        .form-container-header {
            text-align: left;
            margin: 0;

            &.first-heading {
                margin-top: 0;
                border-top: none;
            }
        }
    }
}

.form-with-headings {
    .form-container-header {
        border-left-width: 1px;
        border-right-width: 1px;
        margin-bottom: 0;
        margin-top: 0;

        + .form-group {
            padding-top: var(--spacing_half);
        }
    }

    .form-group {
        /*padding: 0 var(--spacing_half) var(--spacing_half) var(--spacing_half);*/
        /*border-left: solid 1px var(--panel-border-color);*/
        /*border-right: solid 1px var(--shortcut-link-border-color);*/
        /*width: 100%;*/
        /*float: left;*/
        /*margin-bottom: 0;*/
    }

    input {
        + .form-group-separator {
            display: none;
        }
    }
}

.form-group-separator {
    width: 100%;
    float: left;
    border-bottom: 0;
    margin-bottom: var(--spacing);
}

.quickview-body .form-horizontal .form-group {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* end for right panel settings*/

h6.text-white.list-view {
    border-top: 1px dashed;
    margin-top: 5px;
    height: auto !important;
    margin-bottom: 5px;
    padding-top: 5px;
}

h6.list-view > span {
    border: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.modal-body > form {
    margin-top: 0;
}

.modal-body .form-horizontal .form-group {
    padding-top: 15px;
    padding-bottom: 15px;
    border-color: var(--shortcut-link-border-color) !important;
}

.modal-body form .form-group:first-child {
    padding-top: 0;
}

#advanced-settings-form .form-group:first-child {
    padding-bottom: 6px;
}


/*KPI breakdown modal fix*/


.entity .select2-selection {
    min-height: 33px !important;
}

.entity .select2-selection .select2-selection__rendered {
    min-height: 33px !important;
    line-height: 33px;
}


/* roi formula */

.custom-formula{
    padding: 0;

    .choice-wrapper{
        display: inline-block;
        margin: 0 0 var(--spacing_25) var(--spacing_25);

        &:not(:last-child){
            &:after{
                content: "-";
            }
        }

        label{
            margin-bottom: 0;
        }
    }

    .control-label:first-child {
        width: 100%;
        float: left;
        text-align: left;
        border-bottom: solid 1px var(--panel-border-color);
        margin-bottom: var(--spacing_half);
        font-weight: 700;
    }

    .help-block {
        width: 100%;
        float: left;
    }

    .component{
        border: solid 1px rgba(0,0,0,0.1);
        padding: 0.25rem;
        border-radius: 0.25rem;

        font-family: var(--font-general);
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-weight: 500;
    }
}

.formula-table{
    width: 100%;
    float: left;
}

#roi_calculated_formula,
#margin_calculated_formula,
#profit_calculated_formula {
    text-align: center;
}

.upper_portion{
    border: solid 1px var(--table-border);
    border-bottom: solid 2px;
}

.lower_portion{
    border: solid 1px var(--table-border);
    border-top: solid 2px;
}

.input-group span.input-group-addon {
    background: var(--multi-select-bg);
    border-radius: 4px 0 0 4px;
    color: var(--ohd-text-color);
    line-height: 32px;
    width: 34px;
    text-align: center;
}

.beta-heading {
    position: relative;
    padding-left: 30px;
}

.beta_page {
    border-radius: 100%;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    width: 25px;
    height: 32px;
    text-align: center;
    color: #eeba22;
    font-size: 25px;
}

.cogs-propagate-checkboxes {
    padding: 1% 0;
    border-bottom: 1px dashed var(--light);
}

.cogs-propagate-checkboxes:last-child {
    border: none;
}


/* instruction styling (view modal) */

ol.instructions {
    padding: 0px 40px;
    margin: var(--spacing_half) 0;
    border-left: 2px solid;
    border-color: var(--warning-dark);
    margin-bottom: var(--spacing);
}

ol.instructions li {
    padding: 0;
    padding-left: var(--spacing_half);
    font-size: 14px;
    color: var(--light-text);
}

ol.list-group.vertical-list li a {
    color: var(--table-cell-text);
    font-size: 14px;
}

ol.list-group.vertical-list li.active a {
    color: var(--bg-primary);
    font-weight: 400;
}


/* end of instruction styling */

.advance-settings-heading {
    margin-top: 15px;
    font-family: var(--font-general);
    margin-bottom: 15px;
}

div#tab_advanced_settings {
    background: var(--advanced-settings-bg);
    border: 1px solid var(--shortcut-link-border-color);
    border-radius: 2px;
}

form#advanced-settings-form {
    padding: 0;
    margin: 0;
}

.email-tbody {
    border-radius: 2px;
    border: solid 1px var(--shortcut-link-border-color);
}

.parent-tr {
    display: flex;
    margin-top: 0;
    border-radius: 0;
    border-bottom: solid 1px var(--shortcut-link-border-color);
}

.parent-tr:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.parent-tr > div {
    align-items: center;
    line-height: 32px;
    font-weight: 500;
    padding-top: var(--spacing_half);
    padding-bottom: var(--spacing_half);
    display: flex;
}

.parent-tr > div .alert-info {
    line-height: 18px;
    text-align: center;
    margin: 0px;
}

.parent-tr > div .icheckbox_square-blue {
    margin-right: 5px;
}

.form-group.collection {
    background: var(--panel-bg);
    border-bottom: none;
}

#confirm-order-modal .form-group.collection {
    width: 100%;
}


/* view modal select all button */


.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--site-secondary-bg) !important;
    border-color: var(--site-secondary-border);
    border-radius: var(--md-rounded) !important;
}

/* end of view modal select all button */

.comp-graphs{
    .comp-graph{
        border: solid 1px var(--table-border);
        padding: 0;
        margin-bottom: var(--spacing);

        h4{
            text-align: center;
            border-bottom: solid 1px var(--table-border);
            margin-bottom: 0;
            padding-bottom: var(--spacing_half);
        }
    }
}

.comp-graphs > p {
    font-family: var(--font-general);
    font-weight: 500;
    font-size: 16px;
    display: inline-block;
    width: 100%;
    background: var(--btn-bg);
    padding: 15px !important;
    margin-bottom: 0;
    border: 1px solid var(--panel-border-color);
    border-bottom: 0;
    color: var(--btn-color);
}


/* selected value when ever a cell is selected */

.select-info {
    display: none;
}

.selected-values > ul > li {
    margin: 0 0 0 0;
    border-radius: 0;
    padding: 1px 8px 1px 3px;
    border-bottom: 1px solid var(--shortcut-link-border-color) !important;
    cursor: pointer;
    color: var(--body-text-color);
}

.selected-values > ul > li:hover {
    color: var(--ohd-text-color);
    text-decoration: none;
    background-color: var(--dropdown-hover) !important;
}

.selected-values {
    text-align: right;
    padding-top: 5px;
    font-family: var(--font-general);
    font-weight: 500;
    right: 0;
    float: right;
    margin: -4px 0 0 8px;
    cursor: pointer;
}

.notifications-container .cog-head h4.flag-icon {
    margin: 0px;
}

.notifications-container .cog-head .cog-title {
    top: 0px;
}

.notifications-container .cog-head .cog-title > button {
    vertical-align: top;
}

.dataTables_info {
    padding-right: 0 !important;
}

.selected-values > ul > li:not(:last-child) {
    border-bottom: 1px dotted #9c9c9c;
}

.selected-values li span.bold {
    font-weight: 400 !important;
}

.selected-values .fa-check {
    margin-right: 4px;
}


/* end of selected values */


/* onboarding modal*/

.total-banner {
    margin: 0 0 var(--spacing);
    padding: var(--spacing);
    border: 1px solid var(--table-border);
}

.total-banner.account-widget {
    display: flex;
    justify-content: space-between;
}

.total-banner .title {
    width: 40%;
}

.total-banner .description {
    text-align: right;
}

.media-list table.table {
}

.media-list.panel-main-table table td,
.media-list.panel-main-table {
    /*background: #fafafa;*/
}

.media-list.panel-main-table table td:first-child {
    width: 60%;
}

.media-list.panel-main-table table tr.danger td {
    color: var(--danger);
}

.media-list .account-title {
    border-top: solid 1px var(--table-border);
    border-bottom: solid 1px var(--table-border);

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ohd-text-color) !important;
    padding: var(--spacing_half) var(--spacing);
}

.media-list .merchant-container {
    margin: 0 0 var(--spacing);
    border: 1px solid var(--table-border);
    border-top: none;
}

.media-list .merchant-container:last-child {
    margin-bottom: 0;
}

.admin-grid .media-list .merchant-container {
    /*border: none;*/
    display: flex;
    flex-direction: column;
}

.merchant-container .account-details {
    display: none;
}

.media-list .merchant-container .skinny-cell h3 {
    margin: 0px;
}

.new-panel .panel:not(.panel-tile) {
    border: none;
}

.media-list .skinny-cell {
    width: auto;
}

.media-list .absolute-count {
    position: inherit;
    float: right;
    right: 0;
    display: flex;
}

.media-list .absolute-count > div {
    margin: 0 calc(var(--spacing) / 2);
    text-align: center;
}

.media-list .account-title h4 {
    margin: 0px;
    color: var(--bg-primary);
}

.media-list .panel-main-table h3 {
    font-size: 26px;
    line-height: 28px;
}

#user_onboarding_progress .media-list table td,
.sl-panel-container .media-list table td {
    padding: var(--spacing_half) var(--spacing) !important;
}

.absolute-count td {
    padding: 0 !important;
}

#user_onboarding_progress .media-list table td.absolute-td,
.sl-panel-container .media-list table td.absolute-td {
    padding-right: 0px !important;
}

#user_onboarding_progress .media-list table td.absolute-td:last-child,
.sl-panel-container .media-list table td.absolute-td:last-child {
    padding-left: 18px !important;
}

.total-banner > tbody > tr > td {
    border-top: none;
    padding: 1.5% 1%;
}

.count-small-container {
    position: relative;
}

.absolute-count {
    position: absolute;
    right: 7px;
    top: 0;
}

.absolute-count table tr td,
.absolute-count .absolute-td {
    line-height: 8px;
    text-align: center !important;
    padding: 9px 6px !important;
    background: transparent;
    border: none;
}




.modal-body #user_onboarding_progress .table,
#user_onboarding_progress .media-list .merchant-container {
    border: none;
}


/* end of onboarding modal */


/* textarea for inline edit */

table.dataTable td.text-area textarea {
    min-width: 150px !important;
}


/* end of textarea for inline edit */


/* datatable dont break text*/

.dont-break {
    white-space: nowrap;
}


/* end of datatable dont break text*/


/* inventory form */

#product_inventory_form .control-label {
    color: var(--bg-primary);
    font-weight: normal;
}

#product_inventory_form .form-group.form-options {
    border: none;
}

#product_inventory_form .inventory_options {
    width: calc(50% - var(--spacing));
    margin-left: var(--spacing_half);
}

#product_inventory_form .help-block {
    color: #c4c4c4;
    font-style: italic;
    font-size: 12px;
}


/* end of inventory settings */


/* sales rank */

.j_table_cell ul:not(.dropdown-menu),
.dataTable td ul:not(.dropdown-menu) {
    float: left;
    list-style-type: none;
    width: 100%;
    padding-left: 0;
    text-align: left;
    margin-bottom: 0;
}

.j_table_cell ul:not(.dropdown-menu) li,
.dataTable td ul:not(.dropdown-menu) li {
    float: left;
    width: 100%;
    padding-left: 0;
}

.j_table_cell ul:not(.dropdown-menu) li:not(:last-child),
.dataTable td ul:not(.dropdown-menu) li:not(:last-child) {
    border-bottom: dashed 1px #EEEEEE;
}

.sales_rank span {
    display: inline;
    margin-right: 5px;
}

.sales_rank .sr-value {
    font-weight: bold;
}

.sales_rank span.cat_id:not(:last-child):after {
    content: "\2192";
}


/*end of sales rank*/


/* pl report settings */

.ads-payment-options-help {
    font-size: 12px;
    text-transform: none;
    padding: 7.5px;
    border: solid 1px var(--shortcut-link-border-color);
    margin-top: 5px;
}

.ads-payment-options-help i {
    color: var(--primary);
}

#ads_payment_footer,
#taxes_option_footer {
    padding: 2%;
}

#options_separator {
    min-height: 0;
    padding: 0;
}

.no-bold {
    font-weight: normal;
    float: left;
    width: 90%;
    margin-left: 2%;
}


/* end of pl report settings */


/* for kpi control*/
.kpi-list-container {
    padding: var(--spacing_half) var(--spacing_half);
    margin: 0 0 var(--spacing_half);

    .disabled {
        color: grey;
    }
}

/* end of kpi controls */


/* crop image */

#modal-fancy-image input[type=file],
#modal-pdf-settings input[type=file] {
    display: none;
}

.product-picture-preview {
    border-right: #999 solid 1px;
}

.d-flex > .product-picture-preview {
    border-right: none
}

.d-flex.change-image-buttons .btn {
    width: 1 var(--spacing);
}

.save-image-button {
    margin: var(--spacing_half) var(--spacing_half) var(--spacing_half) var(--spacing_half);
    float: right;
}

.save-image-button {
    clear: both;
}


/* end of crop image */


/* consents page */

.admin-consent-title {
    background: #cfcfcf;
    color: var(--bg-primary);
    padding: 1%;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: 1px;
    overflow: hidden;
    margin-bottom: 1%;
}

.admin-consents-content {
    padding: 1%;
}

.guest-consent-container {
    margin-top: 1%;
}

.guest-consent-container > .help-block {
    display: inline;
    color: black;
}


.label-text {
    text-align: left !important;
}

.keyword-report-form-style {
    margin-right: 15px !important;
}


/*for selectize*/

.selectize-control {
    padding: 0 !important;
    border: none !important;
}

.selectize-control.selectsize-base-container .selectize-dropdown > div {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.selectize-control.selectsize-base-container .selectize-dropdown .by {
    font-size: 11px;
    opacity: 0.8;
}

.selectize-control.selectsize-base-container .selectize-dropdown .by::before {
    content: 'by ';
}

.selectize-control.selectsize-base-container .selectize-dropdown .name {
    font-weight: bold;
    margin-right: 5px;
}

.selectize-control.selectsize-base-container .selectize-dropdown .title {
    display: block;
}

.selectize-control.selectsize-base-container .selectize-dropdown .description {
    font-size: 12px;
    display: block;
    color: #a0a0a0;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.selectize-control.selectsize-base-container .selectize-dropdown .meta {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--spacing_half);
}

.selectize-control.selectsize-base-container .selectize-dropdown .meta li {
    margin: 0;
    padding: 0;
    display: inline;
    margin-right: var(--spacing_half);
}

.selectize-control.selectsize-base-container .selectize-dropdown .meta li span {
    font-weight: bold;
}

.selectize-control.selectsize-base-container::before {
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    content: ' ';
    z-index: 2;
    position: absolute;
    display: block;
    top: 12px;
    right: 34px;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    opacity: 0;
}

.selectize-control.selectsize-base-container.loading::before {
    opacity: 0.4;
}


/*end of for selectize*/


/* end of ppc keyword report */


/* spectrum color picker reset */

.sp-reset-button > button {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.sp-container {
    z-index: 10000;
}


/* end spectrum color picker reset */


/* recent products */

.recent-product img {
    width: auto;
}

.for-product-select {
    float: left;
    margin-right: 5px;
    width: 50px;

    img{
        max-width: 100%;
    }
}


/* end of recent products*/


/* settlement and pl page */

#table_settlement_period_wrapper .panel {
    box-shadow: none;
    margin-bottom: 0;
}


/* end of settlement and pl page */


/* custom date range*/

.date_range_category {
    margin-top: var(--spacing);
}

.date_range_category > .category-title {
    width: 100%;
    float: left;
    margin-bottom: var(--spacing_half);
    font-size: 15px;
    font-family: var(--font-general);
    padding-bottom: 2.5px;
}

.date_range_defined > .iradio_square-blue {
    width: 24px;
}


.date_range_defined {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 2rem auto;
    align-items: center;
}


/* end of custom date range */


/* breakdown modal*/

.modal-help-icon {
    color: #929395 !important;
    padding: 5px 7px;
}

.modal-help-icon:hover {
    color: #727375 !important;
}

.modal-help-icon i {
    font-size: 18px;
}


/* end of break down modal*/

td.exception_message,
td.error_message {
    background: var(--bg-primary) !important;
}

#modal-onboarding .tab-content {
    border: solid 1px #dedede;
    border-top: none;
    padding-top: 0px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.sl-success {
    color: #56c046;
}

.sl-danger {
    color: var(--danger);
}


button#total-values {
    background: var(--site-secondary-bg);
    border: 1px solid var(--site-secondary-border);
    padding: 6px var(--spacing_half);
    border-radius: 3px 3px 0 0;
    font-family: var(--font-general);
    font-weight: 600;
    font-size: 12px;
}

button#total-values:hover {
    background: var(--site-secondary-bg);
    border: 1px solid var(--site-secondary-border);
}

button#total-values:focus {
    box-shadow: none;
}

button#total-values + ul {
    background: var(--header-bg);
    font-family: var(--font-general);
    padding: 0;
}

button#total-values + ul li {
    margin: 0;
    border-bottom: 1px solid #f6f6f6;
    border-radius: 0;
    padding: 3px 13px;
    font-size: 12px;
}

button#total-values + ul li:hover {
    background-color: #f5f5f5;
}

.marketplace-form .form-options.form-group {
    text-align: right;
    margin-top: 5px;
    padding-bottom: 0;
}

.marketplace-form .form-group {
    border: none;
    padding-top: 0;
    padding-bottom: var(--spacing_half);
}


.timeline-single-item .panel-heading .panel-title {
    font-family: var(--font-general);
    font-size: 12px;
}


.vat-main tr.cog-head {
    border: none;
}

.vat-main tr.cog-head > td {
    padding: 0;
    border: none;
}

.vat-main span.cog-title {
    font-family: var(--font-general);
    font-size: 16px;
}

.vat-main table tbody > tr.text-center > td {
    background: var(--table-head-bg);
    border: 1px solid var(--shortcut-link-border-color);
}

.vat-main table tbody > tr.text-center strong {
    font-family: var(--font-general);
    font-size: 12px;
    font-weight: 600;
}

p.help-block {
    font-size: 11px;
    font-style: italic;
}


.row.box-date-tiles-filter {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.row.box-date-tiles-filter > div {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

ul#sub-stages-list li {
    padding: 0;
    border: none;
    margin-bottom: var(--spacing_half);
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: var(--spacing_half);
}

ul#sub-stages-list li p {
    font-family: var(--font-general);
    font-weight: 700;
    margin-bottom: 0;
}

ul#sub-stages-list li:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.new-panel.training-page table th {
    border: none;
    background: var(--table-head-bg);
    border-bottom: 1px solid #ededed;
    font-family: var(--font-general);
    text-transform: uppercase;
}

.new-panel.training-page {
    padding: 0;
}

.new-panel.training-page .flex a:first-child {
    margin-right: 5px;
}

.new-panel.training-page td {
    font-family: var(--font-general);
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
}


/****************RESELLER_CSS******************/


/***************COLOR SCHEMA********************/

.item-des h5 {
    color: #333;
}

.item-des {
    border-bottom: 1px solid #eee;
}

.financial-item {
    border: 1px solid #dfdada;
    box-shadow: inset 0 0 32px #eee;
}

.list-group-main .row:nth-child(1) .col-md-3:nth-child(1) .financial-item h5 {
    color: #F24607;
}

.list-group-main .row:nth-child(1) .col-md-3:nth-child(2) .financial-item h5 {
    color: #5CB85C;
}

.list-group-main .row:nth-child(1) .col-md-3:nth-child(3) .financial-item h5 {
    color: #47749D;
}

.list-group-main .row:nth-child(1) .col-md-3:nth-child(4) .financial-item h5 {
    color: #193048;
}

.list-group-main .row:nth-child(2) .col-md-3:nth-child(1) .financial-item h5 {
    color: #193048;
}

.list-group-main .row:nth-child(2) .col-md-3:nth-child(2) .financial-item h5 {
    color: #f552b4;
}

.list-group-main .row:nth-child(2) .col-md-3:nth-child(3) .financial-item h5 {
    color: #F29F05;
}

.list-group-main .row:nth-child(2) .col-md-3:nth-child(4) .financial-item h5 {
    color: #a40967;
}

.list-group-main .row:nth-child(3) .col-md-3:nth-child(1) .financial-item h5 {
    color: #47749D;
}

.list-group-main .row:nth-child(3) .col-md-3:nth-child(2) .financial-item h5 {
    color: #193048;
}

.list-group-main .row:nth-child(3) .col-md-3:nth-child(3) .financial-item h5 {
    color: #F24607;
}

.list-group-main .row:nth-child(3) .col-md-3:nth-child(4) .financial-item h5 {
    color: #5CB85C;
}

.financial-item span {
    color: #333;
}

.features-list li i {
    color: #777;
}


/*************/

.text-muted {
    color: #b3b3b3;
}


/* Style box */

.checkbox-group label .box {
    border: 2px solid #ddd;
}


/* Check icon: create border on the bottom and right only and then rotate */

.checkbox-group label .check {
    border: 2px solid var(--bg-primary);
}


/* Change color of box when checkbox is checked */

input[type=checkbox]:checked ~ label .box {
    background: #9c27b0;
    border: 2px solid #9c27b0;
}


/***************forms inputs********************/

.md-btn {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px var(--spacing_half) 0 rgba(0, 0, 0, 0.12);
}

form .input-block {
    border-bottom: 1px solid #ddd;
}

form .input-block > div {
    border-left: 1px solid #ddd;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: #37474f;
}

.dtp div.dtp-date,
.dtp div.dtp-time {
    background: #546e7a;
}

.dtp .p10 > a {
    color: #37474f;
}

.dtp div.dtp-actual-year {
    color: #90a4ae;
}

.dtp table.dtp-picker-days tr > td > a.selected {
    background: #546e7a;
}

form .input-block .SumoSelect > .CaptionCont {
    border-color: #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

form .input-block .SumoSelect > .CaptionCont > span.placeholder {
    color: #dedede;
}


/***************login page********************/


/*.overlay { background: rgba(255, 255, 255, 0.95);}*/



/***************sidebar********************/

.sidebar {
    background-color: #F5F6F9;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.5);
    /*0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 7px 0 rgba(0, 0, 0, 0.42);*/
}

.sidebar:after {
    background: #ddd;
}

a.list-group-item,
button.list-group-item {
    color: inherit;
}


/***************content********************/

.page-header {
    border-bottom: 1px solid #DFE8F1;;
}

.dashboard-statis h4 {
    color: #666;
}

.profile-card .info {
    border-right: 1px solid #ddd;
}

.underline-heading {
    border-bottom: 1px solid #ddd;
}

a.badge {
    border: 1px solid #ddd;
    color: #333;
}

a.badge:hover {
    background: #ddd;
    color: #333;
}

.profile-list .media {
    background: var(--bg-primary);
}

.profile-list .media .media-body .rating li i {
    color: #fbc02d;
}

.profile-list .media .media-body .mute {
    color: #999;
}

.list-group-item > i {
    width: 1.25rem;
}

.sub-menu ul li a i {
    color: #6269A0;
}

.sub-menu ul.list-group {
    background: rgba(214, 222, 218, 0.68);
}

.red-circle {
    background: #f75950;
    color: var(--bg-primary);
    border: 2px solid #242847;
}

.form-control::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(255, 255, 255, 0.6);
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.6);
}

.form-control::-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255, 255, 255, 0.6);
}

.form-control::-moz-placeholder {
    /* Firefox 18- */
    color: rgba(255, 255, 255, 0.6);
}


/********** Profile DropDown *************/

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: var(--bg-primary);
    background-color: #436AA3;
}

.profile-dropdown li.list-group-item {
    border-color: #eee;

}

.profile-dropdown li.list-group-item a {
    color: #666DA3;
}


strong.name {
    color: #636060;
}

.text-left.small.email {
    color: #5489CF;
}

.profile-dropdown .dropdown-footer {
    background-color: #fafafa;
}


.language span {
    width: 15px;
    height: 16px;
    display: inline-block;
    margin-right: 4px;
    background-position: 0 1px;
}


li.media {
    border-bottom: 1px solid #eee;
}

li.account-info {
    border-bottom: 1px solid #eee;
}

.profile-pic h5 {

    color: #797272;
}

.profile-body h5 {
    color: #797272;
}


.language li {
    border-bottom: 1px solid var(--panel-border-color);
    padding: 0;
}

.language li a {
    display: inline-block;
    width: 100%;
    padding: var(--spacing_half);
    color: var(--ohd-text-color);
    font-size: 14px;
}

.language li:hover {
    background: var(--quick-view-bg);
}

ul.language {
    list-style: none;
    padding-left: 0;
}

ul.language li.active {
    background: var(--quick-view-bg);
}

.currencies span {
    width: 15px;
    height: 16px;
    display: inline-block;
    margin-right: 4px;
    background-position: 0 1px;
}

.currencies li {
    border-bottom: 1px solid var(--panel-border-color);
    padding: 0;
}

.currencies li a {
    display: inline-block;
    width: 100%;
    padding: var(--spacing_half);
    color: #555;
    font-size: 14px;
}

.currencies li:hover {
    background: #f5f5f5;
}

ul.currencies {
    list-style: none;
    padding-left: 0;
}

ul.currencies li.active {
    background: var(--light);
}

.table-extra-buttons {
    display: flex;
    gap: var(--spacing_half);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/*****************panel******************/

@media (max-width: 768px) {
    .table-extra-btns {
        display: flex;
        flex-wrap: wrap;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:focus,
    .navbar-default .navbar-nav > .open > a:hover {
        color: var(--bg-primary);
        background-color: #5489CF;
    }

    .profile-dropdown li.list-group-item {
        border-color: #eee !important;

    }

    .profile-dropdown li.list-group-item a {
        color: #666DA3 !important;
    }

    .nav-tabs-justified > li > a {
        border-bottom: 1px solid #ddd;
    }

    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:hover,
    .nav-tabs-justified > .active > a:focus {
        border-bottom-color: var(--bg-primary);
    }

    .nav-tabs.nav-justified > li > a {
        border-bottom: 1px solid #ddd;
    }

    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:hover,
    .nav-tabs.nav-justified > .active > a:focus {
        border-bottom-color: var(--bg-primary);
    }

    .mainSearch {
        margin-bottom: 5px;
    }


}

@media (max-width: 768px) {
    .navbar {
        background: #436AA3 none repeat scroll 0 0;
    }

    .top-menu-button span i {
        color: var(--bg-primary);
    }

    .top-menu-button > span:hover,
    .navbar-default .navbar-nav > li > a:hover {
        background: #5489CF;
        color: var(--bg-primary);
    }

    .login-wrapper .login-container {
        padding-top: 100px;
    }
}

@media (max-width: 480px) {
    .header.main-header-top {
        height: 48px;
    }

    .top-input-area {
        background: var(--bg-primary);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 9;
        -webkit-animation: expand 1s;
        padding: 9px 15px;
        height: 48px;
    }

    .top-input-area .collapse-search {
        margin-top: 8px;
        display: block;
        font-size: 14px;
        color: #bababa;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:focus,
    .navbar-default .navbar-nav > .open > a:hover {
        color: var(--bg-primary);
        background-color: #5489CF;
    }

    ul.column_names {
        background-color: var(--bg-primary);
        border-color: #5CCEC6;
    }

    ul.dropdown_bookmark_links .dropdown > a {
        font-size: 16px;
    }

    .profile-head {
        background-color: transparent !important;
        color: var(--body-text-color) !important;
    }

    .thumbnail-wrapper.d32 {
        width: auto;
        height: auto;
    }

    .thumbnail-wrapper.d32 i.fa-user {
        font-size: var(--spacing) !important;
    }

    a.questionMark {
        padding: 0px;
        border-left: none !important;
        font-size: 18px;
    }

    a.questionMark span.help-text {
        display: none;
    }

    a.questionMark .fa-question {
        display: block;
    }
    .search-section .filter-spn {
        display: none;
    }

    .header .d-flex > a {
        margin: 0px 7.5px;
    }

    .header .d-flex .dropdown {
        margin-left: 8px;
    }

    .search-section .bookmark_dropdown_link .b-r {
        border-right: none;
    }

    .header .search-link i {
        font-size: 16px;
    }

    /* product details modal footer buttons */
    .modal.fade .modal-dialog .modal-footer {
        display: block;
    }

    .modal.fade .modal-dialog .modal-footer button {
        display: block;
        width: 100%;
        margin: 0 0 5px;
    }

    /* help dropdown menu */
    .filter-container .quickview-footer button {
        padding: 0.35rem .5rem;
        margin: 0 2px;
    }
}

@media only screen and (max-width: 412px) {
    .product_id_container .select2-container--open .select2-dropdown--above,
    .product_id_container .select2-container--open .select2-dropdown--below {
        right: -164px !important;
        min-width: 280px !important;
        z-index: 9991;
    }
}

@media only screen and (max-width: 407px) {
    .product_id_container .select2-container--open .select2-dropdown--above,
    .product_id_container .select2-container--open .select2-dropdown--below {
        right: -224px !important;
        min-width: 280px !important;
    }
}

.bg-sidebar {
    background: var(--sidebar-bg);
}

.bg-primary {
    background-color: var(--primary) !important;
    color: #f5f8fd;
}

a.bg-primary:hover {
    background-color: var(--primary) !important;
}

.bg-primary .text-muted {
    color: #c5dcfa;
}

.bg-primary .text-darken {
    color: var(--primary);
}

.bg-primary.light {
    background-color: var(--primary) !important;
}

.bg-primary.lighter {
    background-color: var(--primary) !important;
}

.bg-primary.dark {
    background-color: var(--primary) !important;
}

.bg-primary.darker {
    background-color: var(--primary) !important;
}

.bg-primary .open > a,
.bg-primary .open > a:hover,
.bg-primary .open > a:focus {
    color: var(--header-bg);
}

.bg-success {
    background-color: var(--success) !important;
    color: #fcfefb;
}

a.bg-success:hover {
    background-color: var(--success) !important;
}

.bg-success .text-muted {
    color: #d6f5d1;
}

.bg-success .text-darken {
    color: var(--success);
}

.bg-success.light {
    background-color: var(--success) !important;
}

.bg-success.lighter {
    background-color: var(--success) !important;
}

.bg-success.dark {
    background-color: var(--success) !important;
}

.bg-success.darker {
    background-color: var(--success) !important;
}

.bg-success .open > a,
.bg-success .open > a:hover,
.bg-success .open > a:focus {
    color: var(--header-bg);
}

.bg-info {
    background-color: var(--info) !important;
    color: #e7f5fa;
}

a.bg-info:hover {
    background-color: var(--info) !important;
}

.bg-info .text-muted {
    color: #b6e6f8;
}

.bg-info .text-darken {
    color: var(--info);
}

.bg-info.light {
    background-color: var(--info) !important;
}

.bg-info.lighter {
    background-color: var(--info) !important;
}

.bg-info.dark {
    background-color: var(--info) !important;
}

.bg-info.darker {
    background-color: var(--info) !important;
}

.bg-info .open > a,
.bg-info .open > a:hover,
.bg-info .open > a:focus {
    color: var(--header-bg);
}

.bg-warning {
    background-color: var(--warning) !important;
    color: var(--header-bg);
}

a.bg-warning:hover {
    background-color: var(--warning) !important;
}

.bg-warning .text-muted {
    color: var(--bg-primary) 0d2;
}

.bg-warning .text-darken {
    color: var(--warning);
}

.bg-warning.light {
    background-color: var(--warning) !important;
}

.bg-warning.lighter {
    background-color: var(--warning) !important;
}

.bg-warning.dark {
    background-color: var(--warning) !important;
}

.bg-warning.darker {
    background-color: var(--warning) !important;
}

.bg-warning .open > a,
.bg-warning .open > a:hover,
.bg-warning .open > a:focus {
    color: var(--header-bg);
}

.bg-danger {
    background-color: var(--danger) !important;
    color: #fef7f6;
}

a.bg-danger:hover {
    background-color: var(--danger) !important;
}

.bg-danger .text-muted {
    color: #fdccc4;
}

.bg-danger .text-darken {
    color: var(--danger);
}

.bg-danger.light {
    background-color: var(--danger) !important;
}

.bg-danger.lighter {
    background-color: var(--danger) !important;
}

.bg-danger.dark {
    background-color: var(--danger) !important;
}

.bg-danger.darker {
    background-color: var(--danger) !important;
}

.bg-danger .open > a,
.bg-danger .open > a:hover,
.bg-danger .open > a:focus {
    color: var(--header-bg);
}

.bg-alert {
    background-color: var(--alert) !important;
    color: var(--header-bg);
}

a.bg-alert:hover {
    background-color: var(--alert) !important;
}

.bg-alert .text-muted {
    color: #f5f2fd;
}

.bg-alert .text-darken {
    color: var(--alert);
}

.bg-alert.light {
    /* background-color: #y992e2 !important; */
}

.bg-alert.lighter {
    background-color: var(--alert) !important;
}

.bg-alert.dark {
    background-color: var(--alert) !important;
}

.bg-alert.darker {
    background-color: var(--alert) !important;
}

.bg-alert .open > a,
.bg-alert .open > a:hover,
.bg-alert .open > a:focus {
    color: var(--header-bg);
}

.bg-system {
    background-color: #37bc9b !important;
    color: #cef1e8;
}

a.bg-system:hover {
    background-color: #2b957a !important;
}

.bg-system .text-muted {
    color: #9eeeda;
}

.bg-system .text-darken {
    color: #2b957a;
}

.bg-system.light {
    background-color: #48c9a9 !important;
}

.bg-system.lighter {
    background-color: #58ceb1 !important;
}

.bg-system.dark {
    background-color: #30a487 !important;
}

.bg-system.darker {
    background-color: #2b957a !important;
}

.bg-system .open > a,
.bg-system .open > a:hover,
.bg-system .open > a:focus {
    color: var(--header-bg);
}

.bg-dark {
    background-color: #3b3f4f !important;
    color: #9fa4b7;
}

a.bg-dark:hover {
    background-color: #252832 !important;
}

.bg-dark .text-muted {
    color: #717eb2;
}

.bg-dark .text-darken {
    color: #252832;
}

.bg-dark.light {
    background-color: #484d61 !important;
}

.bg-dark.lighter {
    background-color: #51566c !important;
}

.bg-dark.dark {
    background-color: #2e313d !important;
}

.bg-dark.darker {
    background-color: #252832 !important;
}

.bg-dark .open > a,
.bg-dark .open > a:hover,
.bg-dark .open > a:focus {
    color: var(--header-bg);
}

.bg-light {
    background-color: #FAFAFA;
    color: #666;
}

a.bg-light:hover {
    background-color: #e8e8e8 !important;
}

.bg-light .text-muted {
    color: #999;
}

.bg-light .text-darken {
    color: #222;
}

.bg-light.light {
    background-color: #FEFEFE;
}

.bg-light.lighter {
    background-color: VAR(--bg-primary);
}

.bg-light.dark {
    background-color: #F2F2F2;
}

.bg-light.darker {
    background-color: #E7E7E7;
}

.bg-white {
    color: #666;
    background-color: var(--header-bg) !important;
}

a.bg-white:hover {
    background-color: #ededed !important;
}

.bg-white .text-muted {
    color: #999;
}

.bg-white .text-darken {
    color: #222;
}

.bg-white.light {
    background-color: #FEFEFE;
}

.bg-white.lighter {
    background-color: VAR(--bg-primary);
}

.bg-white.dark {
    background-color: #F2F2F2;
}

.bg-white.darker {
    background-color: #E7E7E7;
}

.bg-default {
    background-color: var(--default);
}


/* BADGES CONTEXTUALS
 * linked labels get darker on :hover
 */

.badge-default {
    background-color: #777777;
}

.badge-default[href]:hover,
.badge-default[href]:focus {
    background-color: #5e5e5e;
}

.badge-primary {
    background-color: var(--primary);
}

.badge-primary[href]:hover,
.badge-primary[href]:focus {
    background-color: var(--primary);
}

.badge-success {
    background-color: var(--success);
}

.badge-success[href]:hover,
.badge-success[href]:focus {
    background-color: var(--success);
}

.badge-info {
    background-color: var(--info);
}

.badge-info[href]:hover,
.badge-info[href]:focus {
    background-color: var(--info);
}

.badge-warning {
    background-color: var(--warning);
}

.badge-warning[href]:hover,
.badge-warning[href]:focus {
    background-color: var(--warning);
}

.badge-danger {
    background-color: var(--danger);
}

.badge-danger[href]:hover,
.badge-danger[href]:focus {
    background-color: var(--danger);
}

.badge-alert {
    background-color: var(--danger);
}

.badge-alert[href]:hover,
.badge-alert[href]:focus {
    background-color: var(--danger);
}

.badge-system {
    background-color: #37bc9b;
}

.badge-system[href]:hover,
.badge-system[href]:focus {
    background-color: #2b957a;
}

.badge-dark {
    background-color: #3b3f4f;
}

.badge-dark[href]:hover,
.badge-dark[href]:focus {
    background-color: #252832;
}


/* LABELS CONTEXTUALS */

.label-muted {
    background-color: #aaaaaa;
}

.label-muted[href]:hover,
.label-muted[href]:focus {
    background-color: #919191;
}

.label-default {
    background-color: #dad7d7;
}

.label-default[href]:hover,
.label-default[href]:focus {
    background-color: #5e5e5e;
}

.label-outline-default {
    border: solid 1px var(--shortcut-link-border-color);
}

.label-outline-primary {
    border: solid 1px var(--primary);
}

.label-outline-secondary {
    border: solid 1px var(--secondary);
}

.label-outline-success {
    border: solid 1px var(--success);
}

.label-outline-info {
    border: solid 1px var(--info);
}

.label-outline-danger {
    border: solid 1px var(--danger);
}

.label-outline-warning {
    border: solid 1px var(--warning);
}

.label-primary {
    background-color: var(--primary);
    color: var(--bg-primary);
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: var(--primary);
}

.label-success {
    background-color: var(--success);
}

.label-success[href]:hover,
.label-success[href]:focus {
    background-color: var(--success);
}

.label-info {
    background-color: var(--info);
}

.label-info[href]:hover,
.label-info[href]:focus {
    background-color: var(--info);
}

.label-warning {
    background-color: var(--warning);
}

.label-warning[href]:hover,
.label-warning[href]:focus {
    background-color: var(--warning);
}

.label-danger {
    background-color: var(--danger);
}

.label-danger[href]:hover,
.label-danger[href]:focus {
    background-color: var(--danger);
}

.label-alert {
    background-color: var(--danger);
}

.label-alert[href]:hover,
.label-alert[href]:focus {
    background-color: var(--danger);
}

.label-system {
    background-color: #37bc9b;
}

.label-system[href]:hover,
.label-system[href]:focus {
    background-color: #2b957a;
}

.label-dark {
    background-color: #3b3f4f;
}

.label-dark[href]:hover,
.label-dark[href]:focus {
    background-color: #252832;
}


/* CHECKBOX/RADIO CONTEXTUALS */


/* radio border */

.radio-custom label:before {
    border: 2px solid #666;
}


/* check radio icon */

.radio-custom input[type=radio]:checked + label:after,
.radio-custom input[type=checkbox]:checked + label:after {
    color: #666;
    background-color: #666;
}


/* checkbox border */

.checkbox-custom label:before {
    background-color: VAR(--bg-primary);
    border: 1px solid #666;
}

.checkbox-custom.fill label:before {
    background-color: #666;
}

.checkbox-custom.fill input[type=checkbox]:checked + label:after,
.checkbox-custom.fill input[type=radio]:checked + label:after {
    color: var(--bg-primary) !important;
}

.radio-custom.radio-primary label:before,
.checkbox-custom.checkbox-primary label:before {
    border-color: #649ae1;
}

.radio-custom.radio-primary input[type=radio]:checked + label:after,
.radio-custom.radio-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-primary input[type=radio]:checked + label:after {
    background-color: #649ae1;
    color: #649ae1;
}

.checkbox-custom.fill.checkbox-primary label:before {
    background-color: #649ae1;
}

.radio-custom.radio-success label:before,
.checkbox-custom.checkbox-success label:before {
    border-color: #85d27a;
}

.radio-custom.radio-success input[type=radio]:checked + label:after,
.radio-custom.radio-success input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-success input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-success input[type=radio]:checked + label:after {
    background-color: #85d27a;
    color: #85d27a;
}

.checkbox-custom.fill.checkbox-success label:before {
    background-color: #85d27a;
}

.radio-custom.radio-info label:before,
.checkbox-custom.checkbox-info label:before {
    border-color: #55badf;
}

.radio-custom.radio-info input[type=radio]:checked + label:after,
.radio-custom.radio-info input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-info input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-info input[type=radio]:checked + label:after {
    background-color: #55badf;
    color: #55badf;
}

.checkbox-custom.fill.checkbox-info label:before {
    background-color: #55badf;
}

.radio-custom.radio-warning label:before,
.checkbox-custom.checkbox-warning label:before {
    border-color: #f7c65f;
}

.radio-custom.radio-warning input[type=radio]:checked + label:after,
.radio-custom.radio-warning input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-warning input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-warning input[type=radio]:checked + label:after {
    background-color: #f7c65f;
    color: #f7c65f;
}

.checkbox-custom.fill.checkbox-warning label:before {
    background-color: #f7c65f;
}

.radio-custom.radio-danger label:before,
.checkbox-custom.checkbox-danger label:before {
    border-color: #ec6f5a;
}

.radio-custom.radio-danger input[type=radio]:checked + label:after,
.radio-custom.radio-danger input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-danger input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-danger input[type=radio]:checked + label:after {
    background-color: #ec6f5a;
    color: #ec6f5a;
}

.checkbox-custom.fill.checkbox-danger label:before {
    background-color: #ec6f5a;
}

.radio-custom.radio-alert label:before,
.checkbox-custom.checkbox-alert label:before {
    border-color: #a992e2;
}

.radio-custom.radio-alert input[type=radio]:checked + label:after,
.radio-custom.radio-alert input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-alert input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-alert input[type=radio]:checked + label:after {
    background-color: #a992e2;
    color: #a992e2;
}

.checkbox-custom.fill.checkbox-alert label:before {
    background-color: #a992e2;
}

.radio-custom.radio-system label:before,
.checkbox-custom.checkbox-system label:before {
    border-color: #48c9a9;
}

.radio-custom.radio-system input[type=radio]:checked + label:after,
.radio-custom.radio-system input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-system input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-system input[type=radio]:checked + label:after {
    background-color: #48c9a9;
    color: #48c9a9;
}

.checkbox-custom.fill.checkbox-system label:before {
    background-color: #48c9a9;
}

.radio-custom.radio-dark label:before,
.checkbox-custom.checkbox-dark label:before {
    border-color: #484d61;
}

.radio-custom.radio-dark input[type=radio]:checked + label:after,
.radio-custom.radio-dark input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-dark input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-dark input[type=radio]:checked + label:after {
    background-color: #484d61;
    color: #484d61;
}

.checkbox-custom.fill.checkbox-dark label:before {
    background-color: #484d61;
}

.radio-custom.radio-light label:before,
.checkbox-custom.checkbox-light label:before {
    border-color: #eee;
}

.radio-custom.radio-light input[type=radio]:checked + label:after,
.radio-custom.radio-light input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-light input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-light input[type=radio]:checked + label:after {
    background-color: #666;
    color: #666 !important;
}

.checkbox-custom.fill.checkbox-light label:before {
    background-color: #eee;
}

.radio-custom.radio-disabled label:before,
.checkbox-custom.checkbox-disabled label:before {
    border-color: #b9b9b9;
}

.radio-custom.radio-disabled input[type=radio]:checked + label:after,
.radio-custom.radio-disabled input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-disabled input[type=checkbox]:checked + label:after,
.checkbox-custom.checkbox-disabled input[type=radio]:checked + label:after {
    background-color: #b9b9b9;
    color: #b9b9b9;
}

.checkbox-custom.fill.checkbox-disabled label:before {
    background-color: #b9b9b9;
}


/* LISTGROUP CONTEXTUALS
 * Add modifier classes to change text and background color on individual items.
 * Organizationally, this must come after the `:hover` states.
 */

.list-group-item-primary {
    color: var(--bg-primary);
    border-color: var(--group-item-primary-border);
    background-color: var(--group-item-primary-bg);
}

a.list-group-item-primary {
    color: #1f57a1;
}

a.list-group-item-primary .list-group-item-heading {
    color: inherit;
}

a.list-group-item-primary:hover,
a.list-group-item-primary:focus {
    color: var(--bg-primary) !important;
    background-color: var(--primary) !important;
}

a.list-group-item-primary.active,
a.list-group-item-primary.active:hover,
a.list-group-item-primary.active:focus {
    color: var(--bg-primary);
    background-color: var(--primary);
    border-color: var(--primary);
}

.list-group-item-success {
    color: #3f9532;
    border-color: #afe1a8;
    background-color: #d9f1d5;
}

a.list-group-item-success {
    color: #3f9532;
}

a.list-group-item-success .list-group-item-heading {
    color: inherit;
}

a.list-group-item-success:hover,
a.list-group-item-success:focus {
    color: #3f9532;
    background-color: #e7f6e4;
}

a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
    color: var(--bg-primary);
    background-color: var(--success);
    border-color: var(--success);
}

.list-group-item-info {
    color: #1c7393;
    border-color: #88cfe9;
    background-color: #bce4f2;
}

a.list-group-item-info {
    color: #1c7393;
}

a.list-group-item-info .list-group-item-heading {
    color: inherit;
}

a.list-group-item-info:hover,
a.list-group-item-info:focus {
    color: #1c7393;
    background-color: #cdebf6;
}

a.list-group-item-info.active,
a.list-group-item-info.active:hover,
a.list-group-item-info.active:focus {
    color: var(--bg-primary);
    background-color: var(--info);
    border-color: var(--info);
}

.list-group-item-warning {
    color: #c88a0a;
    border-color: #fadb9a;
    background-color: #fdf0d4;
}

a.list-group-item-warning {
    color: #c88a0a;
}

a.list-group-item-warning .list-group-item-heading {
    color: inherit;
}

a.list-group-item-warning:hover,
a.list-group-item-warning:focus {
    color: #c88a0a;
    background-color: #fef7e8;
}

a.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus {
    color: var(--bg-primary);
    background-color: var(--warning);
    border-color: var(--warning);
}

.list-group-item-danger {
    color: #bc2d16;
    border-color: #f4ab9f;
    background-color: #fadbd6;
}

a.list-group-item-danger {
    color: #bc2d16;
}

a.list-group-item-danger .list-group-item-heading {
    color: inherit;
}

a.list-group-item-danger .list-group-item-heading {
    color: inherit;
}

a.list-group-item-danger:hover,
a.list-group-item-danger:focus {
    color: #bc2d16;
    background-color: #fcebe8;
}

a.list-group-item-danger.active,
a.list-group-item-danger.active:hover,
a.list-group-item-danger.active:focus {
    color: var(--bg-primary);
    background-color: var(--danger);
    border-color: var(--danger);
}

.list-group-item-alert {
    color: #542fb2;
    border-color: #c6b7ec;
    background-color: #ece7f9;
}

a.list-group-item-alert {
    color: #542fb2;
}

a.list-group-item-alert .list-group-item-heading {
    color: inherit;
}

a.list-group-item-alert:hover,
a.list-group-item-alert:focus {
    color: #542fb2;
    background-color: #f9f7fd;
}

a.list-group-item-alert.active,
a.list-group-item-alert.active:hover,
a.list-group-item-alert.active:focus {
    color: var(--bg-primary);
    background-color: var(--danger);
    border-color: var(--danger);
}

.list-group-item-system {
    color: #206d5a;
    border-color: #77d7c0;
    background-color: #a7e5d6;
}

a.list-group-item-system {
    color: #206d5a;
}

a.list-group-item-system .list-group-item-heading {
    color: inherit;
}

a.list-group-item-system:hover,
a.list-group-item-system:focus {
    color: #206d5a;
    background-color: #b7eadd;
}

a.list-group-item-system.active,
a.list-group-item-system.active:hover,
a.list-group-item-system.active:focus {
    color: var(--bg-primary);
    background-color: #37bc9b;
    border-color: #37bc9b;
}

.list-group-item-dark {
    color: #3b3f4f;
    border-color: #999eb3;
    background-color: #bcbfcd;
}

a.list-group-item-dark {
    color: #3b3f4f;
}

a.list-group-item-dark .list-group-item-heading {
    color: inherit;
}

a.list-group-item-dark:hover,
a.list-group-item-dark:focus {
    color: #3b3f4f;
    background-color: #c8cbd6;
}

a.list-group-item-dark.active,
a.list-group-item-dark.active:hover,
a.list-group-item-dark.active:focus {
    color: var(--bg-primary);
    background-color: #3b3f4f;
    border-color: #3b3f4f;
}


/* PANEL CONTEXTUALS */


/* PROGRESS BAR CONTEXTUALS
 */

.progress-bar-default {
    background-color: #999999;
}

.progress-bar-default.light {
    background-color: #a2a2a2;
}

.progress-bar-default.dark {
    background-color: #909090;
}

.progress-striped .progress-bar-default {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-primary {
    background-color: var(--primary);
}

.progress-bar-primary.light {
    background-color: var(--primary);
}

.progress-bar-primary.dark {
    background-color: var(--primary);
}

.progress-striped .progress-bar-primary {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-success {
    background-color: var(--success);
}

.progress-bar-success.light {
    background-color: #7ccf70;
}

.progress-bar-success.dark {
    background-color: #64c556;
}

.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
    background-color: var(--info);
}

.progress-bar-info.light {
    background-color: var(--info);
}

.progress-bar-info.dark {
    background-color: #2ca9d7;
}

.progress-striped .progress-bar-info {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
    background-color: var(--warning);
}

.progress-bar-warning.light {
    background-color: var(--warning);
}

.progress-bar-warning.dark {
    background-color: var(--warning);
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-danger {
    background-color: var(--danger);
}

.progress-bar-danger.light {
    background-color: #eb654f;
}

.progress-bar-danger.dark {
    background-color: #e7492f;
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-alert {
    background-color: var(--danger);
}

.progress-bar-alert.light {
    background-color: #a188e0;
}

.progress-bar-alert.dark {
    background-color: #8b6cd8;
}

.progress-striped .progress-bar-alert {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-system {
    background-color: #37bc9b;
}

.progress-bar-system.light {
    background-color: #3ec7a5;
}

.progress-bar-system.dark {
    background-color: #33ae90;
}

.progress-striped .progress-bar-system {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-dark {
    background-color: #3b3f4f;
}

.progress-bar-dark.light {
    background-color: #434759;
}

.progress-bar-dark.dark {
    background-color: #333745;
}

.progress-striped .progress-bar-dark {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}


/* title/color editboxes */


/* mobile control modifications during panel fullscreen mode */


#timeline:after {
    background: #ddd;
}

#timeline .timeline-divider .divider-label {
    border: 1px solid #DDD;
    color: #777;
    background: VAR(--bg-primary);
}

#timeline .timeline-divider .divider-label:before {
    background: var(--primary);
}

#timeline .timeline-item > .panel:before,
#timeline .timeline-item > .panel:after {
    border-color: transparent transparent transparent #fafafa;
}

#timeline .timeline-item > .panel:after {
    border-left-color: #666;
}

#timeline .right-column .panel:before,
#timeline .right-column .panel:after {
    border-color: transparent #fafafa transparent transparent;
}

#timeline .right-column .panel:after {
    border-right-color: #666;
}

#timeline .timeline-icon {
    color: VAR(--bg-primary);
    background: #eeeeee;
    box-shadow: 0 0 0 5px #eeeeee;
}

#timeline.timeline-single .timeline-item > .panel:before,
#timeline.timeline-single .timeline-item > .panel:after {
    border-color: transparent var(--header-bg) transparent transparent;
}

#timeline.timeline-single .panel:after {
    border-right-color: #666;
}

.panel-footer {
    border-top: solid 1px #eee;
}


/*===============================================
  C. Text Helpers
================================================= */

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


.custom-menu li {
    border-top: 1px solid #ddd;
}


.form-group.form-options {
    border-top: dashed 1px #EEE;
}

.operations > .panel .panel-heading {
    border-bottom: 1px solid rgb(221, 221, 221);
}

.dataTables_processing {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--bg-primary);
}

.timeline-icon {
    border: 1px solid #888;
    color: #888 !important;
}

.timeline-item .panel-body > .row:first-child {
    background-color: var(--secondary);
    color: var(--bg-primary);
}

ul.fancytree-container > li > span {
    background-color: #F7F7F7;
    border-color: #DEDEDE;
}

.neg {
    color: red;
}

.pos {
    color: green;
}

.dataTables_scrollHead {
    background-color: var(--table-head-bg);
}

.dataTables_scrollHead.ui-state-default {
    background: var(--bg-primary);
}

#version_hash {
    color: rgb(136, 136, 136);;
}

.custom-form .control-label {
    color: var(--bg-primary);
}


.filter-Inputs .form-control {
    background: #4F546B;
    border: 1px solid #969CB7;
    color: #F4F5F6;
}


.filter-Inputs .form-control.filter-datetime + a {
    border: 1px solid #CDCED0;
    background: #9497A5;
    color: var(--bg-primary);
}

i.fa.fa-caret-up {
    color: VAR(--bg-primary);
}

.dt-button-collection .dt-button.ui-state-default {
    color: #CCC;
}

footer {
    background: rgb(238, 238, 238) none repeat scroll 0% 0%;
    border-top: 1px solid rgb(204, 204, 204);
}

.dt-button-collection .dt-button.ui-state-active {
    color: #1c94c4;
    border: 1px solid #1fccff;
}

.filter-form .select2-selection {
    background: var(--ohd-bg);
    border: 1px solid rgb(150, 156, 183);
}

.operations input.form-control.filter {
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .07) !important;
    padding: 18px 9px;
    margin-top: 4px;
    background: var(--light);
}

.operations input.form-control.filter-number-from,
.operations input.form-control.filter-number-to {
    width: 49%;
    display: inline-block;
}

.operations input.form-control.filter-number-from {
    margin-right: 2%;
}

.filter-form span.select2-selection__rendered {
    color: #000 !important;
}

.filter-container .form-with-headings span.select2-selection__rendered {
    color: var(--body-text-color) !important;
}

.typeahead,
.tt-query,
.tt-hint {
    border: 2px solid #ccc;
}

.typeahead {
    background-color: var(--bg-primary);
}

.typeahead:focus {
    border: 2px solid #0097cf;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-dropdown-menu,
.tt-menu {
    background-color: var(--bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 5px var(--spacing_half) rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px var(--spacing_half) rgba(0, 0, 0, .2);
    box-shadow: 0 5px var(--spacing_half) rgba(0, 0, 0, .2);
}

.tt-suggestion {
    padding: 1px 18px !important;
    font-size: 14px !important;
    line-height: 24px;
    color: #626262;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: var(--bg-primary);
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

.tt-suggestion.tt-cursor {
    color: var(--bg-primary);
    background-color: #0097cf;
}


.estimated {
    color: #C75C62;
}

.dashboard-filters {
    background-color: var(--bg-primary);
}

#panel_customer_basic_info {
    background-color: var(--header-bg);
}


div.dataTables_wrapper div.dataTables_processing {
    background-color: #40aaa1;
    position: absolute;
    height: 50px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 0;
    opacity: 0.8;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -26px;
    text-align: center;
    padding: 1em 0;
}


/* Flag Icons */

table.account-header {
    background: #f5f5f5;
}


/* TEXT COLOR CONTEXTUALS
 */

.text-white {
    color: var(--header-bg);
}

a.text-white:hover {
    color: #808080;
}

.text-white-light {
    color: var(--header-bg);
}

.text-white-lighter {
    color: var(--header-bg);
}

.text-white-dark {
    color: #f6f6f6;
}

.text-white-darker {
    color: #ececec;
}

.text-muted {
    color: #999999;
}

a.text-muted:hover {
    color: #191919;
}

.text-muted-light {
    color: #a2a2a2;
}

.text-muted-lighter {
    color: #acacac;
}

.text-muted-dark {
    color: #909090;
}

.text-muted-darker {
    color: #868686;
}

.text-primary {
    color: var(--primary);
}

a.text-primary:hover {
    color: var(--primary);
}

.text-primary-light {
    color: var(--primary);
}

.text-primary-lighter {
    color: #6a9ee2;
}

.text-primary-dark {
    color: var(--primary);
}

.text-primary-darker {
    color: #2a74d6;
}

.text-success {
    color: var(--success) !important;
}

a.text-success:hover {
    color: #0f220c;
}

.text-success-light {
    color: #7ccf70;
}

.text-success-lighter {
    color: #8ad480;
}

.text-success-dark {
    color: #64c556;
}

.text-success-darker {
    color: #56c046;
}

.text-info {
    color: var(--info);
}

a.text-info:hover {
    color: var(--info);
}

.text-info-light {
    color: var(--info);
}

.text-info-lighter {
    color: #5bbce0;
}

.text-info-dark {
    color: #2ca9d7;
}

.text-info-darker {
    color: #269dc9;
}

.text-warning {
    color: var(--warning);
}

a.text-warning:hover {
    color: var(--warning);
}

.text-warning-light {
    color: var(--warning);
}

.text-warning-lighter {
    color: #f8c867;
}

.text-warning-dark {
    color: var(--warning);
}

.text-warning-darker {
    color: var(--warning);
}

.text-danger {
    color: var(--danger) !important;
}

a.text-danger:hover {
    color: #250904;
}

.text-danger-light {
    color: #eb654f;
}

.text-danger-lighter {
    color: #ed7561;
}

.text-danger-dark {
    color: #e7492f;
}

.text-danger-darker {
    color: var(--danger);
}

.text-alert {
    color: var(--danger);
}

a.text-alert:hover {
    color: #211245;
}

.text-alert-light {
    color: #a188e0;
}

.text-alert-lighter {
    color: #ae98e4;
}

.text-alert-dark {
    color: #8b6cd8;
}

.text-alert-darker {
    color: #7e5cd4;
}

.text-system {
    color: #C0666B;
}

a.text-system:hover {
    color: #000000;
}

.text-system-light {
    color: #3ec7a5;
}

.text-system-lighter {
    color: #4ecbac;
}

.text-system-dark {
    color: #33ae90;
}

.text-system-darker {
    color: #2e9e83;
}

.text-dark {
    color: #3b3f4f;
}

a.text-dark:hover {
    color: #000000;
}

.text-dark-light {
    color: #434759;
}

.text-dark-lighter {
    color: #4b5065;
}

.text-dark-dark {
    color: #333745;
}

.text-dark-darker {
    color: #2b2e39;
}

.text-tp {
    color: rgba(0, 0, 0, 0.2);
}

a.text-tp:hover {
    color: rgba(0, 0, 0, 0.3);
}

.text-default {
    color: var(--default)
}

.text-grey {
    color: grey;
}

.text-italic {
    font-style: italic
}

.text-size-20 {
    font-size: 2.0rem;
    font-weight: bold
}

.text-size-15 {
    font-size: 1.5rem;
    font-weight: bold
}

.text-size-13 {
    font-size: 1.3rem;
    font-weight: bold
}

.text-size-11 {
    font-size: 1.1rem
}

.text-size-10 {
    font-size: 1.0rem
}

.text-size-8 {
    font-size: 0.8rem;
}

.text-size-6 {
    font-size: 0.6rem;
}

.text-size-5 {
    font-size: 0.5rem;
}

.text-size-12px {
    font-size: 12px
}

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

.body-text-font {
    font-family: var(--font-general);
}

.p-5px {
    padding: 5px;
}

.table-auto {
    width: auto !important;
}

.table-condensed-x td {
    padding-top: 3px !important;
    padding-bottom: 5px !important;
}

.table-transparent td {
    background: transparent !important;
}

ol.timeline-list li.timeline-item + .timeline-item {
    border-top: 1px dashed #dddddd;
}

ol.timeline-list li.timeline-item .timeline-desc b,
ol.timeline-list li.timeline-item .timeline-desc strong {
    color: var(--heading-color);
}

ol.timeline-list li.timeline-item .timeline-desc a {
    color: var(--info);
}

ol.timeline-list li.timeline-item .timeline-icon {
    border: 1px solid #dddddd;
    background: var(--bg-primary);
}

.all_notifications_button {
    color: var(--bg-primary);
}

.all_notifications_button:hover,
.all_notifications_button:focus,
.all_notifications_button:active {
    color: var(--bg-primary);
}


.not-status-read .fa {
    color: var(--success)
}

.not-status-unread .fa {
    color: var(--danger)
}

.unread-count {
    color: var(--bg-primary) !important;
    background-color: var(--danger) !important;
}

.product_image {
    border: 1px solid var(--shortcut-link-border-color);

}

.product_image img {
    width: 100%;
    height: 100%;
}

.training-list a {
    color: #5489CF !important;
}

.training-list > li {
    border-bottom: solid 1px #5489CF;
}

#modal-order-details .panel {
    border: solid 1px var(--panel-border-color);
}

#modal-order-details .panel .panel-heading {
    background: var(--table-head-bg);
}

#modal-order-details .panel-heading h4 > a {
    text-transform: capitalize;
    font-weight: 700;
    font-family: var(--font-general);
    font-size: 14px;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--table-cell-text);
    background: var(--table-head-bg);
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 8px;
}

#modal-order-details .panel-heading small a {
    color: var(--primary);
    background: transparent;
    font-size: 12px;
    font-weight: 500;
}

small.on_trial {
    background: var(--danger) none repeat scroll 0% 0%;
}

.diff td {
    border: solid 1px var(--shortcut-link-border-color);
}

.diff span {
    border-bottom: solid 1px var(--shortcut-link-border-color);
}

.diffDeleted span.diffContent h3 {
    background: rgb(255, 224, 224);
    border: none;
    margin: -4px -3px 0 -3px;
    padding: var(--spacing_half);
    font-weight: 600;
    font-family: var(--font-general);
    font-size: 16px;
}

.diffInserted .diffInserted span {
    border: 1px solid rgb(192, 255, 192);
    background: rgb(224, 255, 224);
    padding: 5px var(--spacing_half);
}

.new-panel.training-page td {
    font-family: var(--font-general);
    font-size: 12px;
    text-transform: lowercase;
    font-weight: 500;
}


/* Aggregate Dashboard Buttons */

.aggregate-cogs-btn {
}


/*.aggregate-cogs-btn .btn {*/
/*    color: var(--btn-color) !important;*/
/*    opacity: 1;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: var(--spacing_half);*/
/*}*/


/* dynatable pagination */

.modal-body .dynatable-active-page {
    background-color: var(--bg-primary);
    background: transparent;
    border-radius: 5px;
    color: #8e8e8e;
    margin-right: 2px;
    font-weight: 500;
}


/*nav notification styles*/

a#notification_menu_item,
a#cart-menu-items,
a#shipment_menu_item {
    position: relative;
}

a#cart-menu-items {
    color: #626262;
}

.align-items-center a .badge {
    position: absolute;
    border-radius: 70px;
    line-height: 12px;
    top: -10px;
    font-size: var(--spacing_half);
    right: 0;

    text-align: center;
}


/* Spectrum Color Picker */

.sp-picker-container {
    padding-bottom: var(--spacing_half);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.sp-reset-button button {
    background-color: var(--danger);
    border: 1px solid var(--danger);
}

.sp-choose {
    background-color: var(--success);
    border: 1px solid var(--success);
}

.sp-container button {
    line-height: 1.5;
    padding: 2px 5px;
}


/* search input cross */

.clear-search-input {
    color: #bababa;
}

.clear-search-input:hover {
    color: #9d9d9d;
    cursor: pointer;
}

.profile-head {
    color: VAR(--bg-primary);
    background-color: var(--site-primary-bg);
    cursor: pointer;
}

.new-panel.training-page td {
    font-family: var(--font-general);
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
}


/* Height for Conditional filters. */


.drp-calendar table th {
    border-radius: 0 !important;
}

.md-rounded {
    border-radius: var(--md-rounded);
}

.sm-rounded {
    border-radius: var(--sm-rounded);
}

.page-settings-form {
    overflow: hidden;
    display: block;
    width: 100%;
}

.enhanced-members {
    height: 204px;
    overflow: hidden;
}

.more-kpis,
.less-kpis {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 0;
    color: var(--bg-primary);
}

.members-for-style {
    cursor: pointer;
    text-decoration: underline;
}


/*
CUSTOM FILTERS STYLING
 */

.select2-selection__choice {
    margin: 15px 0 0 0;
}

.select2-search__field {
    margin: 0 !important;
}

.product_id_container .select2-container .select2-selection .select2-selection__rendered {
    line-height: 24px;
    height: auto;
    overflow-y: hidden;
    padding-left: 0px;
    padding-right: var(--spacing_half);
    color: var(--btn-color);
    font-weight: bold;
    font-family: var(--font-general);
}

.product_id_container .select2-container--open .select2-dropdown--above,
.product_id_container .select2-container--open .select2-dropdown--below {
    min-width: var(--spacing);;
    position: absolute;
    left: auto;

}


.dropdown-arrow::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 16px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
}

#modal-ooe-add_modal_body .dropdown-arrow::before {
    display: none;
}

#period-summary {
    border-color: var(--shortcut-link-border-color) !important;
}

.product_id_container .select2-selection__rendered:before {
    right: inherit;
    top: 8px;
    border-top: 0px;
    left: 5px;
    font-weight: 600;
}


/* media query for marketplace */


@media only screen and (max-width: 355px) {

    .shipment-steps > .step {
        width: 20% !important;
    }

    .shipment-steps > .step > .step-head .step-name {
        font-size: 9px;
    }

    .shipment-steps {
        padding: 0px !important;
    }
}

.help-level-heading {
    border-left: 2px solid var(--site-primary-color);
    font-weight: bold !important;
    cursor: pointer;
}

.guidance-separator {
    border-top: 1px solid var(--light);
    height: 14px;
}

.guidance-trans-container {
    background: var(--success);
    padding: 8px;
    color: var(--bg-primary);
}

.payment-details-heading {
    background: var(--success);
    color: var(--bg-primary);
    padding: var(--spacing_half) var(--spacing_half) !important;
    margin-top: var(--spacing_half);
}

#product-inventory-form .form-group:not(:last-child) {
    border-bottom: dashed 1px #CDCDCD;
}

#product-inventory-form .form-group {
    padding: 0;
    padding-bottom: 5px;
}

#product-inventory-form .fq-inventory .iradio_square-blue,
#product-inventory-form .fq-inventory .icheckbox_square-blue {
    margin-right: 5px;
    padding-right: 22px;
}


.best-sellers-settings table tbody tr:not(:first-child) td:first-child {
    width: var(--spacing_half);
}

#modal-order-details .table.table-condensed.modal-table tr th.loss {
    color: var(--primary) !important;
}

.validation-errors {
    color: var(--danger);
    font-weight: bold;
}

.has-error .text-danger {
    margin-top: var(--spacing_half);
}

.mws-headline {
    background: var(--bg-primary) !important;
    padding: 15px var(--spacing_half) !important;
    line-height: var(--spacing) !important;
}

.heading-skinny-cell {
    width: 70% !important;
    padding: 14px var(--spacing_half) !important;
}

.table.account-header td {
    background: var(--table-head-bg);
    margin-top: var(--spacing_half) !important;
}

.marked-default {
    font-style: italic;
    line-height: 34px;
    color: var(--secondary);
    font-weight: bold;
}

.modal-title .modal-title-text {
    float: none;
}

.asin-error-mp-form {
    max-width: 500px;
    margin: auto;
    background: var(--bg-primary);
}

#create-shipment-form select,
#create-shipment-form input {
    width: 100%;
}

.brand-logo-url {
    height: 50px;
    width: 50px;
}

#no-record {
    text-align: center;
    color: var(--ohd-text-color);
}

.bookmarks {
    max-height: 800px;
}


/* sweetalert custom style */

.sweet-alert {
    background: var(--modal-bg);
}

.sweet-alert h2 {
    color: var(--heading-color);
}

.sweet-alert input {
    color: var(--ohd-text-color);
    background: var(--ohd-bg);
    border-color: var(--shortcut-link-border-color);
}

.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success::before {
    background: var(--modal-bg);
}

.sweet-alert .sa-icon.sa-success::before {
    width: 70px;
}

.sweet-alert .sa-icon.sa-success .sa-fix {
    background-color: var(--modal-bg);
}

.mce-panel {
    background: var(--quick-view-bg) !important;
}

.mce-panel * {
    color: var(--body-text-color) !important;
}

.mce-menubar .mce-caret {
    border-top-color: var(--body-text-color) !important;
}

.mce-btn {
    background-color: var(--btn-bg) !important;
}

.danger-text {
    background: var(--danger) !important;
}

.consent-para {
    background: var(--body-dark) !important;
}

.preview-allow-guest > label {
    position: absolute;
    top: 0;
    left: 45px;
}

.preview-allow-guest .help-block {
    margin-top: 6px;
}

.po-button-padding {
    padding: 2px 6px;
}

.kpi-list-container span.kpi-delete {
    color: var(--danger) !important;
}

.kpi-list-container span.kpi-delete.disabled {
    color: var(--default) !important;
}


/* edit guest page */

.jstree-default .jstree-wholerow-clicked {
    background: var(--jstree-clicked) !important;
}

.jstree-default .jstree-wholerow-hovered {
    background: var(--sidebar-bg) !important;
}

.download-report-heading {
    font-family: var(--font-general);
}

#modal-report-download .help-block {
    margin: 0;
}

ul.tag-editor.ui-sortable li input {
    color: var(--ohd-text-color);
}

div.rules-list {
    position: absolute;
    left: 0;
    background: var(--header-bg);
    z-index: 9;
    color: #333333;
    padding: var(--spacing_half);
    border-radius: 4px;
    display: none;
    transition: all .3s;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(150, 150, 150, 1);
    -moz-box-shadow: 0px 2px 4px 0px rgba(150, 150, 150, 1);
    box-shadow: 0px 2px 4px 0px rgba(150, 150, 150, 1);
}

div.rules-list li {
    width: 50%;
    display: inline-block;
}

div.rules-list li:last-child {
    width: 100%;
}

.card.card-transparent .rules-list {
    left: auto;
    background-color: var(--ohd-bg);
    color: var(--ohd-text-color);
    box-shadow: var(--role-list-shadow);
    -webkit-box-shadow: var(--role-list-shadow);
    -moz-box-shadow: var(--role-list-shadow);
}

div.rules-list li.ok::before,
div.rules-list li.ko::before {
    margin-right: 5px !important;
    width: auto !important;
}

.settings-form-container .validation-errors {
    margin-left: 15px;
}

.t-supplier .validation-errors {
    margin-top: 15px;
    margin-bottom: 15px;
}

.shipment-steps-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: var(--spacing);
    padding-top: var(--spacing);
}

.shipment-steps {
    display: flex;
    padding: 0 var(--spacing);
    justify-content: center;
    min-width: 100%;
}

.shipment-steps > .step {
    text-align: center;
    border-radius: 5px;
    min-width: 175px;
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--shortcut-link-color);
}

.shipment-steps > .step:not(:last-child):after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 5px;
    right: -50%;
    top: 45px;
    background-color: var(--shortcut-link-color);
}

.shipment-steps > .step > .step-head {
    color: inherit;
    margin: 0;
    padding: calc(var(--spacing) / 2);
    display: block;
    font-family: var(--font-general);
}

.shipment-steps > .step > .step-head .next_action {
    border-top: double 4px;
    padding-top: calc(var(--spacing) / 2);
    margin-top: calc(var(--spacing) / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.shipment-steps > .step > .step-head .step-head-icon {
    font-size: 30px;
    padding: var(--spacing);
    border: solid 1px;
    border-radius: 100%;
    width: 75px;
    height: 75px;
    background-color: var(--bg-primary);
    z-index: 9;
}

.shipment-steps > .step.active {
    color: var(--primary);
}

.shipment-steps > .step.active .step-name {
    font-weight: bold;
}

.shipment-steps > .step.done {
    color: var(--success);
}

.shipment-steps > .step.done .step-name {
    font-weight: bold;
}

.shipment-steps > .step.done:after {
    background-color: var(--success) !important;
}

.shipment-steps > .step.pending > .step-head .step-head-icon {
    border: dashed 2px;
}

.shipment-steps > .step.active > .step-head .step-head-icon {
    border: double 4px;
}

.table-container {
    border: 1px solid var(--shortcut-link-border-color);
}

.supply-chain {
    overflow: hidden;
}

.supply-chain > form {
    overflow: auto;
}

.supply-chain > form .table-striped {
    min-width: 800px;
}

.shipments-tabs.nav-tabs > li > a {
    font-size: var(--body-size);
    font-weight: bold;
    padding: var(--spacing_half) var(--spacing_half);
}

.shipment-summary-row td {
    text-transform: capitalize;
    font-weight: bold;
    font-family: var(--font-general);
    background-color: var(--table-head-bg);
    color: var(--ohd-text-color) !important;
    border-bottom: 1px solid var(--shortcut-link-border-color);
    vertical-align: middle;
}

.table .merged-cells:not(:last-child) {
    border-right: 1px solid var(--shortcut-link-border-color);
}

.table .merged-cells:not(:first-child) {
    border-left: 1px solid var(--shortcut-link-border-color);
}

th.finance,
td.finance {
    width: 150px;
    text-align: center;
}

.table-container .table-top-bar {
    border-bottom: 1px solid var(--shortcut-link-border-color);
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--spacing_half);
}

.table-container .table-top-bar .btn {
    margin: var(--spacing) var(--spacing_half);
}

.sc-summary-tiles {
    margin-bottom: var(--spacing_half);
}

.sc-summary {
    border: 1px solid var(--shortcut-link-border-color);
    padding: var(--spacing);
}

.summary-head {
    font-size: 16px;
    font-weight: bold;
    font-family: var(--font-general);
    border-bottom: 1px solid var(--shortcut-link-border-color);
    display: block;
    padding-bottom: var(--spacing_half);
}

.summary-body {
    padding: var(--spacing_half) 0;
}

.summary-body > p:last-child {
    margin: 0;
}

table.shipment-items .form-container-header {
    margin: 0;
    width: 100%;
    border: none;
}

.wrapper-for-form-select {
    z-index: 10000;
}

#modal-reorder-explainer .inv-quantity-box {
    width: 175px;
}

.table-inv-breakdown {
    margin-bottom: var(--spacing) !important;
}

.table-inv-breakdown tr td.table-heading {
    background-color: var(--secondary) !important;
    color: var(--bg-primary);
    text-align: left;
}

.table-inv-breakdown tr.considered {
}

.table-inv-breakdown tr.not-considered td.text-right {
    text-decoration: line-through;
    opacity: 0.5;
}

.explainers .table {
    margin-bottom: calc(var(--spacing) * 2);
}

table.replenish-action tr td:last-child {
    width: 1px;
    text-align: right;
}

.explainers td > table.table-breakdown tr td:last-child {
    text-align: right;
}

a.disabled-link {
    color: grey;
}

.shipment_info code {
    font-size: 14px;
}

.preferred-product-supplier,
.edit-product-supplier,
.remove-product-supplier {
    padding: 4px 5px !important;
    margin: 0 2px 4px;
}

.product .label.label-fc {
    padding: 3px !important;
    margin-left: 3px !important;
}



.table-btn-toolbar {
    padding: var(--spacing);
    display: flex;
    justify-content: flex-end;
    border: solid 1px var(--shortcut-link-border-color)
}

table + .table-btn-toolbar {
    border-top: none;
}

.product_title_modal_head {
    margin: 0 0 var(--spacing_half) 0;
    padding-bottom: var(--spacing_half);
    border-bottom: solid 1px var(--shortcut-link-border-color);
    font-weight: bold;
    font-family: var(--font-general);
    text-transform: capitalize;
    font-size: 1.2em;
    padding-left: calc(75px + var(--spacing));
}

.source_title_summary {
    margin: var(--spacing_half) 0 var(--spacing_half) calc(75px + var(--spacing));
    padding-top: var(--spacing_half);
    border-top: solid 1px var(--shortcut-link-border-color);
}

.centered-column {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.table-grid-inline {
    display: grid;
    grid-gap: var(--spacing_half);
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    grid-template-rows: auto;
    grid-auto-flow: dense;
    width: 100%;
}

.table-grid-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 5px;
    min-width: 100px;
    position: relative;
    border: solid 1px var(--table-border);
}

.table-grid-cell.used {
    border: solid 1px var(--success);
}

.table-grid-cell.not-used {
    /*border: solid 1px transparent;*/
    background-color: var(--table-head-bg);
    opacity: 0.7;
}

.table-grid-cell .box_title {
    width: 100%;
    color: var(--success);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.table-grid-cell .box_title label.switch {
    margin-right: 5px;
}

.table-grid-cell.not-used .box_title {
    color: inherit;
}

.inv-quantity-box a.plain.info {
    font-weight: bold;
    border: solid 1px;
    border-radius: 3px;
    padding: 0 5px;
}


/*.inv-quantity-box.used:before, .inv-quantity-box-pipelined.used:before{*/


/*    content: "+";*/


/*    position: absolute;*/


/*    top: -3px;*/


/*    left: 3px;*/


/*    font-size: 1.2em;*/


/*    line-height: 1.2em;*/


/*    color: var(--success);*/


/*    font-weight: bold;*/


/*}*/


/* The switch - the box around the slider */

label.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
}


/* Hide default HTML checkbox */

label.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


/* The slider */

label.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border: solid 1px;
}

label.switch .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 1px;
    bottom: 1px;
    background-color: var(--bg-primary);
    -webkit-transition: .4s;
    transition: .4s;
}

label.switch input:checked + .slider {
    background-color: #2196F3;
    border-color: var(--shortcut-link-border-color);
}

label.switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

label.switch input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}


/* Rounded sliders */

label.switch .slider.round {
    border-radius: 16px;
}

label.switch .slider.round:before {
    border-radius: 50%;
}

#modal-lt-editor {
    z-index: 11111;
}

.ppc-tabs .nav-link,
.ppc-panel-tabs .nav-link {
    font-size: var(--body-size);
}


.inline-font {
    display: inline-block;
    font-size: 22px;
}

.wrap-white-spaces {
    white-space: pre-wrap;
}

.gap-space-half{
    gap: calc(var(--spacing_half) / 2);
}

.gap-space {
    gap: var(--spacing_half);
}
.gap-space2x {
    gap: var(--spacing);
}
.profile-tile {
    background-color: var( --primary-light);
    border: 1px solid var(  --group-item-primary-bg) !important;
    position: relative;
    .overlay-btn {
        position: absolute;
        background: none;
        border: none;
        right: var(--spacing_half);
        bottom: var(--spacing_half);
        &:hover {
            color: var(--primary);
        }

    }
}

.intercom-lightweight-app-launcher {
    bottom: 0px !important;
    right: 0px !important;
}

.intercom-with-namespace-ik3ju4 {
    bottom: 0px !important;
    right: 10px !important;
}

.settlment_period {
    margin-bottom: 50px;
}

.sl-product{
    display: flex;
    flex-direction: row;
    gap: var(--spacing_half);

    .product-image-container{
        display: flex;
        flex-direction: column;
        width: 48px;
        align-items: center;
        justify-content: center;

        .image_url{
            /*padding: 5px;*/

            img{
                max-width: 100%;
            }
        }

    }

    .sl-product-content{
        display: flex;
        flex-direction: column;

        > p {
            margin-bottom: 0;
        }

        .product-ids{
            > * {
                &:not(:first-child){
                    margin-left: -0.25rem;

                    &:before{
                        content: "/";
                    }
                }
            }
        }

        .product-account-info{
            span.label{
                padding: 0.1rem;
            }

            .flag-icon{
                top: 1px;
            }
        }
    }
}

.table-analytics{
    p{
        margin-bottom: 0;
    }

    .numbers{
        font-weight: bold;
    }
}
/** END OF STYLE.CSS --- Keep this line at end of file **/