:root {
  --nav-height: 112 px;
  
  --the-barber-shop: #243746;
  --tbs-lighter: #527897;
  --barberia-width: 600px;
  --danger: #d32f2f;
  --plain: #6c757d;
  --success: #689F38;
}

body {
  overflow-y:scroll;
  margin: 0;
  padding-bottom: 500px;
}

body.lobby {
  background-color: var(--the-barber-shop);
}

body:not(.lobby) div.nav {
  background-color: white;
}

body.lobby #nav .nav-indicator,
body.lobby #nav div a i.pi {
  color: white;
}

.float-right {
  float: right;
  top: 4px;
  position: relative;
}

button.padding-inline-20px {
  padding-inline: 20px;
}


#nav {

  bottom:0;
  display: flex; 
  z-index: 2;
  justify-content: center;
  text-align: center;
}

#nav div a[href$='faces'] {
  display:block;
  user-select: none;
  text-decoration: none;
}



body:not(.lobby) #nav div a i.pi {
  color: black;
}

.round-icon-button.aja {
  cursor: pointer;
  color: var(--plain);
  border-style: solid;
  border-width: 1px;
  font-size: unset;
}
.nav {
  position:fixed;
  width: 100%;
}


.nav-indicator {
  width: 82px;
  display: inline-block;
}

.nav div a i.pi,
.round-icon-button {

  font-size: 3rem;
  padding: 15px;
  margin:5px;
  border-radius: 50%;
}
.round-icon-button.with-text {
  border-radius: 20px;

}

.nav div a i.pi:hover {
  background-color: #E0E0E0;
  
}


body.ui-layout-container {
  padding-bottom: 100px;
}


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

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

.give-childs-margin10 > * {
  margin-block: 10px !important;
}

.give-childs-margin20 > * {
  margin-block: 20px !important;
}

.center {
  text-align: center;
}

.anonymous > i.pi-user {
  font-size: 7rem;
  position: relative;
  color: #555;
  border-radius: 50%;
  background-color: #E0E0E0;
  padding: 19px;
}

#wallet-button {
  right: 10px;
  top: 10px;
  position: absolute;
  width: 200px;
}

.overlayLink {
	width: 100%;
  cursor: pointer;
}


/* overlayLink requir3es a relative position parent */
.overlayLink {
	height: 100%  ;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
  
}


.display-none {
  display: none;
}

.tab1 .barberia {
  width: 95%;
}

.flex-container-column-center, .tab1 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}


#registro\:crear-cuenta-button{
  width: 100%;
  margin-bottom: 15px; 
  position: relative;
  outline: unset;
  border-radius: 10px;
  
}


.bold-text {
  font-weight: 900;
}

.ui-card-footer .ui-button {
  margin-right: 5px;
}

.width70px {
	width: 70px;
}

.width130px {
	width: 130px;
}

#all .ui-card.info,
#all .ui-card.danger,
#all .ui-card.success {
	border-width: 0 0 0 5px;
	margin-top: 6px;
  padding-inline: 20px;
  width: 100%;
  max-width: 95%;
}

#all .ui-card.danger {
  background: #ffcdd2;
  border-color: #ef5350;
  border-style: solid;
}

#all .ui-card.danger * {
  color:#b71c1c;
}

#all .ui-card.info {
  background: #b3e5fc;
  border-color: #03a9f4;
  border-style: solid;
}

#all .ui-card.info * {
  color: #01579b;

}

.margin-right-5px {
  margin-right: 5px !important;
}  

#all .ui-card.success {
	background: #D1E2AB;
	border-color: #689F38;
  border-style: solid;
}

div.product-categories {
  overflow-x: auto;
  text-wrap:nowrap;
  width: unset;
}

div.product-categories::-webkit-scrollbar {
  display: none;
}


div.product-categories::-webkit-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


.tab1 .barberia .product.disabled,
.disabled  {
  pointer-events: none !important;
  user-select: none  !important;
}

.blue, .blue * {
  color:#2196f3 !important;
  border-color: #2196f3;
}
.formulario-registro .ui-inputgroup > .ui-inputfield,
.formulario-registro input[type='date'] {
  width: 100%;
}

.formulario-registro input[type='date'] {
  border: #ced4da 1px solid;
  border-left: none;
}



form .ui-password.ui-input-icon-right input,
.width-100pct, #loginDiv {
  width: 100%;
}

.min-width-600px {
  min-width:600px;
}

form .ui-password.ui-input-icon-right,
.barberia .a1 {
  width: 95%;
}

.barberia .a1.ui-button-plain.ui-button {
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.barberia .a1.ui-button-plain.ui-button,
.barberia .a1.ui-button-plain.ui-linkbutton,
.barberia .a1.ui-button-plain.ui-button:hover,
.barberia .a1.ui-button-plain.ui-linkbutton:hover {
  text-align: left;
  color: black;
  
}
.barberia .a1.ui-button-plain.ui-button,
.barberia .a1.ui-button-plain.ui-button * {

  text-decoration: none !important;
}

.give-childs-margin > * {
  margin-block: 5px !important;
}
#loginDiv input.input-login {
  padding-block: 20px;
}
#loginDiv .input-login {
  touch-action: manipulation;
}

.position-relative {
  position: relative;
}


#registro:\dob.invalid {
  border-color: red;
}

#qrcode {
  width:330px;
}