/* 
    Document   : default
    Created on : Jun 23, 2011, 3:27:43 PM
    Author     : SK Saw <sksaw@forecepts.com>
    Description:
        Purpose of the stylesheet follows.
*/


/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

html {
    height: 100%;
}

body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-family: Arial, Verdana, sans-serif;
    color: #616161;
}

h1 {
    color: #0073EA;
    font-size: 22px;
    font-weight: bold;
    padding: 0.4em 0 5px;
    margin: 0;
}

hr.dotted {
    border: 0px;
    border-bottom: 1px dotted #bfbfbf;
    height: 1px;
    margin-top: 3px;
}

a {
    color: #0073EA;
    text-decoration: none;
}

a:hover {
    color: #8491a4;
}

.left {
    float: left;
}

.right {
    float: right;
}

button.right {
    margin-left: 4px;
}

.clearfix {
    clear: both;
}

.alignCenter {
    text-align: center;
}

.alignLeft {
    text-align: left;
}

.alignRight {
    text-align: right;
}

.alignTop {
    vertical-align: top;
}

.alignMiddle {
    vertical-align: middle;
}

.alignBottom {
    vertical-align: bottom;
}

.none {
    display: none;
}


/* Layouts  */

div#page-wrapper {
    margin: auto auto -36px;
    min-height: 100%;
    min-width: 900px;
    background: #FAFAFA;
}

div#top {
    height: 52px;
    padding: 0px 20px 0 20px;
    background: url("../images/header-sitename-bg.gif") repeat-x;
}

div#top a.logo {
    display: block;
    float: left;
    height: 52px;
    background: url("../images/logo.gif") no-repeat scroll left 40% transparent;
    line-height: 52px;
    padding: 0 0 0 51px;
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #000;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

div#top .welcome {
    color: #F2F2F2;
    font-size: 11px !important;
    float: right;
    padding: 10px 0 0;
}

div#top .welcome span.note {
    float: left;
    height: 29px;
    line-height: 29px;
    padding: 0 10px 0 0;
}

div#top .welcome span.note a {
    color: #D8D8D8;
    font-weight: bold;
}

div#top .welcome span.note a:hover {
    text-decoration: underline;
}

div#top .welcome a.btn {
    background: none repeat scroll 0 0 #262626;
    border-color: #000;
    color: #C5C5C5;
    margin-left: 8px;
    margin-right: 0;
    font-weight: normal;
    padding: 2px 5px 2px 18px !important;
}

div#top .welcome a.btn:hover {
    color: #D8D8D8;
}

div#top .welcome a.btn span.ui-icon {
    top: 1px;
    left: 0.2em;
    margin: 0 5px 0 0;
    position: absolute;
    background: url("./jquery-ui/smoothness/images/ui-icons_2e83ff_256x240.png") no-repeat;
    display: block;
    height: 16px;
    overflow: hidden;
    text-indent: -99999px;
    width: 16px;
}

div#top .welcome a.btn:hover span.ui-icon {
    background: url("./jquery-ui/smoothness/images/ui-icons_888888_256x240.png") no-repeat;
}

.loading {
    color: #333333;
    border: 1px solid #9D9D9D;
    font-weight: bold;
    background: url("../images/ui-bg_highlight-soft_25_0073ea_1x100.png") repeat-x scroll 50% 50% #F6F6F6;
}

div#content-wrapper {
    padding: 5px 15px 50px 15px;
    line-height: 1.6em;
}

div#footer {
    background: none repeat scroll 0 0 #4C4C4C;
    border-top: 6px solid #E3E3E3;
    color: #C1C1C1;
    font-size: 0.9em;
    text-align: center;
    height: 30px;
    line-height: 30px;
}


/* Header navigation menu */

.navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 42px;
    background: url("../images/nav-bg-tile.gif") repeat-x;
    border-top: 1px solid #d0d0d0;
}

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

.navigation li {
    float: left;
    position: relative;
}

.navigation ul:first-child li:first-child a {
    margin-left: 10px;
    border-left: 0;
}

