/*PREVENT SIDEBAR CLICKING*/
nav.sidebar-nav::after {
    content: " ";
    width: 100%;
    position: absolute;
    height: 100%;
    z-index: 1;
    top: 0;
}

.ready nav.sidebar-nav::after {
    display: none;
}

.customtab2::after {
    content: " ";
    width: 100%;
    position: absolute;
    height: 36px;
    z-index: 1;
}

.ready .customtab2::after {
    display: none;
}

/* END PREVENT SIDEBAR CLICKING*/

#sidebarnav .mdi-quadcopter:before {
    font-family: 'icomoon';
    content: "\e900";
    left: -5px;
    top: -10px;
    font-size: 30px;
    position: absolute;
}

#sidebarnav .mdi-view-quilt:before {
    font-family: 'icomoon';
    content: "\e901";
    left: -5px;
    top: -10px;
    font-size: 30px;
    position: absolute;
}

#sidebarnav .mdi-cube-unfolded:before {
    font-family: 'icomoon';
    content: "\e902";
    left: -2px;
    top: -10px;
    font-size: 25px;
    position: absolute;
}

#sidebarnav .mdi-view-quilt,
#sidebarnav .mdi-cube-unfolded,
#sidebarnav .mdi-quadcopter {
    position: relative;
}

/* Beh part */
@media only screen and (max-width: 511px) {
    #p3-add-button {
        float: unset !important;
    }
}

@media only screen and (max-width: 425px) {
    .p3-p-m-0 {
        margin-bottom: 0px !important;
    }

    .p3-filter-r-m-b {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .p3-sm-card-block {
        padding: 10px !important;
    }
}

.footer {
    font-size: 12px;
}

.custom-select {
    background: #fff url(../assets/images/custom-select.png) right 0.75rem center no-repeat;
}

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

.p3-filter-header-title {
    color: #55ce63 !important;
}

.p3-filter-r-m-b {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.p3-p-m-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.p3-filter-header-title:focus,
.p3-filter-header-title:hover {
    text-decoration: underline !important;
}

.breadcrumb>li>a {
    color: #777 !important;
}

.hidden {
    display: none;
}

.selected_pagination,
.pagination li.active {
    padding: 5px 10px;
    border-radius: 4px;
    border: 0px;
    background: #55ce63;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.beh_pagination,
.pagination li {
    padding: 5px 10px;
    border-radius: 4px;
    border: 0px;
    background: #fff;
    color: #777;
    cursor: pointer;
    user-select: none;
}

.pagination li {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

.pagination li a {
    color: #777;
}

.pagination li.active a {
    color: #fff;
}

.footer_pagination_page {
    margin-top: 10px;
    /* display: inline-block; */
    display: block;
    float: right;
}

.footer_pagination_entry {
    margin-top: 10px;
    /* display: inline-block; */
    display: block;
    float: left;
}

.select2-container-multi .select2-choices {
    background-image: none !important;
}

.navbar li>a>i {
    /*color: #000 !important;*/
    color: #676767 !important;
}

.topbar {
    background: #fff !important;
}

.topbar .btn-business-deluxe-plus {
    color: #fff;
    background-color: #2a2b75;
}

.topbar .btn-business-deluxe-plus .mini-count {
    background-color: red;
    border-radius: 100%;
    width: 15px;
    height: 15px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: -6px;
    top: -6px;
    padding: 10px;
}

.card-no-border .sidebar-nav>ul>li>a.active {
    background: #fff;
}

/* .navbar-collapse{
	box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.1) ;
} */

#full-logo>img {
    width: 135px !important;
}

#img-logo>img {
    width: 35px !important;
}

/* .topbar .navbar-header {
    box-shadow: none !important;
} */

/* .dataTables_info,
.dataTables_paginate,
.dataTables_length,
#DataTables_Table_0_filter {
    display: none !important;
} */

.no-sort::after {
    display: none !important;
}

.no-sort {
    pointer-events: none !important;
    cursor: default !important;
}

/* #imagemodalbody iframe{
	min-width: 320px !important;
} */

a.btn.btn-success,
a.btn.btn-inverse,
a.btn.btn-danger,
a.btn.btn-info,
a.btn.btn-success:hover,
a.btn.btn-inverse:hover,
a.btn.btn-danger:hover,
a.btn.btn-info:hover {
    color: #ffffff;
}

.p3_scrollbox {
    display: block;
    height: 120px;
    overflow: auto
}

.asColorPicker-dropdown {
    max-width: 500px !important;
}

.p3_vcenter {
    vertical-align: middle !important;
}

iframe .left-sidebar,
iframe .topbar {
    display: none !important;
}

input::placeholder {
    color: #c7c7c7 !important;
}

.table>tbody>tr>td {
    vertical-align: middle;
}

#subsku-container,
#table-generator {
    border: 1px solid #eceeef;
}

.solo-button,
.solo-button:hover {
    background-color: #55ce63 !important;
}

#hide_first_trash>td>table.manipulate>tbody>tr:first-child>td>[manipulate="remove"],
#hide_first_trash>td>table.manipulate>tbody>tr:first-child>td>table>tbody>tr:first-child>td>[manipulate="remove"],
#hide_first_trash>td>table.manipulate>tbody>tr>td:nth-child(2)>table>tbody>tr:first-child>td>[manipulate="remove"] {
    display: none !important;
}

.table .confirmation {
    cursor: pointer;
}

#footer_column #page_content_footer {
    cursor: auto !important;
}

.timeline-badge.info,
.badge-info {
    background-color: #55ce63;
}

.timeline-right {
    min-height: 45px;
}

.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    font-size: 15px !important;
}

.topbar .top-navbar .navbar-nav>.nav-item>.nav-link>img {
    margin-right: 5px !important;
}

.topbar ul.dropdown-user li a:hover {
    color: #55ce63;
}

.gradient-footer {
    background-color: transparent !important;
    bottom: 0px !important;
}

/* swal 2 */
.swal2-buttonswrapper button {
    border-radius: 22px !important;
}

.p3-positive {
    background-color: #fff !important;
    border: 1px solid #55ce63 !important;
    color: #55ce63 !important;
}

.p3-positive:hover {
    background-color: #fff !important;
    border: 1px solid #52c65f !important;
    color: #52c65f !important;
}

.p3-negative {
    background-color: #fff !important;
    border: 1px solid #dd6b55 !important;
    color: #dd6b55 !important;
    margin-right: 10px;
}

.p3-negative:hover {
    background-color: #d46752 !important;
    border: 1px solid #d46752 !important;
    color: #fff !important;
}

/* swal 2 */

.sweet-alert .cancel,
.sweet-alert .confirm {
    border-radius: 22px !important;
}

.p3-optimized-font>tr>td {
    /* max-width: 300px !important; */
    max-width: 275px !important;
}

.dropdown-menu>a {
    font-size: 15px !important;
    cursor: pointer;
}

.p3-subtitle {
    color: #888;
    font-size: 90% !important;
}

.p3-subdesc {
    /* color: #333; */
    color: #54667a;
    font-size: 90% !important;
}

.p3-subcamel {
    text-transform: capitalize !important;
}

.btn.active:focus,
.btn:active:focus,
.btn:focus {
    outline: unset !important;
    outline: -webkit-focus-ring-color auto 0px !important;
    outline-offset: 0px !important;
}

.el-overlay>ul>li>a {
    border-radius: 25px !important;
}

.p3-img-rounded {
    border: 1px solid #DDDDDD;
    border-radius: 8px;
}

.ss_img {
    cursor: pointer;
    transition: 0.3s;
}

.ss_img:hover {
    opacity: 0.7;
}

.ss_modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999;
    /* Sit on top */
    /* padding-top: 100px; */
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

.ss_modal_content {
    width: 80%;
    max-width: 700px;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* END JUN MODIFY */



@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.ss_close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 1.5rem;
    font-weight: bold;
    transition: 0.3s;
}

/* JUN ADD  */
#ss_img_left {
    padding: 5px;
    height: auto;
    position: absolute;
    left: 10px;
    top: 50%;
    background: transparent;
    color: #fff;
    font-size: 25px;
}

#ss_img_right {
    padding: 5px;
    height: auto;
    position: absolute;
    right: 10px;
    top: 50%;
    background: transparent;
    color: #fff;
    font-size: 25px;
}

/* END JUN ADD  */

.ss_close:hover,
.ss_close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px) {
    .ss_modal_content {
        width: 80%;
    }

    #ss_img_left {
        left: 0;
    }

    #ss_img_right {
        right: 0;
    }
}

.autocount-btn {
    margin-top: 0px !important;
}

.container-fluid {
    padding-top: 38px;
}

/* .page-headerless {
    margin-left: 60px;
    padding: 0px !important;
} */

.page-headerless .page-titles {
    padding-top: 5px;
    padding-bottom: 15px;
}

.page-headerless>.container-fluid {
    padding-top: 65px;
    padding-bottom: 55px;
}

.page-headerless .action-text-back {
    margin-left: 0px !important;
}

.page-headerless .sticky-scroll-frame {
    background: #ffffff;
    position: fixed;
    width: 100%;
    z-index: 19;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

#page-headerless-sidebar {
    display: block !important;
    z-index: 20 !important;
}

#page-headerless-sidebar .scroll-sidebar {
    padding-top: 0px;
}

#page-headerless-sidebar .navbar-header .navbar-brand {
    padding: 12px;
    margin: 0px;
}

#page-headerless-menu {
    padding: 10px;
    float: left;
    width: 60px;
    height: 55px;
    text-align: center;
    display: table;
    position: absolute;
    top: 0px;
    box-shadow: -4px 2px 10px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

#page-headerless-menu i {
    display: table-cell;
    vertical-align: middle;
    font-size: 21px;
}

.sticky-scroll {
    max-width: 1200px;
    display: block;
    margin: auto;
    padding: 10px 30px;
}

.sticky-scroll .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

.page-headerful>.container-fluid {
    padding-top: 95px;
}

.page-headerful>.sticky-scroll-frame {
    background: #f0f4f7;
    position: fixed;
    width: 100%;
    z-index: 19;
}

.page-headerful>.sticky-scroll-frame>.sticky-scroll>.page-titles {
    padding-bottom: 0px;
}

.page-headerful>.sticky-scroll-frame>.sticky-scroll {
    margin: 0px;
    padding-top: 36px;
    padding-bottom: 20px;
    max-width: none;
}

.page-headerful .card-listing .listing-table-sticky {
    z-index: 18;
    position: fixed;
    top: 162px;
    right: 0px;
    background-color: white;
    margin: auto;
    box-shadow: 0px 0px 10px #ddd;
}

.page-headerful .card-filter {
    margin-bottom: 10px;
}

.page-headerful .card-listing .customtab {
    padding-top: 4px;
}

.page-headerful .card-listing .container-order th {
    padding-top: 15px !important;
}

.page-headerful .card-listing .container-order #bulk_action_tab {
    padding-top: 15px !important;
}

.page-headerless .card-listing .listing-table-sticky {
    position: fixed;
    z-index: 18;
    top: 55px;
    left: 0px;
    right: 0px;
    background-color: white;
    margin: auto;
    box-shadow: 0px 0px 10px #ddd;
}

.listing-table-sticky #bulk_action_tab .input-group input,
.listing-table-sticky #bulk_action_tab .input-group select {
    max-width: none;
}

.listing-table-sticky #bulk_action_tab .input-group select {
    width: 200px;
}

.listing-table-sticky tr {
    display: block;
    padding-left: 50px;
}

.card-listing tbody tr td:nth-child(n+2):last-child {
    min-width: 130px;
}

.card-listing tbody tr td:first-child {
    width: 10px !important;
}

.card-listing .p3-optimized-font tr td:first-child {
    width: 10px;
}

#backToTop {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #55ce63;
    color: #F3F4F4;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 5px;
}

#backToTop:hover {
    background-color: #6c7c7c;
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.emailUs {
    cursor: pointer;
    z-index: 50;
    top: 40%;
    right: -3px;
    position: fixed;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.emailUs:hover {
    -moz-transform: translate(-3px);
    -webkit-transform: translate(-3px);
    transform: translate(-3px);
}

/*IE 10+ FIX */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .page-titles .breadcrumb>.list-inline-item:first-child>.btn-group {
        min-width: 160px;
    }

    .user-card-list .card {
        display: block;
    }
}

/* #END IE FIX*/

/* TOOLTIPS CSS */
.tooltip-tools {
    display: flex;
    justify-content: space-between;
}

.tooltip-msg {
    display: none;
    position: absolute;
    width: 290px;
    right: 15px;
    background-color: #2f3d4a;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    z-index: 2;
}

.tooltip-popup:hover .tooltip-msg,
.tooltip-msg:hover {
    display: block;
}

#tooltip-settings:hover:after:hover {
    opacity: 1;
}

#tooltip-settings:hover:after,
#tooltip-cache:hover:after,
#tooltip-logout:hover:after,
#tooltip-help:hover:after {
    color: #fff;
    text-align: center;
    background-color: #2c3e50;
    border-radius: 8px;
    position: absolute;
    font-size: 13px;
    padding: 4px 8px;
    top: -20px;
}

/* DUPLICATE
.sidebar-nav ul li a {
	padding: 16px 25px;
}

.sidebar-nav > ul > li > a i {
	margin-right: 13px;
} */

#tooltip-settings:hover:after {
    content: 'Settings';
    left: 10px;
}

#tooltip-cache:hover:after {
    content: 'Clear Cache';
    left: 76px;
}

#tooltip-logout:hover:after {
    content: 'Logout';
    right: 10px;
}

#tooltip-help:hover:after {
    content: 'Help';
    right: 10px;
}

#tooltip-settings:hover:before,
#tooltip-cache:hover:before,
#tooltip-logout:hover:before,
#tooltip-help:hover:before {
    content: "";
    border-top: 10px solid #2f3d4a;
    border-left: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: 3px;
}

#tooltip-settings:hover:before {
    left: 30px;
}

#tooltip-cache:hover:before {
    left: 108px;
}

#tooltip-logout:hover:before,
#tooltip-help:hover:before {
    right: 30px;
}

/* #END TOOLTIPS CSS */

/*BREADCRUMB ACTION BUTTON*/
.btn-action {
    position: relative;
    padding: 6px 9px;
    color: #009efb;
    background-color: #ffffff;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    width: 35px;
    height: 35px;
    border-radius: 60px;
    margin-right: 10px !important;
    border: 1px solid #009efb !important;
}

.btn-action i {
    vertical-align: middle;
}

.btn-action:hover {
    background: #34b5ff;
    color: #ffffff;
}

.btn-action,
.btn-action:visited,
.btn-action:hover,
.btn-action:active {
    outline: 0 !important;
}

.btn-action:hover:before {
    position: absolute;
    top: 46px;
    background: #2f3d4a;
    color: #ffffff;
    left: -14px;
    width: 60px;
    border-radius: 10px;
    height: 25px;
    padding: 5px;
    font-size: 12px;
}

.btn-action:hover:after {
    content: "";
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #2f3d4a;
    border-right: 10px solid transparent;
    position: absolute;
    top: 28px;
    left: 7px;
}

button.required,
button.config_dob_req {
    width: 100px;
    border: none !important;
    text-align: left;
}

button.open_in_new_tab {
    width: 145px;
}

#viewstore_btn {
    margin-right: 12px !important;
}

.action-text-back:hover:before {
    content: "Back";
    z-index: 51;
}

.action-text-more:hover:before {
    content: "More";
    padding: 4px;
    z-index: 51;
}

.action-text-preview:hover:before {
    content: "Preview";
    z-index: 51;
}

.action-text-clearcache:hover:before {
    content: "Clear Cache";
    z-index: 51;
    width: auto;
    left: -23px;
}

.action-text-viewstore-sticky:hover:before {
    content: "View Store";
    z-index: 51;
    width: auto;
}


.action-text-viewstore:hover:before {
    position: absolute;
    bottom: -30px;
    background: #2f3d4a;
    color: #ffffff;
    width: 80px;
    text-align: center;
    border-radius: 10px;
    height: 25px;
    padding: 4px 5px;
    font-size: 12px;
    left: -12px;
    bottom: -18px;
}

.action-text-viewstore:hover:after {
    content: "";
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #2f3d4a;
    border-right: 10px solid transparent;
    position: absolute;
    left: 18px;
    bottom: 5px;
}

.action-text-viewstore:hover:before {
    content: "View Store";
    z-index: 51;
}

.action-text-calculate:hover:before {
    content: "Calculate total bought";
    z-index: 51;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    left: -50px;
}

/* #END BREADCRUMB ACTION BUTTON*/

.tooltip-pre:hover:before {
    content: "You have to ship out ready stock product within 3 days. \A Switch on Pre-Order tag if you need more time to ship.";
    white-space: pre;
    background: #2f3d4a;
    color: #ffffff;
    border-radius: 5px;
    padding: 5px;
    font-size: 11px;
    /* display: inline-block; */
    display: block;
    float: right;
}

.tooltip-pre:hover:after {
    content: "";
    border-top: 5px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #2f3d4a;
    display: inline-block;
}

.page-titles>.col-12 {
    display: table;
}

.page-titles .dropdown-menu {
    right: 0;
    left: auto !important;
}

.page-titles .btn-action {
    border-color: transparent !important;
}

.icon-pencil-edit {
    cursor: pointer;
    line-height: inherit !important;
    color: #54667a;
    font-size: 18px !important;
}

#main-wrapper .mini-sidebar .sidebar-nav>ul>li:nth-last-child(-n+3) {
    display: list-item;
}

#main-wrapper .sidebar-nav>ul>li:nth-last-child(-n+3) {
    display: none;
}

