modal {
  position: fixed;
  z-index: 10;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  justify-content: center;
  align-items: center;
}
modal .modal-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #fefefe;
  margin: auto;
  padding: 2vh;
  width: 55vh;
  max-width: 90%;
  max-height: 90%;
  border-radius: 1vh;
  overflow: auto;
}
modal .modal-content * {
  font-size: 2vh;
}
modal .modal-content hr {
  border: 0.2vh solid rgb(161, 161, 161);
}
modal .modal-content .modal-body {
  padding: 1vh;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
modal .modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  padding: 1vh;
}
modal .modal-content .modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
modal .modal-content .modal-footer h4 {
  width: max-content;
  margin-left: 0;
  margin-right: auto;
  border-radius: 1vh;
  padding: 2vh;
  background-color: rgb(0, 138, 0);
  color: white;
  cursor: pointer;
}
modal .modal-content .modal-footer h4:hover {
  background-color: rgb(0, 146, 0);
}

.userModal .modal-content {
  height: 76vh;
}
.userModal .modal-content #user-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.userModal .modal-content #user-form layer1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1vh;
  margin-bottom: 3vh;
}
.userModal .modal-content #user-form layer1 div {
  margin: 1vh;
  width: 42%;
}
.userModal .modal-content #user-form layer1 div label {
  padding-bottom: 1vh;
}
.userModal .modal-content #user-form layer1 div input {
  margin-top: 1vh;
  padding: 2vh;
  height: 2vh;
  border-radius: 0.5vh;
  border: 0.1vh solid rgb(161, 161, 161);
  width: 100%;
}
.userModal .modal-content #user-form layer1 div input:focus {
  outline: none;
  border: 0.2vh solid rgb(0, 150, 0);
}

.passModal .modal-content {
  width: 45vh;
  max-height: 65vh;
}
.passModal #pass-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 5vh;
}
.passModal #pass-form > div {
  margin: 1vh;
  width: 70%;
}
.passModal #pass-form div input {
  margin-top: 1vh;
  padding: 0.5vh;
  height: 4vh;
  border-radius: 0.5vh;
  border: 0.1vh solid rgb(161, 161, 161);
  width: 100%;
}
.passModal #pass-form div input:focus {
  outline: none;
  border: 0.2vh solid rgb(0, 150, 0);
}

.addrModal .modal-content {
  width: 60vh;
  height: 90vh;
}
.addrModal .modal-content .modal-body {
  margin-bottom: 2vh;
}
.addrModal .modal-content .modal-body #addr-form #addressLine {
  padding: 1vh;
}
.addrModal .modal-content .modal-body #addr-form #addressLine textarea {
  width: 100%;
  resize: none;
  border-radius: 0.5vh;
  height: 10vh;
  padding: 1vh;
  margin-top: 1vh;
  border: 0.1vh solid rgb(161, 161, 161);
}
.addrModal .modal-content .modal-body #addr-form #addressLine textarea:focus {
  outline: none;
  border: 0.3vh solid rgb(0, 150, 0);
}
.addrModal .modal-content .modal-body #addr-form layer1 {
  display: flex;
  flex-direction: row;
}
.addrModal .modal-content .modal-body #addr-form layer1 div {
  margin: 1vh;
}
.addrModal .modal-content .modal-body #addr-form layer1 input {
  margin-top: 1vh;
  padding: 0.5vh;
  height: 4vh;
  border-radius: 0.5vh;
  border: 0.1vh solid rgb(161, 161, 161);
  width: 100%;
}
.addrModal .modal-content .modal-body #addr-form layer1 input:focus {
  outline: none;
  border: 0.3vh solid rgb(0, 150, 0);
}
.addrModal .modal-content .modal-body #addr-form #phone_number {
  margin-top: 1vh;
}
.addrModal .modal-content .modal-body #addr-form #phone_number label {
  margin: 1vh;
}
.addrModal .modal-content .modal-body #addr-form #phone_number input {
  width: 50%;
  margin: 1vh;
  padding: 0.5vh;
  height: 4vh;
  border-radius: 0.5vh;
  border: 0.1vh solid rgb(161, 161, 161);
}
.addrModal .modal-content .modal-body #addr-form #phone_number:focus {
  outline: none;
  border: 0.3vh solid rgb(0, 150, 0);
}
.addrModal .modal-content .modal-body #addr-form .checkbox {
  margin: 1vh;
  margin-top: 2vh;
  margin-bottom: 2vh;
  display: flex;
  gap: 1vh;
  align-items: center;
  font-size: 2vh;
}
.addrModal .modal-content .modal-body #addr-form .checkbox input {
  width: 2.5vh;
  height: 2.5vh;
}
.addrModal .modal-content .modal-footer {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  flex-direction: row-reverse;
}
.addrModal .modal-content .modal-footer * {
  font-size: 1.8vh;
}
.addrModal .modal-content .modal-footer button[command=ADD], .addrModal .modal-content .modal-footer button[command=UPDATE] {
  font-weight: bold;
  width: max-content;
  margin-left: 0;
  border-radius: 1vh;
  padding: 1.5vh;
  border: 0.1vh solid rgb(0, 138, 0);
  background-color: rgb(0, 138, 0);
  color: white;
  cursor: pointer;
}
.addrModal .modal-content .modal-footer button[command=ADD]:hover, .addrModal .modal-content .modal-footer button[command=UPDATE]:hover {
  background-color: rgb(0, 146, 0);
}
.addrModal .modal-content .modal-footer button[command=DELETE] {
  font-weight: bold;
  width: max-content;
  margin-left: 0;
  border-radius: 1vh;
  padding: 1.5vh;
  background-color: rgb(143, 0, 0);
  border: 0.1vh solid rgb(143, 0, 0);
  color: white;
  cursor: pointer;
}
.addrModal .modal-content .modal-footer button[command=DELETE]:hover {
  background-color: rgb(179, 0, 0);
}

/*# sourceMappingURL=modal.css.b3621981aba5.map */