.navigation li a {
    display: block;
    height: 38px;
    line-height: 38px;
    padding: 0 8px;
    color: #454545;
    font-weight: bold;
    border-right: #d0d0d0 solid 1px;
    border-left: #f7f7f7 solid 1px;
    text-shadow: 0 1px 0 #FFFFFF;
}

.navigation li.sfHover ul {
    box-shadow: 2px 2px 2px #c1c1c1;
}

.navigation li.sfHover,
.navigation li.sfHover2 {
    background: #fff;
    border-left: #b2b2b2 solid 1px;
    border-right: #b2b2b2 solid 1px;
}

.navigation li.sfHover a,
.navigation li.sfHover2 a {
    padding: 0 7px;
}

.navigation li ul {
    width: 265px;
    padding: 5px;
    left: -1px;
    position: absolute;
    z-index: 999;
    background: #fff;
    border: #b2b2b2 solid 1px;
    margin: 0;
    display: none;
}

.navigation li ul li {
    float: none;
    position: relative;
    z-index: 999;
    border-bottom: #ccc dotted 1px;
    background: #f0f0f0;
}

.navigation li ul li.sfHover,
.navigation li ul li.sfHover2 {
    margin: 0;
    border-left: 0;
    border-right: 0;
    background: #e0e0e0;
}

.navigation li ul li a {
    color: #7c7c7c;
}

.navigation li ul li a:hover {
    color: #696969;
    background: #f7f7f7;
}

.navigation li ul li ul {
    left: 265px;
    top: 0;
}

.navigation li ul li.sfHover a {
    color: #333;
}

.navigation li ul li ul li a:hover {
    color: #000;
}

.navigation .ui-icon-carat-1-s {
    float: right;
    margin: 12px 0 0;
    background: url("./jquery-ui/smoothness/images/ui-icons_2e83ff_256x240.png") -64px 0;
}


/* Buttons */

a.btn {
    display: block;
    margin: 5px;
    position: relative;
    float: left;
    border: 1px solid #DDDDDD;
    outline: medium none;
    font-weight: bold;
    color: #0073EA;
    background: url("../images/ui-bg_highlight-soft_100_f6f6f6_1x100.png") repeat-x scroll 50% 50% #F6F6F6;
    padding: 0.4em 1em !important;
}

a.btn:hover,
button:hover {
    color: #333333;
    border: 1px solid #9D9D9D;
    font-weight: bold;
    background: url("../images/ui-bg_highlight-soft_25_0073ea_1x100.png") repeat-x scroll 50% 50% #F6F6F6;
}

button {
    cursor: pointer;
    border: 1px solid #DDDDDD;
    outline: medium none;
    font-weight: bold;
    color: #0073EA;
    background: url("../images/ui-bg_highlight-soft_100_f6f6f6_1x100.png") repeat-x scroll 50% 50% #F6F6F6;
    padding: 0.4em 1em !important;
}

input,
textarea {
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    background: url("../images/txt-bg.gif") repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 5px 2px;
    color: #616161;
}

input[type='radio'],
input[type='checkbox'] {
    border: 0;
    background: none;
}

select {
    border: 1px solid #DDDDDD;
    padding: 5px 2px;
    color: #616161;
}


/* Notification Messages */

.messageWrapper {
    position: fixed;
    z-index: 999999;
    top: 8px;
    left: 50%;
}

.response-msg {
    box-shadow: 1px 2px 6px #000;
}

.response-msg,
p.hint {
    font-size: 0.9em;
    margin: 0 0 10px;
    padding: 6px 10px 10px 45px;
}

.ui-dialog {
    box-shadow: 2px 4px 12px #000;
}

div.error,
p.hint {
    color: #B50007;
    border: 1px solid #E8AAAD;
    background: url("../images/error.png") no-repeat scroll 10px 50% #F9E5E6;
}

div.notice {
    color: #828400;
    border: 1px solid #E8E3AA;
    background: url("../images/notice.png") no-repeat scroll 10px 50% #F9F9E5;
}