.sidebar-nav .has-arrow::after {
    -webkit-transform: rotate(45deg) translate(0, -50%);
    -ms-transform: rotate(45deg) translate(0, -50%);
    -o-transform: rotate(45deg) translate(0, -50%);
    transform: rotate(45deg) translate(0, -50%);
}

.sidebar-nav ul li a {
    padding: 15px 25px;
}

.sidebar-nav>ul>li>a i {
    margin-right: 15px;
}

.sidebar-nav ul li ul li a {
    padding-left: 40px;
    padding-right: 10px;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover {
    color: #55ce63 !important;
    cursor: pointer;
}

.mini-sidebar .sidebar-nav ul li:hover ul li a {
    padding-left: 15px;
    padding-right: 15px;
}

.topbar .top-navbar .app-search input:focus {
    width: 300px;
}

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

.nav-view-store>a {
    display: table;
    padding-left: .75rem;
    padding-right: .75rem;
    height: 100%;
}

.nav-view-store>a>span {
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
    color: #2c2b2e;
}

.nav-view-store>a>span>i {
    font-size: 25px;
    color: #a0a0a2;
    margin-right: 5px;
}

.nav-view-store>a>span>i:before {
    line-height: 66px;
}

ul#search_result_content {
    position: absolute;
    width: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 2px;
    padding: 5px 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

ul#search_result_content>li {
    list-style: none !important;
    z-index: 999;
    padding: 8px;
    margin: 4px 5px;
    border: 1px dashed #d9d9d9;
}

ul#search_result_content>li:first-child,
ul#search_result_content>li:last-child {
    border: none;
    margin: 0px;
}

ul#search_result_content>li:last-child {
    padding: 0px;
}

.search_result_content_title {
    padding: 10px 5px 0px 5px !important;
    margin: 0px !important;
    border: none !important;
}

.btn-more-edge {
    left: auto;
    right: 0;
}

.search_result_content_title>h5 {
    margin: 0px;
}

.search_result_close {
    margin: 5px;
}

#searchin_res_pad span {
    display: block;
}

.spinner-frame {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

.spinner {
    display: table-cell !important;
    vertical-align: middle;
}

.topbar,
#appstore-topbar {
    box-shadow: 10px 0px 15px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #ddd;
}

.top-navbar {
    padding: 0px !important;
}

.left-sidebar {
    box-shadow: none !important;
}

.left-sidebar,
.sidebar-footer,
.mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active {
    border-right: 1px solid rgba(120, 130, 140, 0.18);
}

.sidebar-nav ul li {
    line-height: 1.2em;
}

.sidebar-nav ul li a.active {
    color: #55ce63 !important;
}

.sidebar-nav>ul>li>a .label {
    margin-top: 0px;
}

.sidebar-nav ul li ul li a .label {
    float: right;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover {
    background-color: #55ce63;
    color: #ffffff !important;
}

.footer {
    background: #f0f4f7;
    border-top: 0px;
}

.footer b {
    color: transparent !important;
}

.container-full-width {
    max-width: none !important;
}

.container-fluid {
    max-width: 1200px;
}

.container-fluid .listing-table-sticky>tr {
    max-width: 1200px !important;
    padding-top: 0px;
    padding-bottom: 0px;
}

.container-large,
.container-dashboard-sg,
.container-marketplace,
.container-order,
.container-product,
.container-report,
.container-success {
    max-width: 1500px !important;
    margin: auto !important;
}

.container-dashboard-sg,
.container-dashboard-reseller {
    padding-top: 45px;
}

.container-product .listing-table-sticky>tr {
    max-width: 1500px !important;
    margin: auto !important;
}

.container-fb-shop-nav {
    max-width: 900px;
}

.page-layout-manager,
.container-layout-manager {
    min-width: 1200px !important;
}

.container-order,
.container-order .listing-table-sticky>tr {
    max-width: 1500px !important;
    margin: auto !important;
}

.container-small,
.container-small .listing-table-sticky>tr {
    max-width: 800px !important;
    margin: auto !important;
}

.container-xsmall,
.container-xsmall .listing-table-sticky>tr {
    max-width: 600px !important;
    margin: auto !important;
}

.container-order-info {
    padding-top: 0px !important;
}

.customtab2 li a.nav-link.active,
.customtab2 li a.nav-link:hover,
.tabs-vertical li .nav-link.active,
.tabs-vertical li .nav-link:hover,
.tabs-vertical li .nav-link.active:focus {
    background: #55ce63
}

.modal {
    padding: 0px !important;
}

.modal-title {
    margin-left: auto;
    margin-right: auto;
}

.modal-header {
    min-height: 50px;
}

.modal-body {
    padding: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    min-width: 90%;
}

.responsive-modal .modal-body {
    max-width: 100%;
    min-width: initial;
}

.modal-content {
    border: 0px;
}

.modal-dialog {
    margin: 0px !important;
    /* min-width: 100% !important; */
    /* min-height: 100% !important; */
    max-width: initial;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

.modal-small {
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-small .modal-dialog {
    /* min-width: 200px !important; */
    /* min-height: 500px !important; */
    height: auto;
    width: auto;
    background-color: #ffffff;
    margin: auto !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 10000;
    border-radius: 10px;
}

.modal .pagination {
    margin: auto;
}

.modal .pagination ul {
    margin-bottom: 0px;
    padding: 0px;
}

.modal-small .modal-body {
    max-height: 80vh;
    overflow: auto;
}

.modal-product-form .modal-dialog {
    overflow: auto;
}

.modal-product-form .vtabs .tabs-vertical {
    min-width: 150px;
}

.modal-product-form .vtabs .tab-content {
    width: 100%;
}

.modal-image-frame {
    display: table;
    min-height: 550px;
}

.modal-image-body {
    display: table-cell;
    vertical-align: middle;
}

.modal-image-prev,
.modal-image-next {
    display: inline-block;
    width: auto;
}

.modal-image-content {
    display: inline-block;
    width: 80%;
}

.modal-image-content>img {
    max-width: 100%;
    padding: 10px;
}

.modal-image-download {
    display: table-footer-group;
}

/*MODAL STICKY TOP*/
.modal-sticky-top .modal-content {
    height: 100vh;
}

.modal-sticky-top .modal-body {
    overflow-y: scroll;
}

/*#END MODAL STICKY TOP*/

.order-submit-button {
    text-align: right;
}

.order-top-icon {
    border-radius: 10px 0px 0px 10px;
}

.order-list-table th {
    line-height: 20px !important;
}

.order-list-table .d-date,
.order-list-table .d-moment,
.order-list-table .d-time {
    display: block;
}

.order-list-table .d-moment {
    font-weight: 500;
}

.order-list-item {
    background-color: #f7f7f7;
    padding: 10px 0px;
    margin: 0px 0px 15px 0px;
    border-radius: 3px;
}

.order-list-item:last-child {
    margin-bottom: 0px;
}

.order-product-image {
    max-height: 75px;
    width: auto;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.order-product-name {
    font-weight: 400;
    font-size: 15px;
}

.order-product-model {
    font-size: 14px;
}

.order-product-option-frame {
    border-radius: .25rem;
    border: 1px solid rgba(0, 0, 0, .15);
    margin-bottom: 10px;
    padding: 10px;
}

.order-product-option-frame>div {
    margin-bottom: 10px;
}

.order-product-option-frame>div:last-child {
    margin-bottom: 0px;
}

.order-product-option-frame label {
    margin-bottom: 0px;
}

.order-product-uPrice {
    font-size: 15px;
    padding: 0px;
    text-align: center;
}

.order-product-quantity {
    font-size: 15px;
    text-align: center;
}

.order-product-tPrice {
    /* font-weight: 400; */
    font-size: 15px;
    padding: 0px;
    text-align: center;
}

.order-product-title {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 0px;
    margin-bottom: 15px;
}

.order-hidden-title {
    display: none;
}

.mobile-line {
    display: none;
}

.mobile-pricing {
    margin: 0px;
    padding: 0px;
}

.invoice-info>div,
.parcel-info>div,
.order-info>div,
.dropship-order>div,
.abandoncart-info>div {
    padding: 15px 10px;
    border-bottom: 1px dashed #dadada;
}

.invoice-info>div:last-child,
.order-info>div:last-child,
.parcel-info>div:last-child,
.dropship-order>div:last-child,
.abandoncart-info>div:last-child {
    border-bottom: none;
}

.order-info>div>p,
.order-info>div>address {
    margin-bottom: 0;
}

.order-info-icon {
    width: 25px;
    text-align: left;
}

.order-info .order-delivery-info .delivery-comment .title {
    width: 100%;
    margin-bottom: 0;
    font-weight: 400;
    color: #2c2b2e;
    margin-top: 10px;
}

.timeline:before {
    left: 28% !important;
}

.timeline-left {
    width: 23% !important;
    text-align: center;
}

.timeline-right {
    width: 67% !important;
    float: right !important;
}

.timeline-left,
.timeline-right {
    padding: 10px !important;
}

.timeline>li>.timeline-badge {
    left: 28% !important;
}

.timeline-badge {
    top: 10px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 42px !important;
    margin-left: -20px !important;
}

.timeline-body>p {
    font-size: 15px;
    font-weight: 400;
}

/*TIMELINE LEFT ARROW*/
.timeline-right:before {
    content: " " !important;
    display: inline-block !important;
    position: absolute !important;
    top: 26px !important;
    border-top: 8px solid transparent !important;
    border-right: 0 solid rgba(120, 130, 140, 0.13) !important;
    border-bottom: 8px solid transparent !important;
    border-left: 8px solid rgba(120, 130, 140, 0.13) !important;

    right: auto !important;
    left: -8px !important;
    border-right-width: 8px !important;
    border-left-width: 0 !important;
}

.timeline-right:after {
    content: " " !important;
    display: inline-block !important;
    position: absolute !important;
    top: 27px !important;
    border-top: 7px solid transparent !important;
    border-right: 0 solid #fff !important;
    border-bottom: 7px solid transparent !important;
    border-left: 7px solid #fff !important;

    right: auto !important;
    left: -7px !important;
    border-right-width: 7px !important;
    border-left-width: 0 !important;
}

/* #END TIMELINE LEFT ARROW*/

.order-history-mobile {
    display: none;
}

#history {
    word-break: break-word;
}

.timeline-left>.badge {
    white-space: initial;
    max-width: 120px;
}

.order-info-desktop {
    display: block;
}

.order-info-mobile {
    display: none;
}

.invoice-info .title,
.parcel-info .title,
.order-info .title,
.dropship-order .title,
.abandoncart-info .title {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
}

.invoice-info #invoice-generate_desktop,
.parcel-info #button-apply #button-edit #button-edit-weight {
    float: right;
}

.order-pricing>div>div:first-child {
    width: 78%;
    display: inline-block;
    text-align: right;
}

.order-pricing>div>div:last-child {
    width: 20%;
    display: inline-block;
    text-align: right;
}

.order-pricing>div:last-child {
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 20px;
}

.order-function-button .btn {
    width: 100%;
    word-break: break-word;
    white-space: initial;
    height: 100%;
}

.meta-tag-keyword .bootstrap-tagsinput {
    width: 100%;
    min-height: 38px;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, .15);
}

.switch-pos-left .switchery-small {
    float: left;
}

.switch-pos-left label {
    padding: 0px 0px 5px 0px;
    width: 100%;
}

.ms-container {
    width: 100% !important;
}

.related-product .ms-selectable:before {
    content: "Non-Related";
    font-weight: 400;
}

.related-product .ms-selection:before {
    content: "Related";
    font-weight: 400;
}

.youmightneedthis .ms-selectable:before {
    content: "Non-Needed";
    font-weight: 400;
}

.youmightneedthis .ms-selection:before {
    content: "You Might Need These Products";
    font-weight: 400;
}

#body-invoice {
    background: linear-gradient(to right, #B7F8DB 0%, #50A7C2 100%);
    color: #000;
    line-height: 23px;
}

.invoice-container {
    padding: 70px;
}

.invoice-header {
    position: relative;
}

.invoice-sheet {
    background: #ffffff;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 120px 0px rgba(83, 120, 149, 0.6);
}

.invoice-store-logo {
    width: auto;
    height: 50px;
}

.invoice-product-image {
    width: 30px;
}

.invoice-product-listing-title,
.invoice-product-listing {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.invoice-product-listing-title div {
    font-weight: 400;
}

.invoice-product-listing>div,
.invoice-product-listing-title>div,
.invoice-total>div {
    padding-left: 5px;
    padding-right: 5px;
}

.invoice-product-model {
    font-size: 12px !important;
}

.invoice-info {
    text-align: left;
}

.invoice-store-name {
    font-weight: 400;
    font-size: 18px;
}

.invoice-number {
    text-align: right;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 25px;
}

.invoice-comment {
    padding: 10px 40px 0px 5px;
}

.invoice-product {
    position: relative;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.invoice-total {
    font-weight: normal;
}

/*OVERRIDE TABLESAW TITLE HEADER*/
.tablesaw thead th {
    text-transform: none !important;
}

/*OVERRIDE RESPONSIVE TABLE HEADING */
.table-responsive>table>thead>tr>th>a {
    color: #54667a;
}


.order-billing-address {
    background: #f5f5f5;
    padding: 20px;
}

/*BUTTON FRAME */
.report-row-icon>div {
    padding: 0px;
    min-height: 60px;
    border-radius: 5px;
}

.report-row-icon>div>a {
    vertical-align: middle;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
}

.report-row-icon>div>a>.row {
    display: table;
    margin-left: auto;
    margin-right: auto;
    margin: 10px;
}

.report-row-icon>div>a>.row>div:first-child,
.report-row-icon>div>a>.row>div:last-child {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.report-row-icon>div>a>.row>div:first-child {
    text-align: center;
    width: 50px;
    border-radius: 5px 0px 0px 5px;
    font-size: 30px;
    text-shadow: 0px 0px 6px #bdc3c7;
    box-shadow: 2px 1px 15px rgba(0, 0, 0, 0.2)
}

.report-row-icon>div>a>.row>div:last-child {
    border-radius: 0px 5px 5px 0px;
    text-shadow: 0px 0px 10px #34495e;
    box-shadow: 2px 1px 15px rgba(0, 0, 0, 0.2)
}

/* #END BUTTON FRAME */


/* BUTTON COLOR - ADVANCE SALES REPORT*/
.report-advance-sales>div>a>.row>div:first-child {
    background: #3a3a3a;
    color: #ffffff;
}

.report-advance-sales>div>a>.row>div:last-child {
    background: #BA68C8;
}

/* BUTTON COLOR - SALES REPORT */
.report-sales>div>a>.row>div:first-child {
    background: #3a3a3a;
    color: #ffffff;
}

.report-sales>div>a>.row>div:last-child {
    background: #3498db;
}

/* BUTTON COLOR - CUSTOMERS REPORT */
.report-customers>div>a>.row>div:first-child {
    background: #3a3a3a;
    color: #ffffff;
}

.report-customers>div>a>.row>div:last-child {
    background: #1abc9c;
}

/* BUTTON COLOR - PRODUCT REPORT */
.report-products>div>a>.row>div:first-child {
    background: #3a3a3a;
    color: #ffffff;
}

.report-products>div>a>.row>div:last-child {
    background: #fcad26;
}

/* BUTTON COLOR - AFFILIATES REPORT */
.report-affiliates>div>a>.row>div:first-child {
    background: #3a3a3a;
    color: #ffffff;
}

.report-affiliates>div>a>.row>div:last-child {
    background: #e74c3c;
}

#payment-modal .vertical-list-item img {
    padding: 0px;
    width: 200px;
}

.payment-listing-image>a>img,
.payment-listing-image>img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 5px;
}

.listing-empty {
    text-align: center;
    font-weight: 400;
    padding-top: 40px !important;
}

.card-filter .card-block {
    padding: 25px;
    padding-left: 27px;
}

.card-filter .ti-angle-down,
.card-filter .ti-angle-up {
    position: absolute;
    width: 100%;
    height: 68px;
    display: table;
    top: -25px;
}

.card-filter .ti-angle-down:before,
.card-filter .ti-angle-up:before {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.card {
    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #ddd !important;
    border-radius: 10px;
}

.card-listing .card-block {
    padding-top: 0px;
}

.card-listing .FOF-frame {
    margin-top: 20px !important;
}

.card-listing #bulk_action_tab {
    padding: 13px;
    padding-top: 25px;
    vertical-align: middle;
}

.card-listing .table-responsive .custom-control {
    margin: 0;
    display: block;
}

.card-listing .table-responsive thead tr th {
    /* line-height: 40px; */
    vertical-align: middle;
    /* padding-top: 25px; */
    min-height: 85px;
    padding-top: 35px;
    padding-bottom: 35px;
}

/*REMOVE INNER CARD CSS*/
.card .card {
    box-shadow: none;
    border: 0px !important;
    border-radius: 0px;
}

.user-card-list>div>.card {
    border-radius: 10px;
}

.user-card-list .el-card-item .el-overlay-1 img {
    border-radius: 10px 10px 0px 0px;
}

.el-overlay-1 {
    border-radius: 10px 10px 0px 0px;
}

.el-element-overlay .el-card-item .el-overlay-1 .el-info>li a:hover {
    background: #27ae60;
    border-color: #27ae60;
}

.user-card-mobile-label {
    width: 40% !important;
    position: absolute !important;
    top: -2px;
    /* 0px original - changed*/
    right: 0;
}

.user-card-icon {
    margin-bottom: 0px !important;
    padding-bottom: 25px;
}

.user-card-icon>div:first-child {
    padding-top: 25px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
}

.user-card-icon>div:first-child>i {
    background: #34495e;
    color: #ffffff;
    border-radius: 100px;
    display: table-cell;
    vertical-align: middle;
    font-size: 32px;
    width: 60px;
    height: 60px;
}

.user-card-title {
    font-size: 13px;
    /* 15px original - changed due to some text too long */
}

.template-list>div:first-child .el-card-item {
    border-radius: 10px;
}

.template-list .active_template .recommend {
    display: none;
}

.template-list .el-card-content {
    position: relative;
}

.template-list .recommend {
    background-color: #5acc5a;
    font-weight: 500;
    font-size: 11px;
    color: white;
    padding: 6px;
    position: absolute;
    top: -43px;
    left: 0;
    width: 100%;
}

.gradient-1 {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 100%),
        linear-gradient(-25deg, rgba(238, 147, 104, 1), rgba(255, 0, 0, 0) 45%),
        linear-gradient(140deg, rgba(46, 199, 121, 1), rgba(255, 0, 0, 0) 45%),
        linear-gradient(140deg, rgba(190, 215, 121, 1), rgba(190, 215, 121, 1) 100%) !important;
}

.gradient-2 {
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 100%),
        radial-gradient(circle at 105% 100%, rgba(73, 24, 136, 0.4), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 100% -10%, rgb(191, 239, 255), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at -25% -25%, rgba(255, 83, 205, 0.5), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at -25% -25%, rgba(73, 24, 136, 0.5), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 5% 70%, rgba(73, 24, 136, 0.5), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 63% 27%, rgba(136, 45, 255, 0.3), rgba(255, 255, 255, 0) 35%),
        radial-gradient(circle at 60% 90%, rgba(255, 81, 81, 0.4), rgba(255, 255, 255, 0) 50%),
        linear-gradient(0deg, rgb(165, 200, 241), rgb(165, 200, 241) 100%) !important
}

