/* optional */
li {
  line-height: 2; }

:invalid {
  /*outline: 1px solid red;*/ 

}

.shell {
  position: relative;
  line-height: 1; }
  .shell span {
    position: absolute;
    left: 3px;
    top: 1px;
    color: #ccc;
    pointer-events: none;
    z-index: -1; }
    .shell span i {
      font-style: normal;
      /* any of these 3 will work */
      color: transparent;
      opacity: 0;
      visibility: hidden; }

    input.masked,
    .shell span {
        border: none !important;
        display: block;
        width: 100%;
        box-shadow: none !important;
        height: 20px;
        /*height: calc(1.5em + 0.8125rem + 2px);*/
        /*padding: 0.40625rem 0.75rem;*/
        /*font-size: 0.875rem;*/
        font-weight: 400;
        font-family: Arial;
        /*line-height: 1.5;*/
        color: #495057;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        /*border-radius: 0.2rem;*/
        -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        /* height: calc(1.5em + 0.5rem + 2px);*/
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.5;
        border-radius: 0.15rem;
    }   
    :focus {
    color: #495057;
    background-color: #fff;
    border-color: #646b6e;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(39, 42, 43, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(39, 42, 43, 0.25);
}
.masked::placeholder {
    font-family:Arial;
    color: #BDBDBF;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
}

input.maskedF1,
.shell span {
    display: block;
    width: 100%;
    height:20px;
    /*height: calc(1.5em + 0.8125rem + 2px);*/
    /*padding: 0.40625rem 0.75rem;*/
    /*font-size: 0.875rem;*/
    font-weight: 400;
    font-family: Arial;
    /*line-height: 1.5;*/
    color: #495057;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    /*border-radius: 0.2rem;*/
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
   /* height: calc(1.5em + 0.5rem + 2px);*/
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.15rem;
    /*position: relative;*/
    /*width: 100px;
    height: 100px;*/
    /*overflow: hidden;*/
    /*background: #522d5b;*/
    /*clip-path: polygon( 0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10% )*/
}

:focus {
    color: #495057;
    background-color: #fff;
    border-color: #646b6e;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(39, 42, 43, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(39, 42, 43, 0.25);
}
/*# sourceMappingURL=masking-input.css.map */

.maskedF1:after {
    content: "";
    position: absolute;
    margin: -20px;
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    background-color: #000; /* to see where it is */
}