:root {
  --dialogbackgroud: rgb(237 237 237);
  --inputtext: black;
  --dialogbuttontext: black;
  --buttononhover: rgb(105 123 240);
  --buttontextonhover: white;
}

body.dark-theme {
  --dialogbackgroud: rgb(30 30 30 / 25500%);
  --inputtext: black;
  --dialogbuttontext: black;
  --buttononhover: rgb(145 68 239);
  --buttontextonhover: black;
}

body.dark-theme .img-upload {
  background-color: var(--dialogbackgroud);
  border-color: black;
}

body.dark-theme input[type="file"] {
  color: white;
  border-color: black;
}

#add-application,
#edit-application,
#delete-application {
  background-color: var(--dialogbackgroud);
  width: 50%;
  left: 25%;
  height: fit-content;
  margin: 0;
  padding: 0;
  border: 1px solid black;
  border-radius: 3.5rem;
}

#add-application,
#edit-application {
  top: 15%;
}

#delete-application {
  top: 25%;
}

#add-application::backdrop,
#edit-application::backdrop,
#delete-application::backdrop {
  /* Backdrop is only displayed when dialog is opened with dialog.showModal() */
  background: rgb(0 0 0 / 40%);
}

.modal-content {
  padding: 2em 1em;
}

.add-container,
.edit-container,
.delete-container {
  display: flex;
  margin: 0 1em;
}

.logo,
.blank,
.title {
  flex: 1;
  display: flex;
}

.logo,
.blank {
  flex: 1 1 0;
}

.title {
  flex: 3 1 0;
}

p[id="add_title"],
p[id="edit_title"],
p[id="delete_title"] {
  width: 100%;
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: center;
}

p[id="delete_question"] {
  margin-top: 2em;
  margin-bottom: 1.1em;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
}

div[class="add_buttons"],
div[class="edit_buttons"],
div[class="delete_buttons"] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5em;
}

div[class="img_button"] button,
div[class="add_buttons"] button,
div[class="edit_buttons"] button,
div[class="delete_buttons"] button {
  margin: 0 0.7em;
}

button[class="upload_cancel"],
button[class="upload_confirm"],
button[id="add_cancel"],
button[id="add_submit"],
button[id="edit_cancel"],
button[id="edit_submit"],
button[id="d_cancel"],
button[id="d_delete"] {
  width: 130px;
  height: 40px;
  text-align: center;
  line-height: 1.1em;
  background-color: white;
  border: 1px solid var(--dialogbackgroud);
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 1em;
  color: var(--dialogbuttontext);
}

button[id="add_cancel"]:hover,
button[id="add_submit"]:hover,
button[id="edit_cancel"]:hover,
button[id="edit_submit"]:hover,
button[id="d_cancel"]:hover,
button[id="d_delete"]:hover {
  background-color: var(--buttononhover);
  border: 1px solid var(--buttononhover);
  color: var(--buttontextonhover);
}

.grid-container-form {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 50% 50%;
  justify-items: stretch;
}

label {
  display: block;
  font-size: 1.3em;
  padding-bottom: 0.7em;
  text-align: center;
}

input {
  margin: auto;
  display: block;
  font-size: 1.2em;
  border: 0.15em solid #d1d1d1;
  border-radius: 0.3rem;
  padding: 0.7em;
  width: 80%;
  line-height: 110%;
  color: var(--inputtext);
}

.required::after {
  content: " *";
  color: red;
}

.notice {
  text-align: right;
  font-style: italic;
  color: gray;
}

.notice::before {
  content: "* ";
  color: red;
}

.form-section {
  padding: 2em 0;
}

hr {
  margin: 0;
}

::-webkit-scrollbar {
  display: none;
}

/* MEDIA QUERIES */
@media screen and (max-width: 1024px) {
  .grid-container-form {
    grid-template-columns: none;
    -grid-template-rows: [row1] auto [row2] auto [row3] auto [row4] auto;
    grid-template-rows: auto auto auto auto;
  }

  .form-section {
    padding: 0.8em 0;
  }

  @media all and (max-height: 945px) {
    #add-application,
    #edit-application {
      height: 75%;
    }
  }
}