.gradient-3 {
    background: linear-gradient(180deg, #e7ffff, #f9e7ff 100%) !important;
}

.gradient-4 {
    background: linear-gradient(-50deg, #e1e4ff, #feffea 100%) !important;
}

.gradient-5 {
    background: linear-gradient(180deg, #fcffec, #e6fcff 100%) !important;
}

.gradient-card {
    background-color: rgba(255, 255, 255, 0.6)
}

.page-headerless.gradient-page {
    min-height: 100vh !important;
    padding-bottom: 60px !important;
}

.page-headerless.gradient-page .footer {
    box-shadow: none;
}

#image-manager {
    width: 100%;
    border-style: none;
    padding: 10px;
    min-height: 925px !important;
}

.image-manager-tree .jstree-default-small .jstree-anchor {
    width: auto;
}

.image-manager-tree #tree {
    max-width: 300px;
}

#image_iframe {
    width: 95%;
    height: 100%;
    border-style: none;
}

.image-iframe-body {
    overflow: hidden;
}

.image-manager-table {
    overflow: scroll;
    /* max-height: 500px; Beh took away - 30 Sept */
    max-height: 500px;
    /* Jun put it back - 30 Sept */
    height: 500px;
}

.overview-list-frame {
    padding-right: 0px;
    border-right: 1px solid rgba(120, 130, 140, 0.13);
}

.overview-list-frame>div {
    border-radius: 10px 0px 0px 10px !important;
}

.overview-list-frame>.card>.overview-list>div>.overview-list-item {
    margin: 10px;
}

.overview-list-frame>.card>h3 {
    margin-bottom: 20px;
}

.overview-list {
    margin: auto;
    width: auto;
}

.overview-list>div {
    padding: 0px;
}

.overview-list>div:nth-child(odd)>.overview-list-item {
    margin-left: 0px;
    margin-right: 8px;
}

.overview-list>div:nth-child(even)>.overview-list-item {
    margin-left: 8px;
    margin-right: 0px;
}

.overview-list-item {
    border-radius: 10px;
    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.2);
    margin-top: 9px;
    margin-bottom: 9px;
}

.overview-list-item>div {
    padding: 0px;
    display: table;
}

.overview-title>div {
    font-weight: 400;
    padding-left: 8px;
}

.overview-icon,
.overview-combined-icon,
.overview-title>div,
.overview-list-data {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.overview-list-data>div {
    border-radius: 60px;
    font-weight: 400;
    color: #fff;
    min-width: 50px;
    text-align: center;
    margin: auto;
    padding: 0px 10px;
    margin-right: 10px;
    position: absolute;
    right: 0;
    top: 30%;
}

.overview-icon,
.overview-combined-icon {
    vertical-align: middle;
    text-align: center;
    font-size: 1.3em;
}

.overview-combined-icon>i:first-child {
    margin-right: 5px;
}

.overview-combined-icon>i:last-child {
    position: absolute;
    right: 7px;
    font-size: 13px;
    top: 10px;
}

.overview-list-item>div:first-child {
    background: #3a3a3a;
    color: #ffffff;
    border-radius: 10px 0px 0px 10px;
}

.dashboard-sg-left .overview-list {
    padding-left: 10px;
    padding-right: 10px;
}

.dashboard-tutorial>.card {
    border: 1px solid #cccccc !important;
    margin-bottom: 10px;
}

.dashboard-tutorial>.card:last-child {
    margin-bottom: 30px;
}

.dashboard-tutorial h5 {
    margin-bottom: 15px;
}

.tutorial-close {
    position: absolute;
    top: 6px;
    right: 8px;
    cursor: pointer;
    color: #2368dc !important;
    font-size: 16px;
    transition: all 0.5s;
}

.tutorial-close:hover {
    color: red;
    transition: all 0.5s;
}

.tutorial-content {
    margin-bottom: 8px;
}

.tutorial-icon-business:before,
.tutorial-icon-shipping:before,
.tutorial-icon-payment:before,
.tutorial-icon-product:before,
.tutorial-icon-marketplace:before,
.tutorial-icon-facebook:before {
    font: normal normal normal 15px/1 "Material Design Icons";
    border-radius: 100%;
    padding: 8px;
    margin-right: 10px;
    color: #ffffff;
}

.tutorial-icon-business:before {
    content: "\F0D6";
    background-color: #6c5ce7;
}

.tutorial-icon-shipping:before {
    content: "\F53D";
    background-color: #4b7bec;
}

.tutorial-icon-payment:before {
    content: "\F19B";
    background-color: #eb3b5a;
}

.tutorial-icon-product:before {
    content: "\F3D6";
    background-color: #ffb142;
}

.tutorial-icon-marketplace:before {
    content: "\F497";
    background-color: #1abc9c;
}

.tutorial-icon-facebook:before {
    content: "\F20C";
    background-color: #3b5998;
}

.top-ten-img {
    max-width: 36px;
}

.top-ten-table-reseller {
    max-height: 550px;
}

.tbody-smalltext {
    font-size: 0.9em;
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
    border-radius: 10px 10px 0px 0px;
}

.profile-tab li a.nav-link,
.customtab li a.nav-link {
    padding: 15px;
}

.top-ten-table-sg>div {
    height: 740px;
    overflow: auto;
}

#toptenorder_table tbody>tr:hover,
#toptenproduct_table tbody>tr:hover,
#toptencustomer_table tbody>tr:hover {
    border-left: 4px solid #fff;
}


#layout-manager {
    min-width: 900px;
    background-color: #343434;
}

.layout-tab,
.layout-tab:active,
.layout-tab:focus {
    background-color: #1d1d1d;
    border-color: transparent;

}

.layout-tab:hover {
    background-color: #ffffff;
    color: #000000 !important;
}

#layout-manager .btn-group>button {
    border-right: 2px solid #fff;
}

#layout-manager .btn-group>button:last-child {
    border-right: none;
}

#layout-manager .card-block>div {
    margin-top: 8px;
    padding: 10px;
    border-radius: 5px;
    color: #ffffff;
}

#layout-manager .web-content-module-list {
    width: 22%;
    padding-left: 15px;
    padding-right: 15px;
}

#layout-manager .web-content-layout {
    width: 78%;
    padding-left: 15px;
    padding-right: 15px;
}

#layout-manager #home,
#layout-manager #cate,
#layout-manager #info,
#layout-manager #product,
#layout-manager #others {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.layout-module-special,
.layout-module-general {
    background: none;
}

.layout-module-special>.layout-header-title,
.layout-module-general>.layout-header-title {
    background-color: #1d1d1d;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

#layout-manager .mvc {
    position: absolute;
    right: 30px;
    top: 40px;
}

#layout-manager .draggable:hover {
    cursor: move;
}

#layout-manager .draggable span:hover {
    cursor: pointer;
}

.layout-web-navigation {
    padding: 5px 35px;
    background-color: #c7c7c7;
    border-radius: 5px 5px 0px 0px;
}

.web-navigation-button {
    display: inline-block;
    color: #484848;
    width: 23%;
}

.web-navigation-button i {
    margin: 0px 4px;
}

.web-navigation-button div:first-child {
    background: #616161;
    color: white;
    padding: 3px 11px;
    border-radius: 5px;
    display: inline-block;
}

.web-navigation-button div:first-child i {
    cursor: pointer;
}

.web-navigation-button div:last-child {
    display: inline-block;
    margin-left: 10px;
}

.web-navigation-input {
    border-radius: 2px;
    width: 77%;
    float: right;
    background-color: #ffffff;
    padding: 7px 10px;
    height: 28px;
}

.web-navigation-input i {
    color: grey;
}

.layout-module-general>.card-block,
.layout-module-special>.card-block {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 10px 10px;
    background-color: #1d1d1d;
    box-shadow: inset 0px 0px 13px 0px rgba(0, 0, 0, 0.45);
}

.layout-web {
    border-radius: 5px;
    background-color: #535353;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-right: 0px;
}

.layout-web .card,
.layout-header-title>div {
    box-shadow: inset 0px 0px 13px 0px rgba(0, 0, 0, 0.45);
    background-color: #1d1d1d;
    border-radius: 5px;
}

.layout-web-header,
.layout-web-footer {
    height: 80px;
    width: 100%;
    display: table;
    text-align: center;
    background: repeating-linear-gradient(-40deg,
            #222,
            #222 10px,
            #333 10px,
            #333 20px);
}

.layout-web-header>div,
.layout-web-footer>div {
    display: table-cell;
    border-radius: 5px;
    vertical-align: middle;
}

.layout-web-header>div {
    vertical-align: middle;
    padding: 10px 20px;
}

.layout-web .col-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

.layout-web .col-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 40%;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

.layout-header-title {
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    position: relative;
}

.layout-header-title>div {
    padding: 10px;
}

.layout-header-logo,
.layout-header-banner,
.layout-web-footer .draggable {
    background-color: #616161;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.layout-header-logo {
    position: relative;
    width: 29%;
    float: left;
}

.layout-header-banner {
    position: relative;
    width: 69%;
    float: right;
}

.layout-header-banner span:first-child,
.layout-header-logo span:first-child {
    position: absolute;
    left: 10px;
    cursor: pointer;
}

.layout-web-left .draggable,
.layout-web-right .draggable,
.layout-web-top .draggable,
.layout-web-bottom .draggable {
    background-color: #616161;
    margin-top: 10px;
    margin-right: 18px;
    margin-left: 18px;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.layout-module-special .card-block,
.layout-module-general .card-block {
    padding-left: 12px;
    padding-right: 12px;
}

.layout-module-special .card-block>div,
.layout-module-general .card-block>div {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    text-align: left;
    background-color: #616161;
    font-weight: 400;
}

.layout-module-special .card-block>div>i,
.layout-module-general .card-block>div>i {
    float: left;
    color: #fff;
    padding-right: 10px;
}

.layout-web-left,
.layout-web-right {
    height: 100%;
    margin: 0px;
    padding-bottom: 18px;
}

.layout-web-footer {
    margin-top: 30px;
    padding: 0px 20px;
}

.product-form-cusgroup {
    width: 150px;
    min-width: 150px;
}

.product-form-quantity {
    width: 90px;
    min-width: 90px;
}

.product-form-priority {
    width: 90px;
    min-width: 90px;
}

.product-form-price {
    width: 90px;
    min-width: 90px;
}

.product-form-date {
    min-width: 200px;
    width: 50%;
}

.product-note-empty {
    padding: 60px;
}

.product-form-labels {
    padding-top: 5px;
    padding-bottom: 5px;
}

.product-form-table td {
    display: table-cell;
    vertical-align: middle;
}

#table_special_price tr td,
#table_discount_price tr td,
#table_special_price tr th,
#table_discount_price tr th {
    padding-left: 0px;
}

.product-form-categories,
.product-form-manufacturer {
    margin-bottom: 25px;
}

.categories-content>.jstree,
.brand-content>.jstree {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 10px;
    max-height: 300px;
    overflow-y: scroll;
}

.product-form-categories #tree>ul,
.product-form-manufacturer #tree_manu>ul {
    top: 0px;
}


#whatsinthebox_content,
#highlight_content {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 10px;
    border-radius: .25rem;
    height: 300px;
    overflow: auto;
}

#whatsinthebox_content,
#highlight_content,
#seo_content {
    background-color: #f7f7f7;
}

.product_highlight>span,
.product_whatbox>span {
    font-style: italic;
    color: #aaa;
    text-align: center;
    display: block;
}

#seo_content {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 15px;
    word-wrap: break-word;
}

#seo_title {
    color: #1a0dab;
    font-size: 18px;
    font-weight: 400;
}

#seo_title>span {
    font-style: italic;
    color: #aaa;
}

.seo_link {
    color: #006621;
}

#seo_description {
    font-size: 13px;
    color: #545454;
}

#seo_description>span {
    font-style: italic;
    color: #aaa;
}

#priority_special_price,
#quantity_discount_price,
#priority_discount_price {
    padding: 8px 12px;
}

#option-modal-new .modal-body {
    max-width: 1000px;
}

#subsku-container>table {
    min-width: 780px
}

#subsku-container tr select,
#subsku-container tr input {
    margin-top: 5px;
    margin-bottom: 5px;
    min-width: 80px;
}

.meta-tag-keyword .label-info {
    background-color: #2f3d4a;
}

/* UI BUTTON BORDER FIX*/
.container-product-form .btn-secondary {
    border: 1px solid rgba(0, 0, 0, .15);
}

.container-product-form .btn-success {
    border: 1px solid #55ce63;
}

.container-product-form .btn-inverse {
    border: 1px solid #2f3d4a;
}

/* #END UI BUTTON BORDER FIX*/

.template-download>td {
    vertical-align: middle;
}

.template-download>.preview {
    width: 100px;
    height: 100px;
}

/* ENHANCE SELECT2  */
.select2-container-multi .select2-choices {
    min-height: 38px !important;
}

.select2-container.form-control {
    border: 0px;
}

.select2-container {
    padding: 0px;
}

.select2-choices {
    display: flex;
    align-items: center;
}

/* ENHANCE SELECT2  */

.cke_wysiwyg_frame {
    width: 100% !important;
}

.select2-container .select2-choice {
    height: 36px !important;
}

.select2-container .select2-choice>.select2-chosen {
    height: 36px;
    display: table-cell !important;
    vertical-align: middle;
}

.select2-customer-group {
    padding: 0px;
    display: block;
    min-height: auto;
}

.select2-customer-group>div {
    padding: 4px 7px;
}

.select2-customer-group>div:nth-child(odd) {
    background-color: #f8f8f8;
}

#stock_status_select {
    border-radius: 0.25em;
}

.menu-manager .menu-main-icon>i,
.menu-manager .menu-top-icon>i,
.menu-manager .menu-footer-icon i {
    display: block;
    height: 7px;
    color: rgba(120, 130, 140, 0.3);
}

.menu-manager .menu-main-icon>i:first-child,
.menu-manager .menu-top-icon>i:nth-child(2),
.menu-manager .menu-footer-icon>i:last-child {
    color: rgba(120, 130, 140, 1);
}

.menu-manager .nav-tabs .nav-item {
    margin-bottom: -2px;
}

.menu-manager-nestable li {
    list-style: none;
    margin: 5px 0px;
}

.menu-manager-nestable .menu-row {
    display: table;
    width: 100%;
    height: 30px;
    border: 1px solid rgba(120, 130, 140, 0.13);
    border-radius: 5px;
}

.menu-manager-nestable .menu-row>div {
    display: table-cell;
    vertical-align: middle;
}

.menu-manager-nestable .menu-row>.menu-edit,
.menu-manager-nestable .menu-row>.menu-delete {
    text-align: center;
    width: 32px;
}

.menu-manager-nestable .menu-edit {
    border-right: 1px solid rgba(120, 130, 140, 0.13);
}

.menu-manager-nestable .menu-name {
    padding-left: 10px;
    height: 30px;
}

.menu-manager-nestable .menu-delete {
    border-left: 1px solid rgba(120, 130, 140, 0.13);
    font-size: 8px;
    color: #dd6b55;
}

.menu-manager-nestable .menu-delete:hover {
    cursor: pointer;
}

.menu-manager-nestable .menu-delete>span,
.menu-manager-nestable .menu-edit>a {
    display: table;
    width: 100%;
    text-align: center;
}

.menu-manager-nestable .menu-delete>span>i,
.menu-manager-nestable .menu-edit>a>i {
    display: table-cell;
    vertical-align: middle;
}

#imagemodalbody>iframe {
    display: block;
    width: 100%;
    min-height: 445px !important;
    border: 1px solid #ddd;
}

.banner-image-manager {
    padding: 0;
    margin: 0;
    background: #f7f7f7;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.banner-image-manager>#container {
    padding: 10px;
}

.banner-image-manager>#container>#menu {
    margin-bottom: 5px;
}


.banner-image-manager>#container>#column-left {
    background: #fff;
    border: 1px solid #ccc;
    width: 20%;
    height: 380px;
    overflow: auto;
    display: inline-block;
}

