@media screen and (max-width: 767px) { 
  /*Seow Ming: this is to allow swipe on mobile view*/
  html, body {
    overflow-x: hidden;
  }

  /*Seow Ming: This is to used on Forgot Password page, coz if overflow-x=hidden, the content in this page will not be displayed*/
  .no-overflow{
    overflow: visible !important;
  }
}

body {
  position: relative
}

.dataTables_CustomFilter label{
  font-weight: normal;
  /*Seow Ming: margin-right:10px;*/
}

/* Seow Ming
.dataTables_CustomFilter label input{
  margin-left:5px;
}
*/

.dataTables_CustomFilter select{
  font-weight: normal;
  /*Seow Ming: margin-left:5px;*/ 
}

.form-control
{
  font-size: 13px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0);
}

.btn
{
  font-size: 13px;
}

.btn-100
{
  width: 100%;
}

.btn-purple {
    color: #fff;
    background-color: #AA9CDA;
    border-color: #654BBC;
}

.btn-purple:hover {
    color: #fff;
    background-color: #654BBC;
    border-color: #654BBC;
}

.center{
  text-align:center;
}

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

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

.text-active{
  color: #26B99A;
}

.text-inactive{
  color: #B5B5B5;
}

.text-void{
  color: #B5B5B5;
  text-decoration:line-through !important;
}

.text-highlight{
  color: #2FBEC6;
  font-weight: 700;
}

.validator{
	margin-top:2px;
	margin-bottom:0px;
	padding: 5px;
  color: #ED1C24;
}

.textbox-error{
  border-color: #ED1C24 !important;
}

.note-error{
  padding-top: 3px;
  color: red;
}

/* *********  For all pages with message  *************** */
.message_wrapper {
  margin-top: 5%;
  position: relative; 
  padding: 20px;
}

.message_content{
  text-align: center;
}

/* *********  End - For all pages with message  *************** */


/* *********  Registration  *************** */
.inline_salutation{
  width: 20% !important; 
  display:inline !important; 
  float:left;
}

.inline_name{
  width: 79% !important; 
  display:inline !important; 
  float:right;
}

/* *********  End - Registration  *************** */

/* *********  Plan  *************** */
.inline_uom{
  width: 20% !important; 
  display:inline !important; 
  float:right;
}

.inline_size{
  width: 79% !important; 
  display:inline !important; 
  float:left;
}

/* *********  End - Plan  *************** */

/* *********  For all pages with wizard  *************** */
.wizard_wrapper {
  position: relative; 
  padding: 20px;
}

.wizard_content{
  text-align: left;
}

/* *********  End - For all pages with wizard  *************** */


#myPleaseWait{
  padding-top: 200px;
}

#myDeleteConfirmation{
  padding-top: 200px;
}

.column-wrap
{
  word-wrap: break-word !important;
  min-width: 200px !important;
  max-width: 200px !important;
  white-space:normal !important;
}

.column-nowrap
{
  white-space: nowrap;
}

.normal-column-wrap
{
  word-wrap: break-word !important;
  /*min-width: 200px !important;*/
  max-width: 200px !important;
  white-space:normal !important;
}

.button-column-wrap
{
  word-wrap: break-word !important;
  white-space:normal !important;
  width: 10px;
}

.avatar-view{
  width: 260px;
}

@media (max-width: 991px) {
  .avatar-view{
    width: 100%;
  }
}

/*
.cropper-container
{
  width: 646px !important;
  height: 516px !important;
}
*/

.profile-text
{
  font-weight: normal;
  font-size: 14px;
}

