/*==================================
   DEVICE CUSTOMIZATION
==================================*/

/*======== FIREFOX OVERFLOW-X 100% ISSUE ======== */
@media (min-width:320px) and (max-width:359px) {
    .container {
        width: 300px;
    }

    .scroll-content-wrapper {
        width: 280px;
    }
}

@media (min-width:360px) and (max-width: 399px) {
    .container {
        width: 340px;
    }

    .scroll-content-wrapper {
        width: 320px;
    }
}

@media (min-width:400px) and (max-width:439px) {
    .container {
        width: 380px;
    }

    .scroll-content-wrapper {
        width: 360px;
    }
}

@media (min-width:440px) and (max-width:479px) {
    .container {
        width: 420px;
    }

    .scroll-content-wrapper {
        width: 400px;
    }
}

@media (min-width:480px) and (max-width:519px) {
    .container {
        width: 460px;
    }

    .scroll-content-wrapper {
        width: 440px;
    }
}

@media (min-width:520px) and (max-width:559px) {
    .container {
        width: 500px;
    }

    .scroll-content-wrapper {
        width: 480px;
    }
}

@media (min-width:560px) and (max-width:600px) {
    .container {
        width: 540px;
    }

    .scroll-content-wrapper {
        width: 520px;
    }
}

@media (min-width:600px) and (max-width:639px) {
    .container {
        width: 580px;
    }

    .scroll-content-wrapper {
        width: 560px;
    }
}

@media (min-width:640px) and (max-width:679px) {
    .container {
        width: 620px;
    }

    .scroll-content-wrapper {
        width: 600px;
    }
}

@media (min-width:680px) and (max-width:767px) {
    .container {
        width: 660px;
    }

    .scroll-content-wrapper {
        width: 640px;
    }
}

/*======== IPHONE 4 / IPHONE 5 (4.0") ==================*/
@media (min-width:320px) and (max-width:359px) {

    /*======= PRODUCT CATALOGUE ======*/
    .product {
        width: 100%;
        float: left;
    }

    .product .product-image {
        float: left;
        padding-right: 10px;
    }

    .product .product-desc {
        max-width: 63%;
        height: auto;
        float: left;
    }

    .product .product-with-discount-1, .product .product-with-discount-2, .product .product-with-discount-3 {
        height: auto;
    }

    .product .retail-product {
        height: auto;
    }

    /*====== BUTTON & ICON ======*/
    .icon-30 {
        height: 25px;
        width: 25px;
    }

    /*===== WIDGET ======*/
    .widget .widget-desc {
        padding-left: 10px !important;
    }

    .widget .widget-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .widget .widget-icon img {
        width: 80px !important;
        height: 80px !important;
    }

    /*====== METER =====*/
    div.meter {
        width: 160px !important;
    }
}

/*======== IPHONE 6 / SAMSUNG / HTC / SONY (4.5" -5.5") ==================*/
@media (min-width:360px) and (max-width:480px) {

    /*======= PRODUCT CATALOGUE ======*/
    .product {
        width: 100%;
        float: left;
    }

    .product .product-image {
        float: left;
        padding-right: 10px;
    }

    .product .product-desc {
        max-width: 65%;
        height: auto;
        float: left;
    }

    .product .product-with-discount-1, .product .product-with-discount-2, .product .product-with-discount-3 {
        height: auto;
    }

    .product .retail-product {
        height: auto;
    }
}

@media (min-width:481px) and (max-width:700px) {

    /*======= PRODUCT CATALOGUE ======*/
    .product {
        width: 100%;
        float: left;
    }

    .product .product-desc {
        height: 130px;
    }

    .product .product-with-discount-1 {
        height: 160px;
    }

    .product .product-with-discount-2 {
        height: 180px;
    }

    .product .product-with-discount-3 {
        height: 200px;
    }

    .product .retail-product {
        height: 110px;
    }
}