.banner-image-manager>#container>#column-right {
    background: #fff;
    border: 1px solid #ccc;
    float: right;
    width: 78%;
    height: 380px;
    overflow: auto;
    text-align: center;
}

.banner-image-manager>#container>#column-right div {
    text-align: left;
    padding: 5px;
}

.banner-image-manager>#container>#column-right a {
    display: inline-block;
    text-align: center;
    border: 1px solid #EEEEEE;
    cursor: pointer;
    margin: 5px;
    padding: 5px;
    width: 95px;
}

.banner-image-manager>#container>#column-right a>img {
    width: 100%;
}

.banner-image-manager>#container>#column-right a.selected {
    border: 1px solid #7DA2CE;
    background: #EBF4FD;
}

.banner-image-manager>#container>#column-right input {
    display: none;
}

.banner-image-manager .button {
    display: inline-block;
    padding: 8px 5px 8px 25px;
    margin-right: 5px;
    background-position: 5px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.banner-image-manager .button:hover {
    background-color: #EEEEEE;
}

.banner-image-manager .thumb {
    padding: 5px;
    width: 105px;
    height: 105px;
    background: #F7F7F7;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    cursor: move;
    position: relative;
}

.banner-image-manager>#dialog {
    display: none;
}

.ads_content img {
    border-radius: 10px;
    box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #ddd !important;
}

.ads_content>.row {
    margin: 0px;
}

.dashboard-announcements {
    max-height: 2780px;
    overflow: auto;
}

.dashboard-announcements .new_icon {
    background: red !important;
    color: #fff !important;
}

.dashboard-announcements .p3_nna_bullet:first-child {
    background: none;
    padding-top: 0px;
}

.dashboard-announcements .p3_nna_bullet {
    list-style: none;
    padding: 15px 0px;
    background-image: linear-gradient(to right, #ddd 50%, rgba(255, 255, 255, 0) 20%);
    background-position: top;
    background-size: 12px 1px;
    background-repeat: repeat-x;
}

.dashboard-announcements .p3_nna_bullet img {
    max-width: 100% !important;
    border-radius: 10px;
    box-shadow: 1px 0px 10px rgba(221, 221, 221, 0.8);
}

.dashboard-announcements .p3_nna_bullet>h3 {
    line-height: 22px;
}

.dashboard-announcements .p3_nna_bullet>h3>a {
    display: block;
}

.dashboard-announcements .p3_nna_bullet>h3>span {
    font-size: 12px;
    background: #ddd;
    color: #5d5d5d;
    border-radius: 4px;
    padding: 3px 7px;
}

.dashboard-announcements .p3_nna_bullet>p {
    margin: 0px;
}

.dashboard-announcements .p3_nna_bullet>p>a {
    display: block;
    text-align: right;
    font-weight: 400;
    font-size: 12px;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

.dashboard-announcements .p3_nna_bullet>p>a:before {
    font-family: FontAwesome;
    content: "\f0a9";
    padding-right: 5px;
}

.dashboard-announcements .p3_nna_bullet>p>a:hover {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

.webstore-banner img {
    border-radius: 10px;
}

.setting-banner img {
    border-radius: 10px;
    margin-bottom: 30px;
}

#connect_fb img {
    width: 200px;
    cursor: pointer;
}

.fb-store {
    padding: 10px;
    border: 1px solid #DDDDDD;
}

.fb-store-icon img {
    width: 60px;
    height: 60px;
}

.fb-store-icon span {
    font-weight: 400;
    font-size: 20px;
}

.fb-store-button {
    display: table;
    line-height: 60px;
    text-align: right;
}

.fb-store-button>button {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    line-height: 25px;
    margin-right: 10px;
}

.fb-store-select>div {
    display: inline-block;
}

.fb-store-select select {
    min-width: 250px;
    max-width: 350px;
}

.fb-store-icon span,
.fb-store-select>div:last-child {
    padding-left: 20px;
}

.fb-store-notice {
    color: #FF0000;
    animation: blinker 1.5s linear infinite;
}

#modal-fbconnect .modal-body {
    text-align: center;
}

#modal-fbconnect iframe {
    width: 100%;
    height: 550px;
    max-width: 550px;
    margin: auto;
}

@keyframes blinker {
    50% {
        opacity: 0.3;
    }
}

.apps-invoice-table td>input,
.apps-payment-table td>input {
    padding: 4px;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
}

.apps-payment-table {
    width: 100%;
}

.overflow {
    overflow: auto;
}

#marketplace_iframe,
#report_iframe {
    padding: 10px;
    min-height: 750px;
}

#marketplace-channel-selection .select2-choices,
.marketplace-filter .select2-choices {
    padding-top: 2px !important;
}

.marketplace-filter .select2-search-choice {
    margin: 5px !important;
}

#marketplace-channel-selection .select2-search-field {
    height: 28px;
}

#marketplace-channel-selection .select2-search-field input {
    padding-top: 3px;
    padding-bottom: 3px;
}

.FOF-frame {
    display: table;
    border-radius: 10px;
    box-shadow: 2px 2px 18px #cecece;
    width: 100%
}

.FOF-img {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 45%;
}

.FOF-img>img {
    height: 300px;
}

.FOF-text {
    text-align: center;
    height: 400px;
    display: table-cell;
    vertical-align: middle;
    padding-right: 100px;
    text-align: left;
    width: 55%;
}

.FOF-text-title {
    color: #ffffff;
    font-size: 25px;
    margin-bottom: 10px;
}

.FOF-text-message {
    font-size: 15px;
    margin-bottom: 15px;
}

.FOF-text-caption {
    font-size: 15px;
    margin-bottom: 30px;
}

.FOF-text-title,
.FOF-text-message,
.FOF-text-caption {
    color: #6d6d6d;
    font-weight: 600;
}

.FOF-button {
    margin-top: 40px;
    margin-bottom: 40px;
}

.FOF-button>a {
    font-weight: 500;
    color: rgba(50, 50, 50, 0.8) !important;
    border: 1px solid rgba(38, 50, 56, 0.56);
    padding: 6px 10px;
    padding-right: 15px;
    border-radius: 6px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    background: #f8f8ff;
    text-transform: capitalize;
}

.FOF-button>a:before,
.success-next-title span:before {
    padding-left: 4px;
    padding-right: 8px;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f0a4";
    animation: nudge 0.5s linear infinite alternate;
    color: #2c3e50;
}

#module_my_app .FOF-frame {
    margin: 30px auto;
    width: auto;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.1);
}

#module_my_app .FOF-text {
    text-align: center;
    width: 40%;
}

.appstore-app #module_my_app .FOF-frame {
    box-shadow: none;
}

.appstore-app #module_my_app .FOF-img {
    text-align: center;
    width: 35%;
}

.appstore-app #module_my_app .FOF-text .FOF-text-message {
    margin-bottom: 0px;
    overflow: hidden;
    animation: appstore-FOF-message 3s;
    color: #45a750;
}

.appstore-app #module_my_app .FOF-text {
    text-align: left;
    padding-right: 0px;
}

.appstore-app .FOF-text-title,
.appstore-app .FOF-text-message {
    color: #333333;
    font-weight: 400;
    text-shadow: none;
}

.appstore-app .FOF-text-title {
    color: #25622d;
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .15em solid transparent;
    /* The typwriter cursor */
    white-space: nowrap;
    /* Keeps the content on a single line */
    animation:
        typing 1.5s steps(35, end),
        blink-caret 0.5s 5;
    width: 260px;
}

/* The typing effect */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 260px
    }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    0% {
        border-color: transparent
    }

    50% {
        border-color: #55ce63
    }

    100% {
        border-color: transparent
    }
}

@keyframes appstore-FOF-message {
    0% {
        height: 0px;
    }

    80% {
        height: 0px;
    }

    100% {
        height: 20px;
    }
}

.container-xsmall .card-listing .FOF-frame {
    padding: 40px 15px 25px 15px;
}

.container-xsmall .card-listing .FOF-img {
    width: 100%;
    text-align: center;
    display: block;
}

.container-xsmall .card-listing .FOF-text {
    width: 100%;
    text-align: center;
    padding-right: 0px;
    display: block;
    height: auto;
    margin-top: 20px;
}

.container-app-modules {
    max-width: none !important;
    padding-left: 0px;
    padding-right: 0px;
}

.container-app-modules>.page-titles {
    padding-left: 15px;
    padding-right: 15px;
    margin: 0px;
}

.tab-content .FOF-frame {
    margin-top: 20px !important;
}

@-webkit-keyframes nudge {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(2px, 0);
    }

    80% {
        transform: translate(-2px, 0);
    }
}

@keyframes nudge {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(2px, 0);
    }

    80% {
        transform: translate(-2px, 0);
    }
}

.footable-row-detail-inner .footable-row-detail-row {
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
}

.footable-row-detail-name {
    font-weight: 500;
}

.template-activated {
    display: block !important;
    margin-bottom: 10px !important;
}

.template_refresh {
    background: #27AE60;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    padding: 30px 0px;
    width: 100%;
    font-weight: 500;
    text-transform: uppercase;
}

.sql-invoice-nestable table tr td {
    padding-right: 5px;
}

.sql-invoice-nestable>.col-12>.card>.card-block>div>center>table>tbody>tr:nth-child(n+2):nth-child(-n+8)>td:nth-child(3) {
    padding-left: 15px;
}

#DetailTable {
    min-width: 800px;
}

.share-buttons {
    /* display: inline-block; */
    display: block;
    float: right;
}

.share-fb,
.share-twitter,
.share-linkedin {
    padding: 1px 8px;
    border-radius: 4px;
    color: #ffffff;
    float: right;
    margin-left: 4px;
    font-size: 12px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.share-fb:hover,
.share-twitter:hover,
.share-linkedin:hover {
    color: #ffffff;
}

.share-fb:focus,
.share-fb:visited,
.share-twitter:focus,
.share-twitter:visited,
.share-linkedin:focus,
.share-linkedin:visited {
    color: #ffffff;
}

.share-fb {
    background-color: #4267b2;
}

.share-twitter {
    background-color: #1da1f2;
}

.share-linkedin {
    background-color: #283e4a;
}

.asColorPicker-trigger {
    right: 0px !important;
}

.vertical-listing-style {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
}

.vertical-listing-style li:first-child {
    border-radius: 5px 5px 0px 0px;
}

.vertical-listing-style li {
    border-bottom: 1px solid #f1f1f1;
}

.vertical-listing-style li:last-child {
    border-bottom: 0px;
}

.vertical-listing-style li a {
    padding: 15px;
    display: table;
}

.vertical-listing-style li a:hover {
    background-color: #f5f5f5;
}

.vertical-listing-title {
    background: #f9f9f9;
    font-weight: 500;
    text-align: center;
    padding: 15px;
}

.vertical-list-item img {
    padding: 0px 10px;
    display: table-cell;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 220px;
}

.vertical-list-item span {
    padding: 0px 10px;
    color: #54667a;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.container-app-modules {
    background: #F3F7FA;
    padding-top: 0px;
    padding-bottom: 130px;
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
}

.app-module {
    position: relative;
    margin-top: 25px;
}

.myapp-button {
    margin: 45px auto;
    display: block;
    padding: 15px 30px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #ffffff;
    border-radius: 30px;
    background-color: #55ce63;
    font-size: 14px;
    font-weight: bold;
}

.myapp-button:hover,
.myapp-topinfo>button:hover {
    background-position: right center;
}

.myapp-button:active,
.myapp-topinfo>button:active {
    background-color: #52bb5e;
}

.myapp-topinfo {
    display: table;
    width: 100%;
    max-width: 1180px;
    margin: auto;
    margin-bottom: 15px;
    text-align: center;
}

.myapp-topinfo>button {
    float: right;
    padding: 6px 15px;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
    border-radius: 30px;
    background-color: #55ce63;
    font-size: 14px;
    font-weight: bold;
    width: 135px;
}

.myapp-topinfo>h3 {
    float: left;
    width: 135px;
    text-align: left;
}

.myapp-topinfo .search-bar-frame {
    position: relative;
    float: right;
    margin-right: 10px;
    padding-right: 5px;
    width: 180px;
}

.search-bar-frame i {
    position: absolute;
    top: 8px;
    left: 5px;
    color: #c7cbd7;
    transition: all 0.3s;
}

.myapp-topinfo #myapp_search {
    width: 100%;
    height: 30px;
    border: 0;
    transition: all 0.3s;
    background: transparent;
    border-bottom: 1px solid #c7cbd7;
    color: #c7cbd7;
    float: right;
    padding-left: 30px;
    padding-right: 5px;
}

.search-bar-frame input:hover,
.search-bar-frame input:focus {
    padding-left: 5px !important;
}

.search-bar-frame:hover i,
.search-bar-frame input:focus+i {
    left: -20px;
}

.container-app-modules>#module_my_app {
    padding-top: 40px;
    padding-bottom: 44px;
    background: #323A4B;
    box-shadow: inset 0px -5px 10px -5px rgba(0, 0, 0, 0.5);
    min-height: 420px;
}

.carousel-item-frame {
    max-width: 1440px;
    min-height: 600px;
    margin: auto;
}

/* MIN HEIGHT TO DISPLAY APPSTORE PROPERLY WITHOUT ITEM */
.appstore-frame {
    min-height: 700px;
    text-align: center;
}

.app-module:hover .module-list-title {
    color: #54667a;
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

.module-list-title {
    text-align: center;
    color: #8c8c8c;
    font-size: 20px;
    font-weight: 400;
    transition: color .2s ease-in;
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    -webkit-transition: color .2s ease-in;
}

.module-slider-wrapper {
    max-width: 100%;
    position: relative;
    overflow: hidden;
}

.app-module:hover .controlL {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 1;
}

.app-module:hover .controlR {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 1;
}

.controlL,
.controlR {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    display: flex;
    font-size: 30px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    opacity: 0;
}

.controlL {
    left: 0px;
}

.controlR {
    right: 0px;
}

.controlL>.fa-chevron-left-extra,
.controlR>.fa-chevron-right-extra {
    align-self: center;
    position: relative;
    color: #54667a;
    text-shadow: 2px 2px 0px rgba(84, 102, 122, 0.5);
    height: auto;
    transition: transform .1s ease-out 0s, color .2s ease-in;
    -moz-transition: transform .1s ease-out 0s, color .2s ease-in;
    -o-transition: transform .1s ease-out 0s, color .2s ease-in;
    -webkit-transition: transform .1s ease-out 0s, color .2s ease-in;
}

.app-module .controlL,
.app-module .controlR {
    top: 55%;
}

.carousel-control-next,
.carousel-control-prev {
    font-size: 30px;
    width: 100px;
}

.controlL:hover>.fa-chevron-left-extra,
.controlR:hover>.fa-chevron-right-extra {
    color: #ffffff;
}

.module-item,
.module-item-installed {
    margin: 20px 15px;
    display: inline-block;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    border-radius: 10px;
}

.module-item a:hover {
    color: #27AE60;
}

.module-item-installed:after,
.installed:after {
    content: "INSTALLED";
    background: #2980b9;
    position: absolute;
    top: 0;
    right: 0;
    color: #ffffff;
    padding: 7px 12px;
    border-radius: 0px 10px;
    font-weight: bold;
    font-size: 9px;
    letter-spacing: 1px;
    box-shadow: 0px 1px 10px -3px rgba(0, 0, 0, 0.6);
}

.module-item-installed .module-item-frame {
    height: 100%;
    background: #fff;
}

.module-item-installed .module-name,
.module-item-installed .module-category {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    width: 100% !important;
    text-align: center !important;
}

.module-item-installed .module-name {
    padding-top: 4px !important;
    padding-bottom: 0px !important;
}

.module-item-installed .module-category {
    padding-top: 0px !important;
    padding-bottom: 4px !important;
    display: block !important;
    font-size: 12px;
}

/* .module-item:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
} */

.module-item-frame {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.1);
    width: 270px;
    /* height: 135px; old style */
    height: 165px;
}