div.inf {
    color: #0055B5;
    border: 1px solid #AAC6E8;
    background: url("../images/info.png") no-repeat scroll 10px 50% #E5ECF9;
}

div.success {
    color: #1C8400;
    border: 1px solid #B4E8AA;
    background: url("../images/success.png") no-repeat scroll 10px 50% #E9F9E5;
}

.note {
    font-size: 10px;
    font-style: italic;
    padding: 2px 0;
}

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

p.error,
ul.errors li,
label.error {
    color: #B50007;
    border: 1px solid #E8AAAD;
    background: none;
    font-size: 10px;
    border: none;
    white-space: nowrap;
    margin: 0;
    display: block;
}


/* Breadcrumb */

.breadcrumb {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 11px;
}

.breadcrumb a {
    color: #838383;
    text-decoration: underline;
}

.breadcrumb a:hover {
    color: #636B75;
    text-decoration: none;
}


/* Pagination */

.paginationText {
    margin: 10px 0 10px;
    float: left;
    font-weight: bold;
}

.pagination {
    list-style: none outside none;
    padding: 0;
    margin: 10px 0 10px;
    float: right;
    /* MARS 110804 1209 */
}

.pagination .active {
    padding: 0 4px;
    font-weight: bold;
}

.pagination li {
    cursor: pointer;
    float: left;
    list-style: none outside none;
    margin: 2px;
    padding: 0;
    position: relative;
    font-size: 11px;
}

.pagination li a {
    display: block;
    padding: 0 6px;
    border: 1px solid #DDDDDD;
    color: #0B6ABA;
    font-size: 11px;
    font-weight: bold;
    outline: medium none;
    background: url("../images/ui-bg_highlight-soft_100_f6f6f6_1x100.png") repeat-x scroll 50% 50% #F6F6F6;
}

.pagination li a:hover {
    background: url("../images/ui-bg_highlight-soft_25_0073ea_1x100.png") repeat-x scroll 50% 50% #F6F6F6;
    color: #333333;
    font-weight: bold;
    border: 1px solid #9D9D9D;
}


/* Content Box */

.content-box {
    display: table;
    /* mars 110708 1106 */
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: 0 0 20px;
    padding: 1px;
}

.portlet-header {
    text-shadow: 0 1px 0 #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    margin: 0.4em;
    padding: 2px 7px;
    text-transform: uppercase;
    color: #444444;
    border: 1px solid #DDDDDD;
    background: url("../images/ui-bg_highlight-soft_50_dddddd_1x100.png") repeat-x scroll 50% 50%;
}

.portlet-content {
    padding: 4px;
}


/* Form */

form {
    padding: 0;
    margin: 0;
}

.form-bg {
    background: none repeat scroll 0 0 #F9F9F9 !important;
}

fieldset {
    border: 0;
    margin: 0;
    clear: both;
    padding: 12px 0 0;
    width: 100%;
}

fieldset h4 {
    padding-bottom: 4px;
    color: #333333;
    font-size: 11px;
    margin: 0 10px 0 0;
    padding: 0px;
}

span.mandatory {
    font-size: 10px;
    color: #F00;
}

dl.zend_form {
    padding: 0;
    margin: 0;
}

dl.zend_form dt {
    padding: 5px 0 0 0;
}

dl.zend_form dt label {
    color: #333333;
    font-size: 11px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 0 5px 0 0;
}

dl.zend_form dd {
    margin: 0;
    padding: 0;
}

.required {
    background: url(../images/required-field.png) top right no-repeat;
}


/* Tables */

.hastable {
    background: #fff;
    border: 1px solid #dedede;
    border-bottom: none;
    margin-bottom: 5px;
}

.hastable caption {
    font-weight: bold;
    font-size: 11px;
    padding: 0 0 5px 0;
    text-align: left;
}

.hastable a {
    color: #0073EA;
    font-family: Arial, Verdana, sans-serif;
}

.hastable thead td,
.hastable thead th {
    background-color: #e6e6e6 !important;
    text-align: left !important;
    text-shadow: 0 1px 0 #FFFFFF;
    font-size: 12px;
}