.profile .accordion .panel-heading{
  background: #fff;
  border-bottom: gainsboro;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.profile .accordion .panel-heading:hover{
  background: #F6F7F9;
}

.panel-collapse{
  /*background: #F2F2F2;*/
}

.profile .accordion hr{
  border-top-color: gainsboro;
}

.profile .password{
  margin-bottom: 5px;
}

.upload-file{
  padding-top:8px;
}


/* *********  Start Unit Photo  *************** */

.unit-thumnail{
  height: 120px;
}

.unit-thumnail .image{
  height: 70px;
}

.unit-thumnail-list{
  height: auto;
}

.unit-thumnail-list .image{
  height: 40px;
}

.col-md-44 {
  width: 50%;
  margin-bottom: 5px; }

@media (min-width: 768px) {
  .col-md-44 {
    width: 25%; } }
@media (min-width: 992px) {
  .col-md-44 {
    width: 25%; } }
@media (min-width: 1200px) {
  .col-md-44 {
    width: 25%; } }

.col-md-44 {
  position: relative;
  min-height: 1px;
  float: left;
  padding-right: 2px;
  padding-left: 2px; }

/* *********  End - Unit Photo  *************** */

.padding .row{
  padding-bottom: 4px;
}

.text-normal{
  font-weight: normal;
}

/* *********  Start Tag  *************** */
span.tag{
  padding: 0px 9px;
}

.tagsinput{
  min-height: auto !important;
  height: auto !important;
  border: none;
  background: transparent;
}

/* *********  End Tag  *************** */

.button-60{
  width: 60px;
}

.desktop{
  display: table-cell !important;
}

.desktop-inline{
  display: inline-block !important;
}

.mobile{
    display: none !important;
}

.mobile-inline{
    display: none !important;
}

@media screen and (max-width: 767px) { 
  .table-bordered {
    border-top: 0px solid #ddd !important;
    border-bottom: 0px solid #ddd !important;
    border-left: 0px none #fff !important;
    border-right: 0px none #fff !important;
  }

  table.dataTable {
    margin-top:0px !important;
    margin-bottom:0px !important;
  }

}

/*
table.table-bordered.dataTable th .mobile, table.table-bordered.dataTable td .mobile {
    border-left-width: 0;
    border-right-width: 0;
}
*/

.table_length{
    float: right;
}

@media screen and (max-width: 767px) { 
  .desktop{
    display: none !important;
  }

  .desktop-inline{
    display: none !important;
  }

  .mobile{
    display: table-cell !important;
  }

  .mobile-inline{
    display: inline-block !important;
  }

  .table_length{
      float: left;
  }
}

@media screen and (max-width: 767px)
{
  div.dt-buttons {
    width: auto;
  }

  .x_title h2 {
    width: auto;
  }
}

/* *********  Appointment Time  *************** */
.inline_day{
  width: 25% !important; 
  display:inline !important; 
}

.inline_month{
  width: 30% !important; 
  display:inline !important; 
}

.inline_year{
  width: 35% !important; 
  display:inline !important; 
}

/* *********  End - Registration  *************** */

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

.div-radio{
  padding-top: 7px;
}

.mobile .unit-thumnail-list .image
{
  height: 80px;
}

label{
  font-weight: normal;
}

.logo-preview{
  width: 100% !important;
}

@media (min-width: 768px) {
  .logo-preview{
    width: 400px !important;
  }
}

.table .btn{
  margin-bottom: 2px;
}

.panel-body {
    padding: 5px;
}

/* *********  Package  *************** */
.price-table {
    border: 1px solid #e3e3e3;
    margin-bottom: 10px;
}

.price-table .value {
    background-color: #f8f8f8;
    color: #727272;
    padding: 30px 0;
    min-height:175px;

    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
        -ms-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}

.price-table.featured .value {
    background-color: #009EE3;
    color: #fff;
}

.price-table .value button {
    display: inline-block;
    margin-top: 10px;
}

.price-table .value span {
    display: inline-block;
}

.price-table .value span:first-child {
    font-size: 20px;
    line-height: 34px;
    display: block;
}

.price-table .value span:nth-child(2) {
    font-size: 16px;
    line-height: 16px;
    margin-top: 18px;
    display: inline-block;
}

.price-table .value span:nth-child(3) {
    font-size: 20px;
    line-height: 18px;
    margin-top: 18px;
    display: inline-block;
}

.price-table .value span:last-child {
    font-size: 16px;
    display: inline-block;
}

.price-table ul {
    margin: 0;
    padding: 15px 3px;
    list-style: none;
    text-align: left;
}

.price-table ul li {
    /*border-top: 1px solid #e3e3e3;*/
    display: block;
    padding: 10px 0 0 15px;

    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
        -ms-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}

.price-table ul li:before {
  content: "\f00c";
  font-family: 'FontAwesome';
  margin-top: 4px;
  margin-left: -20px;
  
}





/* *********  End Package  *************** */


.tab_hidden {
    display: none!important;
}

@media (max-width: 768px) {
    .tab_hidden {
      display: block !important;
  }
}


/* *********  Filter  *************** */
.x_title_filter, .x_title_blank{
  border-bottom: none;
  margin-bottom: 0px;
  padding: 1px 5px;
  min-height:34px;
}

.x_title_blank .btn
{
  margin-top:0px;
  margin-bottom:0px;
  padding: 0px 10px
}

.x_title_filter .panel_toolbox{
  min-width: 0px;
}

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

.x_title_filter .form-group
{
  margin-left: 0px !important;
  margin-right: 0px !important;
}

@media screen and (max-width: 767px) { 
  .x_title_filter .form-group
  {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
  }
}

/* *********  End Filter  *************** */

.date-inline
{
    display: inline-block; 
    width: 58%;
}

.time-inline
{
    display: inline-block; 
    width: 38%;
}

.min-230
{
    min-height:230px;
}

.min-260
{
    min-height:260px;
}

.min-270
{
    min-height:270px;
}

.min-300
{
    min-height:305px;
}

@media screen and (max-width: 768px) { 
  .min-260
  {
      min-height:0px;
  }
  .min-300
  {
      min-height:0px;
  }
}

#myform_submit .form-group
{
    padding-left: 50px;
}

/* *********  Start Item Table  *************** */

#sortable
{
    list-style-type: none;
    padding-left: 0px;
}

#sortable .row
{
    margin-left: 0px;
    margin-right: 0px;
}

#sortable li
{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    cursor: move;
}

.no_padding
{
    padding-left: 0px;
    padding-right: 0px;
}

.input-group-item
{
    margin-bottom: 0px !important;
}

.ui-state-default > .badge {
  position: absolute;
  left: -10px;
  font-size: 10px;
  font-weight: 400; 
}

.ui-state-default a{
  cursor: pointer;
}
.trash {
  color: red;
  margin-top: 10px;
  font-size: 20px;
}


/* *********  End Item Table  *************** */

/* *********  Inventory Search Table  *************** */

#table-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
}