.module-item-info {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.module-item-info>div {
    padding-left: 10px;
    padding-right: 10px;
}

.module-item-info .module-name {
    font-weight: 400;
    color: #323a4b;
    padding: 0px;
    padding-top: 5px;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.module-item-info .module-category-frame {
    background: #fff;
    font-size: 12px;
    padding-bottom: 5px;
}

.module-item-info .module-price,
.module-item-info .module-category {
    color: #7f8c8d;
    padding: 0px;
    display: inline-block;
}

.module-item-info .module-price {
    width: 65%;
    text-align: left;
}

.module-item-info .price-comparison,
.module-item-info .plan_info {
    display: inline-block;
}

.module-item-info .module-category {
    width: 30%;
    text-align: right;
    text-transform: capitalize;
}

.plan_info {
    cursor: pointer;
}

.plan_info:hover .mdi::after {
    font-weight: 500;
    background: #fff;
    color: #263238;
    padding: 0px 4px;
    border-radius: 4px;
    margin-left: 5px;
    font-style: normal;
    animation: plan_info 0.3s;
    position: absolute;
    white-space: pre-line;
    padding: 4px 8px;
    box-shadow: 2px 2px 7px -1px rgba(0, 0, 0, 0.3);
}

.plan_info:hover .plan_UnicartBasic::after {
    content: "Applicable for \A Unicart Entreprise Diamond \A and above only";
}

@keyframes plan_info {
    0% {
        opacity: 0;
        margin-left: 0px;
    }

    100% {
        opacity: 1;
        margin-left: 5px;
    }
}

.module-item-info>.module-desc {
    background: #f5f5f5;
    border-top: 1px solid #e8e8e8;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    color: #323a4b;
    height: 86px;
}

.module-item:hover .module-category-frame {
    /* background: #27ae60; */
    background: #555;
    transition: all 0.5s;
    box-shadow: 0px 1px 10px -3px rgba(0, 0, 0, 0.5);
}

.module-item:hover .module-name,
.module-item:hover .module-price span,
.module-item:hover .module-category {
    color: #ffffff !important;
    transition: all 0.5s;
}

.module-item:hover .module-item-info {
    position: absolute;
    -webkit-transform: translateY(-86px);
    transform: translateY(-86px);
    width: 100%;
}

.module-item:hover img {
    box-shadow: none;
}


.module-item img,
.module-item-installed img {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%;
    box-shadow: 0px 3px 10px -3px rgba(0, 0, 0, 0.20);
}

.module-desc span {
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 400;
}

.module-desc span:first-child {
    padding-bottom: 5px;
}

.module-desc div {
    font-size: 10px;
    background: #323A4B;
    color: white;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 8px;
    padding-top: 3px;
    padding-bottom: 2px;
}

.page-appstore .modal-body {
    margin-top: 30px;
}

.appmodule-modal-row:before {
    background: #55ce63;
    top: -10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    padding: 6px;
    color: #fff;
    font-weight: 500;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.1);
    font-size: 18px;
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.module-desc .plan_,
.appmodule-modal-row.plan_::before {
    display: none;
}

.plan_UnicartBasic::before {
    content: "Applicable for Unicart Basic and above";
}

.plan_UnicartPro::before {
    content: "Applicable for Unicart Pro and above";
}

.plan_UnicartProPlus::before {
    content: "Applicable for Unicart Pro Plus and above";
}

.plan_UnicartGold::before {
    content: "Applicable for Unicart Gold and above";
}

.plan_UnicartBusiness::before {
    content: "Applicable for Unicart Business and above";
}

.plan_UnicartBusinessPlus::before {
    content: "Applicable for Unicart Business Plus and above";
}

.plan_UnicartEnterpriseStandard::before {
    content: "Applicable for Unicart Enterprise Standard and above";
}

.plan_UnicartEnterprisePlatinum::before {
    content: "Applicable for Unicart Enterprise Platinum and above";
}

.plan_UnicartEnterpriseDiamond::before {
    content: "Applicable for Unicart Enterprise Diamond and above";
}

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

#appmodule-modal .module-item-frame {
    box-shadow: none;
    border-radius: 0;
    text-align: center;
}

#appmodule-modal .app-module {
    margin-top: 0px;
    height: auto;
}

#appmodule-modal .app-module .module-item {
    margin: 0px 15px;
}

#appmodule-modal .module-item-frame img {
    height: 100%;
    width: auto;
    border: 1px solid #ddd;
    max-width: 270px;
}

#appmodule-modal>.modal-dialog {
    background: linear-gradient(0deg, #f3e7e9, #e3eeff 100%);
    min-height: 100%;
    height: auto;
}

#appmodule-modal .modal-content {
    background: transparent;
}

#appmodule-modal .controlL,
#appmodule-modal .controlR {
    top: 43%;
}

#appmodule-modal .controlL {
    left: -30px;
}

#appmodule-modal .controlR {
    right: -30px;
}

#appmodule-modal #module_0 {
    margin-left: 0px;
    margin-right: 0px;
}

#appmodule-modal #module_0>.module-slider-wrapper>.module-list {
    padding-left: 0px;
    padding-right: 0px;
}

#appmodule-modal #module_0>.module-slider-wrapper>.module-list>.module-item:first-child {
    margin-left: 0px;
}

#appmodule-modal .modal-header {
    background-color: #323A4B;
    box-shadow: 0px 2px 10px rgba(36, 37, 38, 0.32);
    border: none;
}

#appmodule-modal .modal-header>.modal-title,
#appmodule-modal .modal-header>button {
    color: #ffffff;
    opacity: 1;
}

.appmodule-modal-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
}

.appmodule-modal-image,
.appmodule-modal-info {
    font-size: 17px;
    text-align: center;
    font-weight: 400;
    color: #2c2b2e;
}

.appmodule-modal-image .modal-info-name {
    padding-top: 15px;
}

.appmodule-modal-info>.display-table>.display-tablecell {
    vertical-align: top;
}

.modal-info-action button {
    margin-bottom: 20px;
    width: 90%;
    height: 50px;
    font-size: 17px;
}

.price-upgrade {
    font-size: 14px !important;
    color: #2c2b2e !important;
    font-weight: 100;
}

.price-free {
    color: #55ce63 !important;
    font-weight: 500;
}

.price-old {
    /* color: #e74c3c !important; */
    color: #e74c3c;
    text-decoration: line-through;
    margin-right: 5px;
}

.appmodule-modal-row {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    position: relative;
}

.appmodule-modal-screenshot,
.appmodule-modal-desc {
    margin-top: 20px;
    padding: 0px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.appmodule-modal-screenshot>.app-module {
    padding-left: 20px;
    padding-right: 20px;
}

.appmodule-modal-desc label,
.appmodule-modal-desc p,
.appmodule-modal-desc span {
    font-family: inherit !important;
}

.appmodule-modal-desc ul>li>p {
    margin-bottom: 8px;
    color: #000;
}

.appmodule-modal-desc>p>strong {
    font-weight: 500;
}

.appmodule-modal-desc>label {
    font-weight: 500;
}

.page-myapp #appmodule-modal .modal-body {
    margin-top: 35px;
}

.app-direct-install,
.app-direct-upgrade {
    border-radius: 10px !important;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
}

.app-direct-upgrade .sa-icon {
    background-color: #c7ecee;
}

#appstore-topbar {
    position: relative;
    z-index: 50;
    min-height: 70px;
    display: table;
    width: 100%;
}

#appstore-topbar>.appstore-logo {
    width: 200px;
    text-align: center;
    padding-left: 30px;
}

#appstore-topbar>.appstore-logo>img {
    width: 140px;
}

/* #appstore-topbar > .appstore-logo , .appstore-search, .appstore-back, .appstore-search-frame { */
#appstore-topbar>.appstore-logo {
    display: table-cell;
    vertical-align: middle;
}

.appstore-back,
.btn-refer-friend,
.appstore-search-frame {
    display: inline-block;
}

.appstore-logo {
    width: 100%;
}

.appstore-logo>img {
    width: 100%;
}

.appstore-search .btn-refer-friend {
    margin-left: 10px;
}

.appstore-search {
    padding-right: 30px;
    position: relative;
    width: 87%;
    display: table-cell;
    vertical-align: middle;
}

.appstore-search-container {
    margin: auto;
    text-align: center;
}

.appstore-search-frame {
    text-align: center;
    position: relative;
    width: 51%;
}

.appstore-search input {
    border-radius: 100px;
    padding-left: 15px;
    color: rgba(0, 0, 0, 0.50) !important;
    font-size: 13px;
    font-family: "Rubik";
    transition: all 0.5s;
    border: 1px solid #55ce63;
}

.appstore-search input:focus,
.appstore-search-frame:hover input {
    border-color: #55ce63;
    padding-left: 23px;
    font-size: 14px;
}

.appstore-search .btn-search {
    width: 40px;
    right: 2px;
    top: 10px;
    position: absolute;
    cursor: pointer;
    color: rgba(0, 0, 0, .30) !important;
    transition: all 0.5s;
}

.appstore-search-frame:hover .btn-search {
    color: rgba(0, 0, 0, 0.5) !important;
    right: 10px;
}

.appstore-module-title {
    height: 60px;
}

.appstore-module-title>#app_category {
    color: #55ce63;
    float: left;
    margin-left: 60px;
}

.appstore-module-title>.btn-refer-friend {
    float: right;
    margin-right: 60px;
}

.appstore-banner {
    width: 1180px;
    margin: 25px auto;
    background: grey;
}

.appstore-category {
    width: 170px;
    display: inline-block;
    vertical-align: top;
}

.appstore-app {
    width: 87%;
    display: inline-block;
}

.appstore-app-item {
    display: inline-block;
    margin: 5px;
}

.appstore-app>#module_my_app .module-item {
    margin: 15px;
}

.appstore-app .module-item-info {
    text-align: left;
}

.appstore-category-list {
    list-style: none;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 12px 0px;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.1);
    margin-top: 16px;
    text-align: left;
}

.appstore-category-list>li {
    margin-top: 6px;
    margin-bottom: 6px;
    transition: all 0.3s;
    padding-left: 25px;
    padding-right: 5px;
}

.appstore-category-list>li:hover {
    font-weight: 400;
    border-left: 3px solid #55ce63;
    padding-left: 22px;
    color: #55ce63;
}

.apps_status_row,
.apps_package_row {
    padding-top: 14px;
    padding-bottom: 6px;
    border-top: 1px solid #ddd;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}

.apps_status_row label,
.apps_package_row label {
    border-radius: 10px;
    cursor: pointer;
    padding: 4px 8px;
    margin: 5px;
    background-color: #ddd;

}

.apps_package_row label {
    width: 93%;
    color: #fff;
}

.dot {
    height: 13px;
    width: 13px;
    border-radius: 50%;
    display: inline-block;
}

.dot_package_basic {
    background-color: #fcb712;
}

.dot_package_pro {
    background-color: #f68936;
}

.dot_package_pro_2 {
    background-color: #f65c36;
}

.dot_package_pro_plus {
    background-color: #8dc73f;
}

.dot_package_business {
    /* background-color:#007db3; */
    background-color: #3aace2;
}

.dot_package_deluxe {
    background-color: #5c11c1;
}

.dot_package_deluxe_plus {
    background-color: #e40303;
}

.module-packages {
    padding-top: 8px;
    min-height: 31px;
}

#apps_package_all+label {
    background-color: #000;
}

#apps_package_basic+label {
    background-color: #fcb712;
}

#apps_package_pro+label {
    background-color: #f68936;
}

#apps_package_pro_2+label {
    background-color: #f65c36;
}

#apps_package_pro_plus+label {
    background-color: #8dc73f;
}

#apps_package_business+label {
    /* background-color: #007db3; */
    background-color: #3aace2;
}

#apps_package_deluxe+label {
    background-color: #5c11c1;
}

#apps_package_deluxe_plus+label {
    background-color: #e40303;
}

.apps_package_row input[type="radio"]:checked+label {
    box-shadow: 2px 2px #888888 !important;
}

/* WENKANG */

.appstore-category input[type="radio"] {
    display: none;
}

.appstore-category input[type="radio"]:checked+label {
    background-color: #55ce63;
    color: #fff;
}

.appstore-category-list>li.category_selected_highlight {
    font-weight: 400;
    border-left: 3px solid #55ce63;
    color: #55ce63;
}

/* END WENKANG */

.page-appstore {
    background-color: #faf9f2 !important;
    padding-bottom: 0px;
    min-height: auto !important;
    padding-top: 0px !important;
}

.page-appstore #module_my_app {
    max-width: 1300px;
    margin: auto;
}

.page-appstore .container-fluid {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}

.carousel-indicators {
    position: relative;
    margin: 0;
    bottom: 0;
}

.page-myapp .carousel-indicators {
    bottom: -6px;
}

.carousel-next,
.carousel-prev {
    color: #54667a;
    position: absolute;
    top: 46%;
    font-size: 30px;
    margin: 10px;
    text-shadow: 2px 2px 0px rgba(84, 102, 122, 0.5);
}

.carousel-next:hover,
.carousel-prev:hover {
    color: #fff;
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

#spinner-spin {
    text-align: center;
    min-height: 420px;
    margin-top: 210px;
}

.marketplace-paidExt .module-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.marketplace-paidExt .el-overlay-1 {
    margin-bottom: 10px !important;
}

.marketplace-paidExt .el-card-item {
    padding-bottom: 0px;
}

.marketplace-paidExt .module-category-frame {
    display: table;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
}

.marketplace-paidExt .module-price {
    text-align: left;
    display: table-cell;
}

.marketplace-paidExt .price-old {
    margin-right: 0px;
}

.marketplace-paidExt .module-category {
    text-align: right;
    display: table-cell;
}


.display-table {
    display: table;
    height: 100%;
    width: 100%;
}

.display-tablecell {
    display: table-cell;
}

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

.vertical-align-center {
    vertical-align: middle;
}

.vertical-align-top {
    vertical-align: top;
}

@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

.product-catalog-navframe {
    padding-bottom: 15px;
}

.product-catalog-navframe ul {
    list-style: none;
    padding: 0;
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    width: 100%;
    min-width: 160px;
}

.product-catalog-navframe ul li {
    display: block;
    position: relative;
    float: left;
    width: 100%;
}

/* This hides the dropdowns */
.product-catalog-navframe li ul {
    display: none;
    text-align: left;
}

.product-catalog-navframe ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    white-space: nowrap;
    background: #55ce63;
    color: #ffffff;
    border-radius: 5px;
    white-space: initial;
}

.product-catalog-navitem i {
    padding-right: 10px;
}

.product-catalog-navitem>li>a {
    border: 1px solid #27AE60;
}

.product-catalog-navitem .vertical-listing-style a {
    background: #ffffff;
    color: #27AE60;
    font-weight: 400;
    text-transform: none;
    border-radius: 0px;
    padding: 10px;
}

.product-catalog-navitem ul li:first-child>a {
    border-radius: 5px 5px 0px 0px;
}

.product-catalog-navitem ul li:last-child>a {
    border-radius: 0px 0px 5px 5px;
}

.product-catalog-navframe ul li a:hover {
    background: #27AE60;
    color: #ffffff;
}

/* Remove float from dropdown lists */
.product-catalog-navframe li:hover li {
    float: none;
}

.product-catalog-navframe li:hover li a:hover {
    background: #27AE60;
    color: #ffffff;
}

.product-catalog-navframe .main-navigation li ul li {
    border-top: 0;
}

.product-catalog-navframe ul ul ul {
    left: 100%;
    top: 0;
}

.product-catalog-navitem {
    margin: 5px;
}

.product-catalog-navitem .vertical-listing-style li {
    border-bottom: none;
}

.product-catalog-navtab-left {
    right: 0;
}

.product-catalog-navtab2-left {
    right: 100%;
    left: auto !important;
}

.product-catalog-title {
    margin: 25px;
    text-align: center;
    font-size: 21px;
    font-weight: 400;
}

.product-catalog-navitem>li>.product-catalog-category {
    padding-left: 10% !important;
}

.product-catalog-item div {
    margin-bottom: 10px;
}


.product-catalog-item .carousel-item-frame {
    min-height: auto;
}

.product-catalog-item-frame {
    padding: 15px;
    background: #f5f5f5;
    border-radius: 10px;
    box-shadow: 2px 2px 15px -5px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.product-catalog-item .view_product img,
.product-catalog-item .view_product span,
.product-catalog-item button {
    display: block;
    text-align: center;
    margin: 10px auto;
}

.product-catalog-footer {
    width: 100%;
}

.page-product-catalog .footer_pagination_page {
    float: right;
}

.page-product-catalog .footer_pagination_entry {
    float: left;
}

.page-product-catalog .carousel-app {
    width: 100%;
    border-radius: 10px;
    background-color: #596275;
}

.page-product-catalog .module-item {
    width: 240px;
    box-shadow: 3px 3px 12px -5px #000000b8;
}

.page-product-catalog .carousel-prev {
    color: #fff;
}

.page-product-catalog .carousel-next {
    color: #fff;
}

.page-product-catalog .module-item img {
    width: auto;
}

.page-product-catalog .carousel-content {
    margin: 20px auto 0px auto;
}

.page-product-catalog .carousel-inner {
    margin: auto;
}

.page-product-catalog .carousel-indicators {
    padding-bottom: 20px;
}

.product-catalog-item-frame .view_product span {
    font-weight: 400;
    font-size: 13px;
    height: 60px;
}

.product-catalog-gotli>li>a:after {
    padding-left: 4px;
    padding-right: 8px;
    font-family: FontAwesome;
    content: "\f0da";
    position: absolute;
    right: 10px;
}

.product-catalog-arrow>a>span {
    display: block;
}

.product-catalog-arrow>a>span:after {
    padding-left: 4px;
    padding-right: 8px;
    font-family: FontAwesome;
    content: "\f0da";
    position: absolute;
    right: 0;
}

.product-catalog-navframe li:hover li a:hover span {
    color: #ffffff;
}

.kumoten-dropship-price,
.kumoten-suggested-price {
    font-weight: 500;
    display: block;
}

.kumoten-suggested-price {
    text-decoration: line-through;
    color: red;
}

.kumoten-product-name {
    text-align: center;
    margin-bottom: 30px;
}

.kumoten-product-desc img {
    width: 100% !important;
}

.kumoten-product-desc p {
    margin-bottom: 5px;
}

.kumoten-vertical-table {
    display: table;
    height: 100%;
}

.kumoten-vertical-cell {
    display: table-cell;
    vertical-align: middle;
}

.kumoten-vertical-cell button {
    margin-top: 15px;
}

.kumoten-label {
    font-size: 16px;
    color: #2c2b2e;
    margin-top: 5px;
    margin-bottom: 5px;
}

.kumoten-label span:first-child {
    font-weight: 500;
    padding-right: 5px;
}

.kumoten-label span:last-child {
    font-weight: 400;
}

.kumoten-product-img {
    text-align: center;
}

.kumoten-product-img img {
    width: 230px;
    height: 100%;
}

#kumoten-product-modal .modal-body .row:last-child {
    margin: 40px -15px;
    border-radius: 10px;
    padding: 25px;
    background: #f5f5f5;
}

#kumoten-product-modal .modal-body .row:nth-child(2) {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

#kumoten-product-modal .modal-body .row:nth-child(2),
#kumoten-product-modal .modal-body .row:last-child,
.product-catalog-item-frame {
    border: 1px solid #eceeef;
}

.kumoten-product-desc img {
    padding: 25px;
}

