/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 5.0
	Author: PIXINVENT
	Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.splash-logo {
  left: 50%;
  top: 50%;
  margin-left: -26px;
  margin-top: -30px;
  z-index: 2;
  position: absolute;
  width: 54px;
}

.splash-loader,
.splash-loader:before,
.splash-loader:after {
  left: 50%;
  top: 50%;
  margin-left: -45px;
  margin-top: -45px;
  position: absolute;
  vertical-align: middle;
  background: #c3002f;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  z-index: 1;
}

.splash-loader:before {
  content: "";
  animation: bounce 1.5s infinite;
}

.splash-loader:after {
  content: "";
  animation: bounce 1.5s -0.4s infinite;
}

@keyframes bounce {
  0% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0;
  }
}

.splash-screen {
  background-color: #f3f3f3;
  height: 100%;
}

.token.string > span {
  color: #6b6f82;
}

body .ui-table .ui-table-tfoot > tr > td {
  color: #1976d2 !important;
  font-weight: bold !important;
}

#breadcrumbs-wrapper .breadcrumbs .active {
  color: #ffffff;
}

.notificationNotSeen{
  background-color: #e5f3e0 !important;
}

.notificationSeen{
  color: #FFFFFF !important;
}

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

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

#task-card .collection-header {
  padding: 5px 20px;
}

img {
  max-width: 100%;
}

.product-add-image {
  padding: 20px;
  border: 1px solid orangered;
  cursor: pointer;
}

.product-image {
  border: 1px solid;
  position: relative;
}

.product-image i.material-icons {
  position: absolute;
  top: 0;
  right: 3px;
  color: red;
  cursor: pointer;
  display: none;
}

.product-image:hover i.material-icons {
  display: block;
}

.pointer {
  cursor: pointer;
}

.grandchild .material-icons {
  margin: 0 5px 0 6px !important;
}

.great-grand-child .material-icons {
  margin: 0 5px 0 16px !important;
}

.sidenav li:not(.active).open {
  background-color: transparent;
}

.page-footer .footer-copyright {
  min-height: 35px;
  padding: 6px 0;
}

.italic {
  font-style: italic;
}

#main {
  height: calc(100% - 76px);
  overflow: hidden;
}

#main .content-wrapper-before {
  height: 150px;
}

#main > .entities {
  height: calc(100% - 38px);
  background: #fff;
  margin: 2px 5px;
  padding: 2px 2px;
}

#main > .entities > p-scrollpanel > .ui-scrollpanel {
  border: none;
  padding: 0;
}

#main > .entities .card-title {
  line-height: 18px;
  display: block;
  margin: 8px 5px;
  font-size: 18px;
  font-weight: 400;
}

#breadcrumbs-wrapper {
  padding: 5px 0;
}

#card-stats .row .col {
  padding: 0 5px;
}

.input-field .prefix.active {
  color: #00bfa5;
}

.action-bar a.btn-small {
  line-height: 20px;
  height: 20px;
  padding: 0 8px;
}

.action-bar a.btn-small i.left {
  margin-right: 2px;
}

.navbar .notification-badge {
  top: -16px;
  padding: 1px 5px;
}

.brand-sidebar {
  height: 40px;
}

.brand-sidebar .brand-logo {
  padding: 10px;
}

.brand-sidebar .logo-wrapper a.navbar-toggler {
  top: 12px;
  right: 12px;
}

.brand-sidebar .logo-wrapper a.navbar-toggler i {
  line-height: unset;
  height: auto;
}

.sidenav .navigation-header {
  margin-top: 0;
}

.sidenav, #main .content-wrapper-before {
  top: 40px;
}

.sidenav-main {
  width: 200px;
}

.brand-sidebar .logo-wrapper a.brand-logo img {
  height: 20px;
}

.brand-sidebar span.logo-text {
  font-size: 19px;
}

