/* ##################################################################################################### */
/* Common defs */
/* ##################################################################################################### */

.inbold { font-weight:bold; }
.initalic { font-style:italic; }
.inred { color:Red; }
.ralign { text-align:right; }
.lalign { text-align:left; }
@media (max-width: 1200px) { .xssmmd-lalign { text-align:left !important; } }

div.spacer {
    display:inline-block;
    padding-right:10px;
}
.indent { padding-left:16px; }
.nopad { padding:0; }
.noleftpad { padding-left:0 !important; }
.norightpad { padding-right:0 !important; }
.notoppad, .notopbotpad { padding-top:0 !important; }
.nobotpad, .notopbotpad { padding-bottom:0 !important; }

.nomarg { margin:0; }
.nosidemarg {
    margin-left:0;
    margin-right:0;
}
.notopmarg, .notopbotmarg { margin-top:0 !important; }
.nobotmarg, .notopbotmarg { margin-bottom:0 !important; }
.fixmargtopgap { margin-top:-15px; }
@media (max-width: 767px) { .xs-toppad { padding-top:5px; } }

.nofloat { float:none !important; }
.lfloat { float:left; }
.rfloat { float:right !important; }

.genmsg {
    margin-left:5px;
    background:none repeat scroll 0% 0% rgb(252, 198, 85);
    border:2px solid rgb(255, 181, 27);
    padding:5px;
    /* max-width:470px; */
    color:rgb(111, 111, 111);
}

.clearfix { zoom:1; }
.clearfix:after { clear:both; }


/* ##################################################################################################### */
/* Element overrides and form controls */
/* ##################################################################################################### */

a.anoul:hover, a.anoul:focus { text-decoration:none !important; }

body { background-color:rgb(230,228,213) !important; /* ICA pale grey */ }

input[type=text]::-ms-clear { display:none; }

input[disabled], select[disabled], textarea[disabled] { background-color:#F4F4F4 !important; }
input[readonly], select[readonly], textarea[readonly] { background-color:#F9F9F9 !important; }

.input-small { width:120px !important; }
.input-medium { width:240px !important; }

textarea { resize:none; }

hr {
    border-top:1px solid #E0DFDF;
    border-bottom:1px solid #FEFEFE;
}

label.radio-inline.disabled { cursor:not-allowed; }

.row div::selection { background:transparent; }    /* overcome weird Chrome selection bug */

.form-body { padding-bottom:7px; }
.form-body-small { padding-bottom:1px; }


/* ##################################################################################################### */
/* Font Awesome icons */
/* ##################################################################################################### */

[class^="icon-"], [class*=" icon-"], [class^="fa-"], [class*=" fa-"] {
    display:inline-block;
    margin-top:1px;
    font-size:14px;
    line-height:14px;
}
[class^="icon-"], [class*=" icon-"], [class^="fa-"], [class*=" fa-"] { *margin-right:.3em; }

/* Make font awesome icons fixed width (latest version issue) */
li [class^="icon-"], li [class*=" icon-"] {
    display:inline-block;
    width:1.25em;
    text-align:center;
}
li [class^="icon-"].icon-large, li [class*=" icon-"].icon-large {
  /* increased font size for icon-large */
    width:1.5625em;
}


/* ##################################################################################################### */
/* Metro icons */
/* ##################################################################################################### */

[class^="m-icon-"] {
    display:inline-block;
    width:14px;
    height:14px;
    margin-top:3px;
    line-height:14px;  
    vertical-align:top;
    background-image:url(../Images/bootstrap/syncfusion-icons.png);
    background-position:0 0;
    background-repeat:no-repeat; 
}

/* are the next two defs needed ? */
/* default icons */
.btn.m-icon {
    padding:7px 14px 7px 14px;
}

.btn.m-icon [class^="m-icon-"] {
    margin:4px 0 0 5px;
}

.m-icon-white { background-image:url(../Images/bootstrap/syncfusion-icons-white.png); }
.m-icon-swapright { background-position:-27px -10px; }
.m-icon-swapdown { background-position:-68px -10px; }
.m-icon-swapleft { background-position:-8px -10px; }
.m-icon-swapup { background-position:-46px -10px; }


/* ##################################################################################################### */
/* Page header */
/* ##################################################################################################### */

.page-header-fixed .page-container {
    margin-top: 0px; /* was 55px;  /* 42px;  */
}

.header {
    background-image: none !important;
    background-color: #e6e4d5 !important;
    min-height: 55px;
}

.header {
    filter: none !important;
}

.pageheader {
    margin-left: 1px;
    margin-right: 1px;
    background-color: #4b8df8;
    /*background-color:#4F94CD ; */
}

.pageheader {
    border-radius: 0px;
}

.page-title {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
    float: left;
    /*border-bottom: 2px solid rgb(182, 183, 188); */
}


/* ##################################################################################################### */
/* Page footer */
/* ##################################################################################################### */

.footer {
    float: none;
    text-align: center;
}

.footer-inner {
    float: none !important;
    text-align: center;
    color: rgb(153, 153, 153);
}

.footer .footer-tools .go-top {
    background-color: #4f4f4f;
}

    .footer .footer-tools .go-top:hover {
        opacity: 0.7;
        filter: alpha(opacity=70);
    }

    .footer .footer-tools .go-top i {
        color: #8a8a8a;
    }

.footer table {
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Need to do this if table is in a centered div!! */
}

    .footer table td {
        padding: 10px;
    }


/* ##################################################################################################### */
/* PageNavBar */
/* ##################################################################################################### */

.navbar-brand {
    padding: 5px;
}

.header .navbar-toggle, .header .navbar-toggle:hover {
    background-color: rgb(36, 36, 36);
}

.header .navbar-toggle {
    padding: 3px 5px 5px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

    .header .navbar-toggle:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

.header .navbar-nav {
    margin-top: 5px;
}

    .header .navbar-nav li.dropdown .dropdown-toggle i {
        color: #8a8a8a !important;
    }

    .header .navbar-nav .dropdown-toggle:hover, .header .navbar-nav .dropdown.open .dropdown-toggle {
        background-color: #383838 !important;
    }

.dropdown .dropdown-menu {
    padding: 0;
    border: 1px solid #ddd;
}

    .dropdown .dropdown-menu li > a {
        color: #333 !important;
        padding: 6px 13px 6px 13px;
    }

        .dropdown .dropdown-menu li > a, .dropdown .dropdown-menu li > a:hover {
            text-decoration: none;
        }

.dropdown-menu-list {
    height: 250px;
}

.dropdown-menu.notification .dropdown-menu-list li span.time {
    display: block;
}

    .dropdown-menu.notification .dropdown-menu-list li span.time i {
        margin-left: 7px;
    }

.dropdown-menu.tasks .dropdown-menu-list li a {
    display: inline-block;
}

    .dropdown-menu.tasks .dropdown-menu-list li a > i.m-icon-swapright {
        margin-left: 7px;
        float: right;
    }

.dropdown-menu.extended li a {
    padding-bottom: 5px !important;
    padding-right: 18px !important;
}

    .dropdown-menu.extended li a:hover {
        background-color: rgb(245, 245, 245) !important;
    }

.dropdown-menu.extended li:last-child a {
    border-top: none !important;
}

.header .navbar-nav > li.dropdown.user .dropdown-toggle .username {
    color: rgb(0,0,0);
}

    .header .navbar-nav > li.dropdown.user.open .dropdown-toggle .username, .header .navbar-nav > li.dropdown.user .dropdown-toggle .username:hover,
    .header .navbar-nav > li.dropdown.user .dropdown-toggle:hover {
        color: rgb(255,255,255);
    }

.dropdown .dropdown-menu > li > a.focused {
    background-color: rgb(66, 139, 202);
}

.dropdown .dropdown-menu > li.selecteditem {
    background-color: rgb(200, 200, 200);
}

.dropdown .dropdown-menu li.selecteditem > a {
    font-weight: bolder;
}

/* Fixing dropdown issue on mobile devices in Bootstrap 3.2.2 */
.dropdown-backdrop {
    position: static;
}

/* .dropdown-menu.extended {
  width: 240px !important;
} */


/* ##################################################################################################### */
/* SideBar */
/* ##################################################################################################### */

.page-sidebar {
    background-color: rgb(230, 228, 213);
}

    .page-sidebar .sidebar-toggler {
        cursor: pointer;
        margin-left: 175px;
        margin-top: 20px;
        margin-bottom: 15px;
        width: 29px;
        height: 29px;
        background-repeat: no-repeat;
    }

    .page-sidebar .sidebar-toggler {
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

.sidebar-toggler {
    background-image: url(../Images/bootstrap/sidebar-toggler.jpg);
    background-color: #242424;
}

    .sidebar-toggler:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

.page-sidebar-closed .sidebar-toggler {
    margin-left: 3px;
    margin-right: 3px;
}

ul.page-sidebar-menu > li.open {
    background: none repeat scroll 0% 0% #4F94CD !important;
}


ul.page-sidebar-menu > li > ul.sub-menu > li.active > a {
    background: none repeat scroll 0% 0% #B9D3EE !important;
    color: #344152 !important;
}

ul.page-sidebar-menu > li > a {
    color: rgb(255, 255, 255) !important;
    background: none repeat scroll 0% 0% #4F94CD !important;
    border-top: 1px solid rgb(255, 255, 255) !important;
    font-weight: 400 !important;
}

ul.page-sidebar-menu li > ul.sub-menu {
    margin-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
}

    ul.page-sidebar-menu li > ul.sub-menu > li > a {
        background: none repeat scroll 0% 0% #4F94CD !important;
        color: rgb(255,255,255) !important;
    }

        ul.page-sidebar-menu > li > a:hover, ul.page-sidebar-menu > li:hover > a, ul.page-sidebar-menu li > ul.sub-menu > li > a:hover {
            background: none repeat scroll 0% 0% #4682B4 !important;
        }

ul.page-sidebar-menu > li.open > a {
    background: none repeat scroll 0% 0% #4682B4 !important;
    color: rgb(255,255,255) !important;
}

    ul.page-sidebar-menu > li.open > a i {
        color: rgb(255,255,255) !important;
    }

ul.page-sidebar-menu > li.active > a i {
    color: #344152 !important;
}

ul.page-sidebar-menu > li > a .arrow:before,
ul.page-sidebar-menu > li > a .arrow.open:before,
ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
    color: rgb(255,255,255) !important;
}

ul.page-sidebar-menu > li.active > a {
    background: none repeat scroll 0% 0% #B9D3EE !important;
    color: #344152 !important;
}

ul.page-sidebar-menu > li a i {
    color: rgb(255,255,255) !important;
}

ul.page-sidebar-menu > li.active > a {
    border-top: 1px solid rgb(255, 255, 255) !important;
}

ul.page-sidebar-menu span.title {
    padding-left: 3px;
}

ul.page-sidebar-menu > li:last-child > a {
    border-bottom: 1px solid transparent !important;
}

.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
    background-color: rgb(255, 255, 255);
}

/***
Landscape phone to portrait tablet
***/
@media (max-width: 991px) {
    ul.page-sidebar-menu > li:last-child > a {
        border-bottom: 0 !important;
    }
}


/* ##################################################################################################### */
/* Dashboard stats */
/* ##################################################################################################### */
@media (min-width:1200px){
#DashLeft { padding-right :0px;
}
#DashRight { padding-left :0px;
}
}