.page-success {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%) !important;
}

.success-high-five {
    text-align: center;
    border-radius: 100%;
    width: 300px;
    margin: auto;
    overflow: hidden;
    background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
}

.success-high-five img {
    width: 100%;
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    -webkit-animation: success-hand 5s;
    /* Safari 4+ */
    -moz-animation: success-hand 5s;
    /* Fx 5+ */
    -o-animation: success-hand 5s;
    /* Opera 12+ */
    animation: success-hand 5s;
    /* IE 10+, Fx 29+ */
}

@-webkit-keyframes success-hand {
    0% {
        transform: rotate(290deg);
    }

    10% {
        transform: rotate(375deg);
    }

    20% {
        transform: rotate(350deg);
    }

    50% {
        transform: rotate(366deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes success-hand {
    0% {
        transform: rotate(290deg);
    }

    10% {
        transform: rotate(375deg);
    }

    20% {
        transform: rotate(350deg);
    }

    50% {
        transform: rotate(366deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes success-hand {
    0% {
        transform: rotate(290deg);
    }

    10% {
        transform: rotate(375deg);
    }

    20% {
        transform: rotate(350deg);
    }

    50% {
        transform: rotate(366deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes success-hand {
    0% {
        transform: rotate(290deg);
    }

    10% {
        transform: rotate(375deg);
    }

    20% {
        transform: rotate(350deg);
    }

    50% {
        transform: rotate(366deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


@-webkit-keyframes bounceIn {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    30% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        ;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    40% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    60% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    70% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        ;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    80% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation: bounceIn 1s infinite;
    -webkit-animation: bounceIn 1s infinite;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.success-product-info {
    text-align: center;
    padding: 12px;
    margin: auto;
    border-radius: 10px;
    width: 460px;
    height: auto;
}


.success-product-info .price-old {
    text-decoration: line-through;
    color: red;
    padding-right: 5px;
    padding-left: 5px;
}

.success-product-img {
    text-align: center;
}

.success-product-img img {
    width: 60px;
    border-radius: 5px;
}

.success-product-text {
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 5px;
}

.success-product-info #editProduct {
    margin-left: 10px;
    cursor: pointer;
}

.success-product-info #viewProduct,
.success-product-info #editProduct {
    padding: 5px;
    width: 75px;
}

.success-product-viewedit {
    display: inline-block;
    vertical-align: middle;
}

.success-product-message {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 26px;
    font-weight: 400;
}

.success-product-message i {
    font-size: 12px;
    font-weight: bold;
    padding-right: 5px;
}

.success-next-title {
    text-align: center;
    margin: 45px 0px;
    font-weight: 400;
    font-size: 26px;
}


.success-next-section,
.success-product-info {
    margin: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
}

.success-next-section>div {
    display: table;
    font-weight: 400;
    padding-top: 25px;
    padding-bottom: 25px;
    transition: all 0.3s;
}

.success-next-section>div:last-child {
    border-bottom: none;
}

.success-next-section>div>span,
.success-next-section>div>button {
    display: table-cell;
    vertical-align: middle;
}

.success-next-section>div>button {
    float: right;
    width: 90px;
    padding: 5px;
}

.success-next-section .title {
    font-size: 18px;
    text-align: center;
    padding-bottom: 15px;
}

.success-next-section>div>#share_button {
    vertical-align: middle;
}

.success-timeline>li {
    margin-bottom: 12px;
}

.success-timeline .timeline-panel {
    float: none !important;
    margin: auto;
    padding: 8px 15px !important;
    width: 85% !important;
    margin-right: 20px;
    background-color: #ffffff;
    border-radius: 8px !important;
}

.success-timeline.timeline:before,
.success-timeline>li>.timeline-badge {
    left: 6% !important;
    background-color: #cecece;
}

.success-timeline>li>.timeline-badge {
    top: 6px !important;
}

.success-timeline .timeline-panel:before,
.success-timeline .timeline-panel:after {
    display: none !important;
}

.success-timeline .timeline-body {
    display: table;
    width: 100%;
    height: 33px;
}

.success-timeline span {
    display: table-cell;
    vertical-align: middle;
}

.success-timeline button {
    float: right;
    width: 80px;
}

.soft-shadow {
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
}

.timeline-body .hover-fb:hover,
.timeline-body .hover-twitter:hover,
.timeline-body .hover-linkedin:hover,
.timeline-body .hover-lazada:hover,
.timeline-body .hover-shopee:hover,
.timeline-body .hover-11street:hover,
.timeline-body .hover-inverse:hover,
.timeline-body .hover-share:hover {
    background-color: #a7a7a7 !important;
    color: #ffffff;
    transition: all 0.5s;
}

.hover-fb,
.success-timeline>li .hover-fb {
    background-color: #4267b2;
    color: #ffffff;
}

.hover-twitter,
.success-timeline>li .hover-twitter {
    background-color: #1da1f2;
    color: #ffffff;
}

.hover-linkedin,
.success-timeline>li .hover-linkedin {
    background-color: #283e4a;
    color: #ffffff;
}

.hover-lazada,
.success-timeline>li .hover-lazada {
    background-color: #152a3d;
    color: #ffffff;
}

.hover-shopee,
.success-timeline>li .hover-shopee {
    background-color: #f75421;
    color: #ffffff;
}

.hover-11street,
.success-timeline>li .hover-11street {
    background-color: #de1835;
    color: #ffffff;
}

.hover-inverse,
.success-timeline>li .hover-inverse {
    background-color: #616161;
    color: #ffffff;
}

.hover-share,
.success-timeline>li .hover-share {
    background-color: #ffc466;
    color: #ffffff;
}

.success-timeline>li .hover-fb,
.success-timeline>li .hover-twitter,
.success-timeline>li .hover-linkedin {
    font-size: 18px;
    padding: 8px;
    margin-left: 5px;
}

.asColorPicker-trigger {
    border: 1px solid #d9d9d9 !important;

}

.asColorPicker-trigger,
.asColorPicker-trigger>span {
    border-radius: 0px 5px 5px 0px;
}

.cms-block-title {
    border-bottom: 1px solid hsl(200, 9%, 93%);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

#cms-block .asColorPicker-wrap {
    width: 100%;
}

#cms-block .nav-tabs>li:first-child .cms-block-count:after {
    content: " 1 ";
}

#cms-block .nav-tabs>li:nth-child(2) .cms-block-count:after {
    content: " 2 ";
}

#cms-block .nav-tabs>li:nth-child(3) .cms-block-count:after {
    content: " 3 ";
}

#cms-block .nav-tabs>li:nth-child(4) .cms-block-count:after {
    content: " 4 ";
}

#cms-block .nav-tabs {
    border-bottom: 0;
}

#cms-block #tab-content {
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 5px;
}

#cms-block .iconpicker-component {
    background-color: #fff;
    height: 38px;
    border: 1px solid rgba(0, 0, 0, .15)
}

#cms-block .iconpicker-component>i {
    font-size: 22px;
}

#cms-block .iconpicker-container {
    left: auto;
}

#cms-block .iconpicker-container,
#cms-block .iconpicker-popover,
#cms-block .popover-content,
#cms-block .iconpicker {
    width: 280px;
}

#cms-block .iconpicker-items {
    width: 268px;
}

.cms-block-empty:after {
    content: "Please Add CMS Block";
    color: #c5c5c5;
    display: block;
    text-align: center;
}

.cms-block-imgicon,
.cms-block-text {
    border: 1px solid #e8e8e8;
    padding: 18px;
    border-radius: 5px;
    background-color: #f8f8f8;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
}

.cms-block-img {
    text-align: center;
}

.cms-block-text {
    margin-top: 30px;
}

.cms-block-text .cke_top {
    background: #ffffff;
}

.page-fb-collection {
    min-height: auto !important;
}

.collection-group>div {
    margin-bottom: 0px;
    border-radius: 0px;
    border: 1px solid #e4e4e4 !important;
    border-bottom: none !important;
    box-shadow: none;
}

.collection-group>div>.fb-shop-header {
    padding-top: 15px;
}

.collection-group>div:first-child {
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #e4e4e4 !important;
}

.collection-group>div:first-child>.fb-shop-header {
    background-color: #f6f7f9;
    padding: 15px 20px;
}

.collection-group>div:nth-child(2) {
    border-radius: 8px 8px 0px 0px;
}

.collection-group>div:last-child {
    border-radius: 0px 0px 8px 8px;
    border-bottom: 1px solid #e4e4e4 !important;
}

.fb-shop-collection.not-visible {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.fb-shop-collection.not-visible>.fb-shop-header>.row>h4::after {
    content: "\f05a";
    display: block;
    font-size: 15px;
    font-family: FontAwesome;
}

.fb-shop-collection.not-visible>.fb-shop-header>.row>.switchery-small {
    margin-right: 10px;
}

.fb-shop-collection.not-visible>.fb-shop-header>.row>h4::before {
    content: "This collection is not visible to your Facebook page followers. Only you can view it.";
    position: absolute;
    bottom: 0;
    margin-left: 16px;
    font-size: 12px;
    font-weight: 400;
}

.fb-shop-cover {
    /* background-image: url(/uc_admin/view/image/fb_cover_photo.png); */
    background-color: #d6d6d6;
    height: 212px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    margin-bottom: 0px;
    box-shadow: none;
}

.fb-shop-cover .btn-sort {
    position: absolute;
    bottom: -33px;
    right: 0;
    border-radius: 0px 0px 5px 5px;
    z-index: -1;
}

.fb-shop-cover:after,
.fb-searchbar:after {
    background: rgba(0, 0, 0, 0.08);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 7px;
    cursor: not-allowed;
}

.fb-shop-name {
    font-weight: 400;
    text-align: left;
    margin: 12px 0px;
    font-size: 16px;
    color: #2c2b2e;
    padding: 5px;
    font-size: 20px;
}

.fb-shop-sidebar {
    text-align: left;
    cursor: not-allowed;
    background-color: #ebebeb;
    padding: 14px 16px;
    border-radius: 8px;
}

.fb-shop-sidebar span {
    display: block;
    background-color: #d6d6d6;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 0px;
    height: 16px;
}

.fb-shop-sidebar span:last-child {
    margin-bottom: 0px;
}

.fb-shop-cover img,
.fb-shop-logo img {
    box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.fb-shop-likebar {
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 8px;
    border-radius: 0px 0px 8px 8px;
}

.fb-shop-likebar button {
    cursor: default !important;
    background-color: #d6d6d6 !important;
    color: #7d7d7d;
    height: 25px;
    padding: 0px 12px;
    border-radius: 25px;
}

.fb-sendmessage {
    float: right;
}

.fb-sendmessage button {
    width: 240px;
}


.fb-shop-header {
    background-color: #fff;
    border-radius: 8px 8px 0px 0px !important;
    padding: 5px 20px;
    border: none;
}

.fb-shop-header .btn-edit {
    height: 23px;
    border-radius: 6px;
    width: 50px;
    padding: 0px;
    color: #fff;
}

.fb-shop-header .btn-edit {
    background-color: #70767e;
}

.fb-shop-header>.row>div {
    text-align: right;
}

.fb-shop-header .btn-sync {
    background-color: #55ce63;
    width: auto;
    height: 20px;
    border-radius: 5px;
    color: #fff;
    padding: 0 5px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: -2px;
}

.fb-shop-header .row {
    display: table;
}

.fb-shop-header .row h4,
.fb-shop-header .row div {
    display: table-cell;
    vertical-align: middle;
}

.fb-shop-header .row h4 {
    font-weight: 500;
    font-size: 15px;
}

.fb-shop-nav {
    text-align: center;
    display: table;
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    background-color: #2f3d4a;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
    transition-duration: 0.3s;
    font-size: 20px;
    font-weight: 400;
    border-radius: 50px;
    padding: 5px;
}

.fb-shop-nav.sync .mdi-package-variant-closed:after {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\F4E6";
    font-size: 20px;
    margin-left: -12px;
    background-color: #ffffff;
    border-radius: 100%;
    padding: 2px;
    color: #2f3d4a;
    font-weight: bold;
}

.fb-shop-nav.add-prod .mdi-package-variant:after {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\F415";
    font-size: 20px;
    margin-left: -12px;
    background-color: #ffffff;
    border-radius: 100%;
    padding: 2px;
    color: #2f3d4a;
    font-weight: bold;
}

.fb-shop-nav:active {
    background-color: #1e272f;
    box-shadow: 0 1px #1e272f;
    transform: translateY(3px);
}

.fb-shop-nav a {
    color: #fff;
    display: table;
    margin: auto;
}

.fb-shop-nav i {
    font-size: 50px;
    width: 70px;
}

.fb-shop-nav i,
.fb-shop-nav span {
    display: table-cell;
    vertical-align: middle;
}

.collection-order div {
    padding: 8px;
    border: 1px solid #ccc;
    margin-bottom: 8px;
    border-radius: 5px;
}

.collection-order div+div {
    border-top: 1px solid #ccc;
}

.collection-order div i {
    margin-right: 15px;
}

.collection-order div:hover {
    background-color: #dfdfdf;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: all-scroll;
}

.container-fb-shop-nav .col-sm-6:first-child {
    padding-right: 36px;
}

.container-fb-shop-nav .col-sm-6:last-child {
    padding-left: 36px;
}

.fb-collection-frame {
    padding-top: 0px;
}

.fb-collection-frame>.row>div {
    margin-top: 15px;
    margin-bottom: 15px;
}

.fb-collection-frame>.row>div:last-child {
    display: block !important;
    min-height: 150px;
}

.fb-collection-item {
    border: 1px solid #e9ebee;
}

.fb-collection-info {
    background-color: #f6f7f9;
    padding: 6px;
}

.fb-collection-name,
.fb-collection-price {
    display: block;
    width: 100%;
}

.fb-collection-name {
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-collection-image img {
    padding: 6px;
}

.fb-collection-more {
    height: 100%;
    position: relative;
    border: 1.5px dashed #e9ebee;
}

.fb-collection-more span {
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: #ccc;
    font-size: 18px;
    display: block;
    width: 100%;
    text-align: center;
}

.fb-collection-more span i {
    display: block;
    font-size: 30px;
}

.fb-collection-success .right-column .timeline:before {
    height: 115px;
}

.fb-collection-success>.row {
    margin-top: 50px;
}

.fb-collection-demo span {
    width: 100%;
    display: block;
    text-align: center;
    background-color: #505256;
    color: #fff;
    border-radius: 10px;
    margin-top: 25px;
    margin-bottom: 15px;
    padding: 7px;
    text-transform: uppercase;
    font-weight: 500;
}

.fb-collection-demo img {
    width: 100%;
}

.settings_card h3,
.products_card h3 {
    margin: 0;
}

.settings_card .select2-container-multi .select2-choices {
    border: none;
}

.settings_card .select2-container-multi .select2-choices .select2-search-choice {
    margin: 6px;
}

.empty-collection .products_card .card {
    background: #e9e9e9;
}

.empty-collection .products_card h3,
.empty-collection .products_card .sort-option,
.empty-collection .products_card thead {
    color: #cccccc;
}

.empty-collection .products_card #sort_option {
    cursor: default;
}

.empty-collection .settings_card .card {
    -webkit-animation: shadow_blink 2.0s linear infinite;
    -moz-animation: shadow_blink 2.0s linear infinite;
    -ms-animation: shadow_blink 2.0s linear infinite;
    -o-animation: shadow_blink 2.0s linear infinite;
    animation: shadow_blink 2.0s linear infinite;
}

@keyframes shadow_blink {
    0% {
        box-shadow: 0px 0px 10px #5cb3fd;
    }

    50% {
        box-shadow: none;
    }

    100% {
        box-shadow: 0px 0px 10px #5cb3fd;
    }
}

@-webkit-keyframes shadow_blink {
    0% {
        box-shadow: 0px 0px 10px #5cb3fd;
    }

    50% {
        box-shadow: 0 0 0;
    }

    100% {
        box-shadow: 0px 0px 10px #5cb3fd;
    }
}

.settings_card .row:first-child,
.products_card .row:first-child {
    border-bottom: 1px solid #ddd;
    margin: 0;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

#product_placeholder option {
    white-space: initial;
    border-bottom: 1px solid #ccc;
    padding: 4px;
}

#labels-modal #product_placeholder,
#labels-modal #related {
    height: 200px;
    max-height: 200px;
    padding: 0px;
}

#labels-modal #product_placeholder option,
#labels-modal #related option {
    white-space: normal;
    padding: 5px;
}

#labels-modal #product_placeholder option+option,
#labels-modal #related option+option {
    border-top: 1px solid #ccc;
}

#related option,
#related_product_placeholder option {
    white-space: initial;
    border-bottom: 1px solid #ccc;
    padding: 4px;
}

.channel_rows .channel_columns {
    display: inline-block;
    width: 25%;
    margin: 0px 5px;
}

.channel_rows small {
    margin: auto;
}