.table-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #ddd;
}

.height_350{
    height: 350px;
}

.height_300{
    height: 280px;
}

.height_220{
    height: 220px;
}

#tbl_search{
  border: none;
  margin-bottom: 0px;
}

.tbl_search{
  border: none;
  margin-bottom: 0px;
}

#tbl_search a{
  cursor: pointer;
}

.tbl_search a{
  cursor: pointer;
}

#myform_filter .form-group div
{
  padding-right: 5px !important;
  padding-left: 5px !important;
}

#myform_filter_inventory .search
{
    text-align:center;
}

.div_search
{
    margin-top:0px;
}

@media screen and (max-width: 768px) { 
  .div_search
  {
      margin-top:10px;
      text-align:center;
  }
}

/* *********  End Inventory Search Table  *************** */

/* *********  Start Inventory Vendor  *************** */

.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #dff0d8;
    border-color: #ddd;
    color: #3c763d;
}

/* *********  End Inventory Vendor  *************** */

.first_li
{
    padding-top: 10px;
}

.last_li
{
    padding-bottom: 10px;
}

@media screen and (max-width: 767px) { 
  .top_button{
    text-align:center;
  }
}

/* *********  Start Public  *************** */
.div_key > div {
    margin:0 auto;
    width:100%;
}

.div_key > div > input {
    display: inline;
    letter-spacing: 6px;
}

.div_key > div > a {
    margin: 10px 0px !important;
}

/* *********  End Public  *************** */


/* *********  Start Import  *************** */
#div_import_content{
  max-height: 100px;
  overflow:auto;
}

.label_success{
  color: #26B99A;
}

.label_fail{
  color: #d9534f;
}


/* *********  End Import  *************** */

/* *********  Start Report  *************** */
.search_div label{
  padding-top: 8px;
}

@media screen and (max-width: 767px) { 
  .search_div button{
    margin-top: 5px;
  }

}

.report-option select{
  width:initial !important;
  display:inline !important;
}

/* *********  End Report  *************** */

.hidden_filter{
  visibility: hidden;
  left: -1000px;
}

/* *********  Start Home  *************** */

