*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  scroll-behavior: smooth;
  font-size: 16px;
  --blue: #043b57;
  --black: #181d1f;
}

body {
  font-family: "Roboto", sans-serif;
  color: var(--blue);
  background: #fff;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: "Mozilla Headline", sans-serif;
  color: var(--blue);
}

code {
  display: inline-block;
  background: #eee;
  padding: 2px 4px;
  margin-bottom: 6px;
  border-radius: 4px;
}

pre code {
  margin-bottom: 0;
}

pre {
  border-radius: 4px;
}

blockquote {
  background: #eee;
  padding: 16px;
  border-left: 3px solid var(--blue);
  border-radius: 4px;
}

ul li {
  list-style: none;
}

.EasyMDEContainer ul li {
  list-style: inherit;
}

.EasyMDEContainer ul {
  padding: inherit;
}

.EasyMDEContainer {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.EasyMDEContainer .CodeMirror {
  font-size: 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.075);
}

.EasyMDEContainer .editor-toolbar {
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-bottom: none;
}

.EasyMDEContainer .editor-toolbar button {
  color: var(--blue);
}

input:not([type="checkbox"]):not(.ag-input-field-input),
select,
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  color: var(--black);
  font-size: 0.75rem;
  padding: 10px 12px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

textarea {
  resize: vertical;
  height: 100%;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%23043b57' d='M11.475 14.475L7.85 10.85q-.075-.075-.112-.162T7.7 10.5q0-.2.138-.35T8.2 10h7.6q.225 0 .363.15t.137.35q0 .05-.15.35l-3.625 3.625q-.125.125-.25.175T12 14.7t-.275-.05t-.25-.175'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px;
  padding-right: 36px;
}

input:not([type="checkbox"])::placeholder {
  font-weight: 300;
  font-size: 1rem;
}

input:not([type="checkbox"]):focus,
select:focus,
textarea:focus,
.EasyMDEContainer .editor-toolbar button:hover {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

input:not([type="checkbox"]):read-only,
input:not([type="checkbox"]).readonly,
select.readonly,
textarea:read-only,
textarea.readonly {
  filter: opacity(0.6);
  background-color: #f8f9fa;
}

label {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
  width: 100%;
  color: var(--black);
}

label.required::after {
  content: "*";
  color: red;
  display: inline-block;
  margin-left: 4px;
}

label .ai-button {
  position: absolute;
  top: -4px;
  right: 4px;
}

.ai-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 2px 6px;
  padding-right: 20px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: rgba(27, 123, 171, 0.1);
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3C!-- Icon from Health Icons by Resolve to Save Lives - https://github.com/resolvetosavelives/healthicons/blob/main/LICENSE --%3E%3Cpath fill='%23043b57' d='M34 6c-1.368 4.944-3.13 6.633-8 8c4.87 1.367 6.632 3.056 8 8c1.368-4.944 3.13-6.633 8-8c-4.87-1.367-6.632-3.056-8-8m-14 8c-2.395 8.651-5.476 11.608-14 14c8.524 2.392 11.605 5.349 14 14c2.395-8.651 5.476-11.608 14-14c-8.524-2.392-11.605-5.349-14-14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px top 1px;
  background-size: 15px;
  transition: 0.4s ease;
}

.ai-button:not(.loading):hover {
  color: #1b7bab;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'%3E%3C!-- Icon from Health Icons by Resolve to Save Lives - https://github.com/resolvetosavelives/healthicons/blob/main/LICENSE --%3E%3Cpath fill='%231b7bab' d='M34 6c-1.368 4.944-3.13 6.633-8 8c4.87 1.367 6.632 3.056 8 8c1.368-4.944 3.13-6.633 8-8c-4.87-1.367-6.632-3.056-8-8m-14 8c-2.395 8.651-5.476 11.608-14 14c8.524 2.392 11.605 5.349 14 14c2.395-8.651 5.476-11.608 14-14c-8.524-2.392-11.605-5.349-14-14'/%3E%3C/svg%3E");
}

.ai-button.loading {
  cursor: progress;
  animation: blink 2s infinite ease-in-out;
}

