/*
* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
body,
html,
#root {
  margin:0;
  padding:0
}
#root {
  max-width:1280px;
  margin:auto;
  padding:2rem;
  text-align:center
}
.container {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:90%;
  margin:25px auto
}
.textbox-container {
  display:flex;
  justify-content:space-between;
  gap:20px;
  width:100%
}
.textbox-container textarea,
.textarea-style,
.highlighted-textarea-style {
  width:600px;
  text-align:left;
  min-height:25em;
  overflow:auto;
  border:1px solid #ccc;
  background-color:#f8f8f8;
  line-height:1.15;
  padding:5px 0 0 5px
}
.textbox-container textarea,
.textarea-style {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%
}
.relative-container {
  position:relative;
  width:600px
}
.relative-container textarea {
  width:100%
}
.tabs {
  display:flex;
  gap:5px;
  margin-bottom:0;
  width:100%;
  justify-content:space-between
}
.tabs-left,
.tabs-right {
  display:flex;
  gap:5px
}
.tabs button,
.tabs-right button {
  padding:10px;
  cursor:pointer;
  font-size:14px
}
.tabs-right button.active,
.tabs button.active {
  border-bottom:3px solid blue
}
.tabs-right.mobile {
  display:none;
  align-items:flex-start
}
@media (max-width: 1024px) {
  .textbox-container textarea,
  .textarea-style,
  .highlighted-textarea-style,
  .relative-container {
    width:100%
  }
  .tabs button,
  .tabs-right button {
    padding:10px;
    font-size:14px
  }
  .tabs-left,
  .tabs-right {
    gap:3px
  }
}
@media (max-width: 768px) {
  .textbox-container {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .textbox-container textarea,
  .textarea-style,
  .highlighted-textarea-style,
  .relative-container {
    width:100%;
    margin-bottom:10px
  }
  .relative-container {
    padding-top:0
  }
  .tabs button,
  .tabs-right button,
  .tabs-right.mobile button {
    padding:10px;
    font-size:14px
  }
}
@media (max-width: 768px) {
  .tabs-right:not(.mobile) button {
    display:none
  }
  .tabs-right.mobile {
    display:flex;
    align-items:flex-start
  }
}
.textarea-style::placeholder {
  color:gray
}
.mask-button {
  margin-top:20px
}
.copy-icon {
  position:absolute;
  bottom:5px;
  right:5px;
  cursor:pointer;
  color:gray;
  width:20px;
  height:20px;
  text-align:center;
  line-height:20px
}
.copy-icon:hover {
  color:#00f
}
.progress-container {
  position:relative;
  font-size:14px;
  color:#fff;
  background-color:#e9ecef;
  border:solid 1px;
  border-radius:8px;
  text-align:left;
  overflow:hidden
}
.progress-bar {
  padding:0 4px;
  z-index:0;
  top:0;
  width:1%;
  height:100%;
  overflow:hidden;
  background-color:#007bff;
  white-space:nowrap
}
.progress-text {
  z-index:2
}
.progress-bars-container {
  padding:8px;
  height:140px
}
.color-per {
  color:#1e90ff
}
.color-loc {
  color:#4169e1
}
.color-org {
  color:#0000cd
}
.header {
  font-family:Grandiflora One,cursive;
  font-size:3rem;
  color:#000;
  padding:5
}
h5,
h6 {
  font-weight:400
}
#howItWorksLink {
  text-decoration:underline;
  text-decoration-style:dotted;
  cursor:pointer
}
.modal.show {
  display:block
}
.howItWorksModal {
  position:fixed;
  top:65%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1000;
  background-color:#fff;
  border:1px solid #ccc;
  border-radius:4px;
  padding:20px;
  width:80%;
  max-width:400px;
  color:gray;
  font-size:12px
}
.closeModal {
  position:absolute;
  top:10px;
  right:10px;
  cursor:pointer
}
:root {
  font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;
  line-height:1.5;
  font-weight:400;
  color:#213547;
  background-color:#fff;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%
}
body {
  margin:0;
  display:flex;
  place-items:center;
  min-width:320px;
  min-height:100vh
}
h1 {
  font-size:3.2em;
  line-height:1
}
h1,
h2 {
  margin:8px
}
select {
  padding:.3em;
  cursor:pointer
}
textarea {
  padding:.6em
}
button {
  padding:.6em 1.2em;
  cursor:pointer;
  font-weight:500
}
button[disabled] {
  cursor:not-allowed
}
select,
textarea,
button {
  border-radius:8px;
  border:1px solid transparent;
  font-size:1em;
  font-family:inherit;
  background-color:#f9f9f9;
  transition:border-color .25s
}
select:hover,
textarea:hover,
button:not([disabled]):hover {
  border-color:#646cff
}
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
button:focus,
button:focus-visible {
  outline:4px auto -webkit-focus-ring-color
}
*/