.intro .flow_desktop{
  padding-left: 80px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.intro .flow_desktop .row_intro i{
    font-size: 30px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
    border-radius: 100%;
    color: #45aed6;
    box-shadow: inset 0 0 0 1px #d7d7d7;
    -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
    transition: background-color 400ms, background-color 400ms;
    position: relative;
}

.intro .flow_desktop .row_intro .admin{
    margin-left: 253px;
  }


.intro .flow_desktop .row_intro .lineh{
    position: relative;
    height: 1px;
    width: 180px;
    background: #45aed6;
    display: inline-block;
    /*margin-bottom: 40px;*/
    line-height: 64px;
    margin-bottom: 28px;
}

.intro .flow_desktop .row_intro .linev{
    position: relative;
    height: 90px;
    width: 1px;
    background: #45aed6;
    display: inline-block;
    /*margin-bottom: 40px;*/
    line-height: 64px;
    margin-left: 286px;
    margin-top: 5px;
}

.intro .flow_desktop .row_intro #lbl_administrator{
  margin-left: 245px;
}

.intro .flow_desktop .row_intro #lbl_customer{
  margin-left: 2px;
}

.intro .flow_desktop .row_intro #lbl_sales_person{
  margin-left: 185px;
}

.intro .flow_desktop .row_intro #lbl_vendor{
  margin-left: 190px;
}

.intro .flow_desktop .row_intro #lbl_inventory{
  margin-left: 220px;
}

.intro .flow_desktop #div_administrator{
  position: absolute;
  left: 410px;
  top: 190px;
}

.intro .flow_desktop #div_sales{
  position: absolute;
  left: 205px;
  top: 320px;
}

.intro .flow_desktop #div_purchase{
  position: absolute;
  left: 450px;
  top: 320px;
}

.intro .flow_desktop #div_delivery{
  position: absolute;
  left: 205px;
  top: 510px;
}

.intro .flow_mobile{
    display: none !important; 
}

.intro .flow_mobile .row_intro i{
    font-size: 30px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
    border-radius: 100%;
    color: #45aed6;
    box-shadow: inset 0 0 0 1px #d7d7d7;
    -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
    transition: background-color 400ms, background-color 400ms;
    position: relative;
}

.intro .flow_mobile .row_intro i:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  right: -10px;
  border: 4px solid #fff;
  border-radius: 20px;
  background: #45aed6;
}

.intro .flow_mobile .row_intro .linev{
    position: relative;
    height: 90px;
    width: 1px;
    background: #45aed6;
    display: inline-block;
    /*margin-bottom: 40px;*/
    line-height: 64px;
    margin-left: 33px;
}

.intro .flow_mobile #div_content{
  position: absolute;
  padding-top:20px;
  z-index: 99;
}

@media screen and (max-width: 767px) { 
  .intro .flow_desktop{
    display: none !important;
  }

  .intro .flow_mobile{
    padding-top:20px;
    padding-bottom: 20px;
    display: block !important; 
  }
}


/* *********  End Home  *************** */

.nav-sm .nav.side-menu li a .plus{
  width: auto !important;
  font-size:14px !important;
}

.main_menu .plus{
  font-size:14px !important;
}

.jumbotron {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

@media screen and (max-width: 767px) { 
  .navbar-right .dropdown-menu {
      right: 0;
      left: auto;
  }

}

.btn-message {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d0e9c6;
}

.date_range{
  background: #fff; 
  cursor: pointer; 
  padding: 5px 10px; 
  border: 1px solid #ccc;
  color: #555;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  height: 34px;
  padding-top: 7px;
}

.select2-container
{
  width:100% !important;
}

.mobile-inline .text-normal .iname{
  color: #6B81F1;
}

.mobile-inline .text-normal .iday{
  color: #1ABB9C;
}

.mobile-inline .text-normal .igroup{
  color: #F0AD4E;
}

.mobile-inline .text-normal .idefault{
  color: #FFFF00;
}

.mobile-inline .text-normal .idefault2{
  color: #7fff00;
}

.div_mobile_header{
  border-bottom: 1px solid #E6E9ED;
  margin-bottom:10px;
  height: 20px;
}

@media screen and (max-width: 767px) { 
  .x_panel_filter{
      border-left: 0px solid #E6E9ED;
      border-right: 0px solid #E6E9ED;
      border-bottom: 0px solid #E6E9ED;
  }
  .x_panel_padding{
      padding: 10px 17px !important;
  }
}

.no-border{
    border: 0px;
}

#save-div {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index:1030;
}

.row-no-margin{
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.bulk{
  font-weight: normal;
  height:30px;
}



#wrapper {
    width: 100%;
}

.login-register {
    /*background: url(../../img/login.jpg) center center/cover no-repeat!important;*/
    height: 100%;
    position: fixed;
    overflow-y: auto;
}

.white-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 15px;
}