@media print {
    .printDisplay {
        display: none !important;
    }

    .page-content {
        border-left: 0 !important;
        border-bottom: 0 !important;
    }

    .portlet.light.bordered.print-body {
        background-color: #fff !important;
        border: none !important;
    }
}

.cart-product img {
    float: left;
    margin-right: 10px;
    width: 100%;
}

.cart-product a {
    text-decoration: none;
    color: #404040;
}

.cart-product .product-title {
    min-height: 0;
}

.cart-product .product-title .form-control{
    max-width:100%
}

.cart-product .product-price {
    display: block;
}

.cart-product.form-group{
    margin-bottom:0;
}

@media (max-width: 768px) {
    .input-lg {
        width: 100% !important;
    }
}


.view-less {
    height: 35px;
    width: 100%;
    overflow-y: hidden;
}

/*.view-less::after{
    content: "";
    height: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: linear-gradient(-180deg,hsla(0,0%,100%,0) 6%,#fff 83%);
}*/

.view-more {
    height: auto;
}

/*-------Custom Interface For All Layout--------*/
/*page body*/
body {
    background-color: #f6f6f6 !important;
}

/*Page logo*/
.page-logo {
    height: auto !important;
}

/*page content holder*/
.page-content {
    border-left: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

/*static label*/
.form-control-static {
    padding-left: 10px;
}

/*textbox*/
.form-control {
    border: 1px solid #808080 !important;
}

    /*readonly input*/
    .form-control[readonly] {
        cursor: default !important;
        color: #808080 !important;
        background-color: #fff !important;
    }

/*Statistic block button*/
.more {
    color: #FFFFFF !important;
    background-color: rgba(0,0,0,0.5) !important;
}

/*Table Header*/
.table-scrollable > .table > thead > tr > th, .table-scrollable > .table > tbody > tr > th, .table-scrollable > .table > tfoot > tr > th, .table-scrollable > .table > tfoot > tr > th, .table-scrollable > .table > tfoot > tr > td {
    white-space: normal !important;
}

/*======================Custom Interface For Layout 1======================*/
/*======================TOP NAVI BAR======================*/
.page-header.navbar {
    background-color: #7c51a1 !important;
    /*background-color: rgba(21, 21, 21, 0.9) !important;*/
    /*background-color: #404040 !important;*/
    -moz-box-shadow: 3px 3px 10px 6px rgba(36, 36, 36, 0.5) !important;
    -webkit-box-shadow: 3px 3px 10px 6px rgba(36, 36, 36, 0.5) !important;
    box-shadow: 3px 3px 10px 6px rgba(36, 36, 36, 0.5) !important;
}

    .page-header.navbar.navbar-fixed-top {
        color: #f1f1f1;
    }

@media (max-width: 480px) { /*top menu*/
    .page-header.navbar .top-menu {
        background: none !important;
    }
}

@media (max-width: 991px) { /*top menu toggler button layout1*/
    .page-header.navbar.navbar-fixed-top{
        height: auto;
    }

    .page-header.navbar .menu-toggler {
        opacity: inherit !important;
        filter: inherit !important;
        width: inherit !important;
        height: inherit !important;
    }

        /*top menu toggler button position*/
        .page-header.navbar .menu-toggler.responsive-toggler {
            margin: 0 5px !important;
        }
}
/*======================TOP NAVI BAR======================*/

/*======================LOGIN PAGE======================*/
.login {
    /*background-color: #000 !important;*/
    /*background: url(../../../../assets/img/wxtbg.jpg) #404040 !important;*/
    background: url(../img/tdc_bg.png) #673c8c !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
/*    background-image: url(//www.tdchb.com/wp-content/uploads/2021/04/img_main_background_rev1.1.jpg);*/
    background-position: left top;
}
/*======================LOGIN PAGE======================*/

/*======================SIDE MENU BAR======================*/
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover, .page-sidebar {
    background-color: #f6f6f6 !important;
}

    /*closed main menu*/
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a, .page-sidebar .page-sidebar-menu > li > a {
        border-top: 1px solid #ccc !important;
        color: #000 !important;
    }

    /*activated main menu*/
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a, .page-sidebar .page-sidebar-menu > li.active > a, .page-sidebar .page-sidebar-menu > li.active.open > a {
        background: #1fa149 !important;
        border-top-color: transparent !important;
        color: #fff !important;
    }

    /*inactive main menu*/
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a, .page-sidebar .page-sidebar-menu > li.open > a {
        background: #606060 !important;
        color: #fff !important;
    }

    /*inactive main menu hover*/
    .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a {
        /*background: #4db3a4 !important;*/
        color: #fff !important;
    }

    /*inactive main menu hover*/
    .page-sidebar .page-sidebar-menu > li:hover > a {
        /*background: #4db3a4 !important;*/
        color: #fff !important;
    }

/*sub menu*/
ul.sub-menu {
    background: none !important;
}

/*sub menu link hover/active*/
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a, .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a, .page-sidebar .page-sidebar-menu .sub-menu > li.open > a, .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
    background: #166d32 !important;
    color: #fff !important;
}