.dashboard-stat {
    margin-bottom: 25px;
}

    .dashboard-stat:before, .dashboard-stat:after {
        display: table;
        line-height: 0;
        content: "";
    }

    .dashboard-stat:after {
        clear: both;
    }

    .dashboard-stat .visual {
        /*width: 80px;*/
        height: 80px;
        display: block;
        /*float: left;*/
        padding-top: 10px;
        padding-left: 15px;
        margin-bottom: 20px;
    }

        .dashboard-stat .visual i {
            font-size: 65px;
            line-height: 65px;
            color: #fff;
        }

@media (min-width: 992px) and (max-width: 1074px) {
    .dashboard-stat .visual i {
        font-size: 28px;
        line-height: 28px;
    }
}

.dashboard-stat .details {
    position: absolute;
    right: 15px;
    padding-right: 10px;
    padding-left: 10px;
}

    .dashboard-stat .details .number {
        padding-top: 15px;
        text-align: right;
        font-size: 34px;
        /*line-height: 34px;*/
        letter-spacing: -1px;
        margin-bottom: 5px;
        font-weight: 300;
        color: #fff;
    }

    .dashboard-stat .details .desc {
        text-align: right;
        font-size: 16px;
        letter-spacing: 0px;
        font-weight: 300;
        color: #fff;
    }

.dashboard-stat .more {
    clear: both;
    display: block;
    padding: 5px 10px 5px 10px;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 11px;
    color: #fff;
}

@media (min-width:1200px) and (max-width:1500px) {
    .dashboard-stat .visual i {
        font-size: 40px;
    }

    .dashboard-stat .details .number {
        font-size: 16px;
    }

    .dashboard-stat .details .desc {
        font-size: 12px;
    }
    .dashboard-stat .more {
     font-size: 9px;
    }
}

