/*
 ____     ___                   _
 |  |    /  /         ___      | |             ___    
 |  |_ /  /         / __ \     | |___        / __ \
 |   _   |         | /  \ |    |  __ \      | /  \ | 
 |  |  \  \        | \__/ |    | |__) |     | \__/ |  
_|__|_  \__\_       \ ___/     |_____/       \ ___/   

*/
/*===================               Kobo                   ====================*/
/*
Design by Terence
http://www.koboproductsinc.com
Released for Kobo
*/
/*------------------------------------------*/
/*	     01 - Override
/*	     02 - Nav
/*	     03 - New & Added
/*	     04 - bugs
/*	     05 - Kobo's Features
/*	     06 - Batches
/*	     08 - Effects

/*	     99 - # Element IDs
/*------------------------------------------*/

/*.debug{display:none;}*/
/*------------------------------------------*/
/*	     01 - Override
/*------------------------------------------*/
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    padding-top: 50px; /*space for navbar (one row)*/
    color: #6C6B6D;
    font-family: Trebuchet MS, Helvetica, sans-serif;
    background: #E7E8E8;
    font-size: 16px
    /*
	font-size: 12px; 
	padding-left: @gutter-width;
	padding-right: @gutter-width;
	*/
}

.narrow {
    font-family: 'Arial Narrow', Arial, sans-serif;
}

.narrow-large {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 205%
}

.affix {
    top: 70px; /*navbar +20*/
}

h1, h2, h3, h4, h5, h6 {
    color: #0E73AE;
}

    h1.highlight, h2.highlight, h3.highlight, h4.highlight, h5.highlight, h6 .highlight {
        color: #F36F23;
    }

h4, h5 {
    font-weight: bold;
}

h2.supper {
    font-size: 33px;
    text-decoration: underline;
}

h3.supper {
    font-size: 27px;
    text-decoration: underline;
}

/* fix for preventing navbar from overlapping */
h1[id] {
    /*padding-top: 80px;
  margin-top: -45px;*/
    padding-top: 10px;
}

@media (min-width: 768px) {
    .border-left {
        border-left: solid #bbb;
    }

    .border-right {
        border-right: solid #bbb;
    }

    .border-left {
        border-left: solid #bbb;
    }

    .border-right {
        border-right: solid #bbb;
    }
}

@media (min-width: 768px) and (max-width: 780px) {
    body { /*padding-top: 120px;*/
    }
}

@media (min-width: 781px) and (max-width: 915px) {
    body { /*padding-top: 100px;*/
    }
}
/*smartphones */
@media screen and (min-width: 400px) and (max-width: 800px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    select {
        width: 100%;
    }

    .navbar-brand img {
        margin-top: -10px;
    }
}



/*back-to-top*/
a.back-to-top {
    Display: none;
    right: 0;
    bottom: 180px;
    position: fixed;
    z-index: 999;
    border-radius: 30px 0px 0px 30px;
    background: #0E73AE;
    padding-left: 15px;
    padding-right: 5px
}

a.back-to-top, #goBack a {
    color: #ddd;
    font-weight: bold;
    text-decoration: none;
}

    a.back-to-top:hover, #goBack a:hover {
        text-decoration: none;
    }

