@media (max-device-width: 650px) {

    .top-minus-20-minus10 {
        top:-10px;
    }
    
    #registro\:crear-cuenta-button {
        display: none;
    }

    body #all .ui-button.ui-widget.ui-state-default .ui-button-text {
        padding: 1.2rem 1.6rem;
        /*  block inline */
    }

    body #all .ui-button.ui-widget.ui-state-default.ui-button-text-icon-left .ui-button-text {
        padding-block: 1.5rem;
        /*  block inline */
        padding-left: 4rem;
        padding-right:  2.5rem;
    }
    
    body #all .ui-button.ui-widget.ui-state-default.ui-button-text-icon-left .ui-button-icon-left.ui-icon {
        top: 40%;
        left: 2rem;
    }

    body {
        touch-action: manipulation;
    }
    #loginDiv * {
        font-size: 1.3rem;
    }
    #logo {
        width: 100%;
    }

    .formulario-registro .ui-inputgroup .ui-button-icon-only {
        width: unset;
        position: absolute;
        max-height: 5rem;
        max-width: 5rem;    
        right: 24px;
    }

    .formulario-registro .ui-inputgroup .ui-button-icon-only .ui-button-icon-left.ui-icon {
        top: 20px;
        left: 24px;
    }

    .formulario-registro input[type='date'] {
      -webkit-min-logical-width: 87%;
      
    }
}


@media (max-width: 650px) and (max-device-width: 650px) {
    /*  put here something for making 2 servicios seleccionados be above volver y continuar */
}



@media (min-device-width: 651px) {

    .barberia .a1,
    .tab1 .barberia {
        max-width: var(--barberia-width);
    }

    #registro\:crear-cuenta-button2 {
        display: none;
    }
    #registro\:crear-cuenta-button {
      text-align: center;
      background-color: var(--the-barber-shop);
      color: white;
      width: 120%;
      left: -10%;
      padding: 20px;
      margin-top: 40px;
    }
    
    .formulario-registro .ui-inputgroup > .ui-inputfield,
    .formulario-registro .p-datepicker,
    .formulario-registro .p-datepicker > .ui-inputfield,
    .formulario-registro input[type='date'] {
        max-width: 560px;
    }
    .top-minus-20-minus10 {
        top:-20px;
    }
        
    .margin-top-100px {
        margin-top: 100px !important;
    }
    .margin-top-8rem {
        margin-top: 20vh !important;
    }
    .margin-top-2rem {
        margin-top: 2rem !important;
    }
    .big-ass-margin-top {
        margin-top: 200px !important;
    }
}