/*==================================
   MOBILE DEVICE
==================================*/
@media (max-width:767px) {

    /*==== GENERAL INPUT FIELD ====*/
    .field-quantityeditor {
        min-width: 55px;
    }

    /*====== MAIN LAYOUT ======*/
    .page-content-wrapper {
        margin-left: 5px;
        margin-right: 5px;
    }

    .header-icon {
        width: 35px;
        height: 35px;
    }

    /*====== OVERRIDE DataTable CSS =====*/
    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 3px 8px;
    }

    div.datatable-processing-box {
        left: 20%;
    }

    /*====== OVERRIDE BOOTSTRAP CSS =====*/
    .modal:before {
        display: table-caption;
        padding-top: 150px;
    }

    /*======= GENERAL EFFECT  =========*/
    .margin-left {
        margin-left: 0px;
    }

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

    /*====== MAIN LAYOUT =====*/
    .wrapper {
        padding-left: 0;
    }

    .page-header-wrapper {
        padding-top: 15px;
        padding-bottom: 5px;
    }

    .page-header-wrapper .page-header-right-wrapper {
        padding-right: 0px;
    }

    .header-logo {
        width: 140px;
        height: 40px;
        margin-left: 5px;
    }

    /*====== SIDE MENU =====*/
    .top-menu-wrapper {
        padding-top: 5px;
        border-bottom: none;
        background: none;
    }

    .top-menu .menu-item {
        width: 46%;
        text-indent: 0px;
        margin: 2px 2px;
        padding-left: 5px;
        padding-top: 3px;
        line-height: 30px;
        font-size: 13px;
    }

    .top-menu .menu-image {
        padding: 0;
    }

    .top-menu .menu-image img {
        padding-right: 5px;
    }

    .top-menu .menu-title {
        padding: 0;
        line-height: 20px;
    }

    .top-menu .sub-menu {
        width: 70%;
    }

    .top-menu .sub-menu li {
        width: 100%;
    }

    .top-menu .sub-menu li a {
        padding: 3px 5px;
    }

    /*==== SUB MENU ====*/
    .sub-menu-wrapper {
        width: 100%;
        float: left;
    }

    .sub-menu .menu-item {
        width: 25%;
        min-width: 95px;
        line-height: 20px;
        word-wrap: break-word;
    }

    /*==== 	HOME PAGE =====*/
    .widget {
        margin-top: 5px;
        margin-bottom: 5px;
    }


    .widget .widget-icon img {
        width: 90px;
        height: 90px;
    }

    .widget .widget-desc {
        padding-left: 10px !important;
    }

    /*====== METER =====*/
    div.meter {
        width: 180px;
    }

    /*==== 	PRODUCT CATALOGUE  =====*/
    #cart-summary-wrapper .cart-summary {
        height: 120px;
    }

    /*==== 	PRODUCT INFORMATION  =====*/
    .product-large-image {
        max-height: 240px !important;
        max-width: 240px !important;
        padding: 5px 0px;
    }

    /*=====  FORM WIZARD  ======*/
    .wizard-container {
        margin-left: 5px;
        margin-right: 5px;
    }

    .wizard-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .wizard-icon img {
        width: 50px !important;
        height: 50px !important;
    }

    /*=====  ORDER HISTORY  ======*/
    #datatable-order-history {
        width: 700px !important;
    }

    /*=====  COMMISSION HISTORY  ======*/
    #datatable-commission-history {
        width: 600px !important;
    }

    #datatable-commission-history-detail {
        width: 635px !important;
    }

    #datatable-commission-history-order {
        width: 700px !important;
    }

    #datatable-commission-history-refundorder {
        width: 700px !important;
    }

    #commission-history-brief .form-group {
        margin-bottom: 3px;
    }

    /*=====  DOWNLINE VOLUME  ======*/
    #datatable-downline-volume-byweek {
        width: 850px !important;
    }

    #datatable-downline-volume-bymonth {
        width: 800px !important;
    }

    #datatable-downline-volume-detail {
        width: 700px !important;
    }

    /*===== DOWNLINE REPORT ======*/
    #datatable-downline-report {
        width: 1100px !important;
    }
    #datatable-downline-report-pgv {
        width: 800px !important;
    }

    /*=====  GENERATION TREE REPORT  ======*/
    #datatable-generation-tree-report {
        width: 500px !important;
    }

    /*===== AGENT ORDERS REPORT ======*/
    #datatable-agent-orders-report-0, #datatable-agent-orders-report-1, #datatable-agent-orders-report-2, #datatable-agent-orders-report-3, #datatable-agent-orders-report-4, #datatable-agent-orders-report-5 {
        width: 800px !important;
    }

    /*===== ADVANCE SEARCH ======*/
    #datatable-advance-search-0, #datatable-advance-search-1 {
        width: 800px !important;
    }

    /*=====  RETAIL CART SETTING  ======*/
    .retailcart-product-desc {
        height: 100px;
    }

    /*=====  SUPREME BONUS  ======*/
    #supremebonus-notes > div {
        width: 600px !important;
    }

    /*=====  GENEALOGY  ======*/
    #genealogy-tree .node-1 .node {
        height: 90px;
    }

    #genealogy-tree .node-2 .node {
        height: 90px;
    }

    #genealogy-tree .node-3 .node {
        display: none;
    }

    #genealogy-tree .node-1 .node .node-name, #genealogy-tree .node-2 .node .node-name {
        display: block;
    }

    /*===== TRANSLATION EDIT =====*/
    #datatable-translation-edit {
        width: 800px !important;
    }
}