.dashboard-stat .more {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

    .dashboard-stat .more:hover {
        text-decoration: none;
    }

    .dashboard-stat .more:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .dashboard-stat .more > i {
        display: inline-block;
        margin-top: 1px;
        float: right;
    }

.dashboard-stat.blue {
    background-color: #27a9e3;
}

    .dashboard-stat.blue .more {
        background-color: #208dbe;
    }

.dashboard-stat.green {
    background-color: #28b779;
}

    .dashboard-stat.green .more {
        background-color: #10a062;
    }

.dashboard-stat.red {
    background-color: #e7191b;
}

    .dashboard-stat.red .more {
        background-color: #bc0d0e;
    }

.dashboard-stat.yellow {
    background-color: #ffb848;
}

    .dashboard-stat.yellow .more {
        background-color: #cb871b;
    }

.dashboard-stat.purple {
    background-color: #852b99;
}

    .dashboard-stat.purple .more {
        background-color: #6e1881;
    }




      .ownernews .details {
     font-size: 13px;
     color: black !important 
}

.ownernews .details {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

    .ownernews .details:hover {
        text-decoration: none;
    }

    .ownernews .details:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .ownernews .details > i {
        display: inline-block;
        margin-top: 1px;
        float: right;
    }


/* ##################################################################################################### */
/* Labels */
/* ##################################################################################################### */

.label {
    font-size:12px;
    padding:3px 6px 3px 6px;
}
.label { text-shadow:none !important; }
.label.label-sm { font-size:12px; }
label { font-size:14px; }

.label.label-icon {
    padding: 4px 1px 4px 5px;
    margin-right: 2px;
    text-align: center !important;
}

.ie9 .label.label-icon, .ie10 .label.label-icon {
    padding: 3px 0px 3px 3px;
}

.label.label-icon > i {
    font-size: 12px;
    text-align: center !important;
}

.label-danger {
    background-color: #ed4e2a;
}

.label-info {
    background-color: #57b5e3;
}

.label-grey {
    background-color: rgb(132,132,132);
}


/* ##################################################################################################### */
/* Badges */
/* ##################################################################################################### */

.badge {
    text-align: center;
    vertical-align: middle;
    background-color: #e02222;
    padding: 3px 6px 3px 6px;
    font-weight: 300;
}

.badge-success {
    background-color: rgb(60,192,81);
}

.badge-purple {
    background-color: #852B99;
}

.badge-blue {
    background-color: rgb(75,141,248);
}


/* ##################################################################################################### */
/* Progress bars */
/* ##################################################################################################### */

.dropdown-menu.tasks .progress {
    height: 14px;
    margin-top: 5px;
}

.progress > .progress-bar-success {
    background-color: #3cc051;
}

.progress > .progress-bar-info {
    background-color: #57b5e3;
}


/* ##################################################################################################### */
/* Forms */
/* ##################################################################################################### */

.form-control:-moz-placeholder {
    color: #999999;
}

.form-control::-moz-placeholder {
    color: #999999;
}

.form-control:-ms-input-placeholder {
    color: #999999;
}

.form-control::-webkit-input-placeholder {
    color: #999999;
}

.form-control {
    color: #333333;
}

    .form-control[disabled], .form-control[readonly] {
        border: 1px solid rgb(221, 221, 221);
        -webkit-box-shadow: none !important;
    }

    .form-control[disabled], .form-control[readonly] {
        box-shadow: none !important;
    }

.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}


/* ##################################################################################################### */
/* Notes and alerts */
/* ##################################################################################################### */

.note {
    margin: 0 0 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid #eee;
}

.note-danger {
    background-color: #FAEAE6;
    border-color: #ed4e2a;
}

.note-warning {
    background-color: #FCF3E1;
    border-color: #fcb322;
}

.note-info {
    background-color: #E8F6FC;
    border-color: #57b5e3;
}

.note-success {
    background-color: #EBFCEE;
    border-color: #3cc051;
}

.note-danger {
    padding-bottom: 10px;
}

    .note-danger ul.list-group {
        margin-bottom: 10px;
    }

    .note-danger li.bg-red, .inactivealert li, .inactivewarn li {
        font-size: 18px;
        line-height: 18px;
        font-weight: 400;
    }

.orderwarn {
    background-color: #FFD393;
    font-size: 14px;
    border-color: rgb(255,134,0);
    margin-top: 5px;
    color: #B36F15;
    padding: 10px;
    margin-bottom: 0;
}

    .orderwarn i {
        font-size: 22px;
        color: #F59C16;
    }

.orderalert {
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.inactivealert, .inactivewarn {
    border-style: none;
    border-width: 0;
    padding: 1px 15px 10px;
    margin: -25px -20px 20px;
}

.inactivealert {
    background-color: rgb(250,234,230);
    color: rgb(169,68,66);
    border-bottom: 5px solid rgb(237,78,42);
}

.inactivewarn {
    background-color: rgb(235,252,238);
    color: rgb(60,118,61);
    border-bottom: 5px solid rgb(60,192,81);
}

    .inactivealert ul, .inactivewarn ul {
        margin-bottom: 10px;
        margin-left: -15px;
        margin-right: -15px;
    }

.bg-red, .inactivealert li {
    background-image: none !important;
    background-color: rgb(224,34,34) !important;
    border-color: rgb(224,34,34) !important;
    color: rgb(255,255,255) !important;
}

.bg-green, .inactivewarn li {
    background-image: none !important;
    background-color: rgb(53,170,71) !important;
    border-color: rgb(53,170,71) !important;
    color: rgb(255,255,255) !important;
}

.alerticon {
    height: 50px;
    width: 50px;
    text-decoration: none;
    color: rgb(255,255,255);
    position: absolute;
    font-weight: 300;
    border: 4px solid transparent;
    margin: 0 10px 10px 0;
}

.alerticon {
    border-radius: 50%;
}

    .alerticon i {
        display: block;
        font-size: 40px;
        line-height: 40px;
        text-align: center;
    }

.alerttext {
    padding-top: 2px;
    padding-left: 5px;
    margin-left: 60px;
}

.alertcapt {
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
}

.alertdetail {
    padding-top: 5px;
    font-size: 14px;
}

.note-danger label {
    font-weight: bolder;
    color: rgb(185, 74, 72);
    padding-left: 10px;
}

.note-danger p {
    display: inline-block;
    padding-left: 10px;
}

div.sendshophdr {
    text-align: center;
    margin-bottom: 10px;
    padding-top: 0 !important;
}

    div.sendshophdr h4 {
        margin-top: 0px;
        margin-bottom: 5px;
    }

    div.sendshophdr div {
        display: inline-block;
        font-size: 12px;
    }

.control-label {
    font-weight: bolder;
    color: rgb(117,138,77);
    padding-bottom: 5px;
}

    .control-label.reject {
        color: rgb(185, 74, 72);
    }

.valgst p {
    display: inline-block;
    padding-right: 16px;
}

.valgst div {
    display: inline-block;
    font-style: italic;
}

/* ##################################################################################################### */
/* Portlets */
/* ##################################################################################################### */

.portlet {
    clear: both;
    margin-top: 0;
    margin-bottom: 25px;
    padding: 0;
}

    .portlet > .portlet-title {
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

        .portlet > .portlet-title:after, .portlet > .portlet-title:before {
            content: "";
            display: table;
            line-height: 0;
        }

        .portlet > .portlet-title:after {
            clear: both;
        }

        .portlet > .portlet-title > .caption {
            float: left;
            display: inline-block;
            font-size: 18px;
            line-height: 18px;
            font-weight: 400;
            margin: 0;
            padding: 0;
            margin-bottom: 8px;
        }

            .portlet > .portlet-title > .caption > i {
                float: left;
                margin-top: 4px;
                display: inline-block !important;
                font-size: 13px;
                margin-right: 5px;
                color: #666;
            }

        .portlet > .portlet-title > .tools {
            display: inline-block;
            padding: 0;
            margin: 0;
            margin-top: 6px;
            float: right;
            border: 1px solid transparent;
            width: 25px;
            height: 20px;
        }

            .portlet > .portlet-title > .tools > a {
                display: inline-block;
                height: 16px;
                margin-left: 5px;
            }

                .portlet > .portlet-title > .tools > a.expand {
                    margin-bottom: 2px;
                    background-image: url(../Images/bootstrap/portlet-expand-icon.png);
                    width: 14px;
                }

                .portlet > .portlet-title > .tools > a.collapse {
                    margin-bottom: 2px;
                    background-image: url(../Images/bootstrap/portlet-collapse-icon.png);
                    width: 14px;
                }

                .portlet > .portlet-title > .tools > a:hover {
                    text-decoration: none;
                    -webkit-transition: all 0.1s ease-in-out;
                    -moz-transition: all 0.1s ease-in-out;
                    -o-transition: all 0.1s ease-in-out;
                    -ms-transition: all 0.1s ease-in-out;
                }

                .portlet > .portlet-title > .tools > a:hover {
                    transition: all 0.1s ease-in-out;
                    opacity: .6;
                    filter: 'alpha(opacity=60)';
                }

            .portlet > .portlet-title > .tools.porttogglefocus {
                background-color: rgb(102, 175, 233);
                border: 1px solid white;
            }

            .portlet > .portlet-title > .tools.porttogglefocus {
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 2px 2px rgba(255,255,255, 0.5);
                -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.075) inset, 0px 0px 2px 2px rgba(255,255,255, 0.5);
                border-radius: 4px 4px 4px 4px;
            }

    .portlet > .portlet-body {
        clear: both;
        padding: 0;
    }

    .portlet.blue > .portlet-title > .caption, .portlet-title.blue > .caption, .portlet.box.blue > .portlet-title > .caption > i,
    .portlet.green > .portlet-title > .caption, .portlet-title.green > .caption, .portlet.box.green > .portlet-title > .caption > i,
    .portlet.yellow > .portlet-title > .caption, .portlet-title.yellow > .caption, .portlet.box.yellow > .portlet-title > .caption > i,
    .portlet.red > .portlet-title > .caption, .portlet-title.red > .caption, .portlet.box.red > .portlet-title > .caption > i,
    .portlet.purple > .portlet-title > .caption, .portlet-title.purple > .caption, .portlet.box.purple > .portlet-title > .caption > i,
    .portlet.grey > .portlet-title > .caption, .portlet.box.grey > .portlet-title > .caption > i {
        color: #fff;
    }

    .portlet.box {
        padding: 0 !important;
    }

        .portlet.box > .portlet-title {
            padding: 8px 10px 2px 10px;
            border-bottom: 1px solid #eee;
            color: #fff !important;
        }

            .portlet.box > .portlet-title > .tools {
                margin-top: 3px;
            }

                .portlet.box > .portlet-title > .tools > a.expand {
                    background-image: url(../Images/bootstrap/portlet-expand-icon-white.png);
                }

                .portlet.box > .portlet-title > .tools > a.collapse {
                    background-image: url(../Images/bootstrap/portlet-collapse-icon-white.png);
                }

        .portlet.box > .portlet-body {
            background-color: #fff;
            padding: 10px;
        }

        .portlet.box > .portlet-title {
            margin-bottom: 0;
        }

        .portlet.box.blue > .portlet-title {
            background-color: #4b8df8;
        }

        .portlet.box.blue {
            border: 1px solid #b4cef8;
        }

        .portlet.box.red > .portlet-title {
            background-color: #e02222;
        }

        .portlet.box.red {
            border: 1px solid #ef8476;
        }

        .portlet.box.yellow > .portlet-title {
            background-color: #ffb848;
        }

        .portlet.box.yellow {
            border: 1px solid #fccb7e;
        }

        .portlet.box.green > .portlet-title {
            background-color: #35aa47;
        }

        .portlet.box.green {
            border: 1px solid #77e588;
        }

        .portlet.box.purple > .portlet-title {
            background-color: #852b99;
        }

        .portlet.box.purple {
            border: 1px solid #af5cc1;
        }

        .portlet.box.grey > .portlet-title {
            background-color: #555555;
        }

        .portlet.box.grey {
            border: 1px solid #9d9c9c;
        }

        .portlet.box.lightpurple > .portlet-title {
            background-color: rgb(148,119,203);
        }

        .portlet.box.lightpurple {
            border: 1px solid rgb(148,119,203);
        }

        .portlet.box.medgrey > .portlet-title {
            background-color: rgb(102,102,102);
        }

        .portlet.box.forcered > .portlet-title {
            background-color: #e02222 !important;
        }

        .portlet.box.forcered {
            border: 1px solid #ef8476 !important;
        }

        .portlet.box.forcemedgrey > .portlet-title {
            background-color: rgb(102,102,102) !important;
        }

        .portlet.box.forcemedgrey {
            border: 1px solid #9d9c9c !important;
        }

        .portlet.box.blue, .portlet.box.red, .portlet.box.yellow, .portlet.box.green, .portlet.box.purple, .portlet.box.grey, .portlet.box.lightpurple {
            border-top: 0;
        }

.box.portlet > div.portlet-title {
    cursor: pointer;
}

    .box.portlet > div.portlet-title.nocur {
        cursor: default;
    }

    .box.portlet > div.portlet-title .caption i {
        padding-right: 5px;
    }


/* ##################################################################################################### */
/* Gritter */
/* ##################################################################################################### */

/* z-index must be less than for .dropdown .dropdown-menu */
#gritter-notice-wrapper {
    z-index: 999;
    right: 1px !important;
}

.gritter-close {
    left: auto !important;
    right: 3px !important;
}

.gritter-title {
    font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.ordernotif {
    left: auto;
    right: 15px;
    top: 40px;
    bottom: auto;
}

/* do I need the following two defs ? */
.gritter-item-wrapper a {
    color: #18a5ed;
}

    .gritter-item-wrapper a:hover {
        color: #0b6694;
    }

.iconflash {
    background-color: rgb(75, 141, 248);
}

.payment-paid {
    width: auto;
    background-color: Yellow;
    color: Black;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    vertical-align: middle;
    font-weight: bolder;
}

.placeholder {
    color: #aaa !important;
}

.sel2tblhdr {
    color: blue;
    font-weight: bolder;
}

.sel2tbl.row > div, .sel2tbl.row > div.plname {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: -5px;
    margin-bottom: -5px;
    vertical-align: middle;
}

    .sel2tbl.row > div.bleft {
        border-left: 1px solid rgb(155,155,155);
    }

    .sel2tbl.row > div.bright {
        border-right: 1px solid rgb(155,155,155);
    }

@media (max-width: 767px) {
    .sel2tbl.row > div.bleft {
        border-left: none;
    }

    .sel2tbl.row > div.bright {
        border-right: none;
    }

    .sel2tbl.row > div.plname > div {
        padding-right: 7px;
    }
}

.sel2tbl.row > div > div, .sel2tbl.row > div.plcode {
    padding-left: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: auto !important;
}

.sel2tbl.row > div.plcode, .sel2tbl.row > div.plname {
    word-wrap: break-word;
}

.sel2tbl.row > div > div > div {
    height: auto !important;
}

.sel2tbl.row > div:first-child {
    padding-left: 15px;
}

table.sentpay {
    border-color: Black;
    border-style: solid;
    border-width: thin;
    font-size: 14px;
    margin-bottom: 10px;
}

    table.sentpay td {
        padding: 5px;
    }

table.recpay {
    border: none;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
}

    table.recpay td {
        padding: 5px;
    }

        table.recpay td.recpayval {
            padding-left: 20px;
            text-align: right;
        }

        table.recpay td.recpaygst {
            padding-left: 15px;
            padding-top: 10px;
            font-style: italic;
        }

.screenSaveBackground, .screenSaveText {
    display: block;
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .5);
}

.screenSaveText {
    color: White;
    /* height:100%;
    width:100%; */
    padding-top: 25%;
    text-align: center;
}

    .screenSaveText .spinner {
        background: rgba(0, 0, 0, .5);
        left: 50%;
    }

.screenSaveTextLine1 {
    font-size: 16pt;
    font-weight: 800;
}

.screenSaveTextLine2 {
    font-size: 12pt;
    font-weight: 600;
}

/* ##################################################################################################### */
/* Modals */
/* ##################################################################################################### */

.modalPopup {
    background-color: rgb(246,245,239);
    font-style: normal;
    border-width: 3px;
    border-style: solid;
    border-color: rgb(208,206,192);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 2px;
    padding-bottom: 8px;
    height: auto;
    z-index: 9001;
    position: absolute;
}

    .modalPopup .control-label, .modalPopup .form-control-static, .modalPopup .table tbody, .modalPopup .table thead tr th {
        font-size: 12px;
    }

    .modalPopup table.dataTable thead > tr > th {
        padding-left: 5px;
        padding-right: 5px;
    }

    .modalPopup .table-scrollable > .table > thead > tr > th, .modalPopup .table-scrollable > .table > tbody > tr > td {
        white-space: normal;
    }

.esCol1 {
    width: 86px;
}

.esCol2 {
    width: 57px;
}

.esCol3 {
    width: auto;
}

.esCol4 {
    width: 97px;
}

.esCol5 {
    width: 67px;
}

.esCol6 {
    width: 57px;
}

.esCol7 {
    width: 24px;
}

.esCol8 {
    width: 24px;
}

.esCol9 {
    width: 64px;
}

.modal {
    z-index: 10050 !important;
    outline: none !important;
}

.modal-header {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EFEFEF;
}
    /*** Modal header close button fix ***/
    .modal-header .close {
        margin-top: 0px !important;
    }

/* do I need the next three defs? */
.modal > .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
}