.hastable tr td,
.hastable thead th {
    border-left: 1px solid #ccc;
    text-align: left;
    padding: 8px;
    color: #616161;
}

.hastable tr td {
    vertical-align: top;
}

.hastable thead td,
.hastable thead th {
    font-weight: bold;
    padding: 8px;
    text-align: center;
    vertical-align: top;
}

.hastable th,
.hastable td {
    border-bottom: 1px solid #dedede;
}

.hastable tbody th {
    padding: 0 8px;
    text-align: left;
}

.hastable tbody tr.alt td,
.hastable tbody tr.odd td {
    color: #464646;
    vertical-align: top !important;
}

.hastable tbody tr.alt td,
.hastable tbody tr.alt th,
.hastable tbody tr.odd {
    background-color: #f5f5f5;
}

.hastable tbody tr:hover td,
.hastable tbody tr:hover th {
    background-color: #FFFFCF;
}

.hastable tbody td table tr th {
    font-weight: bold;
    padding: 8px;
    text-align: center;
    vertical-align: top;
}

.hastable tbody td table tr td {
    background-color: #FFFFFF !important;
}

.hastable tbody td table tr:hover td {
    background-color: #CFFFFF !important;
}

.headerSortDown,
.headerSortUp {
    background-repeat: no-repeat;
    background-color: #dcdcdc!important;
    color: #404040!important;
}

.header span {
    float: right;
    margin-top: -3px;
}

.hastable tr .center {
    width: 5px;
}

.hastable a.btn span.ui-icon {
    left: 0.1em;
}

.hastable a.btn {
    margin: 0 5px;
}

span.sort {
    margin: 3px;
}

.hastable.hastable-small tr td,
.hastable.hastable-small thead th {
	padding: 2px 4px;
	font-size: 12px;
}

/* Border Radius */

.portlet-header,
.content-box,
.pagination li a,
.pagination li,
.response-msg,
a.btn,
.yellow-box,
.gray-box,
button,
input,
textarea,
select,
.hastable,
a.icon,
a.icon-red {
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
}


/* Boxes */

.yellow-box {
    background: none repeat scroll 0 0 #FFF6BF;
    border: 1px solid #FDD845;
    margin: 15px 0;
    padding: 8px;
}

.gray-box {
    background: none repeat scroll 0 0 #EAEAEA;
    border: 1px solid #C0C0C0;
    margin: 15px 0;
    padding: 8px;
}

.yellow-box h3,
.gray-box h3 {
    font-size: 14px;
    text-shadow: 0 1px 0 #FFFFFF;
    margin: 5px 0;
    padding: 0;
    font-weight: bold;
    color: #444444;
}


/* Icons */

a.icon,
a.icon-red {
    display: block;
    border: 1px solid #DDDDDD;
    color: #0B6ABA;
    font-size: 11px;
    font-weight: bold;
    outline: medium none;
    text-indent: -99999px;
    width: 16px;
    height: 16px;
    margin: 3px;
}

a.icon:hover,
a.icon-red:hover {
    color: #333333;
    font-weight: bold;
    border: 1px solid #9D9D9D;
}

a.icon {
    background: url("./jquery-ui/smoothness/images/ui-icons_2e83ff_256x240.png") no-repeat;
}

a.icon:hover {
    background: url("./jquery-ui/smoothness/images/ui-icons_888888_256x240.png") no-repeat;
}

a.icon-red {
    background: url("./jquery-ui/smoothness/images/ui-icons_cd0a0a_256x240.png") no-repeat;
}

a.icon-red:hover {
    background: url("./jquery-ui/smoothness/images/ui-icons_888888_256x240.png") no-repeat;
}

.ui-icon-lock {
    background-position: -192px -96px !important;
}

.ui-icon-power {
    background-position: 0 -176px !important;
}

.ui-icon-email {
    background-position: -80px -97px !important;
}

.ui-icon-close {
    background-position: -80px -128px !important;
}