@media (max-width:992px) {
    /*==== SCROLLBAR APPEARANCE ====*/
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        background-color: rgba(112,112,112,0.1);
        width: 10px;
        height: 6px;
    }

    ::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
        display: none;
    }

    ::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: rgba(76, 140, 43,1);
        background-clip: padding-box;
        border: 2px solid rgba(0, 0, 0, 0);
    }

    ::-webkit-scrollbar-thumb:hover {
        border-radius: 4px;
        background-color: rgba(76, 140, 43, 1);
    }
}

/*==================================
   TABLET
==================================*/
@media (min-width: 768px) and (max-width:992px) {
    /*====== MAIN LAYOUT ======*/
    .page-content-wrapper {
        margin-left: 10px;
        margin-right: 10px;
    }

    /*====== OVERRIDE DataTable CSS =====*/
    div.datatable-processing-box {
        left: 35%;
    }

    /*======= GENERAL EFFECT ======*/
    .margin-left {
        margin-left: 10px;
    }

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

    .center {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*==== HOME PAGE =====*/
    .widget .widget-icon {
        width: 90px;
        height: 90px;
    }

    .widget .widget-desc {
    }

    /*====== TOP MENU =====*/
    .top-menu .menu-item {
        width: 24%;
        margin-bottom: 2px;
    }

    .top-menu li {
        text-indent: 5px;
    }

    /*======  FORM WIZARD  ======*/
    .wizard-container {
        margin-left: 10px;
        margin-right: 10px;
    }

    .wizard-icon {
        width: 50px !important;
        height: 50px !important;
        line-height: 50px;
    }

    .wizard-icon img {
        width: 50px !important;
        height: 50px !important;
    }

    .wizard::after, .wizard::before {
        top: 26%;
    }

    /*==== 	PRODUCT CATALOGUE  =====*/
    #cart-summary-wrapper .cart-summary {
        height: 140px;
    }

    .product .product-desc {
        height: 130px;
    }

    .product .product-with-discount-1 {
        height: 160px;
    }

    .product .product-with-discount-2 {
        height: 180px;
    }

    .product .product-with-discount-3 {
        height: 200px;
    }

    .product .retail-product {
        height: 110px;
    }

    /*====== COMMISSION HISTORY ======*/
    #datatable-commission-history-order {
        width: 500px !important;
    }

    #datatable-commission-history-order {
        width: 750px !important;
    }

    #datatable-commission-history-refundorder {
        width: 700px !important;
    }

    /*=====  DOWNLINE VOLUME  ======*/
    #datatable-downline-volume-byweek {
        width: 900px !important;
    }

    #datatable-downline-volume-bymonth {
        width: 900px !important;
    }

    #datatable-downline-volume-detail {
        width: 900px !important;
    }

    /*===== DOWNLINE REPORT ======*/
    #datatable-downline-report {
        width: 1100px !important;
    }

    #datatable-downline-report-pgv {
        width: 800px !important;
    }
    
    #datatable-downline-report-orders{
       width: 950px !important;
    }

    /*=====  GENERATION TREE REPORT  ======*/
    #datatable-generation-tree-report {
        width: 600px !important;
    }

    /*===== AGENT ORDERS REPORT ======*/
    #datatable-agent-orders-report {
        width: 950px !important;
    }

    /*===== ADVANCE SEARCH ======*/
    #datatable-advance-search-0, #datatable-advance-search-1 {
        width: 900px !important;
    }

    /*=====  PRODUCT INFORMATION  ======*/
    .package-product-desc {
        height: 120px;
    }

    /*=====  RETAIL CART SETTING  ======*/
    .retailcart-product-desc {
        height: 115px;
    }

    /*=====  SUPREME BONUS  ======*/
    #supremebonus-notes {
        width: 100% !important;
    }

    /*====== GENEALOGY TREE (MY TEAM) ======*/
    #genealogy-tree .node-3 .node {
        height: 100px !important;
    }
}

/*==================================
   NORMAL MONITOR
==================================*/
@media (min-width: 993px) and (max-width:1200px) {
    /*===== DOWNLINE REPORT ======*/
    #datatable-downline-report {
        width: 1100px !important;
    }

    /*=====  DOWNLINE VOLUME  ======*/
    #datatable-downline-volume-byweek {
        width: 960px !important;
    }

    #datatable-downline-volume-bymonth {
        width: 960px !important;
    }

    #datatable-downline-volume-detail {
        width: 960px !important;
    }

    /*====== TOP MENU =====*/
    .top-menu .menu-item {
        width: 24%;
        margin-bottom: 3px;
    }

}