#modalContainer,
#modalNotificationContainer {
  display: grid;
  place-content: center;
  grid-template: minmax(0px, auto) / minmax(min-content, auto);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  transition: opacity 250ms;
}

#modal {
  background: var(--white);
  box-shadow: 0 0px 35px 0 rgba(0, 0, 0, 0.50), inset 0 1px 0 0 #FFFFFF;
  border-radius: 6px;
  color: var(--gray20);
  margin: var(--sevenTimesPadding);
  text-align: left;
}

#modalForm {
  height: 100%;
  min-width: 500px;
  display: grid;
  grid-template: auto auto / auto;
}

#modalContent {
  overflow: auto;
  padding: var(--sevenTimesPadding);
}

#modalForm[fullcontentview="true"] #modalContent {
  padding: 0px;
}

#modalToolbar {
  display: none;
}

#modalFooter {
  border-top: var(--border);
  border-color: var(--gray235);
  padding: var(--sevenTimesPadding);
  padding-top: var(--fourTimesPadding);
  padding-bottom: var(--fourTimesPadding);
  display: grid;
  grid-template: auto / max-content auto auto min-content;
  /*  grid-template: auto / min-content auto max-content  min-content;*/
}

#modalForm[fullcontentview="true"] #modalFooter {
  display: none;
}


#modalClose {
}

#modalFooterButtons {
  display: grid;
  grid-template: auto / repeat(auto-fit, minmax(0px, 120px));
  justify-content: end;
  grid-gap: var(--twoTimesPadding);
}

#modalFooterSubmit {
    display: flex;
}

#response {
  display: grid;
  place-content: center;
  color: var(--gray50);
}

#modalForm button,
#registrationForm button {
}

#modalForm[enabled='false'] button, #modalForm[enabled='false'] .submitButton {
  cursor: arrow;
  pointer-events: none;
  border-color: var(--gray235);
  color: var(--gray235);
}

#modalForm[success='false'] #modalSubmitButton { /*, #modalForm[success='false'] .submitButton[selected='true'] { */
  background: var(--red);
  color: var(--white);
  border: var(--red);
}

#modalForm[success='true'] #modalSubmitButton { /*, #modalForm[success='true'] .submitButton[selected='true'] { */
  background: var(--green);
  color: var(--white);
  border: var(--green);
}

.subt {
  display: block;
  font-size: 15pt;
  font-family: csheavy;
  border: var(--border);
  border-color: var(--border-color);
  margin-bottom: 20px;
  /*   padding-bottom: var(--padding); */
  padding: var(--fourTimesPadding);
  background: var(--border-color);
  border-radius: var(--radius);
}

#modalNotificationContainer {
  display: grid;
  /*     grid-template: auto / 100%; */
  /*     background: yellow; */
  place-content: center;
  padding: 10%;
}

#modalNotification {
  background: var(--black);
  color: white;
  padding: var(--sevenTimesPadding);
  border: var(--blue);
  border-radius: var(--padding);
  box-shadow: var(--shadow);
  display: grid ;
  grid-auto-flow: column ;
  grid-template: auto / auto repeat(auto-fit, minmax(0px, 50px));
  grid-gap: 20px;
  align-items: center;
  text-align: center;
}

#modalNotificationMessage {
}

#modalNotificationClose,
#modalNotificationOK {
  cursor: pointer;
  border-left: var(--border);
  padding-left: 20px;
  font-size: 20px;
  text-align: center;
  width: 80px;
  /*     background: aqua; */
}


#modal label,
#modal .label {
  text-transform: none;
  padding-left: 6px;
  grid-column: auto;
  margin-bottom: 10px;
  color: var(--mediumGray);
}

#modal input, #modal textarea {
  background: var(--white);
  /*  border: var(--borderSize) dashed var(--lightGray);*/
  border: var(--border);
  color: var(--black);
  border-color: var(--border-color);
}

#modal input:disabled, textarea:disabled {
  color: var(--mediumGray);
}

#modal .uploaderContainer {
  /*   box-shadow: 0px 1px 2px rgba(0,0,0, 0.4); */
  padding: unset;
  margin: unset;
  border-radius: 5pt;
  border: solid;
  border-color: var(--blue);
  border-width: 1px;
  background: none;
}

#modal .uploadText {
  color: var(--blue);
}

/* MARK: - NOTIFICATIONS */
#notifications {
  display: flex;
  flex-direction: column;
  z-index: 1000;
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 260px;
  overflow-x: none;
  overflow-y: auto;
  justify-content: flex-end;
}

#modalFormNotification {
  display: flex;
  justify-content: center;
  position: sticky;
  top: -35px;
  left: 0px;
  right: 0px;
  /* background: green; */
  text-align: center;
  overflow: hidden;
  /*  max-height: 0px;*/
  transition: all 250ms;
}

#modalFormNotificationContent {
  padding: 15px;
  display: block;
  text-align: center;
  font-size: 15pt;
  font-family: csheavy;
  background: var(--green);
  color: var(--background);
  border-radius: 0px 0px 10px 10px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.50), inset 0 1px 2px 0 rgba(255, 255, 255, 0.50);
  text-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.50);
  margin-bottom: 20px;
}

#modalSubmitButton:disabled,
#modalSubmitButton[disabled] {
  color: var(--gray200);
  border-color: var(--gray200);
  cursor: none;
}

/* FORMS */

form[enabled='false'] .submitButton, form[enabled='false'] button {
  cursor: none;
}

form #spinner {
  animation: rotate 1s linear infinite;
  justify-self: end;
  align-self: center;
  display: inline-block;
}

form #spinnerContainer {
  transition: all 250ms ease-in-out;
  display: inline-grid;
  overflow: hidden;
  max-width: 0px;
}

form[submitting='true'] #spinnerContainer {
  max-width: 100px;
  width: 25px;
  overflow: hidden;
}

form[submitting='true'][success] #spinnerContainer {
  max-width: 0px;
}



#modal .notice {
  border: var(--border);
  /*   border-right: none; */
  /*   border-left: none; */
  /* color: var(--blue); */
  padding: var(--threeTimesPadding);
  /* border-radius: var(--radius); */
  font-size: 0.8em;
  text-align: center;
  background: var(--border-color);
  
}


.terms {
  overflow: auto;
  max-height: 300px;
  border: var(--border);
  padding: var(--padding);
  border-radius: 5px;
}

pre {
  white-space: pre-wrap;
  font-size: 9pt;
}

#acceptTermsCheckbox {
  font-family: csheavy;
  padding: var(--threeTimesPadding);
  color: var(--red);
  text-align: center ;
}

#modal .additionalDocsDisclosure {
  color: var(--red);
}

#modalForm .sectionHeader {
  color: var(--blue);
  border-bottom: var(--borderSize) solid var(--lightGray);
  padding-bottom: 5px;
  margin-bottom: 15px;
  margin-top: 30px;
  padding-left: 5px;
  font-size: 12pt;
}

#modalForm .sectionHeader:first-child {
  margin-top: 0px;
}

#password-info {
  grid-gap: 5px;
  font-size: 10pt;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

#password-info>div {
  color: black;
  font-family: csheavy;
}

#password-info>span {
  text-transform: lowercase;
  color: var(--mediumGray);
}

#password-info>span::after {
  content: ", "
}

#password-info>span:last-child::after {
  content: unset;
}