.modal-backdrop {
    border: 0 !important;
    outline: none !important;
    z-index: 10049 !important;
}

    .modal-backdrop, .modal-backdrop.fade.in {
        background-color: #333 !important;
    }

.modal-footer {
    padding-top: 8px;
    padding-bottom: 12px;
}

.modal-dialog .modal-body p {
    padding-left: 15px;
    padding-right: 15px;
}

.modal-dialog-sm .form-control-static, .modal-dialog-sm label {
    font-size: 12px;
}

.modal-dialog-sm .notsm {
    font-size: 14px;
}

.modal-dialog-sm .modal-body p {
    padding-left: 2px;
}

.modal-dialog-sm .radio-list label {
    padding-right: 10px;
    font-size: 14px;
    display: inline-block;
}

.helpmodal .modal-header {
    border-bottom: none;
}

.helpmodal .modal-body {
    padding-bottom: 0;
}

.helpmodal .modal-footer {
    border-top: none;
    padding-top: 0;
    padding-bottom: 8px;
}

.helpmodal .portlet.box {
    margin-bottom: 18px;
}

    .helpmodal .portlet.box > .portlet-body {
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

.mailmodal .modal-header {
    padding-left: 24px;
}

    .mailmodal .modal-header .modal-title {
        color: Red;
    }

.mailmodal .modal-body {
    background-color: rgb(242, 222, 222);
    color: #A94442;
    padding: 5px 10px 2px;
}

.mailmodal .modal-body {
    word-wrap: break-word;
}

    .mailmodal .modal-body p {
        font-family: Arial;
    }

.mailmodalindent {
    padding-left: 14px;
}


/* ##################################################################################################### */
/* Data Tables */
/* ##################################################################################################### */

.table-scrollable {
    overflow-x: scroll !important; /* this is NEEDED to overcome a bug in IE when you hover the mouse over the table where it keeps adding space
                                            down the bottom every time you focus over a new item ... does this break anything else??? */
}

.dataTable {
    width: 100% !important;
    clear: both;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length .form-control, .dataTables_wrapper .dataTables_filter .form-control {
        display: inline-block;
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: -15px;
    }

    .modalPopup .dataTables_wrapper .dataTables_paginate {
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_paginate {
        float: left;
        margin-top: 15px;
    }
}

.dataTables_filter label {
    line-height: 32px;
}

.dataTable > thead {
    color: rgb(117,138,77);
}

.dataTableRowSel, .table-hover > tbody > tr.dataTableRowSel:hover > td {
    background-color: rgb(198,212,144);
}


/* ##################################################################################################### */
/* SlimScroll */
/* ##################################################################################################### */

.scroller {
    padding: 0px 12px 0px 0px;
    margin: 0;
    overflow: hidden;
}

/* ##################################################################################################### */
/* Google map */
/* ##################################################################################################### */

/* the google map img will be sized to the width and height of this div */
.map_canvas {
    width:auto;
    height:100%;
}
.map_canvas div.gmLoad {
    font-size:14px;
    color:rgb(111, 111, 111);
    text-align:center;
}
.map_canvas div.gmErr {
    font-size:12px;
    color:rgb(111, 111, 111);
}
.map_canvas div.gmErr h3 {
    font-size:14px;
    text-align:center;
    font-weight:bold !important;
}

div.gmDisclaim {
    padding:5px; /* offset the control from the edge of the map */
    z-index:200 !important;
}
div.gmDisclaim div {
    background-color:White;
    border-style:solid;
    border-width:1px;
    cursor:pointer;
    text-align:center;
}
div.gmDisclaim div div {
    font-family:Arial,sans-serif;
    font-size:12px;
    padding-left:4px;
    padding-right:4px;
}
div.gmWarn {
    background-color:White;
    color:Red;
    padding:5px;
    margin-bottom:10px;
}
div.gmDisclaim .popover .arrow {
    background-color:transparent;
    padding:0;
}
div.gmDisclaim .popover-content { border-style:none; }

/* reduce size and position of map + satellite buttons */
div.gm-style-mtc, div.gm-style-mtc > div:nth-child(2) { margin-top:-5px !important }
div.gm-style-mtc > div:first-child {
    padding:1px 6px !important;
    border:1px solid rgba(0, 0, 0, 0.15) !important;
    font-size:12px !important;
}
div.gm-style-mtc > div:nth-child(2) > div:first-child { padding:3px 8px 3px 3px !important }
div.gmWarn, div.gm-style-mtc > div:first-child { font-family:Arial,sans-serif !important }


/* ##################################################################################################### */
/* Datepicker */
/* ##################################################################################################### */

.datepicker.dropdown-menu {
    padding: 5px;
}

.datepicker .active {
    background-color: #4b8df8 !important;
}

    .datepicker .active:hover {
        background-color: #2678FC !important;
    }

    .datepicker .active, .datepicker .active:hover {
        background-image: none !important;
    }

        .datepicker .active, .datepicker .active:hover {
            filter: none !important;
        }

/* change z-index when opened in modal */
.modal-open .datepicker {
    z-index: 10055 !important;
}

.datepicker table td {
    font-weight: 300 !important;
}

.datepicker table th {
    font-weight: 400 !important;
}

.datepicker table td, .datepicker table th {
    font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.date-picker {
    max-width: 240px;
}

    .date-picker .btn.dpickerfocus {
        border-color: rgb(102, 175, 233);
        border-left: none;
    }

    .date-picker .btn.dpickerfocus {
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
        -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
    }

    .date-picker.input-group .form-control:first-child[disabled] {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }

.has-error .date-picker.input-group .input-group-btn .btn {
    border-color: rgb(169, 68, 66);
}

.has-error .date-picker.input-group .input-group-btn .btn {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}


/* ##################################################################################################### */
/* Order received page */
/* ##################################################################################################### */

.orderrecitemnum {
    padding-right: 8px;
}

.orderrecprodcode {
    padding-left: 8px;
}

.orderrecindent {
    padding-left: 30px;
}

.orderrecprodimgdiv {
    max-width: 120px;
    max-height: 120px;
}

    .orderrecprodimgdiv img {
        max-width: 100%;
    }

.orderrecamended {
    border: 2px solid rgb(224,34,34);
    width: auto;
    padding: 2px 5px 5px 2px;
    display: inline-block;
    cursor: default;
}

.orderrecamended {
    border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
}

    .orderrecamended i {
        color: rgb(224,34,34);
        padding-left: 20px;
    }

.lastrefreshtext {
    color: rgb(153,153,153);
    padding-top: 20px;
    margin-left: 17px;
    font-size: .85em;
}


/* ##################################################################################################### */
/* Buttons */
/* ##################################################################################################### */

.btn.red {
    color: white;
    background-color: #d84a38;
}

    .btn.red:hover, .btn.red:focus, .btn.red:active, .btn.red.active {
        background-color: #bb2413 !important;
        color: #fff !important;
    }

    .btn.red[disabled], .btn.red.disabled {
        background-color: rgb(203,119,133) !important;
        color: #fff !important;
    }

.btn.green {
    color: white;
    background-color: #35aa47;
}

    .btn.green:hover, .btn.green:focus, .btn.green:active, .btn.green.active {
        background-color: #1d943b !important;
        color: #fff !important;
    }

    .btn.green.disabled, .btn.green[disabled] {
        background-color: rgb(119,203,148) !important;
        color: #fff !important;
    }

    .btn.green.forcegreen.disabled, .btn.green.forcegreen[disabled] {
        background-color: #1d943b !important;
    }

    .btn.green.forcegreen.disabled, .btn.green.forcegreen[disabled] {
        opacity: 1 !important;
    }

.btn.blue {
    color: white;
    background-color: #4F94CD;
}

    .btn.blue:hover, .btn.blue:focus, .btn.blue:active, .btn.blue.active, .btn.blue.disabled, .btn.blue[disabled] {
        background-color: #0D638F !important;
        color: #fff !important;
    }

.btn.yellow {
    color: white;
    background-color: #ffb848;
}

    .btn.yellow:hover, .btn.yellow:focus, .btn.yellow:active, .btn.yellow.active {
        background-color: #eca22e !important;
        color: #fff !important;
    }

    .btn.yellow.disabled, .btn.yellow[disabled] {
        background-color: rgb(255,194,98) !important;
        color: #fff !important;
    }

.btn > i {
    font-size: 14px;
}

.btn-sm, .btn-xs {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

    .btn-sm > i, .btn-xs > i {
        font-size: 13px;
    }

.btn-xs {
    padding: 1px 5px;
}

div.actionbtn, div.portletbtn, div.notifbtn {
    padding: 5px !important;
}

div.actionbtn {
    border: 1px solid rgb(180, 206, 248) !important;
}

div.portletbtn, div.notifbtn {
    text-align: center;
}

div.actionbtn .row div {
    padding-top: 5px;
}

div.actionbtn.nonav .row div {
    margin-left: 10px;
}

div.actionbtn .btn, div.portletbtn .btn, div.modalbtn .btn {
    margin-right: 10px;
    margin-bottom: 5px;
}

div.modalbtn .btn {
    white-space: normal;
}

.modalbtn > div.nomsg {
    margin-top: 0;
}

@media (min-width: 992px) {
    .modalbtn > div.nomsg {
        margin-top: -40px;
    }
}

/*  Help */
.btn.help {
    color: white;
    background-color: #4d90fe;
    /*font-weight:bold;*/
    font-size: large;
    padding: 0;
    font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-top: -5px;
}

    .btn.help:hover, .btn.help:focus, .btn.help:active, .btn.help.active, .btn.help[disabled], .btn.help.disabled {
        background-color: #4d90fe !important;
        color: rgb(253, 253, 56) !important;
    }

.form-actions .btn {
    margin-right: 25px;
    margin-bottom: 5px;
}

    .form-actions .btn i, .modal-footer button i, .view-ord button i, .orderwarn i, .notifbtn i {
        margin-right: 10px;
    }

    .form-actions .btn:last-child {
        margin-right: 0px;
    }

/* Close icon used for modal dialog and other UI element close buttons */
.close {
    display: inline-block;
    margin-top: 0;
    margin-right: 0;
    width: 9px;
    height: 9px;
    background-repeat: no-repeat !important;
    background-image: url("../Images/bootstrap/remove-icon-small.png") !important;
}


/* ##################################################################################################### */
/* Popovers */
/* ##################################################################################################### */

.popover.oewarn { 
    z-index:9996 !important; /* ensure shows over nav bar */
    margin-top:10px;
}
.popover.oewarn h3.popover-title { font-weight:bold !important }


/* ##################################################################################################### */
/* Notification feeds */
/* ##################################################################################################### */

.portlet.box.green .portlet-body, .portlet.box.red .portlet-body, .portlet.box.portletpastnotif .portlet-body {
    padding-top: 5px;
    padding-right: 5px;
}

.feeds {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .feeds a:hover {
        text-decoration: none;
    }
    /* safari */
    .feeds li {
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 7px;
        background-color: #fafafa;
    }

        .feeds li:before, .feeds li:after {
            display: table;
            line-height: 0;
            content: "";
        }

        .feeds li:after {
            clear: both;
        }

        .feeds li:last-child {
            margin-bottom: 0;
        }

    .feeds .col1 {
        float: left;
        width: 100%;
        clear: both;
    }

    .feeds .col2 {
        float: left;
        width: 75px;
        margin-left: -75px;
    }

    .feeds .col1 .cont {
        float: left;
        margin-right: 75px;
        overflow: hidden;
    }

        .feeds .col1 .cont .cont-col1 {
            float: left;
            margin-right: -100%;
        }

            .feeds .col1 .cont .cont-col1 .label {
                display: inline-block;
                padding: 5px 4px 6px 5px;
                vertical-align: middle;
                text-align: center;
            }

                .feeds .col1 .cont .cont-col1 .label > i {
                    text-align: center;
                    font-size: 14px;
                }

        .feeds .col1 .cont .cont-col2 {
            float: left;
            width: 100%;
        }

            .feeds .col1 .cont .cont-col2 .desc {
                margin-left: 35px;
                padding-top: 4px;
                padding-bottom: 5px;
                overflow: hidden;
            }

    .feeds .col2 .date {
        padding: 4px 9px 5px 4px;
        text-align: right;
        font-style: italic;
    }

    .feeds .col2 {
        padding-top: 4px;
    }

        .feeds .col2 .date, .feeds.feedsold .notifdesc {
            color: rgb(61,61,61);
        }

    .feeds.feedsold .col2, .feeds.feedsnew .col2 {
        word-wrap: break-word;
    }

    .feeds.feedsold .col1 .cont {
        margin-right: 160px;
    }

    .feeds.feedsold .col2 {
        width: 160px;
        margin-left: -160px;
    }

    .feeds.feedsnew .col1 .cont {
        margin-right: 120px;
    }

    .feeds.feedsnew .col2 {
        width: 120px;
        margin-left: -120px;
    }

    .feeds.feedsold .col1 .cont .cont-col2 .desc .label {
        margin-left: 20px;
    }

.notifdesc, .dashtasksdesc {
    padding-right: 15px;
}

@media (max-width: 768px) {
    .slimScrollDiv {
        margin-left: -3px;
        margin-right: -3px;
    }

    .feeds.feedsold .col1 .cont {
        margin-right: 70px;
    }

    .feeds.feedsold .col2 {
        width: 70px;
        margin-left: -70px;
    }

    .feeds.feedsnew .col1 .cont {
        margin-right: 55px;
    }

    .feeds.feedsnew .col2 {
        width: 55px;
        margin-left: -55px;
    }

    .feeds.feedsold .col1 .cont .cont-col2 .desc .label {
        margin-left: 2px;
    }

    .notifdesc {
        padding-right: 2px;
    }
}

.feeds div.cont, .feeds div.date {
    line-height: 1.6;
}

.feeds div.cont {
    padding: 5px 5px 4px 15px;
}

.dashtasks div.cont {
    width: 100%;
}

.feedsnew li {
    border: 1px solid rgb(235,204,209);
    background-color: rgb(242,222,222);
}

    .feedsnew li:hover {
        background-color: rgb(227,177,183);
    }

.feedsold li {
    /* light blue    border:1px solid rgb(188, 232, 241);
    background-color:rgb(217, 237, 247);  */
    border: 1px solid rgb(214,203,208);
    background-color: rgb(221,221,221);
}
    /* light blue .feedsold li:hover { background-color:rgb(174, 211, 230); } */
    .feedsold li:hover {
        background-color: rgb(191,191,191);
    }

.feeds .col1, .feeds .col2, .feeds a {
    background-color: inherit;
}

.dashtasks li {
    border: 1px solid rgb(214,233,198);
}

.dashtasks div.cont:hover {
    background-color: rgb(199,217,184);
}

.dashtaskshighlighted {
    border: 2px solid red !important;
}

.dashtaskssent div.cont {
    background-color: rgb(199,226,255) !important;
     border: 1px solid rgb(185,211,238) !important;
     color:rgb(28,127,202) !important;
}

.dashtaskssent div.cont:hover {
    background-color: rgb(185,211,238) !important;
}


/* end Notification feeds */
/* ##################################################### */

.nav-righttext {
    padding: 10px 15px;
    color: rgb(115, 115, 115);
    font-style: italic;
}

.form-control[disabled], ul.pagination > li > span[disabled] {
    color: rgb(132, 130, 132);
}

.form-control[disabled], ul.pagination > li > span[disabled] { /* safari */
    -webkit-text-fill-color: rgb(132,130,132);
    -webkit-opacity: 1;
}

.has-error .form-control {
    border-color: rgb(169, 68, 66);
}


div.checkbox-group label div {
    display: inline-block;
}

div.checkbox-group span.help-block {
    margin-left: 10px;
}

span.countdown {
    color: grey;
}

.wfradiolist label {
    border: 1px solid transparent;
    font-weight: 400;
}

    .wfradiolist label.radio-inline {
        padding-top: 3px;
        padding-left: 0;
        margin-left: 0;
        padding-right: 5px;
    }

.wfradiolist .radio-inline input {
    margin-left: 3px;
    margin-right: 8px;
    margin-top: 4px;
}

.wfradiolist input[type="radio"]:focus {
    outline-style: none;
}

.wfradiolist label.radiofocus {
    border: 1px solid rgb(204, 204, 204);
    border-color: rgb(102, 175, 233);
}

.wfradiolist label.radiofocus {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
    border-radius: 4px 4px 4px 4px;
}

/*
.pagination > li > a:active /* , .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { */
/*    background-color:rgb(70, 130, 180);
} */


/* Lock Screen-related CSS Classes */
.LockOff {
    visibility: hidden;
    display: none;
    position: absolute;
    top: -100px;
    left: -100px;
}

.LockBackground {
    position: absolute;
    /*	top: 0px;
	left: 0px; */
    visibility: visible;
    display: block;
    width: 105%;
    height: 105%;
    background-color: #666;
    z-index: 999;
    filter: alpha(opacity=75);
    opacity: 0.75;
    padding-top: 20%;
}

.LockPane {
    z-index: 1000;
    position: absolute;
    /*		top: 0px;
	left: 0px; */
    padding-top: 25%;
    visibility: visible;
    display: block;
    text-align: center;
    width: 100%;
}

    .LockPane div {
        width: 55%;
        background-color: #969;
        color: White;
        font-size: large;
        border: dotted 1px White;
        padding: 9px;
        margin-left: auto;
        margin-right: auto;
    }


/* ##################################################################################################### */
/* Select2 combo boxes */
/* ##################################################################################################### */

.select2-container.form-control {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
}

.select2-container .select2-choice {
    height: 34px;
    padding: 2px 0 0 8px;
    /*    border:1px solid #e5e5e5; */
    border: 1px solid rgb(204,204,204); /* when enabled and hasn't got focus - grey color */
    background-image: none;
}

.select2-container .select2-choice {
    filter: none;
}

.select2-container.select2-drop-above .select2-choice {
    background-image: none;
}

.select2-container.select2-drop-above .select2-choice {
    filter: none;
}

.select2-container .select2-choice abbr {
    background: url('../Images/select2/select2.png') right top no-repeat;
}

/* I have to do this to make all the controls look the same when the screen is "read only"...
I wish I could make all the controls look the same as the select2 ones instead of the other way around! */
.select2-container.select2-container-disabled .select2-choice {
    color: rgb(132, 130, 132);
    cursor: not-allowed;
}

.select2-drop {
    border: 1px solid #e5e5e5;
}

.select2-drop {
    box-shadow: none;
}

    .select2-drop.select2-drop-above {
        border-top: 1px solid #e5e5e5;
    }

    .select2-drop.select2-drop-above {
        border-bottom: 1px solid rgb(204,204,204);
    }
    /* when dropdown is open above the box, this is the line between the dropdown and the box - grey color */
    .select2-drop.select2-drop-above {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.select2-drop-active {
    border: 1px solid #999999;
}

.select2-drop.select2-drop-above.select2-drop-active {
    border-top: 1px solid #999999;
}

.select2-container .select2-choice .select2-arrow {
    /* border-left:1px solid #e5e5e5; */
    border-left: 1px solid rgb(204,204,204); /* left border next to arrow - when enabled and either has focus or not - grey color */
    background: transparent;
    background-image: none;
}

.select2-container .select2-choice .select2-arrow {
    filter: none;
}

    .select2-container .select2-choice .select2-arrow b {
        background: url('../Images/select2/select2.png') no-repeat 0 1px;
    }

.select2-search input {
    /* border:1px solid #e5e5e5; */
    border: 1px solid rgb(204,204,204); /* when dropdown is open, this is the border on the search entry box - grey color */
    color: #333333;
    padding: 6px 6px !important;
    background-color: #ffffff;
    background: #fff url('../Images/select2/select2.png') no-repeat 100% -22px;
}

    .select2-search input.select2-active {
        background: #fff url('../Images/select2/select2-spinner.gif') no-repeat 100%;
    }

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    /*border:1px solid #999999;
    -webkit-box-shadow:none;
    box-shadow:none;*/
    border-color: rgb(102, 175, 233); /* the color when it has the focus but the dropdown is not open - light blue color */
    outline: 0px none;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}

.select2-dropdown-open .select2-choice {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
    filter: none;
    border-color: rgb(102, 175, 233); /* when the dropdown is open, the color around the box - light blue color */
    outline: 0px none;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6);
}


.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    border: 1px solid #999999;
    background-image: none;
    filter: none;
}

.select2-results {
    max-height: 230px;
}

    .select2-results .select2-highlighted {
        background: #eee;
        color: #333;
    }

    .select2-results li em {
        background: #eee;
    }

    .select2-results .select2-no-results,
    .select2-results .select2-searching,
    .select2-results .select2-selection-limit {
        padding-left: inherit;
    }

.select2-more-results.select2-active {
    background: #f4f4f4 url('../Images/select2/select2-spinner.gif') no-repeat 100%;
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
    background: #fff url('../Images/select2/select2-spinner.gif') no-repeat 100% !important;
}

.select2-search-choice-close {
    background: url('../Images/select2/select2.png') right top no-repeat;
}

.select2-results-dept-0 .select2-result-label {
    padding-left: 7px;
}

.select2-dropdown-open .select2-choice .select2-arrow b {
    background-position: -18px 1px;
}

.select2-result-label-prodlist {
    border: 1px solid rgb(155,155,155) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    /* padding: 3px 7px 4px; */
}

.has-error .select2-container .select2-choice {
    border-color: rgb(185, 74, 72);
}

/*
.has-error .select2-container .select2-choice > span {
    color:rgb(68, 68, 68);
}
*/

/*
.has-error .select2-container-disabled .select2-choice > span {
    color:rgb(153, 153, 153);
}
*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
    .select2-search input,
    .select2-search-choice-close,
    .select2-container .select2-choice abbr,
    .select2-container .select2-choice .select2-arrow b {
        background-image: url('../Images/select2/select2x2.png') !important;
        background-repeat: no-repeat !important;
        background-size: 60px 40px !important;
    }

    .select2-search input {
        background-position: 100% -21px !important;
    }
}


/* ##################################################################################################### */
/* Misc */
/* ##################################################################################################### */

.well {
    background-color: #fafafa;
}

.blueborder {
    border-color: rgb(102, 175, 233) !important;
    outline: 0px none !important;
}

.blueborder {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(102, 175, 233, 0.6) !important;
}

.hiddenfocus {
    clip: rect(0px, 0px, 0px, 0px) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0px none !important;
    margin: 0px !important;
    padding: 0px !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0px none !important;
    left: 0px !important;
    top: 0px !important;
}

.infomove {
    text-align: center;
}

.descprdiv {
    word-wrap: break-word;
}


/* ##################################################################################################### */
/* Printing */
/* ##################################################################################################### */

@page {
    /* this affects the margin on the content before sending to printer */
    margin: 5mm 5mm 5mm 5mm !important;
}

@media print {
    html, body, div.form-actions, div.page-sidebar, div.footer, div.navbar, div.page-container, div.page-content, div.tab-pane, div.portlet, div.clearfix, div.form-group div, div.pageheader {
        margin: 0 !important;
        padding: 0 !important;
    }

    p.form-control-static, div.form-group label {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html {
        height: 99% !important; /* argh! */
        width: 100% !important;
        top: 0 !important;
    }

    body {
        margin-top: -40px !important;
        top: 0 !important;
        height: 99% !important; /* argh! */
        width: auto !important;
    }

    div.page-container {
        height: 100% !important;
        top: 0 !important;
    }

    #divDelivRecip {
        width: 100% !important;
    }

    .descpr {
        padding-left: 15px !important;
        margin-left: 15px !important;
    }

    .descprdiv {
        width: 50% !important;
    }

    table.recpay {
        margin-top: 0 !important;
    }

    div.form-actions, div.page-sidebar, ul.page-sidebar-menu, div.footer, div.navbar, div.clearfix, .note-danger, div.tools, .noprint, .ordernotif, h3.page-title, a.btn.help {
        display: none !important;
    }

    div.page-content {
        top: 0 !important;
        height: 100% !important;
    }

    div.portlet {
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    div.pageheader, div.note {
        border: none !important;
    }

    div.note {
        padding: 0 !important;
    }

    /* it seems chrome needs you to add these in again :( */
    .control-label {
        text-align: right;
    }

    .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;
        padding-left: 15px;
        padding-right: 15px;
    }

    .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%;
    }
}


div.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-color: #BDBDBD;
    border-width: 5px 5px 0;
}

div.tooltip-inner {
    color: #000;
    background: #D5D5D5;
    border: solid 1px #BDBDBD;
    font-size: 16px;
    font-family: FontAwesome;
    max-width: 350px;
}




.selectedRowColor {
    background-color: #E2EDF8 !important;
}


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


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

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