@keyframes blink {
  0% {
    color: rgba(4, 59, 87, 1);
  }

  50% {
    color: rgba(4, 59, 87, 0.6);
  }

  100% {
    color: rgba(4, 59, 87, 1);
  }
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.button,
button[type="submit"] {
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  color: #eee;
  background-color: var(--blue);
  border: none;
  padding: 18px 28px;
  width: 100%;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  transition: 0.2s ease;
}

.button:hover,
button[type="submit"]:hover {
  font-weight: 500;
}

.hidden {
  display: none !important;
}

#btn_anexos {
  appearance: none;
  cursor: pointer;
  color: #eee;
  font-size: 0.75rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 8px 22px 8px 38px;
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3C!-- Icon from Clarity by VMware - https://github.com/vmware/clarity-assets/blob/master/LICENSE --%3E%3Cpath fill='%23ffffff' d='M8.42 32.6A6.3 6.3 0 0 1 4 30.79l-.13-.13A6.2 6.2 0 0 1 2 26.22a6.77 6.77 0 0 1 2-4.82L19.5 6.07a8.67 8.67 0 0 1 12.15-.35A8 8 0 0 1 34 11.44a9 9 0 0 1-2.7 6.36L17.37 31.6A1 1 0 1 1 16 30.18l13.89-13.8A7 7 0 0 0 32 11.44a6 6 0 0 0-1.76-4.3a6.67 6.67 0 0 0-9.34.35L5.45 22.82A4.78 4.78 0 0 0 4 26.22a4.2 4.2 0 0 0 1.24 3l.13.13a4.64 4.64 0 0 0 6.5-.21l13.35-13.2A2.7 2.7 0 0 0 26 14a2.35 2.35 0 0 0-.69-1.68a2.61 2.61 0 0 0-3.66.13l-9.2 9.12a1 1 0 1 1-1.41-1.42L20.28 11a4.62 4.62 0 0 1 6.48-.13A4.33 4.33 0 0 1 28 14a4.68 4.68 0 0 1-1.41 3.34L13.28 30.58a6.9 6.9 0 0 1-4.86 2.02' class='clr-i-outline clr-i-outline-path-1'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 8px;
  background-size: 18px;
  border: none;
  border-radius: 8px;
}

#main-header {
  height: 52px;
  margin-bottom: 20px;
  background: linear-gradient(162deg, var(--black) -60%, var(--blue));
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

#main-header h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
}

#main-header h1 span {
  display: block;
  font-size: 1rem;
  font-weight: 200;
  filter: opacity(0.5);
}

#main-header .main-container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  margin-bottom: 0;
}

#main-header ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

#main-header a {
  cursor: pointer;
  user-select: none;
  color: #eee;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: block;
  padding: 10px 12px 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.05);
  transition: 0.2s ease;
}

#main-header a:hover {
  font-weight: 400;
}

#main-header #username {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%23dddddd' d='M5.85 17.1q1.275-.975 2.85-1.537T12 15t3.3.563t2.85 1.537q.875-1.025 1.363-2.325T20 12q0-3.325-2.337-5.663T12 4T6.337 6.338T4 12q0 1.475.488 2.775T5.85 17.1M12 13q-1.475 0-2.488-1.012T8.5 9.5t1.013-2.488T12 6t2.488 1.013T15.5 9.5t-1.012 2.488T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 10px center;
  padding-right: 38px;
  margin-left: 20px;
}

#main-header #username span {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: -3px;
}

#main-header #username::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 1px;
  height: 28px;
  background: #eee;
  transform: translateY(-50%);
  filter: opacity(0.1);
}

#main-header #username:hover {
  font-weight: 300;
}

#main-footer {
  display: block;
  width: 100%;
  padding: 14px 20px;
  color: #eee;
  background: #3a3c3d;
}

#main-footer small {
  display: block;
  margin-left: auto;
  text-align: right;
  filter: opacity(0.8);
}

#main-footer small a {
  color: inherit;
}

.error-box {
  display: block;
  width: 100%;
  padding: 12px 18px;
  font-size: 0.875rem;
  color: #fff;
  background-color: #dc3545;
  border-radius: 8px;
  margin-bottom: 8px;
}

.main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 16px;

}

.login-container>* {
  flex: 1;
  width: 100%;
  height: 100%;
  border-radius: 22px;
}

.login-container .login-background {
  background-image: url('/assets/login-bg.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.login-container .login-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-container h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2.5rem;
  font-weight: 200;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.35);
}

.login-container h1 span {
  font-size: 3rem;
  font-weight: 600;
  color: #043b57;
}

.login-container .error-box {
  width: 100%;
  max-width: 460px;
  padding: 18px 22px;
  font-size: 1rem;
  margin-bottom: 0;
}