/*sub menu link inactive*/
.page-sidebar .page-sidebar-menu .sub-menu > li > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
    background: none !important;
    color: #000 !important;
}

@media (max-width: 991px) { /*top menu bar*/
    .page-sidebar {
        background-color: #f6f6f6 !important;
    }

        /*top sub menu link inactive*/
        .page-sidebar .page-sidebar-menu > li .sub-menu {
            background: none !important;
        }
}
/*======================SIDE MENU BAR======================*/

/*======================SIDE MENU BAR PURPLE======================*/

/*activated main menu*/
.page-sidebar-closed.page-sidebar-fixed .page-sidebar.purple-sidebar:hover .page-sidebar-menu > li.active > a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar.purple-sidebar:hover .page-sidebar-menu > li.active.open > a, .page-sidebar.purple-sidebar .page-sidebar-menu > li.active > a, .page-sidebar.purple-sidebar .page-sidebar-menu > li.active.open > a {
    background: #922a8f !important;
    border-top-color: transparent !important;
    color: #FFD700 !important;
}

/*sub menu link hover/active*/
.page-sidebar-closed.page-sidebar-fixed .page-sidebar.purple-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar.purple-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar.purple-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar.purple-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar.purple-sidebar .page-sidebar-menu .sub-menu > li.open > a,
.page-sidebar.purple-sidebar .page-sidebar-menu .sub-menu > li.active > a {
    background: #6b3091 !important;
    color: #FFD700 !important;
}

/*inactive main menu hover*/
.page-sidebar-closed.page-sidebar-fixed .page-sidebar.purple-sidebar:hover .page-sidebar-menu > li:hover > a {
    /*background: #4db3a4 !important;*/
    color: #FFD700 !important;
}

/*inactive main menu hover*/
.page-sidebar.purple-sidebar .page-sidebar-menu > li:hover > a {
    /*background: #4db3a4 !important;*/
    color: #FFD700 !important;
}

/*======================SIDE MENU BAR======================*/

/*======================Custom Interface For Layout 1======================*/


/*======================Custom Interface For Layout 3======================*/
/*======================HEADER TOP BAR======================*/
/*@media (max-width: 991px) top menu toggler button layout3*/
@media (max-width: 991px) {
    .page-header .page-header-top .menu-toggler {
        display: inline-block;
    }
}

/*top menu toggler button*/
.page-header .page-header-top .menu-toggler {
    float: none !important;
    margin: 0;
    width: inherit;
    height: inherit;
    background: #4db3a4 !important;
    background-repeat: no-repeat !important;
    opacity: 1;
    filter: 1;
}
/*======================HEADER TOP BAR======================*/

/*======================HEADER MENU BAR======================*/
/*menu bar*/
.page-header .page-header-menu {
    background: #444d58 !important;
}

    /*main menu link hover/active*/
    .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a:hover {
        color: #f1f1f1 !important;
        background: #4E5966 !important;
    }

    /*main menu link hover/opened submenu*/
    .page-header .page-header-menu .hor-menu .navbar-nav > li.open > a, .page-header .page-header-menu .hor-menu .navbar-nav > li > a:hover {
        color: #ffffff !important;
        background: #55616f !important;
    }

    /*sub menu list*/
    .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
        box-shadow: 5px 5px rgba(85, 97, 111, 0.2) !important;
        background: #55616f !important;
    }

        /*sub menu link*/
        .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a {
            color: #ced5de !important;
        }

        /*sub menu link hover*/
        .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li:hover > a {
            color: #ced5de !important;
            background: #5d6b7a !important;
        }

        /*sub menu link focus/active*/
        .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.current > a:hover {
            color: #ced5de !important;
            background: #5d6b7a !important;
        }

@media (max-width: 991px) {
    /*Header Menu*/
    .page-header .page-header-menu {
        background: #eff3f8 !important;
    }

        /*Menu bar*/
        .page-header .page-header-menu .hor-menu .navbar-nav {
            background: #fff !important;
        }

            /*main menu border*/
            .page-header .page-header-menu .hor-menu .navbar-nav > li {
                border-bottom: 1px solid #F0F0F0 !important;
            }

                /*main menu link hover*/
                .page-header .page-header-menu .hor-menu .navbar-nav > li:hover > a {
                    background: none !important;
                    color: #4db3a4 !important;
                }

                /*main menu link hover/active*/
                .page-header .page-header-menu .hor-menu .navbar-nav > li > a {
                    background: none !important;
                    color: #666 !important;
                }


                /*main menu link active/opened submenu*/
                .page-header .page-header-menu .hor-menu .navbar-nav > li.open > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.open > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li.current > a:hover {
                    color: #fff !important;
                    background: #4db3a4 !important;
                }

                /*sub menu*/
                .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
                    border: 0 !important;
                    border-top: 1px solid #eee !important;
                    box-shadow: none !important;
                    background: #fff !important;
                }

                    /*sub menu link*/
                    .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li > a {
                        color: #666 !important;
                    }
                    /*sub menu link active*/
                    .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.open > a, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.open > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.active > a, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.active > a:hover, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.current > a, .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li.current > a:hover {
                        color: #fff !important;
                        background: #4db3a4 !important;
                    }

                    /*sub menu link hover*/
                    .page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu li:hover > a {
                        background: none !important;
                        color: #4db3a4 !important;
                    }
}
/*======================HEADER MENU BAR======================*/