.navbar .header-search-wrapper {
  margin: 8px auto 0 260px;
}

.navbar input.header-search-input {
  height: 16px;
}

.navbar .header-search-wrapper i {
  top: 2px;
  height: auto;
}

#breadcrumbs-wrapper .breadcrumbs {
  margin: 5px 0;
}

.sidenav-active-square .sidenav li > a, .sidenav-active-square .sidenav li a.collapsible-header {
  margin-right: 5px;
  padding: 0 0 0 8px !important;
}

.sidenav li > a, .sidenav li a.collapsible-header, .sidenav li > a > i.material-icons, .sidenav li a.collapsible-header > i.material-icons {
  line-height: 34px;
  height: 34px;
  margin: 0 10px 0 0;
}

#profile-dropdown.dropdown-content li {
  min-height: 38px;
}

#profile-dropdown.dropdown-content li.divider {
  min-height: 0;
}

#profile-dropdown.dropdown-content li > a {
  padding: 8px 24px;
}

.btn, .btn-large, .btn-small, .btn-flat {
  text-transform: none;
}

.ui-table-wrapper .ui-table-thead input {
  height: 30px;
}

.ui-table-wrapper .ui-table-tbody .action-column p-button:not(:last-child) {
  margin-right: 5px;
}

.row.padding-0_2 .col {
  padding: 0 0.2rem;
}

.ui-table .ui-paginator-bottom {
  padding: 0;
}

app-search-product > label,
app-search-customer > label {
  font-size: 1rem;
  position: absolute;
  top: -14px;
  cursor: text;
  text-align: initial;
  color: #9e9e9e;
}

p-autocomplete > span.ui-autocomplete {
  z-index: 91;
}

p-spinner .ui-spinner-down {
  bottom: 2px;
}

p-spinner .ui-spinner-up {
  top: 2px;
}

p-spinner.ui-inputwrapper-focus + label,
p-dropdown.ui-inputwrapper-focus + label,
p-calendar.ui-inputwrapper-focus + label,
p-autocomplete.ui-inputwrapper-focus + label {
  color: #ff4081;
}

.input-field > label {
  top: -5px;
  transform: translateY(-10px) scale(1);
}

.input-field > label:not(.label-icon).active {
  transform: translateY(-10px) scale(1);
}

p-spinner > span,
p-calendar > span {
  margin-bottom: 8px;
}

.input-field input {
  height: 2rem !important;
  margin-top: 5px !important;
}

p-dropdown > .ui-dropdown {
  height: 2rem !important;
  margin-top: 6px !important;
}

body .ui-dropdown .ui-dropdown-label.ui-inputtext {
  font-family: 'Muli', sans-serif;
  font-size: 1rem;
  color: black;
}

body p-autocomplete.ng-dirty.ng-invalid > .ui-autocomplete > .ui-inputtext {
  border-bottom: none;
}

p-spinner input:focus,
p-inputmask input:focus,
p-calendar input:focus,
p-autocomplete input:focus {
  border-bottom: 1px solid #ff4081;
  -webkit-box-shadow: 0 1px 0 0 #ff4081;
  box-shadow: 0 1px 0 0 #ff4081;
  background-image: none !important;
}

input.ng-valid:not(.browser-default),
p-spinner.ng-valid input,
p-inputmask.ng-valid input,
p-dropdown.ng-valid div.ui-dropdown,
p-calendar.ng-valid input,
p-autocomplete.ng-valid input {
  border-bottom: 1px solid #00bfa5 !important;
  -webkit-box-shadow: 0 1px 0 0 #00bfa5 !important;;
  box-shadow: 0 1px 0 0 #00bfa5 !important;;
  background-image: none !important;
  height: 25px;
  padding: 0;
  margin-bottom: 0;
}