.channel_columns img {
    width: 25px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.lang-nav-tab {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

.lang-btn {
    float: left;
}

.lang-btn .nav-item a {
    padding: 7px 12px;
}

.lang-btn .nav-item a.active {
    background-color: #283e4a !important;
    color: #ffffff;
}

.lang-translate {
    float: right;
}

/* PROMOTION BANNER */
.el-element-overlay .custom-el-card .el-card-item .el-card-content {
    text-align: left;
}

.custom-el-card {
    margin-bottom: 30px;
}

.custom-el-card .box-title {
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.22;
    letter-spacing: normal;
    text-align: left;
    color: #000000;
    margin-bottom: 10px !important;
}

.custom-el-card .el-card-content {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
}

.custom-el-card .card-ul {
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.53;
    letter-spacing: normal;
    text-align: left;
    color: #979797;
    padding-left: 18px;
    margin-bottom: 0px;
}

.custom-el-card .text-desc {
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.22;
    letter-spacing: normal;
    text-align: left;
    color: #979797;
}

.custom-el-card .el-card-item {
    padding-bottom: 0px;
}

.custom-el-card .card {
    margin-bottom: 0px;
    height: 100%;
}

.dual-el-card {
    min-width: 660px;
}

/* END PROMOTION BANNER */

/* BUNDLE PRODUCT */
#div-product-child>div {
    border-radius: .25rem;
    border-bottom: 0px !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#div-product-child>input.btn {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.bundle-promotion-list {
    padding-left: 5px;
    padding-right: 5px;
}

.bundle-promotion-list>div {
    padding: 10px 5px 0px 5px;
}

.bundle-promotion-list>div>.row {
    background-color: #f5f5f5;
    height: 100%;
    margin: 0;
    align-items: center;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.bundle-promotion-list>div>.row:hover {
    background-color: #dddddd;
}

/* END BUNDLE PRODUCT */

/* DISCOUNT */
.discount-visual-setting label {
    display: block;
}

.discount-visual-setting .asColorPicker-wrap {
    width: 100%;
}

.discount-visual-setting .setting-preview .frame {
    width: 80%;
    margin: auto;
    display: table;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
}

.discount-visual-setting .setting-preview .frame>.dummy-img {
    width: 35%;
    display: table-cell;
    padding: 10px;
}

.discount-visual-setting .setting-preview .frame>.dummy-desc {
    width: 64%;
    display: table-cell;
    vertical-align: top;
    padding: 10px;
}

.discount-visual-setting .dummy-text {
    display: block;
    height: 15px;
    background-color: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 8px;
}

.discount-visual-setting .dummy-text:first-child {
    width: 80%;
    min-height: 25px;
    border-radius: 25px;
}

.discount-visual-setting .dummy-button {
    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 20px;
    align-items: center;
    align-self: center;
    display: inline-flex;
    margin-top: 10px;
}

/* END DISCOUNT */

/* BUNDLE & DISCOUNT POP UP */
#selectProductModule .modal-body {
    min-width: auto;
}

/* END BUNDLE & DISCOUNT POP UP */

@media (min-width: 1025px) {
    .fb-collection-frame>.row>div {
        width: 20%;
        max-width: 20%;
        display: none;
    }

    .fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+4) {
        display: block;
    }

    .collection-group>.fb-shop-collection:first-child>.fb-collection-frame>.row>div {
        max-width: 36%;
        display: none;
    }

    .collection-group>.fb-shop-collection:first-child>.fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+2) {
        display: block;
    }
}

/*FIX FOR SMALLER LAPTOP SCREEN*/
@media (max-width: 1440px) and (min-width: 1025px) {
    .dashboard-announcements {
        max-height: 2950px;
        overflow: auto;
    }

    .myapp-topinfo {
        max-width: 880px;
    }

    .page-appstore #module_my_app {
        max-width: 1000px;
        margin: auto;
    }

    .appstore-banner {
        width: 880px;
    }
}

@media (min-width: 1400px) {
    .appstore-frame {
        text-align: right;
    }

    .appstore-search-frame {
        width: 60%;
    }

    .appstore-search {
        padding-right: 20px;
    }
}

@media (max-width: 1366px) and (min-width:1025px) {
    .appstore-category {
        width: 900px;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .appstore-category>ul>li {
        display: inline-block;
        min-width: 70px;
        margin: 4px;
        text-align: center;
        margin-bottom: 15px;
    }

    .appstore-category-list {
        text-align: center;
    }

    .apps_status_row label[for=apps_status_all] {
        border-radius: 10px;
        width: 110px;
        margin-right: 5px;
    }

    .apps_status_row label[for=apps_status_free] {
        border-radius: 10px;
        width: 110px;
        margin-left: 5px;
    }

    .appstore-logo {
        position: absolute;
        top: 5px;
    }

    .appstore-search {
        width: 100%;
        padding-right: 0px;
    }
}

@media (max-width: 1024px) {
    .topbar .refer-a-friend {
        display: none;
    }

    .page-appstore .carousel-prev {
        margin-left: 0px;
    }

    .page-appstore .carousel-next {
        margin-right: 0px;
    }

    .appstore-app,
    .appstore-search {
        width: 700px;
    }

    .appstore-category {
        width: 140px;
        display: inline-block;
        vertical-align: top;
        margin-right: 50px;
    }

    .appstore-banner {
        width: 575px;
    }

    .success-timeline .timeline-panel {
        width: 80% !important;
    }

    .success-product-message,
    .success-next-title {
        font-size: 23px;
    }

    .myapp-topinfo {
        max-width: 880px;
    }

    .fb-collection-frame>.row>div {
        display: none;
    }

    .fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+3) {
        display: block;
    }

    .collection-group>.fb-shop-collection:first-child>.fb-collection-frame>.row>div {
        display: none;
    }

    .collection-group>.fb-shop-collection:first-child>.fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+2) {
        display: block;
    }
}

@media (max-width: 1024px) and (min-width:769px) {
    .overview-list>div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .overview-list-item {
        margin: 8px 10px !important;
    }

    .overview-combined-icon>i:last-child {
        right: 15px;
    }

    .dashboard-announcements {
        max-height: 3147px;
    }

    .invoice-info>div,
    .parcel-info>div,
    .order-info>div {
        padding: 15px 0px;
    }

    .success-product-info {
        width: 400px;
    }

    .appstore-search-container {
        margin: auto;
    }

    .apps_status_row label {
        width: 90%;
        margin: 0;
        margin-bottom: 8px;
    }

    .apps_status_row label:last-child {
        margin-bottom: 0px;
    }

    .collection-group>.fb-shop-collection:first-child>.fb-collection-frame>.row>div {
        max-width: 36%;
    }
}

/* #END FIX FOR SMALLER LAPTOP SCREEN*/

@media (min-width: 769px) {
    .product-form-special-discount {
        display: table;
    }

    .product-form-special-discount>.row {
        display: table-row;
    }

    .product-form-special-discount>.row>div {
        display: table-cell;
        padding-left: 0px;
        padding-right: 10px;
    }

    .success-product-text {
        padding-bottom: 15px;
    }

    .success-product-img img {
        width: 84px;
    }

    /* Display the dropdown */
    .product-catalog-navframe li:hover>ul {
        display: block;
        position: absolute;
        z-index: 1;
        min-width: 120px;
    }

    .sync-single {
        height: 50%;
    }

    .sync-single .fb-shop-nav {
        height: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        margin: 0;
        width: 90%;
    }
}

@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav>li>ul {
        top: 45.59px;
        /* TO MATCH WITH <li> HEIGHT*/
    }

    .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
        width: 260px;
        background: #009efb;
        color: #fff !important;
        border-color: #009efb;
    }
}

@media (max-width: 768px) {
    .modal-body {
        min-width: 100%;
        width: 100%;
    }

    .nav-top-text {
        display: none !important;
    }

    .order-info-desktop {
        display: none;
    }

    .order-info-mobile {
        display: block;
    }

    .order-product-uPrice,
    .order-product-quantity,
    .order-product-tPrice {
        padding: inherit;
    }

    .order-payment-address {
        display: inline-block;
        width: 46%;
        margin-right: 0px !important;
        border-bottom: 0px !important;
    }

    .order-shipping-address {
        float: right;
        display: block;
        /* display: inline-block; */
        width: 46%;
        margin-left: 0px !important;
        border-bottom: 0px !important;
    }

    .order-payment-method {
        border-top: 1px dashed #dadada !important;
    }

    /* TIMELINE */
    .timeline:before,
    .timeline>li>.timeline-panel:after,
    .timeline>li>.timeline-panel:before,
    .timeline-right:before,
    .timeline-right:after,
    .timeline-badge {
        display: none !important;
    }

    .timeline-left,
    .timeline-right {
        float: none !important;
        width: 100% !important;
    }

    .timeline-right {
        padding: 20px !important;
    }

    .order-history-mobile {
        display: inline-block;
    }

    /* #END TIMELINE */

    .invoice-container,
    .invoice-sheet {
        padding: 25px;
    }

    .image-manager-tree #tree {
        width: 99.7%;
        max-width: 100%;
        height: 150px !important;
        margin-bottom: 25px;
    }

    #data {
        margin-left: 0px;
    }

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

    #image_iframe {
        width: 100%;
    }

    /* .modal-body {
		min-width: 100%;
	} */

    .overview-list-frame {
        padding-right: 15px;
        border-right: none;
    }

    .overview-list {
        margin-top: 10px !important;
    }

    .overview-list>.row {
        width: 46%;
        margin-top: 13px;
        margin-bottom: 13px;
    }

    .overview-list>.row:nth-child(odd) {
        float: left;
        margin-left: 10px;
        margin-right: 5px;
    }

    .overview-list>.row:nth-child(even) {
        float: right;
        margin-right: 10px;
        margin-left: 5px;
    }

    .overview-list-item {
        margin: 10px !important;
    }

    .overview-separator {
        margin-top: 16px;
    }

    .top-ten-table-reseller {
        max-height: none;
    }

    .top-ten-table-sg>div {
        height: auto;
    }

    .dashboard-sg {
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    .dashboard-sg-left {
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    .dashboard-sg-right {
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    .overview-list-frame>.card>h3 {
        margin-bottom: 0px;
    }

    .dashboard-announcements {
        max-height: 500px;
        overflow: auto;
    }

    .top-ten-table-sg {
        height: auto;
        overflow: none;
    }

    .webstore-banner img {
        height: auto;
    }

    .FOF-img {
        width: 40%;
    }

    .FOF-img>img {
        height: auto;
        width: 250px;
    }

    .FOF-text {
        width: 60%;
        padding-right: 0px;
    }

    #option-modal-new .modal-body {
        max-width: 768px;
    }

    .card-listing .card {
        margin-left: -30px;
        margin-right: -30px;
        border: 0px !important;
        border-radius: 0px;
    }

    .listing-table-sticky tr {
        padding-left: 20px;
    }

    .sticky-scroll-frame>.container-xsmall {
        padding-left: 15px;
        padding-right: 15px;
    }

    .module-slider-wrapper {
        overflow: auto;
    }

    .controlL,
    .controlR {
        display: none;
    }

    .appmodule-modal-screenshot {
        width: 638px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

    .success-timeline.timeline:before,
    .success-timeline>li>.timeline-badge {
        display: block !important;
    }

    .success-top-msg,
    .success-next-section {
        width: auto;
    }

    .success-product-message {
        font-size: 25px;
        margin-top: 30px;
    }

    .success-next-title {
        font-size: 25px;
    }

    .appstore-module-title {
        height: 30px;
    }

    .appstore-logo {
        text-align: center;
        margin-bottom: 20px;
    }

    .appstore-logo>img {
        width: auto;
    }

    .appstore-category {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .appstore-category>ul>li {
        display: inline-block;
        min-width: 70px;
        margin: 10px;
        text-align: center;
    }

    .appstore-category-list>li.category_selected_highlight,
    .appstore-category-list>li:hover {
        border-left: none;
    }

    .appstore-category-list>li:hover {
        padding-left: 25px;
    }

    .appstore-category-list {
        padding: 8px;
        text-align: center;
    }

    .appstore-search {
        padding-left: 20px;
        padding-right: 20px;
    }

    .carousel-next,
    .carousel-prev {
        display: none;
    }

    .container-success {
        width: 100%;
    }

    .success-product-info {
        width: 70%;
        height: auto;
    }

    .success-timeline .timeline-panel {
        width: 85% !important;
    }

    .myapp-topinfo {
        max-width: 572px;
    }

    .product-catalog-navframe ul {
        min-width: auto;
        width: 100%;
    }

    .apps_status_row {
        text-align: center;
    }

    .apps_status_row label[for=apps_status_all] {
        border-radius: 10px;
        width: 110px;
        margin-right: 5px;
    }

    .apps_status_row label[for=apps_status_free] {
        border-radius: 10px;
        width: 110px;
        margin-left: 5px;
    }

    .appstore-category-list>li {
        padding: 0px;
    }

    .appstore-search-frame {
        width: 70%;
    }

    .fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+3) {
        display: none;
    }

    .fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+2) {
        display: block;
    }

    .fb-shop-cover {
        position: relative;
        border: 1px solid #ddd;
        border-radius: 10px !important;
        display: none;
    }

    .fb-shop-cover img {
        border-radius: 10px 10px 0px 0px;
    }

    .fb-shop-cover .fb-shop-logo {
        padding: 0px;
        background-color: #fff;
        border-radius: 0px 0px 10px 10px;
        box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.08);
        position: absolute;
        bottom: 0;
    }

    .fb-shop-cover .btn-sort {
        margin-right: 10px;
        padding: 7px;
    }

    .fb-shop-logo img {
        max-width: 70px;
        border-radius: 10px;
        margin: 12px;
    }

    .fb-shop-name {
        display: inline-block;
    }

    .fb-shop-likebar,
    .fb-searchbar {
        display: none;
    }

    .settings_card {
        margin-bottom: 25px;
    }

    .apps_package_row label {
        width: 25% !important;
    }
}

/*MOBILE & ABOVE*/
@media (min-width: 480px) {

    .mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active {
        border-left: 3px solid #55ce63;
    }

    .mini-sidebar .sidebar-nav #sidebarnav>li.active>a.active:hover {
        border-left: 3px solid #27ae60;
    }

    .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a {
        background: #55ce63;
        border-color: #55ce63;
    }

    .mini-sidebar .sidebar-nav #sidebarnav>li:hover>a>span>.sidebar-integer {
        background-color: #ffffff;
        color: #55ce63;
    }

    .product-form-special-discount {
        padding-left: 0px;
        padding-right: 0px;
    }

    .page-myapp .module-slider-wrapper {
        max-width: 90%;
        margin: auto;
    }
}

@media (max-width: 992px) {
    .mobile-line {
        display: block;
        border-top: 1px dashed #dadada;
        margin: 10px;
        width: 100%;
    }
}