a.go-back {
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    left: 10px;
    bottom: 50px;
    background: #0E73AE url("/images/arrow-left.png") no-repeat center 50%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
/*full width*/
.input-sm.full {
    width: 100%;
}
.transparent-input {
    background: transparent;
    border: none;

}					

.print + .print {
    page-break-before: always;
}





/*Print Friendly on col-md-*, but xs is working on Print */
@media print {
    /*avoid blank page*/

    body, page {
        margin: 0;
        padding: 0;
        line-height: 1.4em;
        word-spacing: 1px;
        letter-spacing: 0.2px;
        color: #000;
        background: transparent !important;
    }

    html, body {
        height: 99%;
        /*height: auto;		*/
    }



    html, body {
        /*
            page-break-after: avoid;
            page-break-before: avoid;
			min-height: auto;
			*/
        /*margin-top:-.25in;
			margin-bottom:0;
			*/
    }




    /*no url*/
    a[href]:after {
        content: none !important;
    }

    a {
        color: #000;
    }

    .pbtn {
        display: none
    }

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-11 {
        width: 91.66666666666666%;
    }

    .col-md-10 {
        width: 83.33333333333334%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-8 {
        width: 66.66666666666666%;
    }

    .col-md-7 {
        width: 58.333333333333336%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-5 {
        width: 41.66666666666667%;
    }

    .col-md-4 {
        width: 33.33333333333333%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-2 {
        width: 16.666666666666664%;
    }

    .col-md-1 {
        width: 8.333333333333332%;
    }

    .col-md-pull-12 {
        right: 100%;
    }

    .col-md-pull-11 {
        right: 91.66666666666666%;
    }

    .col-md-pull-10 {
        right: 83.33333333333334%;
    }

    .col-md-pull-9 {
        right: 75%;
    }

    .col-md-pull-8 {
        right: 66.66666666666666%;
    }

    .col-md-pull-7 {
        right: 58.333333333333336%;
    }

    .col-md-pull-6 {
        right: 50%;
    }

    .col-md-pull-5 {
        right: 41.66666666666667%;
    }

    .col-md-pull-4 {
        right: 33.33333333333333%;
    }

    .col-md-pull-3 {
        right: 25%;
    }

    .col-md-pull-2 {
        right: 16.666666666666664%;
    }

    .col-md-pull-1 {
        right: 8.333333333333332%;
    }

    .col-md-pull-0 {
        right: 0;
    }

    .col-md-push-12 {
        left: 100%;
    }

    .col-md-push-11 {
        left: 91.66666666666666%;
    }

    .col-md-push-10 {
        left: 83.33333333333334%;
    }

    .col-md-push-9 {
        left: 75%;
    }

    .col-md-push-8 {
        left: 66.66666666666666%;
    }

    .col-md-push-7 {
        left: 58.333333333333336%;
    }

    .col-md-push-6 {
        left: 50%;
    }

    .col-md-push-5 {
        left: 41.66666666666667%;
    }

    .col-md-push-4 {
        left: 33.33333333333333%;
    }

    .col-md-push-3 {
        left: 25%;
    }

    .col-md-push-2 {
        left: 16.666666666666664%;
    }

    .col-md-push-1 {
        left: 8.333333333333332%;
    }

    .col-md-push-0 {
        left: 0;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666666666666%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333333334%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666666666666%;
    }

    .col-md-offset-7 {
        margin-left: 58.333333333333336%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666666666667%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333333333%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-2 {
        margin-left: 16.666666666666664%;
    }

    .col-md-offset-1 {
        margin-left: 8.333333333333332%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }
}
/**col-sm-*/
@media print {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0%;
    }

    .visible-xs {
        display: none !important;
    }

    .hidden-xs {
        display: block !important;
    }

    table.hidden-xs {
        display: table;
    }

    tr.hidden-xs {
        display: table-row !important;
    }

    th.hidden-xs,
    td.hidden-xs {
        display: table-cell !important;
    }

    .hidden-xs.hidden-print {
        display: none !important;
    }

    .hidden-sm {
        display: none !important;
    }

    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

/*------------------------------------------*/
/*	     02 - Nav (Header, Navigation, Sidebar & Menu
/*------------------------------------------*/
/*1.navbar*/

.navbar-nav > li > a {
    /*font-size: 16px; */
    font-weight: bold;
}

.navbar-nav li a:hover {
    color: #F36F23 !important;
}
/*active*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #0E73AE;
    /*
  background-color: #e7e7e7;
  */
}

.navbar-brand img { /*logo*/
    width: 120px;
}

/*cneter nav*/
/*
.nav{
  display: inline-block;
  float: none;
  vertical-align: top;
}
.container-fluid {
  text-align: center;
}
*/
@media (max-width: 1199px) {
    .navbar-nav > li a {
        /*padding-left:2px;
	  padding-right:2px;*/
    }
    /*Search bar*/
    .navbar-nav .input-group {
        width: 120px !important;
    }
    /*Search btn*/
    .navbar-nav.input-group-addon {
        display: none;
    }
    /* Hide glyphicon, welcome*/
    .navbar-nav > li i {
        display: none;
    }
    /*Hide Extract*/
    .navbar-right nav-ext {
        display: none;
    }
}
/*iPad*/
@media (max-width: 991px) {
    /*.navbar-brand {margin-top:-10px;}*/
    /*.navbar-brand img{width:130px;}*/
}

/* iPhone 5 */
/*@media (min-width: 319px) and (max-width: 359px) {*/
@media (max-width: 359px) {
    /*.navbar-brand{margin-top:-62px;}*/

}

@media (min-width: 768px) and (max-width: 991px) {
    /*#topHeader{ margin-top:50px !important;}*/ /*skip logo*/
    .navbar-brand img {
        margin-top: 40px;
        margin-left: -10px;
    }

    .navbar {
        margin-top: -50px;
    }
}


/* Galaxy S5 */
@media (min-width: 360px) and (max-width: 374px) {
    /*.navbar-brand img{margin-top:2px;width:130px;}*/

}

/* iPhone 6 */
@media (min-width: 375px) and (max-width: 410px) {
    #topHeader {
        margin-top: 0px !important;
    }
}

/* iPhone 6 Plus */
@media (min-width: 414px) and (max-width: 767px) {

    /*.navbar-brand img{margin-top:2px;width:130px;}*/
}


@media (min-width: 768px) {
    .navbar-brand img {
    }
}

@media (min-width: 992px) {
    .navbar-brand img {
        margin-top: -10px;
    }
}

@media (min-width: 1200px) {
    /*.navbar-brand img{width:200px;}*/

    .navbar-nav > li a {
        /*padding-left:10px;
	  padding-right:10px;*/
    }

    .navbar-nav > li > a > .glyphicon {
        padding-right: 1px;
    }

    .navbar-nav .input-group {
        width: 180px;
    }
}

/*2.Search bar---*/
/*.navbar-form .form-control, .navbar-form .input-group-addon,.navbar-form a{*/

#divSearch .form-control, #divSearch .input-group-addon
/*,#divSearch .input-group-addon a*/ {
    border: 1px solid #0E73AE;
    font-size: 12px;
    /*
	 color:white;
	 background-color:#0E73AE;
	 */
    height: 30px;
}

#divSearch .input-group-addon {
    background-color: #0E73AE;
}

    #divSearch .input-group-addon a {
        color: white;
    }
/*#SearchHelp i{font-size:20px;vertical-align:middle;}*/


/*Security*/
.nav-sec a {
    color: #0E73AE;
}

    .nav-sec a:hover {
        color: #0E73AE !important;
    }

.footer .nav-sec a {
    background-color: #F36F23
}

/*------------------------------------------*/
/*3.Sidebar navigation
 * Scrollspy and affixed enhanced navigation to highlight sectionsections and secondary
 * sections of docs content.
 *focus not working after post
 * http://localhost/Products.aspx may not work in Chrome, http://localhost:4802/Products.aspx work.
/*------------------------------------------*/
/*Sidebar show on top. By default it's not affixed in mobile views, so undo that */

/* All levels of nav */
.k-sidebar .nav > li > a {
    display: block;
    color: #716b7a;
    background-color: #f2f0f5; /*#f7f5fa bg*/
    font-size: 16px;
    padding: 0px 15px;
    border-bottom: 1px solid #DDD;
}

/* 1st level of nav */
.k-sidenav {
    margin-top: 5px;
    margin-bottom: 10px; /*10*/
    padding-top: 2px;
    padding-bottom: 2px;
    /*text-shadow: 0 1px 0 #fff;*/
    border-radius: 5px;
    min-width: 150px;
}

/* 2nd level (shown on .active) */
.k-sidebar .nav .nav { /*Sepate 0.75st lel*/
    font-size: 14px;
    display: none;
    padding-bottom: 5px;
}

    .k-sidebar .nav .nav > li > a {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 22px;
        font-size: 12px;
        font-weight: 400
    }

        .k-sidebar .nav .nav > li > a:focus, .k-sidebar .nav .nav > li > a:hover {
            padding-left: 29px
        }

    .k-sidebar .nav .nav > .active:focus > a, .k-sidebar .nav .nav > .active:hover > a, .k-sidebar .nav .nav > .active > a {
        padding-left: 28px;
        font-weight: 500
    }

    /*3rd level*/
    .k-sidebar .nav .nav .nav > li > a {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 28px;
        font-size: 12px;
        font-weight: 400
    }


/*Hover*/
.k-sidebar .nav > li > a:focus, .k-sidebar .nav > li > a:hover {
    padding-left: 19px;
    color: #F36F23;
    text-decoration: none;
    border-left: 1px solid #563d7c
}

/*Active:---*/
/*1st*/
.k-sidebar .nav > li > a.active {
    padding-left: 18px;
}
/*2nd*/
.k-sidebar .nav .nav > .active > a {
    padding-left: 20px;
}
/*3rd*/
.k-sidebar .nav .nav .nav > .active > a {
    padding-left: 25px;
}
/*All level*/
.k-sidebar .nav > li > a.active, .k-sidebar .nav > li.active > a, .k-sidebar .nav .nav > .active > a {
    font-weight: bold !important;
    color: #FFF !important;
    background-color: #999;
    border-left: 2px solid #666;
}

    /*active arrow: 2nd & 3rd levle; prod:1st level */
    .k-sidebar .nav .nav > .active > a:after, .k-sidebar-prod .nav > .active > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 9px 0 9px 9px; /*size*/
        border-left-color: #999;
        margin-top: 0px; /*vertial location*/
        margin-right: -24px;
    }


/* Sidebar on the top*/
@media (max-width:991px) {
    .k-sidebar {
        position: static;
        width: auto;
        top: 0;
        margin-bottom: 5px;
        margin-left: 5px;
    }
}
/*Sidebar on left */
@media (min-width:992px) {
    .k-sidebar .nav > .active > ul {
        display: block;
        background-color: transparent;
    }
    /*bg, submenu*/
    /*.k-sidebar.affix,.k-sidebar.affix-bottom{margin-left:-30px;width:248px} */ /*213*/
    .k-sidebar.affix-bottom {
        position: absolute
    }

    .k-sidenav {
        max-width: 200px;
    }
}

