/* Fonts */
/* Webfont: Alegreya Sans Regular */
@font-face 
{
    font-family: 'Alegreya-Sans-Regular';
    src: url('../../resources/fonts/Alegreya-Sans-Regular.ttf') format('truetype');
}
/* Webfont: Alegreya-Sans-Bold */
@font-face
{
    font-family: 'Alegreya-Sans-Bold';
    src: url('../../resources/fonts/Alegreya-Sans-Bold.ttf') format('truetype');
}

*
{
    margin: 0;
    padding: 0;
    font-family: "Alegreya-Sans-Regular", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.3em;
    border: 0px none;
}

body { background-color: #E6E6E6; }

/* column structure */
.column-960
{
    width: 960px;
    margin: 0 auto;
}

.column-768, .column-720, .column-640, .column-480, .column-320, .column-240, .column-192, .column-half, .column-one-third, .column-two-third { float: left; }

.column-768 { width: 768px; }
.column-720 { width: 720px; }
.column-640 { width: 640px; }
.column-480 { width: 480px; }
.column-320 { width: 320px; }
.column-240 { width: 240px; }
.column-192 { width: 192px; }
.column-half { width: 50% }
.column-one-third { width: 33% }
.column-two-third { width: 66% }

.column-640-center
{ 
    width: 640px; 
    margin: 0 auto;
}

.clear
{
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

/* misc*/
.block { display: block; }
.inline-block { display: inline-block; }
.none { display: none; }
.right { float: right; }

#calender, .calender
{
    display: inline-block;
    float: left;
    height: 2.6em;
    width: 2.8em;
    background-image: url(../../images/design-assets/calender.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    cursor: pointer;
}

.calender-class
{
    position: absolute;
}

/* borders */
.border-none { border: 0 none !important; }
.border-top { border-top: 1px solid #CCCCCC !important; }
.border-light-grey { box-shadow: 0 0 0 1px #CCCCCC inset }
.border-light-red { box-shadow: 0 0 0 1px #ffbaba inset }

/* shadow */
.dark-shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

/* hr */
.hr-light-grey { border-top: 1px solid #CCCCCC }
.hr-light-red { border-top: 1px solid #ffbaba }

/* background colors */
.white-bg { background-color: #FFFFFF; }
.black-bg { background-color: #191919; }
.light-grey-bg { background-color: #E6E6E6; }
.grey-bg { background-color: #CCCCCC; }
.red-bg { background-color: #ff2e3a; }
.yellow-bg { background-color: #fcd32d; }
.green-bg { background-color: #93bf3d; }
.dark-grey-bg { background-color: #7B7B7B }
.primary-bg { background-color: #2AA1C0 }
.secondary-bg { background-color: #0E647D }

/* colors */
.white { color: #FFFFFF }
.black { color: #000000 }
.red { color: #d8000c }
.light-grey { color: #E6E6E6 }
.grey { color: #CCCCCC }
.dark-grey { color: #7B7B7B }
.primary { color: #2AA1C0 }
.secondary { color: #0E647D }

/* padding */
.padding { padding: 0.8em; }
.padding-half { padding: 0.4em; }
.padding-offset { padding: 0 0.8em 0 0.8em; }
.padding-offset-half { padding: 0 0.4em 0 0.4em; }
.padding-top-bottom { padding: 0.8em 0 0.8em 0; }
.padding-left { padding: 0 0 0 0.8em; }
.padding-right { padding: 0 0.8em 0 0; }
.padding-left-0 { padding-left: 0; }
.padding-right-0 { padding-right: 0; }
.padding-top-0 { padding-top: 0; }
.padding-bottom-0 { padding-bottom: 0; }

.margin-0 { margin: 0 !important; }
.margin-right-bottom { margin: 0 0.8em 0.8em 0 !important; }
.margin-right-bottom-half { margin: 0 0.4em 0.4em 0 !important; }

/* spacers */
.spacer, .spacer-2x, .spacer-3x { display: block; }
.spacer { height: 0.8em }
.spacer-2x { height: 1.6em }
.spacer-3x { height: 2.4em }

/* font sizes */
.tiny { font-size: 0.4em }
.tiny-medium { font-size: 0.6em }
.small { font-size: 0.8em }
.medium { font-size: 1.25em }
.large { font-size: 2em }
.extra-large { font-size: 3em }
.large-5x { font-size: 8em }

.bold { font-family: "Alegreya-Sans-Bold", Tahoma, Arial, Helvetica, sans-serif; }
.center { text-align: center; }
.text-right { text-align: right; }
.capitalize { text-transform: uppercase; }
.link-no-hover{ text-decoration: none }

.btn-link
{
    display: inline-block;
    line-height: 2.2em;
    padding: 0.2em 0.8em 0.2em 2em;
    text-decoration: none;
    margin: 0 0.2em 0.2em 0;
}

.subnav
{
    display: inline-block;
    float: right;
    line-height: 2.2em;
    text-decoration: none;
    padding: 0.2em 0.8em 0.2em 2em;
}

#header
{
    height: 40px;
    background-color: #FFFFFF;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

#content
{
    /*min-height: 400px;*/
    margin-top: 4em;
    margin-bottom: 0.8em;
}

#content-header
{
    background-color: #7B7B7B;
    text-transform: uppercase;
    color: #E6E6E6;
    padding: 0.8em;
    font-size: 1.2em;
}

#content-content
{
    background: #FFFFFF;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);
}

#footer
{
    height: 150px;
    background-color: #7B7B7B;
}

.hamburger-menu-wrapper {
  /*margin-top: 40px;*/
  /*background: #323232;*/
  padding: 2px;
  /*display: inline-block;*/
  float: right;
}

.hamburger-menu-wrapper.bounce-effect { animation: bounce 0.3s ease 1; }

.hamburger-menu {
  border: 0;
  /*margin: 0 auto;*/
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 0;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 9999;
  cursor: pointer;
  background: transparent;
}

.hamburger-menu:focus { outline: none; }

.hamburger-menu span {
  display: block;
  position: absolute;
  top: 17px;
  left: 5px;
  right: 5px;
  height: 3px;
  background: #7B7B7B;
}

.hamburger-menu span:before, .hamburger-menu span:after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #7B7B7B;
  content: "";
}

.hamburger-menu span:before { top: -7px; }

.hamburger-menu span:after { bottom: -7px; }

.hamburger-menu span:before, .hamburger-menu span:after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.hamburger-menu span:before { transition-property: top, transform; }

.hamburger-menu span::after { transition-property: bottom, transform; }

.hamburger-menu.active span { background: none; }

.hamburger-menu.active span:before {
  top: 0;
  transform: rotate(225deg);
}

.hamburger-menu.active span:after {
  bottom: 0;
  transform: rotate(135deg);
}

.hamburger-menu.active span:before, .hamburger-menu.active span:after { transition-delay: 0s, 0.3s; }

@keyframes bounce
{  
    0%      { transform: rotate(0); }
    45%     { transform: rotate(15deg); }
    90%     { transform: rotate(-7deg); }
    100%    { transform: rotate(0); }
}

#header-nav 
{ 
    display: none;
    float: right;
    width: 240px;
    margin-top: 1px;
    background-color: #fff;
    border: 1px solid #7B7B7B;
    /*box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);*/
}

#header-nav li 
{
    list-style: none;
    border-bottom: 1px solid #7B7B7B; 
}

#header-nav li:last-child
{
    border-bottom: 0 none;  
}

#header-nav li a
{
    display: block;
    text-decoration: none;
    color: #7B7B7B;
    line-height: 2em;
    padding: 0.2em 0.8em;
}

#header-nav li a:hover
{
    background-color: #7B7B7B;
    color: #CCCCCC;
}

/* form elements */
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="date"], input[type="time"], textarea, select
{
    height: 2em;
    line-height: 2.5em;
    margin: 0.4em 0 0.2em 0;
    border: 1px solid #CCCCCC;
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}

textarea{
    resize:none;
    overflow: hidden;
    height:6em;
    padding-top:0.4em;
    padding-bottom:0.4em;
    line-height:1.2em;
}

select
{
    width: 50%;
}

.full-select-element { width: 100%; }

input[type="button"], input[type="submit"]
{
    background-color: #7B7B7B;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 1em;
    line-height: 2.2em;
    padding: 0.2em 0.6em 0.2em 2em;
    text-decoration: none;
    text-transform: uppercase;}

.captchaInput
{
    width: 160px !important;  
    background-repeat: no-repeat;
    text-align: right;
}

/* notifications */
.notify-warning, .notify-success, .notify-error, .notify-info
{
    display:inline-block;
    line-height:20px;
    background-position:6px 0.6em;
    background-repeat:no-repeat;
    padding:0.8em 1em 0.8em 2.4em;
    background-color:#FFFAC2;
    border:1px solid #D8D8D8;
}

.notify-success
{
    background-image:url(../../images/design-assets/success-icon.png);
    background-color:#dff2bf;
    color: #4e6520;
    border:1px solid #93bf3d;
}

.notify-warning
{
    background-image:url(../../images/design-assets/warning-icon.png);
    background-color:#feefb3;
    color: #8f6b00;
    border:1px solid #ffc107;
}

.notify-error
{
    background-image:url(../../images/design-assets/error-icon.png);
    background-color:#ffbaba;
    color: #7c0e12;
    border:1px solid #e51c23;
}

/* table */
.table-class
{
    width: 100%;
    border-collapse: collapse;
}

.table-class td, .table-class th
{
    border: 1px solid #CCCCCC;
    padding: 0.4em;
}

.table-class th
{
    padding: 0.8em 0 0.8em 0.4em;
    text-align: left;
    background-color: #f2f2f2;
    font-family: "Alegreya-Sans-Bold", Tahoma, Arial, Helvetica, sans-serif;
}

/*.table-class tr:nth-child(even) { background-color: #f2f2f2; }*/
/*.table-class tr:hover { background-color: #CCCCCC; }*/

/* pagination */    
#pagination
{
    display: block;
    text-align: center;
}

#pagination span
{
    display: inline-block;
    border: 1px solid #CCCCCC;
    padding: 0.4em;
    cursor: pointer;
    margin: 0 0.1em;
}

#pagination span:hover
{
    background-color: #CCCCCC;
    padding: 0.6em;
}

#pagination .active
{
    background-color: #CCCCCC;
    padding: 0.6em;
}

.icon-datepicker-prev
{
    display: inline-block;
    height: 1.2em;
    width: 1em;
    background: url(../../images/design-assets/small-left-arrow.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

.icon-datepicker-next
{
    display: inline-block;
    height: 1.2em;
    width: 1em;
    background: url(../../images/design-assets/small-right-arrow.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

.icon-grid 
{
    background-image: url(../../images/design-assets/icon-grid.png);
    background-repeat: no-repeat;
}

.icon-add { background-position: 4px 4px; }
.icon-update { background-position: 4px -28px; }
.icon-remove { background-position: 4px -60px; }
.icon-login { background-position: 4px -92px; }
.icon-search { background-position: 4px -124px; }
.icon-print { background-position: 4px -156px; }
.icon-reset { background-position: 4px -188px; }
.icon-enable { background-position: 2px -541px; }
.icon-disable { background-position: 2px -509px; }

/*.icon-nav-grid 
{
    background-image: url(../../images/design-assets/icon-nav-grid.png);
    background-repeat: no-repeat;
}*/
.nav-icon-dashboard { background-position: -2px -220px; }
.nav-icon-admin { background-position: -2px -252px; }
.nav-icon-store { background-position: -2px -284px; }
.nav-icon-truck { background-position: -2px -315px; }
.nav-icon-export { background-position: -2px -348px; }
.nav-icon-report { background-position: -2px -380px; }
.nav-icon-change-password { background-position: -2px -412px; }
.nav-icon-logout { background-position: -2px -444px; }
.nav-icon-stock { background-position: -2px -475px; }

/* print css */
.print-this
{
    display: none;
}

.fieldset-class
{
    border: 1px solid #CCCCCC;
}

.fieldset-class legend
{
    margin-left: 1em;
}