@media (max-width: 480px) {

    .topbar .top-bar-buttons li:first-child,
    .topbar .top-bar-buttons li:nth-child(2),
    .topbar .top-bar-buttons .refer-a-friend {
        display: none;
    }

    .navbar-header {
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
        border-right: 1px solid #eee;
    }

    .order-product-title {
        display: none;
    }

    .order-hidden-title {
        width: 100%;
        display: block;
        text-align: center;
        font-weight: 400;
    }

    .order-payment-address {
        display: block;
        width: auto;
        margin-right: 10px !important;
        border-bottom: 1px dashed #dadada !important;
    }

    .order-shipping-address {
        float: none;
        display: block;
        width: auto;
        border-bottom: 1px dashed #dadada !important;
    }

    .order-payment-method {
        border-top: 0px !important;
    }

    .order-pricing>div>div:first-child {
        width: 58%;
    }

    .order-pricing>div>div:last-child {
        width: 40%;
    }

    .order-function-button>div {
        margin-bottom: 5px;
    }

    .order-function-button>div:nth-child(odd) {
        padding-right: 2.5px;
    }

    .order-function-button>div:nth-child(even) {
        padding-left: 2.5px;
    }

    .order-info-flexrow .card {
        background: none;
    }

    .order-info-flexrow>div .flex-row {
        box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.08);
        border: 1px solid #ddd !important;
        border-radius: 10px;
        background: white;
    }

    .youmightneedthis .ms-selection:before {
        content: "Might Need";
        font-weight: 400;
    }

    .invoice-container {
        padding: 0px;
    }

    .invoice-sheet {
        padding: 10px;
    }

    .invoice-header {
        padding-top: 10px;
    }

    .invoice-number {
        text-align: left;
    }

    .invoice-product-image {
        display: none;
    }

    .image-manager-tree #tree {
        min-width: 0px;
        width: 99%
    }

    .files img,
    .files canvas {
        max-width: inherit;
    }

    .seo-input-label {
        width: 100%;
        text-align: left;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 0px;
    }

    .seo-input-field {
        border-radius: 0px 0px 4px 4px !important;
    }

    .dropdown-menu {
        min-width: inherit;
    }

    .modal-body {
        padding: 16px;
        min-width: 100%;
    }

    .overview-list>.row {
        float: none !important;
        width: auto;
        margin: 15px 0px !important;
    }

    .overview-title {
        padding-left: 6px;
    }

    .overview-separator {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .dashboard-sg-left .overview-list {
        padding-left: 0px;
        padding-right: 0px;
    }

    .product-note-empty {
        padding-top: 20px;
    }

    .banner-image-manager>#container>#column-right a {
        width: 75px;
    }

    .banner-image-manager>#container>#column-left {
        width: 99.5%;
        height: 120px;
    }

    .banner-image-manager>#container>#column-right {
        float: none;
        width: 99.5%;
        margin-top: 10px;
        height: 224px;
    }

    #modal-fbconnect iframe {
        height: 400px;
    }

    .FOF-img {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .FOF-text {
        display: block;
        width: 100%;
        text-align: center;
        height: auto;
        margin-bottom: 20px;
    }

    .FOF-text-title {
        font-size: 40px;
    }

    .FOF-text-message {
        font-size: 20px;
    }

    .appstore-app #module_my_app .FOF-img {
        width: 100%;
    }

    .appstore-app .FOF-text-title {
        width: 100%;
        font-size: 25px;
    }

    .appstore-app .FOF-text-message {
        font-size: 15px;
    }

    #option-modal-new .modal-body {
        max-width: 400px;
    }

    .modal-image-content {
        width: 70%;
    }

    .emailUs {
        display: none;
    }

    .btn-add {
        font-size: 0px;
    }

    .btn-add i {
        font-size: 14px;
        margin-right: 4px;
    }

    .page-headerless {
        padding-top: 0px !important;
        margin-left: 0px;
        background-color: #ffffff !important;
    }

    .page-headerless .card {
        box-shadow: none;
        border: 0px !important;
        border-radius: 10px;
    }

    .page-headerless .gradient-card {
        box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.08);
        border: 1px solid #ddd !important;
    }

    .page-headerless .card-block {
        padding: 10px;
    }

    .page-headerless .page-titles {
        padding-top: 5px;
        padding-bottom: 15px;
    }

    .page-headerless .footer {
        box-shadow: 0px -2px 10px #ddd;
    }

    .page-headerful>.sticky-scroll-frame>.sticky-scroll {
        padding-top: 22px;
    }

    .page-headerful>.container-fluid {
        padding-top: 80px;
    }

    .page-headerful .card-listing .listing-table-sticky {
        top: 146px;
    }

    .sticky-scroll-frame {
        background-color: #f0f4f7 !important;
    }

    .sticky-scroll {
        padding: 10px 15px;
    }

    .btn-action {
        border: 1px solid transparent !important;
    }

    .card-filter .card-block {
        padding: 25px;
        padding-left: 27px;
        border: 1px solid #d7d7d7;
        border-radius: 5px;
    }

    .listing-table-sticky .container-fluid {
        padding: 0px;
    }

    .container-order-info .card {
        padding: 10px;
        border: 1px solid #ddd !important;
        border-radius: 10px;
    }

    .module-list-title {
        font-size: 20px;
    }

    .module-list {
        margin-left: 10px;
    }

    .page-myapp {
        padding: 0px;
    }

    .container-app-modules {
        padding-bottom: 100px;
    }

    .myapp-button {
        font-size: 14px;
    }

    .myapp-topinfo {
        max-width: 380px;
    }

    #appmodule-modal .module-slider-wrapper {
        width: 363px;
    }

    .appmodule-modal-image {
        padding-bottom: 15px;
    }

    .appmodule-modal-screenshot {
        width: 100%;
    }

    .appstore-category>ul>li {
        min-width: 85px;
    }

    .appmodule-modal-row {
        padding: 15px;
        margin: 0px;
    }

    .success-timeline.timeline:before,
    .success-timeline>li>.timeline-badge {
        display: none !important;
    }

    .success-timeline .timeline-panel {
        width: 100% !important;
    }

    .success-next-section>div {
        padding-left: 20px;
        padding-right: 20px;
    }

    .success-product-info {
        width: 100%;
        height: auto;
    }

    .success-product-text {
        padding-left: 10px;
    }

    .success-high-five {
        width: 265px;
    }

    .success-product-message,
    .success-next-title {
        font-size: 20px;
    }

    .appstore-app {
        width: 100%;
    }

    .appstore-search-frame {
        width: 100%;
    }

    .appstore-back button {
        border: 1px solid #55ce63 !important;
    }

    .appstore-module-title>#app_category {
        margin-left: 0px;
    }

    .appstore-module-title>.btn-refer-friend {
        margin-right: 0px;
    }

    .appstore-banner {
        width: 270px;
    }

    .myapp-topinfo .search-bar-frame {
        width: 100%;
        margin-right: 0px;
        padding-right: 0px;
        margin-top: 10px;
    }

    .search-bar-frame:hover i,
    .search-bar-frame input:focus+i {
        left: 5px;
    }

    .search-bar-frame input:hover,
    .search-bar-frame input:focus {
        padding-left: 30px !important;
    }

    .apps_status_row label[for=apps_status_all] {
        width: 50px;
    }

    #module_my_app .FOF-text {
        width: 100%;
    }

    .appstore-search-container .appstore-back,
    .appstore-search-container .appstore-search-frame {
        display: table-cell;
    }

    .fb-shop-header,
    .fb-shop-header>.row>div {
        text-align: center;
    }

    .fb-shop-header h4 {
        margin-bottom: 10px !important;
    }

    .fb-collection-frame {
        max-height: 300px;
        overflow: scroll;
    }

    .fb-collection-frame>.row {
        margin: 0px;
    }

    .fb-collection-frame>.row>div,
    .fb-collection-frame>.row>div:nth-child(n+1):nth-child(-n+3) {
        display: block;
    }

    .page-headerless .collection-group>div {
        margin-bottom: 20px !important;
        border-radius: 5px !important;
        border: 1px solid #ddd !important;
    }

    .appmodule-modal-desc iframe {
        width: 100%;
    }

    .appstore-app #module_my_app .FOF-text {
        text-align: center;
    }

    .collection-group>div>.fb-shop-header {
        padding: 15px 20px;
    }

    .settings_card,
    .products_card {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 5px;
    }

    .fb-shop-nav {
        margin-top: 0px;
    }

    .discount-visual-setting .setting-preview .frame {
        width: 100%;
    }

    .custom-el-card {
        margin-bottom: 0px;
    }

    .custom-el-card .card {
        height: auto;
        margin-bottom: 30px;
    }

    .modal-small .modal-dialog {
        width: 90%;
    }

    .dual-el-card {
        min-width: auto;
    }

    .modal-body {
        min-width: 100%;
    }

    #main-wrapper .mini-sidebar .sidebar-nav>ul>li:nth-last-child(-n+3) {
        display: none;
    }
}

@media (max-width: 380px) {

    /*!! NOTE !! THIS WILL AFFECT EVERY SINGLE PAGE CSS !!*/
    .container-fluid {
        padding: 20px 15px;
    }

    .card-block {
        padding: 10px;
    }

    /* #END !! NOTE !! THIS WILL AFFECT EVERY SINGLE PAGE CSS !!*/

    #modal-fbconnect iframe {
        height: 350px;
    }

    #option-modal-new .modal-body {
        max-width: 375px;
    }

    .modal-image-frame {
        min-height: 430px;
    }

    .modal-image-content {
        width: 65%;
    }

    .card-listing .card {
        margin-left: -15px;
        margin-right: -15px;
    }

    .listing-table-sticky tr {
        padding-left: 10px;
    }

    .listing-table-sticky #bulk_action_tab .input-group select {
        width: 120px;
    }

    .container-app-modules>.page-titles {
        padding-left: 0px;
        padding-right: 0px;
    }

    .container-app-modules {
        padding: 0px;
        padding-bottom: 100px;
    }

    .app-module {
        margin: 0px;
    }

    .appstore-app>#module_my_app .module-item {
        margin-left: 0px;
        margin-right: 0px;
    }

    .appstore-search {
        padding-left: 12px;
        padding-right: 12px;
    }

    .myapp-button {
        margin-top: 20px;
    }

    .myapp-topinfo {
        max-width: 330px;
    }

    #appmodule-modal .module-slider-wrapper {
        width: 313px;
    }

    .success-product-message,
    .success-next-title {
        font-size: 18px;
    }

    .dashboard-tutorial h5 {
        margin-top: 15px;
    }
}

@media (max-width: 320px) {
    #imagemodalbody>iframe {
        height: 430px;
    }

    .apps_package_row label {
        width: 34% !important;
    }

    .banner-image-manager>#container>#column-left {
        height: 100px;
    }

    .banner-image-manager>#container>#column-right {
        height: 200px;
    }

    #modal-fbconnect iframe {
        height: 290px;
    }

    #option-modal-new .modal-body {
        max-width: 320px;
    }

    .share-buttons {
        display: block;
        float: left;
        margin-bottom: 10px;
    }

    .share-fb,
    .share-twitter,
    .share-linkedin {
        margin-left: 0px;
        margin-right: 4px;
        width: 85px;
        text-align: center;
    }

    .FOF-text-title {
        font-size: 30px;
    }

    .FOF-text-message {
        font-size: 15px;
    }

    .myapp-button {
        font-size: 12px;
    }

    .myapp-topinfo {
        max-width: 290px;
    }

    #appmodule-modal .module-slider-wrapper {
        width: 288px;
    }

    .appstore-category>ul>li {
        min-width: 110px;
    }

    .success-high-five {
        width: 85%;
    }

    .success-product-message {
        font-size: 16px;
    }

    .success-product-message,
    .success-next-title {
        font-size: 16px;
    }

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

    .tutorial-icon-business:before,
    .tutorial-icon-shipping:before,
    .tutorial-icon-payment:before,
    .tutorial-icon-product:before,
    .tutorial-icon-marketplace:before,
    .tutorial-icon-facebook:before {
        width: 32px;
        text-align: center;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }

    .discount-visual-setting .setting-preview .frame>.dummy-img,
    .discount-visual-setting .setting-preview .frame>.dummy-desc {
        display: table-row;
        text-align: center;
    }

    .discount-visual-setting .setting-preview .frame>.dummy-desc>.dummy-text {
        margin-left: auto;
        margin-right: auto;
    }

    .discount-visual-setting .setting-preview .frame>.dummy-img img {
        width: 50%;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* INVOICE PRINTING */
@media print {
    .invoice-sheet {
        margin: 0px;
        max-width: 100%;
        padding: 0px;
    }

    .invoice-container {
        padding: 0px;
    }

    #body-invoice {
        background: #fff;
    }
}

/* #END JUN PART*/




/* Wenkang part */

.icon-state-warning {
    color: #F1C40F !important;
}

.jstree-open>.jstree-anchor>.fa-folder:before {
    margin-left: 2px;
    content: "\f07c";
}

.customtab li a.nav-link {
    border: 0px;
    padding: 15px 20px;
    color: #54667a;
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
    border-bottom: 4px solid #009efb;
    color: #009efb;
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
    color: #009efb;
}

.cke_button_on {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

a.cke_button_on:hover,
a.cke_button_on:focus,
a.cke_button_on:active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.cke_combo_button {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

a.cke_button_combo_on:hover,
a.cke_button_combo_on:focus,
a.cke_button_combo_on:active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.cke_dialog_ui_hbox_last [title="Browse Server"] {
    margin-top: 20px !important;
}

.cke_dialog_footer .cke_resizer {
    position: absolute !important;
    right: 5px !important;
    margin-top: 25px !important;
}

a.cke_dialog_close_button {
    right: 10px !important;
}

.cke_dialog_footer_buttons {
    margin-right: 20px !important;
}

a.cke_dialog_ui_button {
    margin-right: 5px !important;
}

@media (max-width:425px) and (min-width:320px) {
    .topbar .top-navbar .navbar-nav>.nav-item.show .dropdown-menu .dropdown-user {
        width: 100%;
    }

    .apps_package_row label {
        width: 93% !important;
    }

}

/* End of Wenkang part */


/* start ch part */
.site_template:before,
#content_top:before,
#content_bottom:before {
    background-color: #000000;
}

.site_template:before {
    content: attr(data-placeholder);
    background-color: #1d1d1d;
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
}

#content_top:before {
    content: attr(data-placeholder);
    background-color: #1d1d1d;
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
}

#content_bottom:before {
    content: attr(data-placeholder);
    background-color: #1d1d1d;
    color: #ffffff;
    border-radius: 5px 5px 0px 0px;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
}

.layout-web-top {
    height: 100%;
    min-height: 200px;
    margin-bottom: 20px;
}

.layout-web-bottom {
    height: 100%;
    min-height: 200px;
}

.scrollbox {
    border: 1px solid #CCCCCC;
    height: 150px;
    background: #FFFFFF;
    overflow-y: scroll;
    padding: 6px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    -moz-box-shadow: inset 0 0 1px 1px #eee;
    -webkit-box-shadow: inset 0 0 1px 1px#eee;
    box-shadow: inset 0 0 1px 1px #eee;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

.scrollbox div {
    padding: 3px;
}

.scrollbox div input {
    margin: 0px;
    padding: 0px;
    margin-right: 3px;
}

.scrollbox div.even {
    background: #FFFFFF;
}

.scrollbox div.odd {
    background: #E4EEF7;
}

.scrollbox img {
    float: right;
    cursor: pointer;
}

/* End of ch part */


/* IK MEI */

/*TOAST*/
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    min-width: 250px;
    /* Set a default minimum width */
    margin-left: -125px;
    /* Divide value of min-width by 2 */
    background-color: #333;
    /* Black background color */
    color: #fff;
    /* White text color */
    text-align: center;
    /* Centered text */
    border-radius: 2px;
    /* Rounded borders */
    padding: 16px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 1;
    /* Add a z-index if needed */
    left: 50%;
    /* Center the snackbar */
    bottom: 30px;
    /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible;
    /* Show the snackbar */

    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

/*#END TOAST*/
.delete_module_tab,
.add_module_tab {
    right: 0;
    position: absolute;
    padding: 3px;
}

.module_tab_title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    max-width: 150px;
}

/* #END IK MEI */

/* JT */
/*These codes for apps*/
.action-text-info:hover:before {
    content: "How it works?";
    z-index: 51;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    left: -28px;
}

.action-text-uninstall:hover:before {
    content: "Uninstall";
    z-index: 51;
}

.action-text-save:hover:before {
    content: "Save";
    z-index: 51;
}

.action-text-save {
    color: #ffffff;
    background-color: #55ce63;
}

@media (max-width: 480px) {
    #appmodule-modal .modal-body {
        padding: 8px !important;
    }

    #appmodule-modal .row.appmodule-modal-row {
        padding: 8px;
        padding-top: 35px;
    }

    #appmodule-modal .col-12.appmodule-modal-screenshot {
        padding: 0px !important;
    }

    #appmodule-modal div#module_0 {
        padding: 0px !important;
    }

    .appmodule-modal-row:before {
        font-size: 14px;
    }

    .page-appstore .modal-body {
        margin-top: 45px;
    }
}

/* These codes are for apps articles*/
.card-article div.apps_article {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #fff;
    border-radius: 28px;
}

.card-article div.article_container {
    padding-top: 15px;
    text-align: justify;
}

.icon-article {
    margin-right: 10px;
}

#card-knowledge-based {
    max-width: 560px;
    margin: auto;
    background: transparent;
    border-radius: 48px !important;
    box-shadow: none;
}

#card-knowledge-based hr {
    margin-top: 0px;
    margin-bottom: 20px;
}

#card-knowledge-based .card-article>div>.apps_article:last-child {
    margin-bottom: 0px;
}

#card-knowledge-based .ti-angle-down,
#card-knowledge-based .ti-angle-up {
    position: absolute;
    width: 100%;
    display: table;
    top: -15px;
    height: 48px;
}

#card-knowledge-based .ti-angle-down:before,
#card-knowledge-based .ti-angle-up:before {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}


@media (max-width: 480px) {
    #card-knowledge-based {
        background: none;
        left: 0px !important;
    }

    #card-knowledge-based.card {
        border: 0px !important;
    }

    #card-knowledge-based .card-block {
        padding: 0px;
    }

    #card-knowledge-based .card-article {
        width: 100%;
        margin: 0;
    }

    #card-knowledge-based .col-12 {
        padding: 20px 10px;
    }
}


/* Article Question Mark button */
#question-mark {
    display: block;
    position: fixed;
    top: 50%;
    right: -1px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #55ce63;
    color: #F3F4F4;
    cursor: pointer;
    padding: 8px 6px 4px 6px;
    border-radius: 5px 0px 0px 5px;
    font-size: 20px;
    transition: all 0.3s;
}

#question-mark:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\F336";
}

#question-mark:hover:before {
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\F6E7";
}

/* End of Article Question Mark button */

/*marketplace edit in product page*/
.emultis {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 25px;
}

.emultis label {
    margin-bottom: 0px;
}

.emultis li:first-child:before {
    content: "\F4DC";
    font: 12px "Material Design Icons";
    background-color: #de1835;
    color: #fff;
    left: -15px;
    top: 4px;
    border-radius: 10px;
    padding: 4px;
    width: auto;
    height: auto;
    z-index: 1;
}

.emultis li:before,
.emultis li:not(:first-child) .emultis-name:before {
    position: absolute;
}

.emultis li:not(:first-child):before {
    content: " ";
    border-left: 2px dotted #ccc;
    position: absolute;
    height: 30px;
    left: -6px;
    top: -20px;
}

.emultis.Lazada li:first-child:before {
    background-color: #152a3d;
}

.emultis.Lelong li:first-child:before {
    background-color: #fcbb1c;
}

.emultis.Shopee li:first-child:before {
    background-color: #f75421;
}

.emultis li:not(:first-child) .emultis-name:before {
    content: " ";
    width: 10px;
    height: 10px;
    left: -10px;
    top: 10px;
    border-radius: 100%;
    background-color: #ccc;
}

.emultis li {
    display: flex;
    list-style: none;
    padding-left: 15px;
    margin: 10px 0px;
    position: relative;
}

.emultis-name {
    display: flex;
    width: 100%;
    align-items: center;
}

.emultis-btn {
    display: flex;
}

.emultis-btn button+button {
    margin-left: 8px;
}

.emultis-btn .btn-act {
    width: 100% !important;
    padding: 5px 9px !important;
    border-radius: 20px;
}

.emultis-btn button {
    width: 30px !important;
    height: 30px !important;
    padding: 0px !important;
}

/*end marketplace edit in product page*/

.btn-newplan:hover,
.btn-newplan:active,
.btn-newplan:visited,
.btn-newplan:focus,
.btn-newplan.active {
    background-color: #800000;
    color: #FFFFFF;

}

.btn-newplan {
    color: #800000;
    background-color: #FFFFFF;
    border-color: #800000;
}

.btn-newplan2:hover,
.btn-newplan2:active,
.btn-newplan2:visited,
.btn-newplan2:focus,
.btn-newplan2.active {
    background-color: #FF5733;
    color: #FFFFFF;
}

.btn-newplan2 {
    color: #FF5733;
    background-color: #FFFFFF;
    border-color: #FF5733;
}