input.ng-valid.ng-dirty:not(.browser-default),
p-spinner.ng-valid.ng-dirty input,
p-inputmask.ng-valid.ng-dirty input,
p-dropdown.ng-valid.ng-dirty div.ui-dropdown,
p-calendar.ng-valid.ng-dirty input,
p-autocomplete.ng-valid.ng-dirty input {
  border-bottom: 1px solid #2179fd !important;
}

input:not(.browser-default):focus.ng-valid ~ label,
p-spinner.ui-inputwrapper-focus.ng-valid + label,
p-inputmask.ui-inputwrapper-focus.ng-valid + label,
p-dropdown.ui-inputwrapper-focus.ng-valid + label,
p-calendar.ui-inputwrapper-focus.ng-valid + label,
p-autocomplete.ui-inputwrapper-focus.ng-valid + label {
  color: #00bfa5 !important;;
}

.input-field .prefix {
  top: 2px;
  left: 15px;
}

.prefix ~ p-autocomplete,
.prefix ~ p-spinner,
.prefix ~ p-inputmask,
.prefix ~ p-calendar {
  margin-left: 3rem;
  float: left;
  width: calc(100% - 3rem) !important;
}

.prefix ~ p-inputswitch {
  margin-left: 3rem;
  width: calc(100% - 3rem) !important;
}

.input-field > p-inputswitch > .ui-inputswitch {
  margin-top: 15px;
}

.input-field .helper-text {
  float: left;
}

.detail .input-field > label {
  color: #1976d2 !important;
}

.detail .input-field {
  margin-top: 10px;
  margin-bottom: 8px;
}

.detail input:not(.browser-default):disabled,
.detail p-spinner input:disabled,
.detail p-inputmask input:disabled,
.detail p-calendar input:disabled,
.detail .ui-dropdown .ui-dropdown-label.ui-inputtext {
  color: black;
  opacity: 1;
}

body .detail .ui-state-disabled {
  opacity: 1;
}

.btn.disabled, .disabled.btn-large, .disabled.btn-small, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, .btn:disabled, .btn-large:disabled, .btn-small:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, .btn[disabled], .btn-large[disabled], .btn-small[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
  color: #f9f9f9 !important;
}

body .ui-chips > ul.ui-inputtext .ui-chips-input-token > input {
  height: 20px !important;
}

.word-break-all {
  word-break: break-all;
}

body .action-column .ui-button.ui-button-icon-only {
  width: 10px;
  height: 26px;
}

p-button span.only-pi {
  font-size: 22px;
}

.card .card-content .dashboard p {
  margin: 15px 0;
}

.dashboard .material-icons {
  width: 54px;
  font-size: 24px;
  height: 54px;
  line-height: 1;
}

.border-right-cell {
  border: 1px solid rgba(0, 0, 0, .12) !important
}

.padding3 {
  padding: 3px;
}

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

#card-stats .sub-card-stats {
  border-top: 1px solid #fff;
  text-align: center;
}

#card-stats .sub-card-stats p {
  margin: 6px 0;
}

@media only screen and (min-width: 601px) {
  .navbar-fixed {
    height: 40px;
  }

  nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    line-height: 40px;
    height: 40px;
  }
}

@media only screen and (min-width: 993px) {
  #main, footer {
    padding-left: 200px;
  }
}

.mb-0-5em {
  margin-bottom: .5em;
}

.mt-0dot8em {
  margin-top: .8em;
}

body .ui-splitbutton > .ui-button {
  vertical-align: unset;
}

.ui-splitbutton .ui-button.ui-splitbutton-menubutton {
  vertical-align: unset;
}

.ui-table .ui-table-frozen-view .ui-table-tbody > tr > td,
.ui-table .ui-table-unfrozen-view .ui-table-tbody > tr > td {
  height: 24px !important;
}

.detail .red-flag p-spinner input:disabled {
  color: red !important;
}

body thead.ui-table-thead > tr > th.border-table-header-center{
  text-align: center;border: 1px solid rgba(0, 0, 0, .12)
}