input[type=text]:invalid {
    border: 1px solid red;
}

input[type=text]:valid {
    border: 1px solid green;
}

.input-valid {
    border: 3px solid #a35200!important;
}

.staff-positions {
    display: flex;
    flex-flow: row wrap;
}

.staff-positions .form-check {
    width: 33%;
}

.form-check-input {
    transform: scale(1.5);
}

.form-group fieldset {
    border: 1px solid #ced4da;
    border-radius: 10px;
    padding: 25px;
}

.grid-container-contact 
  {
      display: grid;
      gap: 10px;
      padding: 10px;
      grid-template-areas: 'vendisname vendisname vendisname vendisname' 
                            'firstname midname lastname lastname'
                            'emlper emlper ph1per ph1per'
                            'nomchecks nomchecks nomchecks nomchecks';
    }
    

.vendisname-div {
    grid-area: vendisname;
}
.firstname-div {
    grid-area: firstname;
}
.midname-div {
    grid-area: midname;
}
.lastname-div {
    grid-area: lastname;
}
.emlper-div {
    grid-area: emlper;
}
.ph1per-div {
    grid-area: ph1per;
}
.nomchecks-div {
    grid-area: nomchecks;
}


.grid-container-address 
  {
      display: grid;
      gap: 10px;
      padding: 10px;
      grid-template-areas: 'strper strper ' 
                            'citper staper'
                            'zipper zipper';
    }

.strper-div {
    grid-area: strper;
}
.citper-div {
    grid-area: citper;
}
.staper-div {
    grid-area: staper;
}
.zipper-div {
    grid-area: zipper;
}


.grid-container-taxes {
    display: grid;
      gap: 10px;
      padding: 10px;
      grid-template-areas: 'bussid bussid bussid' 
                            'bankpers accountno roupers';
}

.bussid-div {
    grid-area: bussid;
}
.bank-div {
    grid-area: bankpers;
}
.accountno-div {
    grid-area: accountno;
}
.route-div {
    grid-area: roupers;
}

.margin-5 {
    margin: 5px;
}

.customer-prices {
    display: flex;
}

.cust-prices-fs {
    padding: 5px 10px!important;
}

.flex {
    display: flex;
    justify-content: space-between;
}

#mi-modal {
    position: sticky;
    margin-inline-start: auto;
    margin-right: 250px;
    padding: 10px;
    top: 80px;
    background-color: #dee2e6;
    border: solid 1px black;
    z-index: 1500;
}