.login-container form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.login-container form input {
  font-size: 1rem !important;
  padding: 18px 20px !important;
}

.login-container .info {
  filter: opacity(0.6);
}

.login-container .info a {
  color: inherit;
}

.hero-section {
  position: relative;
  display: flex;
  gap: 4px;
  max-height: calc(100vh - 136px);
  overflow: auto;
  padding: 22px 20px;
  background: #fafafb;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.hero-section>* {
  flex: 1;
  width: 100%;
}

.hero-section::-webkit-scrollbar {
  width: 12px;
}

.hero-section::-webkit-scrollbar-track {
  background: #fafafb;
  margin: 18px 0;
}

.hero-section::-webkit-scrollbar-thumb {
  background-color: #818181;
  border-radius: 20px;
  border: 3px solid #fafafb;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 12px;
}

#sga-form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 55px 55px auto auto 55px 1fr;
  align-items: stretch;
  gap: 16px;
  padding-left: 16px;
}

#agGrid .ag-root-wrapper {
  border: 1px solid rgba(0, 0, 0, 0.075);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

#sga-form>* {
  grid-column: span 12;
}

#sga-form>.input-box:nth-of-type(1) {
  grid-column: span 4;
}

#sga-form>.input-box:nth-of-type(2) {
  grid-column: span 4;
}

#sga-form>.input-box:nth-of-type(3) {
  grid-column: span 4;
}

#sga-form>.input-box:nth-of-type(4) {
  grid-column: span 4;
}

#sga-form>.input-box:nth-of-type(5) {
  grid-column: span 3;
}

#sga-form .checkbox-list {
  grid-column: span 5;
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 16px;
}

#sga-form input[type="checkbox"] {
  align-self: center;
  justify-self: center;
  accent-color: var(--blue);
  width: 22px;
  height: 22px;
}

/* Campo do editor de markdown */
#sga-form>.input-box:nth-of-type(9) {
  grid-column: span 12;
}

/* Campo de perguntas */
#sga-form>.input-box:nth-of-type(7) {
  grid-column: span 6;
}

/* Campo de ddl */
#sga-form>.input-box:nth-of-type(8) {
  grid-column: span 6;
}

/* Campo de botão de anexo */
#sga-form>.input-box:nth-of-type(10) {
  grid-column: span 4;
}

/* Campos de cadastro e alteração */
#sga-form>.input-box:nth-of-type(11),
#sga-form>.input-box:nth-of-type(12),
#sga-form>.input-box:nth-of-type(13),
#sga-form>.input-box:nth-of-type(14) {
  grid-column: span 2;
}

#sga-form .info-box {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

#sga-form textarea {
  min-height: 105px;
  height: calc(100% - 18px);
}

#sga-form .button-box {
  position: fixed;
  bottom: 81px;
  right: 37px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#sga-form .button,
#sga-form button[type="submit"] {
  justify-self: center;
  font-size: 0.875rem;
  padding: 14px 22px;
  border-radius: 30px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

#sga-form .button {
  background: #1b7bab;
}

.ag-row.selected {
  background-color: #eef7fe;
}

.password-box {
  position: relative;
}

.password-box>input:not([type="checkbox"]):not(.ag-input-field-input) {
  padding-right: 58px !important;
}

.password-box .show-password {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: block;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%23043b57' d='M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.65 0-6.65-2.037T1 11.5q1.35-3.425 4.35-5.462T12 4t6.65 2.038T23 11.5q-1.35 3.425-4.35 5.463T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
}

.password-box .show-password.showed {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --%3E%3Cpath fill='%23043b57' d='m16.1 13.3l-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.425-.2.863-.3T12 7q1.875 0 3.188 1.313T16.5 11.5q0 .5-.1.938t-.3.862m3.2 3.15l-1.45-1.4q.95-.725 1.688-1.587T20.8 11.5q-1.25-2.525-3.588-4.012T12 6q-.725 0-1.425.1T9.2 6.4L7.65 4.85q1.025-.425 2.1-.638T12 4q3.775 0 6.725 2.087T23 11.5q-.575 1.475-1.513 2.738T19.3 16.45m.5 6.15l-4.2-4.15q-.875.275-1.762.413T12 19q-3.775 0-6.725-2.087T1 11.5q.525-1.325 1.325-2.463T4.15 7L1.4 4.2l1.4-1.4l18.4 18.4zM5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.588 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2'/%3E%3C/svg%3E");
}