.ui-icon-plus {
    background-position: -16px -128px !important;
}

.ui-icon-sort-asc {
    background-color: #FFF !important;
    background-position: 0px -16px !important;
}

.ui-icon-sort-desc {
    background-color: #FFF !important;
    background-position: -64px -16px !important;
}

.ui-icon-sort-none {
    background-color: #FFF !important;
    background-position: -128px -16px !important;
}

.ui-icon-delete {
    background-color: #FFF !important;
    background-position: -80px -128px !important;
}

.ui-icon-merge {
    background-color: #FFF !important;
    background-position: -176px -129px !important;
}

.ui-icon-note {
    background-color: #FFF !important;
    background-position: -128px -96px !important;
}

.ui-icon-person {
    background-color: #FFF !important;
    background-position: -144px -96px !important;
}

.ui-icon-edit {
    background-color: #FFF !important;
    background-position: -240px -96px !important;
}

.ui-icon-view {
    background-color: #FFF !important;
    background-position: -32px -96px !important;
}

.ui-icon-search {
    background-color: #FFF !important;
    background-position: -160px -112px !important;
}

.ui-icon-print {
    background-color: #FFF !important;
    background-position: -160px -96px !important;
}

.ui-icon-receipt {
    background-color: #FFF !important;
    background-position: -240px -128px !important;
}

.ui-icon-summary {
    background-color: #FFF !important;
    background-position: -192px -128px !important;
}

.ui-icon-comment {
    background-color: #FFF !important;
    background-position: -128px -96px !important;
}


/* Login Form */

div#loginBox {
    width: 300px;
    margin: 50px auto 0 auto;
}


/* Zend Form */

.zend_form fieldset {
    margin: 0;
    padding: 0;
}

.zend_form fieldset legend {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

.zend_form #fieldset-left,
.zend_form #fieldset-right {
    width: auto;
    float: left;
    clear: none;
    padding-bottom: 5px;
}

.zend_form #fieldset-left {
    margin: 0px 40px 0px 0px;
}

.zend_form #fieldset-privilegeGroup dl dd label {
    display: table;
    width: 300px;
    float: left;
}

.zend_form #fieldset-privilegeGroup dl dt {
    display: block;
    clear: both;
}

.subTbl thead td {
    background-color: #e6e6e6 !important;
}

.zend_form #fieldset-bottom {
    padding: 0;
    margin: 0;
    text-align: center;
}


/* Auto Complete */

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}


/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */

* html .ui-autocomplete {
    height: 200px;
}


/* Mars */

.portlet-content input[type="text"] {
    width: 254px;
}

.portlet-content select {
    width: 261px;
}

.portlet-content .container {
    margin: 8px;
    display: table;
}

.portlet-content .container .required {
    font-weight: bold;
    color: #444;
    padding-right: 5px;
}

.portlet-header .icon,
.portlet-header .icon-red {
    margin-top: 1px;
}

.portlet-content table {
    margin: 4px 4px 4px 8px;
}

.icon {
    background-color: #fff !important;
}

.two_column dl,
.two_column fieldset,
.two_column dt,
.two_column dd {
    padding: 0px;
    margin: 0px;
}

.two_column #left-label,
.two_column #right-label,
.two_column #bottomLeft-label {
    display: none;
}

.two_column #left-element,
.two_column #right-element {
    float: left !important;
    width: auto;
    padding: 0px;
    margin: 0px 8px 0px 8px;
}

.two_column #left-element {}

.two_column #fieldset-bottomLeft {
    display: table;
    position: relative;
    margin: 0px 0px 0px 8px;
    padding: 0px;
    vertical-align: top;
}

.two_column #bottom-element {
    text-align: center;
    margin-bottom: 4px;
}

.two_column #fieldset-bottom {
    position: relative;
    margin: 0px;
    margin-top: -16px;
}

.two_column #bottom-element dt {
    display: none;
}

.two_column #bottom-element dd {
    display: inline;
}

.two_column .right {
    float: right;
}