/*4.submenu*/
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }
    /*margin-right:-10px; arrow outside*/
    .dropdown-submenu:hover > a:after {
        border-left-color: #ffffff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }


/*------------------------------------------*/
/*	     03 - New & Added 
				Charts
/*------------------------------------------*/
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.row.vdivide [class*='col-']:not(:last-child):after {
    background: #0E73AE;
    width: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    min-height: 70px;
}

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"]

{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}

/*Sort directions*/
.sorted-asc, .sorted-desc {
    background-repeat: no-repeat;
    background-position: right center;
    /*
	background-position:95% 50%;
	background-color: #FFFFCC !important;
  */
}

.sorted-asc {
    background-image: url(/images/asc.gif);
}

.sorted-desc {
    background-image: url(/images/desc.gif);
}

    .sorted-asc a, .sorted-desc a {
        padding-right: 6px;
    }

table.strapless {
    max-width: 100%;
    background-color: transparent;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

/*data table(chart) styles*/
.table-nonfluid {
    width: auto !important;
}

table.data {
    box-shadow: 4px 4px 2px #BBB;
    margin-bottom: 1em;
    /*width:2200px !important;width: auto !important;*/
    /*width: auto !important;*/
    width: 100%;
}

    table.data caption {
        color: #0E73AE;
        font-size: 1.5em;
    }

    table.data .divider {
        color: #efefef;
        font-weight: bold;
        background-color: #0E73AE;
    }

    table.data tr, table.data th, table.data td {
        border-color: #BCBEC0;
        padding: 3px;
    }

    table.data th {
        text-align: center !important;
        background-color: #0E73AE;
        color: #FFF;
        font-weight: bolder;
    }

        table.data th a {
            color: #EEE;
            font-weight: bolder;
        }

            table.data th a:hover {
                color: #FFF;
            }

    table.data td {
        /*border: 1px solid #999 !important;Chrome missed some borders*/
        /*padding:5px; -> Chrome lost borders*/
        /*background-color: #E6E7E8;*/
        font-size: small;
        padding: 0 5px 0 5px;
        letter-spacing: 0px; /*for paging err:http://localhost/KoboSearchCat.aspx?q=265&c=3&isChartID=True*/
    }

    table.data ul {
        list-style-type: none;
    }

    table.data tr {
        background: #EEE;
    }

    table.data .data00 {
        background: #ADD8E6;
    }

cell-products {
    border: 1px solid #999;
}

/*Columns*/
table.table3 {
    width: 33.3333%;
    min-width: 33.3333%;
}

table.table6 {
    /*.table !nowork;*/
    width: 50%;
    min-width: 50%;
}

table.table8 {
    width: 66.6667%;
    min-width: 66.6667%;
}

.width-12 {
    width: 100%;
}

.width-11 {
    width: 91.66666666666666%;
}

.width-10 {
    width: 83.33333333333334%;
}

.width-9 {
    width: 75%;
}

.width-8 {
    width: 66.66666666666666%;
}

.width-7 {
    width: 58.333333333333336%;
}

.width-6 {
    width: 50%;
}

.width-5 {
    width: 41.66666666666667%;
}

.width-4 {
    width: 33.33333333333333%;
}

.width-3 {
    width: 25%;
}

.width-2 {
    width: 16.666666666666664%;
}

.width-1 {
    width: 8.333333333333332%;
}

/*Textboxes*/
input.input-1, input.input-2, input.input-3, input.input-4, input.input-5, input.input-6 {
    height: 34px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input.input-1 {
    padding: 6px 2px;
}

input.input-2, input.input-3 {
    padding: 6px 3px;
}

input.input-4, input.input-5, input.input-6 {
    padding: 6px 6px;
}

input.input-1 {
    width: 1.4em;
}

input.input-2 {
    width: 2.4em;
}

input.input-3 {
    width: 3.4em;
}

input.input-4 {
    width: 6.4em;
}

input.input-5 {
    width: 10.4em;
}

input.input-6 {
    width: 20.4em;
}

/*------------------------------------------*/
/*	     04 - Bugs
/*------------------------------------------*/
/*fix location on autocomlete combox in ajax*/
.ajax__combobox_textboxcontainer input {
    position: absolute;
    bottom: -3px;
    /*left: 0;*/
}

.ajax__combobox_buttoncontainer {
    position: absolute;
    bottom: -6px;
}
/*customize*/
.ajax__combobox_inputcontainer, .ajax__combobox_textboxcontainer, .ajax__combobox_textboxcontainer input {
    width: 300px;
}

.ajax__combobox_itemlist {
    position: absolute !important;
    /*height: 200px !important;*/
    width: 400px !important;
    overflow: auto !important;
    top: auto !important;
    left: auto !important;
    background-color: Green;
    border-right: 0px none;
}


/*------------------------------------------*/
/*	     05 - Kobo's Features
/*------------------------------------------*/
/*
1. background style
*/
.k-bg {
    color: #FFF;
    padding: 10px 10px 10px 10px;
    background: #286090; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top,#286090 0,#0493bd 100%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right,#286090 0,#0493bd 100%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right,#286090 0,#0493bd 100%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right,#286090 0,#0493bd 100%);
    /*background-repeat: repeat-x;*/
}

    .k-bg h1, .k-bg h2, .k-bg h3, .k-bg h4, .k-bg h5, .k-bg h6 {
        color: #fff;
    }

    .k-bg img {
        width: 180px;
        padding: 10px;
    }

    .k-bg .qr img {
        width: 130px;
        padding: 10px;
    }

    .k-bg a, .k-bg .k-ul li > span, .k-ul li > span a {
        color: #efefef;
        text-decoration: none;
    }

        .k-bg .k-ul li > span a:hover {
            color: #fff2a8;
            text-decoration: underline;
        }

.k-ul a {
    font-weight: bold;
}
/*2nd level bg*/
.k-bg .k-bg, .k-bg-white {
    color: #666;
    background: #FFF;
    margin: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

    .k-bg .k-bg h1, .k-bg .k-bg h2, .k-bg .k-bg h3, .k-bg .k-bg h4, .k-bg .k-bg h5, .k-bg .k-bg h6,
    .k-bg-white h1, .k-bg-white h2, .k-bg-white h3, .k-bg-white h4, .k-bg-white h5, .k-bg-white h6 {
        color: #0E73AE;
    }

.k-bg-icon, .k-bg-icon a, a.view-link {
    color: white;
    /*
    
    font-style: italic;
	*/
    font-weight: bold;
    background-color: #F36F23;
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

    .k-bg-icon.pink, .k-bg-icon.pink a, a.view-link.pink {
        text-align: center;
        background-color: deeppink;
    }
    /*a.view-link.top{margin-bottom:-500px;}*/
    a.view-link:hover {
        color: #0E73AE;
        font-size: 104%;
    }

a.view-link0 {
    display: block;
    margin-top: 25px;
    padding-right: 1em;
    padding-left: 1em;
}

/*a.view-link{display: block;	margin:.5em;}*/

/*
2. header
*/
.page-header {
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

    .page-header h1, .page-header h2, .page-header h3 {
        margin-top: 0px;
        margin-bottom: 0px;
    }
/*kobo header style*/
.k-header {
    text-shadow: 0 1px 0 rgba(0,0,0,.1);
    font-size: large;
    position: relative;
    overflow: hidden;
    border-bottom: .5em solid #F36F23;
    padding-bottom: 0;
}

    .k-header.k-bg {
        padding-top: 0;
    }
    /*
.k-header .container div{
	padding-left:20px;
	padding-right:20px;
	margin-right:20px;
}
*/
    .k-header img {
        /*width: auto;
	height: auto;*/
        max-width: 400px;
        max-height: 300px;
        display: block;
        float: right;
        /*margin-right:-40px;
	margin:-20px -20px -20px 5px;*/
    }

    .k-header h1, .k-header h2 {
        text-align: center;
        text-transform: uppercase;
    }

    .k-header h3 {
        text-align: center;
    }
/*k-row compact: No "-15" margin*/
.k-row {
    /*margin-right: 0px; margin-left: 0px;*/
    margin: 2px 0;
}

    .k-row + .k-row {
        margin-top: 10px;
    }

    .k-row:before,
    .k-row:after {
        display: table;
        content: " ";
    }

    .k-row:after {
        clear: both;
    }

    .k-row .col-lg-1, .k-row .col-lg-10, .k-row .col-lg-11, .k-row .col-lg-12, .k-row .col-lg-2, .k-row .col-lg-3, .k-row .col-lg-4, .k-row .col-lg-5, .k-row .col-lg-6, .k-row .col-lg-7, .k-row .col-lg-8, .k-row .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .k-row .col-sm-1, .k-row .col-sm-10, .k-row .col-sm-11, .k-row .col-sm-12, .k-row .col-sm-2, .k-row .col-sm-3, .k-row .col-sm-4, .k-row .col-sm-5, .k-row .col-sm-6, .k-row .col-sm-7, .k-row .col-sm-8, .k-row .col-sm-9, .k-row .col-xs-1, .k-row .col-xs-10, .k-row .col-xs-11, .k-row .col-xs-12, .k-row .col-xs-2, .k-row .col-xs-3, .k-row .col-xs-4, .k-row .col-xs-5, .k-row .col-xs-6, .k-row .col-xs-7, .k-row .col-xs-8, .k-row .col-xs-9 {
        padding-right: 2px;
        padding-left: 2px;
    }

/*
3. images---
*/
/*prodctut descrition page*/
.img-page {
    width: 250px;
    padding: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img-desc {
    width: 250px;
    float: right;
    margin: 5px;
    /*from img-thumbnail*/
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.subcat img.img-desc {
    width: 250px;
}

.img-top {
    margin: 5px;
    /*from img-thumbnail*/
    display: inline-block;
    /*max-width: 200px;*/
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
/*topPics*/
/* figcaption be restricted to the width of a responsively sized image
 * Products_Categories.aspx
 */
.top-pic {
    display: inline-block;
    vertical-align: text-top;
    width: 24%;
}

.top-pic-l {
    width: inherit;
}

figure {
    padding: 2px 5px;
    font-size: .875em;
    display: table;
    text-align: center;
}

    figure img {
        display: block;
        width: 100%;
    }

figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0 5px 2px;
    font-weight: bold;
    color: #0E73AE;
}

​

.control-label {
    text-align: right;
}


/*images no space*/
img.img-2 {
    width: 50%;
    margin: -2px;
}

img.img-3 {
    width: 33.3333%;
    margin: -2px;
}

img.img-4 {
    width: 25%;
    margin: -2px;
}

img.img-5 {
    width: 20%;
    margin: -2px;
}

/*image: new flag*/
.newflag-no:before {
    content: url(/images/newflag-no.gif);
    float: left;
    padding-right: 0.5em;
}
/*
.newflag:before, div.newflag{content:url(/images/new.gif);float:left;padding-right: 0.5em;margin-left:-3.5em;} 
transform: scale(.5);
*/
/*img*/
.newflag00:before, div.newflag00 {
    content: url(/images/new.gif);
    float: left;
    margin-left: -1.5em;
}

.newflag-l00:before {
    content: url(/images/new.gif);
    float: left;
    margin-left: -3em;
}

.newflag-s:before {
    content: url(/images/new.gif);
    float: left;
}

.newflag-xl00:before {
    content: url(/images/new.gif);
    float: left;
    margin-left: -7.5em;
}

/*font*/
.newflag:before, div.newflag {
    content: 'New';
    float: left;
    margin-left: -3.5em;
    color: #EEE; /*Categories page cannot show white or to light*/
    font-style: italic;
    font-size: small;
    font-weight: bold;
    background-color: #F36F23;
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}
/*	
h1.newflag:before,h2.newflag:before,h3.newflag:before,h4.newflag:before,h5.newflag:before,h6.newflag:before {
  margin-left:-3.5em;
}
*/
/*Sidebar,outside table*/
.newflag-l:before {
    margin-left: -4.6em;
}

/*Pigment outside table*/
.newflag-xl:before {
    margin-left: -8.5em;
}

.newflag.charttitle:before {
    margin-top: 0.5em;
    margin-left: -4em;
}

/*Chrome bug: lose border (mCategory=Specialties; newflag inside box ,not float)*/
/*.newflag-in:before{content:url(/images/new.gif);} */
/*
.newflag-in:before{
content:url(/images/new.gif);
-webkit-float: none;
	-ie-float:left;
padding-right: 0.5em;
margin-left:-3.5em;
} 
*/
/*Changed in media Chrome*/
.webkit .newflag-in:before, div.newflag {
    content: url(/images/new.gif);
}
/*div.newflag{content:url(/images/new.gif);float:left;} */

.data .newflag-r div:after {
    content: url(/images/new.gif);
}

.newflag-right:after {
    content: url(/images/new.gif);
    padding-left: 0.2em;
}

div.True:before, td.True:before {
    content: url(/images/check_mark.gif);
}

/*
4. Links
*/
/*box of links*/
a.k-link:link, a.k-link:visited, a.flyer:link, a.flyer:visited, .flyers a:link, .flyers a:visited {
    padding: 0 3px;
    margin: 0 -3px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

a.k-link:hover, a.k-link:focus, a.flyer:hover, a.flyer:focus, .flyers a:hover, .flyers a:focus {
    /*position: relative;
	top: -1px;*/
    text-decoration: none;
    -webkit-box-shadow: 5px 5px 7px #BBB;
    -moz-box-shadow: 5px 5px 7px #BBB;
    -khtml-box-shadow: 5px 5px 7px #BBB;
    box-shadow: 5px 5px 7px #BBB;
    outline: 0 none;
    transform: scale(2);
    color: #6d3f03;
    background: #fff4e5;
}

a.k-link:active, a.flyer:active, .flyers a:active {
    position: relative;
    top: 1px;
    -webkit-box-shadow: 2px 2px 7px #BBB;
    -moz-box-shadow: 2px 2px 7px #BBB;
    -khtml-box-shadow: 2px 2px 7px #BBB;
    box-shadow: 2px 2px 7px #BBB;
    outline: 0 none;
}

/*
5. Tabs
*/
/*Slanted tabs*/
/*.k-header ul.tab-slanted*/
ul.tab-slanted {
    font-size: medium;
    font-weight: bold;
    margin-bottom: 0;
    padding-left: 20px;
}

    ul.tab-slanted li {
        display: inline;
    }

.tab-slanted {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

    .tab-slanted a {
        position: relative;
        display: inline-block;
        /*padding: 1.5em 1.5em 1em;*/
        color: inherit;
        text-decoration: none;
        margin: 0 -2px; /*Tabs overlapping*/
    }

        .tab-slanted a::before {
            /*border: .1em solid #aaa;*/
        }

        .tab-slanted a::before {
            content: ''; /* To generate the box */
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            background: #0E73AE;
            box-shadow: 0 2px hsla(0,0%,100%,.5) inset; /*top shadow*/
            transform: perspective(4px) rotateX(.75deg); /*slanted deg*/
            transform-origin: bottom;
        }

    .tab-slanted.left a {
        padding: .5em 2em .25em 1em;
    }

        .tab-slanted.left a::before {
            transform-origin: bottom left;
        }

    .tab-slanted.right a {
        padding: 1em 1em .25em 2em;
    }

        .tab-slanted.right a::before {
            transform-origin: bottom right;
        }
    /*.tab-slanted li{position:relative;}*/
    .tab-slanted li.active a {
        z-index: 2;
    }

        .tab-slanted li.active a::before {
            margin-bottom: -1px;
            border-top-width: 1px;
        }

        .tab-slanted li.active a:before, .tab-slanted li a.active:before {
            background: #F36F23;
        }

.tab-slanted-2.left a {
    margin-top: -5px;
}
/*move up 2 rows tabs*/


/*
miscellaneous
*/
/*kobo li: orange bullet*/
ul.k-ul {
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
}

.k-ul li:before {
    content: "■";
    padding-right: 8px;
    color: #F36F23;
}
/*
.k-ul li, .k-ul li>span a:hover{
   color:#F36F23;
   list-style:square;
}
*/
.k-ul li > span, .k-ul li > span a {
    color: #666;
}

/*Others---------------*/
/*printing*/
@media screen {
    .print-footer, .page-break {
        display: none;
    }
}

@page {
    size: auto;
    /*size: 8.5in 11in;*/ /* width height */
    margin: 5%;
}

@media print {
    html, body {
        /*width: 210mm;
    height: 297mm;*/
        /*width: 8.5in;
    height: 11in;*/
        /*margin: 0.5in 0.5in 0.5in 1.5in;*/
    }

    .back-to-top {
        display: none !important;
    }

    .print-footer {
        position: fixed; /*absolute;*/
        bottom: 0;
        font-size: 16px;
        font-weight: bold;
        width: 100%;
        text-align: center;
        text-transform: uppercase;
    }

        .print-footer::after {
            content: "KOBO PRODUCTS, INC.•3474 SOUTH CLINTON AVENUE•SOUTH PLAINFIELD, N.J. 07080 U.S.A.";
        }

    table.data td {
        background: white !important;
    }

    .box {
        background: transparent !important;
    }

    .gvPager {
        display: none;
    }

    page {
        border: 1px solid black;
    }
    /*.page-break {page-break-before:always;}*/


    /*
* {-webkit-print-color-adjust:exact;}
.sun{
	 content:url("/images/sun.gif");
   }*/


}


.number {
    text-align: right;
}

.watermark {
    color: #e0e0e0;
    font-size: 100pt;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    position: absolute;
    width: 50%;
    height: 50%;
    margin: 0;
    z-index: -1;
    left: 15%;
    top: 20%;
}


@media print {
    .print-watermark {
        color: #000;
        opacity: 0.1;
        font-size: 100pt;
        line-height: 1.6;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        position: fixed;
        top: 10%;
        left: 15%;
        z-index: 999;
    }

        .print-watermark:after {
            content: "KOBO PRODUCTS INC"
        }
}

.centered-table {
    margin: 0 auto;
}

.minHeight {
    min-height: 500px;
}
/*100% Validator not same line*/
.form-control.validated {
    width: 95% !important;
    display: inline-block;
}

.form-control.validated1 {
    width: 90% !important;
    display: inline-block;
}
/*short*/
/*.form-control.validated + span{margin-left:50px;z-index:1;}*/


/*glyphicon*/
.glyphicon-download-alt {
    color: #F36F23;
    text-shadow: 2px 1px 1px #FFB303;
}

.glyphicon-remove {
    color: red;
}
/*uncheck*/
.glyphicon-leaf {
    color: #5cb85c;
}
/*
* for divider
*/
.blank_row {
    line-height: 3px; /*for Chrome*/
    height: 3px !important; /* Overwrite any previous rules */
}

.dividerbar {
    line-height: 3px; /*for Chrome*/
    height: 3px !important; /* Overwrite any previous rules */
    background-color: gray !important;
}

    .dividerbar td {
        color: #800000;
        font-weight: bold;
        text-align: left;
    }

/*color*/
.red {
    color: red;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

.k-orange {
    color: #F36F23;
}

.bookmark {
    display: block;
    position: relative;
    top: -60px; /*nav bar account 50px*/
    /*visibility: hidden;*/
}

    .bookmark + .bookmark-chart {
        /*top: -200px; */
    }
    /*For URLbookmark highlight -> next div(Trade/Formula/Literature Name)*/
    .bookmark.highlight + div, .bookmark.highlight + span, .bookmark.highlight + b {
        background-color: yellow;
        color: #F36F23;
        border: 1px solid #e1e1e8;
        border-radius: 4px;
    }

.hightlight {
    background-color: yellow;
    border: 1px solid #e1e1e8;
    border-radius: 4px;
}


/*For bookmark skip navbar*/
/* conflit with clicked
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}
*/

.NoteMark {
    color: Green;
    padding-top: 0.5em;
}

.NoteMark-Pink {
    color: #F000A0;
    padding-top: 0.5em;
}

.k-pink {
    color: #F000A0;
}


ul.flyers, ul.note, ul.pagenote {
    list-style-type: none !important;
}

.flyers li {
    font-size: 11pt;
}
    /*padding of li*/
    .flyers li a {
        font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
        font-weight: bolder;
        font-size: 9pt;
        text-decoration: underline;
        color: #9C3910;
        font-weight: normal;
    }
/*Note(s): after chart...*/
ul.note, ul.pagenote {
    color: green;
    font-size: 14px;
}
/*ul.note>:first-child:before{content:"Note(s): "}*/
/*ul.note>:not(:first-child):before{content:"";padding-right:4em;} */ /*align first li*/
ul.note00 > :first-child:before {
    content: "Note(s):";
    /*Newline*/
    clear: right;
    display: block;
}

ul.pagenote00 > :first-child:before {
    content: "Page Note(s):";
    /*Newline*/
    clear: right;
    display: block;
}

.nav-social ul {
    margin-bottom: 3px;
}

.social-buttons a {
    text-decoration: none;
}

/*AutoComplete flyout */
.autocomplete_completionListElement {
    margin: 0px !important;
    background-color: inherit;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: 'default';
    overflow: auto;
    height: 200px;
    text-align: left;
    list-style-type: none;
    padding: 1px;
}

/* AutoComplete highlighted item */
.autocomplete_highlightedListItem {
    background-color: #ffff99;
    color: black;
    padding: 1px;
}

/* AutoComplete item */
.autocomplete_listItem {
    background-color: window;
    color: windowtext;
    padding: 1px;
}

/*PATENT*/
.PATENT {
    color: #6C6B6D;
}

/*ECOCERT*/
.ECOCERT, .ECOCERT-COSMOS {
    color: #F000A0;
}

    .ECOCERT:before {
        background-image: url('/images/ECOCERT.gif');
        background-size: 50px 50px;
        display: inline-block;
        width: 50px;
        height: 50px;
        content: "";
    }

    .ECOCERT-COSMOS:before {
        background-image: url('/images/ECOCERT-COSMOS.gif');
        background-size: 50px 50px;
        display: inline-block;
        width: 50px;
        height: 50px;
        content: "";
    }

/*colorbar for Pigmentary*/
.bar-red {
    border-left: 5px solid red !important;
}

.bar-blue {
    border-left: 5px solid blue !important;
}

.bar-black {
    border-left: 5px solid black !important;
}

.bar-purple {
    border-left: 5px solid purple !important;
}

.bar-brown {
    border-left: 5px solid brown !important;
}

.bar-yellow {
    border-left: 5px solid yellow !important;
}

.bar-pink {
    border-left: 5px solid pink !important;
}

.bar-green {
    border-left: 5px solid green !important;
}

.bar-red {
    border-left: 5px solid red !important;
}
/*.bar-white{border-left:5px solid White!important;}*/
.bar-white {
    border-left: 5px solid White !important;
    outline: 1px solid black; /*left of border*/
    box-shadow: inset 1px 0 0 black, /*right of border*/
}

/*
.btn-default {
background-color: #f7f5fa;
}
*/
input[type="checkbox"] + label {
    margin-left: 10px;
}

/*------------------------------------------*/
/*	     06 - Batches
/*------------------------------------------*/
/*
1. Portfolio  & thumbnail list Section
	hover img fade in info 
/*------------------------------------------*/
.portfolio-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

    .portfolio-list > li {
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 50%;
        margin-left: -4px;
        margin-bottom: -5px;
        padding: 0;
        text-align: center;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

        .portfolio-list > li h3 {
            color: #F36F23;
            margin-top: 2px;
        }

        .portfolio-list > li img {
            width: 100%;
            border: 1px solid #DDD;
        }

@media only screen and (max-width : 550px) {
    .portfolio-list li {
        width: 49.9999%;
    }
}
/*@media only screen 
and (max-width : 767px)
and (min-width : 551px)*/
@media only screen and (min-width : 551px) {
    .portfolio-list li {
        width: 33.3333%;
    }
}
/*max cols 4*/
@media (min-width: 768px) {
    .portfolio-list4 li {
        width: 24.9999%;
    }
}
/*max cols 5*/
@media (min-width: 992px) {
    .portfolio-list5 li, .portfolio-list6 li {
        width: 19.9999%;
    }
}
/*max cols 6*/
@media (min-width: 1200px) {
    .portfolio-list6 li {
        width: 16.66%;
    }
}

.portfolio-item {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    cursor: default;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

/*caption=fadein*/
.portfolio-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0;
    filter: Alpha(Opacity=0);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

    .portfolio-caption h4 {
        display: inline-table;
        text-transform: uppercase;
        color: #fff;
        font-weight: 400;
        text-align: center;
        font-size: 18px;
        padding-top: 10%;
    }

    .portfolio-caption p {
        position: relative;
        top: 12%;
        color: #fff;
        font-size: 18px;
        letter-spacing: 1px;
        padding: 0 10%;
    }
    /*fa-link*/
    .portfolio-caption a i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        padding: 20px;
        font-size: 25px;
        border-radius: 100%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -o-border-radius: 100%;
        /*background: #fff; *//*for link*/
        color: #fff;
        position: absolute;
        top: 70%;
    }

    .portfolio-caption a.link-1 i {
        left: 30%;
    }

    .portfolio-caption a.link-2 i {
        left: 50%;
    }

    .portfolio-caption h3, .portfolio-caption h4,
    .portfolio-caption p,
    .portfolio-caption a i {
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,200%,0);
        transform: translate3d(0,200%,0);
    }

.portfolio-item:hover .portfolio-caption h4,
.portfolio-item:hover .portfolio-caption p,
.portfolio-item:hover .portfolio-caption a i {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/*for hover fade in,  to be changed:*/
.portfolio-item:hover .portfolio-caption {
    background-color: rgba(15, 114, 173, 0.8);
    opacity: 1;
    filter: Alpha(Opacity=100);
}
    /*delays*/
    .portfolio-item:hover .portfolio-caption h4 {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .portfolio-item:hover .portfolio-caption p {
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .portfolio-item:hover .portfolio-caption a.link-1 i {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .portfolio-item:hover .portfolio-caption a.link-2 i {
        -webkit-transition-delay: 0.25s;
        transition-delay: 0.25s;
    }

/*
2. Animate
*/
/*scale*/
.hover-scale {
    -moz-transition: transform .15s ease-out 0ms;
    -o-transition: transform .15s ease-out 0ms;
    -webkit-transition: transform .15s ease-out 0ms;
    transition: transform .15s ease-out 0ms;
}

    .hover-scale:hover {
        -moz-transform: scale(1.07);
        -ms-transform: scale(1.07);
        -o-transform: scale(1.07);
        -webkit-transform: scale(1.07);
        transform: scale(1.07);
    }

.rotate360 {
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
}

    .rotate360:hover {
        text-shadow: 3px 3px 3px #EEE;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg); /* Safari */
    }

.verticaltext {
    transform: rotate(-90deg);
    transform-origin: right, top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right, top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right, top;
}

/*Flipboard buttons*/
ul.flipboard {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
    -moz-perspective: 10000px;
    -o-perspective: 10000px;
    perspective: 10000px;
}

    ul.flipboard li {
        display: inline-block;
        width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
        height: 80px;
        margin-right: 10px; /* spacing between buttons */
        background: white;
        font: bold 36px Arial; /* font size */
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
    }

        ul.flipboard li a {
            display: block;
            width: 100%;
            height: 100%;
            color: black;
            text-decoration: none;
            outline: none;
            -webkit-transition: all 300ms ease-out 0.0.75s; /* CSS3 transition. Last value is pause before transition play */
            -moz-transition: all 300ms ease-out 0.0.75s;
            -o-transition: all 300ms ease-out 0.0.75s;
            transition: all 300ms ease-out 0.0.75s;
        }

            ul.flipboard li a span {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding-top: 15px; /* Add top padding to "center" content */
                display: block;
                width: 100%;
                height: 100%;
                -webkit-transition: all 300ms ease-out 0.0.75s; /* CSS3 transition. Last value is pause before transition play */
                -moz-transition: all 300ms ease-out 0.0.75s;
                -o-transition: all 300ms ease-out 0.0.75s;
                transition: all 300ms ease-out 0.0.75s;
            }

            ul.flipboard li a img {
                border-width: 0;
            }

        ul.flipboard li:hover a {
            -moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
            background: #cef1ff; /* background color of button onmouseover */
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            border-radius: 7px;
            -webkit-box-shadow: 0 0 5px #eee inset;
            -moz-box-shadow: 0 0 5px #eee inset;
            box-shadow: 0 0 5px #eee inset;
        }

            ul.flipboard li:hover a span {
                -moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
                -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
            }
/*End: Flipboard buttons*/

.zoom:hover {
    transform: scale(1.2);
}
.zoom15:hover {
    transform: scale(1.5);
}
/* NO ZOOM */
.no-zoom ul:hover {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
}
/* ZOOM SHADOW */
.shadow ul:hover {
    box-shadow: 0 0 12px 5px #aaa !important;
    -moz-box-shadow: 0 0 12px 5px #aaa !important;
    -webkit-box-shadow: 0 0 12px 5px #aaa !important;
    -o-box-shadow: 0 0 12px 5px #aaa !important;
}

.vcenter { /*vcenter inner div*/
    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
/*
.outer {
  display: table;
}

.inner {
  display: table-cell; vertical-align: middle; 
}
*/

.img-center {
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}




/*
3. Boxes Section
*/
.box {
    padding: 9px 14px;
    margin-bottom: 14px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 5px;
}

    .box .box {
        padding: 9px 14px;
        margin-bottom: 14px;
        background-color: #e6e6e8;
        border: 1px solid #eee;
        border-radius: 5px;
    }



    .box .caption {
        font-weight: bolder;
        color: #800000;
    }
/*boxes with width*/
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 {
    color: #0E73AE;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
}

    .box1 img, .box2 img, .box3 img, .box4 img, .box5 img, .box6 img, .box7 img, .box8 img, .box9 img, .box10 img {
        width: 100%;
    }

.box1, .box2 {
    margin: 1em;
}

.box3, .box4 {
    margin: .8em;
}

.box5, .box6 {
    margin: .6em;
}

.box7, .box8 {
    margin: .4em;
}

.box9, .box10 {
    margin: .2em;
}


/*row=847*/
.box1 {
    width: 800px;
}

.box2 {
    width: 380px;
}

.box3 {
    width: 250px;
}

.box4 {
    width: 190px;
}

.box5 {
    width: 150px;
}

.box6 {
    width: 135px;
}

.box7 {
    width: 115px;
    font-size: small;
}

.box8 {
    width: 95px;
    font-size: small;
}

.box9 {
    width: 85px;
    font-size: x-small;
}

.box10 {
    width: 80px;
    font-size: x-small;
}


    .box8:hover, .box9:hover, .box10:hover {
        transform: scale(1.5);
        background-color: white;
    }









.box-cat {
    color: #0E73AE;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    width: 150px;
}

    .box-cat img {
        width: 80%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


/*
* k-box
* (samll box)
*/
.k-box {
    font-size: x-large;
    color: #FFF;
    padding: 5px;
    margin: 5px 10px;
    border-radius: 4px;
    background: #F36F23; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left top,#F36F23 0,#f69055 100%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right,#F36F23 0,#f69055 100%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right,#F36F23 0,#f69055 100%); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right,#F36F23 0,#f69055 100%);
    /*background-repeat: repeat-x;*/
}

    .k-box .narrow {
        font-size: 205%;
    }

/*
* kobo-box
* (complicated box)
*/
.kobo-box {
    font-size: 14px;
    background-color: white;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
    text-align: center;
    border: 1px solid #BFBFBF;
    border-radius: 6px;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transition: transform 0.75s;
    -webkit-transition: -webkit-transform 0.75s;
    -moz-transition: -moz-transform 0.75s;
    -o-transition: -o-transform 0.75s;
}

    .kobo-box > h2, .kobo-box > h3 {
        color: white;
        font-weight: bold;
        margin: 0;
        padding: 10px;
        border-radius: 6px 6px 0 0;
        background-color: #F36F23;
        background: -webkit-linear-gradient(left top,#F36F23 0,#f69055 100%); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom right,#F36F23 0,#f69055 100%); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom right,#F36F23 0,#f69055 100%); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to bottom right,#F36F23 0,#f69055 100%);
        /*background-repeat: repeat-x;*/
    }

    .kobo-box h2, .k-box h3, .k-box h4, .k-box h5 {
    }

    .kobo-box input[type="submit"], .kobo-box button {
        min-width: 100px;
    }

/*
* product box
* (head, li, caption, footer)
*/
.productbox {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border: 1px solid #BFBFBF;
    border-radius: 6px 6px 4px 4px;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transition: transform 0.75s;
    -webkit-transition: -webkit-transform 0.75s;
    -moz-transition: -moz-transform 0.75s;
    -o-transition: -o-transform 0.75s;
}

    .productbox:hover {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        cursor: pointer;
    }

    .productbox ul {
        /*min-height:200px;*/
        list-style-type: none;
        padding: 0;
        /*middle li ie11 err*/
        /*
	display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
	*/
    }

        .productbox ul li {
            /*border-bottom:1px dashed #BFBFBF;*/
            margin-top: 0px !important;
            margin-bottom: 0px !important;
        }

            .productbox ul li + li {
                border-top: 1px dashed #BFBFBF;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
            }

            .productbox ul li.head, .productbox .head {
                background-color: whiteSmoke;
                background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
                background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
                background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
                background-image: linear-gradient(top, #ffffff, #e6e6e6);
                background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
                background-repeat: repeat-x;
                border: 1px solid #CCC;
                border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                border-color: #E6E6E6 #E6E6E6 #BFBFBF !important;
                border-width: 1px !important;
                border-style: solid !important;
                color: #9C3910;
                font-size: 16px;
                margin: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                border-radius: 4px 4px 0 0;
                -moz-border-radius: 4px 4px 0 0;
                -webkit-border-radius: 4px 4px 0 0;
                -o-border-radius: 4px 4px 0 0;
                height: 45px !important;
                color: #9C3910;
                font-weight: bold;
            }

                .productbox .head a {
                    color: #9C3910;
                }

            .productbox ul li.caption {
                font-size: 40px;
                font-weight: bold;
                /*
    margin-top: 10px !important;
    padding-bottom: 10px !important;
	*/
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                border-bottom: none !important;
                color: #9C3910;
            }

            .productbox ul li.footer, .productbox .footer {
                background-color: whiteSmoke;
                background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
                background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
                background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
                background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
                background-image: linear-gradient(top, #ffffff, #e6e6e6);
                background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
                background-repeat: repeat-x;
                border: 1px solid #CCC;
                border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                border-color: #E6E6E6 #E6E6E6 #BFBFBF !important;
                border-width: 1px !important;
                border-style: solid !important;
                color: #444;
                margin: 5px 0 0 0 !important;
                padding: 5px 0 !important;
                border-radius: 0 0 2px 2px;
                -moz-border-radius: 0 0 2px 2px;
                -webkit-border-radius: 0 0 2px 2px;
                -o-border-radius: 0 0 2px 2px;
            }

        .productbox ul.popullar {
            transform: scale(1.1);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
        }
/*product box End*/
/*link box/div*/
/*div.linkbox {    position: relative;}*/
.linkbox a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

.prodcat {
    padding-left: 20px;
    padding-right: 20px;
}

    .prodcat img {
        float: right;
        width: 50px;
        margin-top: 18px;
    }

    .prodcat h3 {
        border-bottom: solid 1px #0E73AE;
    }
/*.prodcat{border: solid 1px #0E73AE;}*/



/*Boxes End*/

/*kobo columns*/
.portfolio-list .col-k5 {
    padding: 25px;
}

.col-k5 {
    width: 20%;
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    float: left;
}

@media only screen and (max-width : 550px) {
    .col-k5 { /*same as portfolio*/
        width: 100%;
    }
}

@media only screen and (max-width : 767px) and (min-width : 551px) {
    .col-k5 {
        width: 49.9999%;
    }
}

@media (min-width: 768px) {
    .col-k5, .portfolio-list li.col-k5 {
        width: 33.3333%;
    }
}

@media (min-width: 992px) {
    .col-k5, .portfolio-list li.col-k5 {
        width: 20%;
    }
}









/*------------------------------------------*/
/*	     08 - Effects
/*------------------------------------------*/
/*
*cool rotating hover effect
*/
.stylish-panel {
    padding: 20px 0;
    text-align: center;
}

    .stylish-panel > div > div {
        padding: 10px;
        border: 1px solid transparent;
        border-radius: 4px;
        transition: 0.2s;
    }

    .stylish-panel > div:hover > div {
        margin-top: -10px;
        border: 1px solid rgb(200, 200, 200);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
        background: rgba(200, 200, 200, 0.1);
        transition: 0.5s;
    }

    .stylish-panel > div:hover img {
        border-radius: 50%;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }



/*------------------------------------------*/
/* Pager Section
/*------------------------------------------*/
html, body {
    height: 100%;
}

.gvPager {
    background-color: #fff;
    height: 40px;
    padding: 2px;
    margin: 2% auto;
}

    .gvPager a {
        margin: auto 1%;
        border-radius: 50%;
        background-color: #999;
        padding: 5px 10px 5px 10px;
        color: #fff;
        text-decoration: none;
        -o-box-shadow: 1px 1px 1px #111;
        -moz-box-shadow: 1px 1px 1px #111;
        -webkit-box-shadow: 1px 1px 1px #111;
        box-shadow: 1px 1px 1px #111;
    }

        .gvPager a:hover {
            background-color: #0E73AE; /*#1e8d12;*/
            color: #fff;
        }

    .gvPager span { /*selected */
        background-color: #F36F23; /*#ae2676;*/
        color: #fff;
        -o-box-shadow: 1px 1px 1px #111;
        -moz-box-shadow: 1px 1px 1px #111;
        -webkit-box-shadow: 1px 1px 1px #111;
        box-shadow: 1px 1px 1px #111;
        border-radius: 50%;
        padding: 5px 10px 5px 10px;
    }

#divLatest table.data th, #divLatest table.data td {
    padding: 5px 10px 5px 10px;
}

/*------------------------------------------*/
/* Global Section
 * Content blocks for each component or feature.
/*------------------------------------------*/
/* Space things out */
.k-container, .section {
    display: block;
    min-height: 20px;
    padding: 5px;
    margin-bottom: 5px;
    /*background-color: #E7E8E8;*/
    /*
  background-color: #EEE;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  */
}

    .section:before,
    .section:after {
        display: table;
        content: " ";
    }

    .section:after {
        clear: both;
    }

    .section + .section {
        /*margin: 50px 0;*/
        /*
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
  */
    }

    .section hr {
        border-top: 1px solid #ccc;
    }
/*
 * CSS3 Diagonal Section Dividers
*/
section {
    position: relative;
    text-align: center;
}

    section:before {
        position: absolute;
        content: '';
    }

    section.diagonal {
        background: #EEE;
    }

.diagonal {
    z-index: 1;
    padding: 3em;
}

    .diagonal:before {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: 3% 0;
        transform-origin: 3% 0;
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
    }

.section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {
    margin: 3px;
}
/*------------------------------------------*/
/* Pages Section
 * Content blocks for each component or feature.
/*------------------------------------------*/
/*Home*/



/*------------------------------------------*/
/*	     99 - # Element IDs
/*------------------------------------------*/

/*#member{margin-right:11px;	}*/ /*for scrollbar width*/
/*#kobologin{margin-top:-30px;}*/
#footer, #footer a, #footer h4 {
    color: #f2f2f2;
}

#footer {
    font-size: 14px;
    margin-top: 20px;
}

    #footer .footer-bg {
        position: absolute;
        left: 0;
        right: 0;
        background-color: #05aee1; /*#0E73AE*/
        background: -webkit-linear-gradient(left top,#05aee1 0,#286090 100%); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(bottom right,#05aee1 0,#286090 100%); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(bottom right,#05aee1 0,#286090 100%); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to bottom right,#05aee1 0,#286090 100%);
        height: 150px;
        z-index: -2; /*under canvas*/
    }

#footer-links {
    margin-top: 20px;
}


/*Keet Footer Bottom*/
#bodyContainer {
    min-height: 100%;
    position: relative;
}

#mainContainer {
    padding-bottom: 150px; /* Height of the footer */
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px; /* Height of the footer */
}

@media (max-width: 767px) { /*xs(phone)*/
    #footer-bottom {
        padding-top: 15px;
    }

    #footer .footer-bg {
        height: 60px;
    }
}

/*footer end*/
#mainContainer > .row {
    margin-bottom: 20px;
}

#totop {
    right: 0;
    border-radius: 30px 0px 0px 30px;
}

#goBack {
    left: 0;
    border-radius: 0px 30px 30px 0px;
}

    #totop a, #goBack a {
        color: #fff;
        text-decoration: none;
    }

        #totop a:hover, #goBack a:hover {
            text-decoration: none;
        }

/*div as background*/
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*background: #EEE;*/
    z-index: -1;
}
#koIconSampleCart{float: right !important; margin-right: -10px;margin-top:-45px}

@media print {
    #bg-canvas {
        display: none;
    }

    #logo {
        display: block !important;
    }

    /*hide extract blank*/
    #mainContainer {
        /*
		padding-bottom:0px;
		*/
        /*
		border: 1px solid black;
		*/
    }


    /*	#footer0,#footer{border: 1px solid black;}*/



}
/*comment Bootstrap 3 1st two for color print*/
/*@media print{*,*:before,*:after{background:transparent !important;color:#000 !important;-webkit-box-shadow:none !important;box-shadow:none !important;text-shadow:none !important}*/
/*smartphones */
@media screen and (min-width: 300px) and (max-width: 767px) {
    .navbar-brand{padding: 5px 5px;}
	#koIconSampleCart{margin-right: 10px;}
	#txtPrefix {
        margin-left: 5px;
    }

    #tblUserInfo input[type="text"] {
        margin-left: 7px;
    }

    #footer {
        height: 20px;
    }

    #footer-mobile {
        /* ~.hidden-xs */
        display: block !important;
    }
}

.navbar-right,.navbar-header{margin-right: 35px !important}
#cartCountBadge {
    position: absolute !important;
    right: -5px !important;
    background-color: red;
}