/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano > .nano-content {
  /* position      : absolute; */
  overflow      : auto;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  display: none;
}
.md-inputfield {
        
        input[placeholder] ~ label,
        textarea[placeholder] ~ label,
        p-autoComplete[placeholder] ~ label,
        p-calendar[placeholder] ~ label,
        p-inputMask[placeholder] ~ label,
        p-spinner[placeholder] ~ label,
        p-dropdown ~ label,
        p-multiSelect ~ label,
        p-chips ~ label,
        textarea:focus ~ label,
        textarea.ui-state-filled ~ label,
        input:focus ~ label,
        input.ui-state-filled ~ label,
        .ui-inputwrapper-focus ~ label,
        .ui-inputwrapper-filled ~ label {
          top:-20px;
          font-size:12px;
        }

        .textarea:-webkit-autofill ~ label,
        .input:-webkit-autofill ~ label {
          top:-20px;
          font-size:12px;
        }

        p-autoComplete.ng-dirty.ng-invalid ~ label,
        p-dropdown.ng-dirty.ng-invalid ~ label,
        p-multiSelect.ng-dirty.ng-invalid ~ label,
        p-calendar.ng-dirty.ng-invalid ~ label,
        p-inputMask.ng-dirty.ng-invalid ~ label,
        p-spinner.ng-dirty.ng-invalid ~ label,
        p-chips.ng-dirty.ng-invalid ~ label,
        textarea.ng-dirty.ng-invalid ~ label,
        

        .ui-message {
            &.ui-messages-error {
                background-color: transparent;
                border: 0 none;
                margin: 0px;
                font-size: .75em;
            }
        }

        &.md-inputfield-fill {
            .ui-chips,
            .ui-multiselect,
            .ui-dropdown,
            textarea,
            input {
              
              padding-left: 4px;
              padding-right: 4px;
              padding-top: 4px;
            }

            >label {
              top: 2px;
            }

            input[placeholder] ~ label,
            textarea[placeholder] ~ label,
            p-autoComplete[placeholder] ~ label,
            p-calendar[placeholder] ~ label,
            p-inputMask[placeholder] ~ label,
            p-spinner[placeholder] ~ label,
            p-dropdown ~ label,
            p-multiSelect ~ label,
            p-chips ~ label,
            textarea:focus ~ label,
            textarea.ui-state-filled ~ label,
            input:focus ~ label,
            input.ui-state-filled ~ label,
            .ui-inputwrapper-focus ~ label,
            .ui-inputwrapper-filled ~ label {
              top:-20px;
              font-size:12px;
              
            }
        }

        &.md-inputfield-box {
            background-color: #f7f7f7;
            height: 44px;

            >*:not(label) {
                bottom: 0px;
                position: absolute;
               
                padding-left: 4px;
                padding-right: 4px;
                padding-top: 24px;
            }

            >label {
                top: 23px;
            }

            input:focus ~ label,
            input.ui-state-filled ~ label,
            .ui-inputwrapper-focus ~ label,
            .ui-inputwrapper-filled ~ label {
                top:1px;
            }

            .input:-webkit-autofill ~ label {
                top:1px;
            }
        }
    }
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}
.nano > .nano-pane {
  background : transparent;
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
}
.nano > .nano-pane.nano-pane-rtl {
    right: auto;
    left: 0;
}
.nano > .nano-pane > .nano-slider {
  background:rgba(255,255,255,0.1);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 2px;
  -webkit-border-radius : 2px;
  border-radius         : 2px;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}