.two-column-normal dl {
    display: block;
    float: left;
    margin: 4px 56px 4px 8px;
}

.two-column-normal dl.right {
    float: left;
    margin: 4px 8px 4px 4px;
}

.two-column-normal label {
    color: #000;
    font-weight: bold;
    font-size: 11px;
}

.one-column-normal {
    display: block;
    float: left;
    margin: 4px 8px 4px 8px;
}

.one-column-normal label {
    color: #000;
    font-weight: bold;
    font-size: 11px;
}

.one-column-normal input {
    width: 574px !important;
}


/* RECEIPT STATUS */

.receipt_status_pending td {
    background-color: #e5ecf9 !important;
    color: #0055b5 !important;
}

.receipt_status_cleared td {
    background-color: #fff !important;
}

.receipt_status_void td {
    background-color: #f9e5e6 !important;
    color: #b50007 !important;
}


/* TR HIGHLIGHTING */

tr.highlight td {
    background-color: #e5ecf9 !important;
    color: #0055b5 !important;
}

.btn_container {
    margin-top: 8px;
}


/* READONLY */

input[readonly] {
    background: #f0f0f0;
}


/* DISABLED */

input[disabled] {
    background: #f0f0f0;
    color: #999;
}


/* NUMBERS */

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


/* CURRENCY */

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


/* DATE PICKER */

.datepicker {
    width: 82px !important;
    padding-left: 4px !important;
    margin-right: 2px !important;
    font-size: 12px !important;
    color: #444 !important;
}

img.ui-datepicker-trigger {
    margin: 0 6px -3px 0;
}


/* TIME PICKER */

.timepicker {
    width: 57px !important;
    padding-left: 4px !important;
    margin-right: 2px;
}

img.time-picker-icon {
    margin: 0px 0px -3px 1px;
}


/* ICONS */

.ui-icon-receive {
    background-color: #FFF !important;
    background-position: -241px -48px !important;
}

.ui-icon-clock {
    background-color: #FFF !important;
    background-position: -80px -112px !important;
}

.ui-icon-star {
    background-color: #FFF !important;
    background-position: -224px -112px !important;
}

.ui-icon-reason {
    background-color: #FFF !important;
    background-position: -128px -96px !important;
}

.ui-icon-print {
    background-color: #FFF !important;
    background-position: -160px -96px !important;
}

.ui-icon-void {
    background-color: #FFF !important;
    background-position: -176px -97px !important;
}

.ui-icon-complete {
    background-color: #FFF !important;
    background-position: -176px -97px !important;
}

.ui-icon-inventory {
    background-color: #FFF !important;
    background-position: -64px -96px !important;
}

.ui-icon-update-status {
    background-color: #FFF !important;
    background-position: -16px -64px !important;
}

textarea[readonly],
textarea[disabled],
input[type="text"][readonly],
input[type="text"][disabled],
select[disabled] {
    background: #f0f0f0 !important;
    color: #474747;
}

.red,
button[id="btn_void"],
button[id="btn_unconfirm"],
button[id="btn_delete"] {
    color: #b00 !important;
}

.gray-box select[name="item_id[]"][multiple] {
    display: inline-block;
    height: 38px;
    min-width: 100px;
    padding: 2px;
    margin-bottom: -6px;
    color: #000;
}

.gray-box select[name="item_id[]"][multiple]:hover,
.gray-box select[name="item_id[]"][multiple]:focus {
    height: 120px;
    margin-top: -82px;
    z-index: 9999;
}

.alt1 {
    background-color: #88cf88;
    border: solid 3px #88cf88;
}

.alt2 {
    background-color: #d8a9de;
    border: solid 3px #d8a9de;
}


/* End of Mars */

/* start helper methods */
.d-flex {
    display:flex;
}
.d-flex--center {
    align-items:center;
    justify-content:center;
}
.m-0 {
    margin:0 !important;
}
.mr-1 {
    margin-right: .5rem !important;
}
.pl-1 {
    padding-left: .5rem !important;
}
.text-right {
    text-align: right !important;
}
/* end of helper methods */