/*page title head*/
.page-head {
    position: relative;
    -moz-box-shadow: 0px 5px 10px #ccc !important;
    -webkit-box-shadow: 0px 5px 10px #ccc !important;
    box-shadow: 0px 5px 10px #ccc !important;
}
/*======================Custom Interface For Layout 3======================*/

/*--------Privilege Tree--------*/
.privilegeTree a {
    cursor: pointer;
    color: #111;
    text-decoration: none !important;
}

.privilegeTree ul {
    list-style: none outside none;
}

.privilegeTree li a {
    line-height: 25px;
}

.privilegeTree > ul > li > a {
    color: #3B4C56;
    display: inline-block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}

.privilegeTree li.parent > a.expand > a:before {
    background-position: 25px center;
    content: "";
    display: inline-block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}

.privilegeTree ul li.active > a.expand:before {
    background-position: 0 center;
}

.privilegeTree ul li ul {
    border-left: 1px solid #ccc;
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}

    .privilegeTree ul li ul li {
        position: relative;
    }

        .privilegeTree ul li ul li:before {
            border-bottom: 1px dashed #ccc;
            content: "";
            left: -20px;
            position: absolute;
            top: 12px;
            width: 15px;
        }

        .privilegeTree ul li ul li input[type=checkbox]:after {
            border-bottom: 1px dashed #ccc;
            content: "";
            left: -20px;
            position: absolute;
            top: 12px;
            width: 15px;
        }

/*--------Gridview--------*/
.gridStyle {
    /**/
}

    .gridStyle tr th {
        padding: 8px;
        border: 1px solid #dddddd;
        background: #f9f9f9;
        color: #000;
        text-align: center;
    }

    .gridStyle.horizontalGridLine tr th, .gridStyle.horizontalGridLine td {
        border: 1px solid #dddddd;
        border-left: none;
        border-right: none;
    }

    .gridStyle.padding12px td {
        padding: 12px;
    }

    .gridStyle.horizontalGridLine td:first-child {
        border: 1px solid #dddddd;
        border-right: none;
    }

    .gridStyle.horizontalGridLine td:last-child {
        border: 1px solid #dddddd;
        border-left: none;
    }

    .gridStyle tr:nth-child(even) {
        background-color: #ffffff;
    }

    .gridStyle tr:nth-child(odd) {
        background-color: #f9f9f9;
    }

    .gridStyle td {
        border: solid 1px #dddddd;
        padding: 4px; /*border:1px solid yellow; Use when you want to hide last row border (before it make ShowGridlines=None*/
    }

    .gridStyle tr:last-child td {
    }
/*--------Gridview--------*/

/*--------Pager--------*/
.formPager {
    padding: 5px 0 5px 0;
    text-align: center;
}

.buttonPager {
    min-width: 30px !important;
    width: auto !important;
    height: 25px;
    background: #fff;
    color: #000;
    border: 0;
    border-right: solid 1px #cccccc;
    border-left: solid 1px #cccccc;
    border-bottom: solid 2px #fff;
}

    .buttonPager:hover {
        background: #e5e5e5;
        font-weight: bold;
    }

    .buttonPager:disabled {
        border-bottom: solid 2px #852b99;
    }

/*--------Pager--------*/

.popupTable {
    background: #ffffff;
    box-shadow: 0 0 4px #888888;
    font-size: 12px;
    width: 200px;
}

    .popupTable tr td {
        padding: 0 1px;
    }

.treeTable {
    background: #ffffff;
    font-size: 12px;
}

    .treeTable tr td {
        padding: 0 1px;
    }

/*--------Loading--------*/

.loadingPage {
    opacity: 0.8;
    background-color: #ccc;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 99999;
    text-align: center;
}

    .loadingPage img {
        top: 40%;
        position: absolute;
    }

.boxShadow {
    box-shadow: 0px 5px 10px #ccc;
    -moz-box-shadow: 0px 5px 10px #ccc;
    -webkit-box-shadow: 0px 5px 10px #ccc;
}

.boxShadow-dark {
    box-shadow: 0px 5px 10px #404040;
    -moz-box-shadow: 0px 5px 10px #404040;
    -webkit-box-shadow: 0px 5px 10px #404040;
}

.transparentBG {
    background-color: rgba(255,255,255,0.95) !important;
}

.remarkOverflow {
    height: 50px;
    overflow: scroll;
    overflow-x: hidden;
}