html { font-size: 13px; }
html, body, #root { height: 100%; }

a { text-decoration: none !important; }
button { cursor: pointer; font-weight: bold !important; &:focus { outline: none; } }
.button-icon { min-width: 27px !important; width: 27px !important; }
.button-contact { margin: -9px 0px; }

.animate { transition: all .1s ease-in-out; }
.animate:hover { transform: scale(1.03); }
.no-animate .animate:hover { transform: scale(1.00) !important; }

pre { position: relative; min-height: 32px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; padding: 5px 38px 5px 5px !important;  }
.mode-light pre, .mode-dark pre { background-color: rgb(16, 16, 16) !important; }
code { position: relative; display: block; width: 100%; min-height: 32px; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; background-color: rgb(16, 16, 16) !important; color: rgb(156, 220, 254) !important; padding: 5px 38px 5px 5px !important; }
.button-copy { position: absolute; top: 2px; right: 2px; svg { color: unset; } }
pre:has(code) { padding: 0px !important;  }

h1 { font-size: 2.1rem !important; font-weight: 400 !important; }
h2 { font-size: 1.9rem !important; font-weight: 400 !important; }
h3 { font-size: 1.7em !important; font-weight: 400 !important; }
h4 { font-size: 1.5rem !important; font-weight: 400 !important; }
h5 { font-size: 1.3rem !important; font-weight: 400 !important; }

.text-sm { font-size: 0.825rem !important; }
.text-md { font-size: 1rem !important; }
.text-xl { font-size: 1.2rem !important; }

@media screen and (max-width: 900px) {
  h1 { font-size: 1.9rem !important; font-weight: 450 !important; }
  h2 { font-size: 1.7rem !important; font-weight: 450 !important; }
  h3 { font-size: 1.5rem !important; font-weight: 450 !important; }
  h4 { font-size: 1.3rem !important; font-weight: 450 !important; }
  h5 { font-size: 1.1rem !important; font-weight: 450 !important; }
}

.flex { display: flex; flex-direction: column; }
.grid { display: grid; }
.flex-row { display: flex; flex-direction: row !important; }
.flex-row-responsive { display: flex; flex-direction: row !important; align-items: center; }

@media screen and (max-width: 800px) {
  .flex-row-responsive { flex-direction: column !important; }
}

.flex-wrap { flex-wrap: wrap; }
.flex1 { flex: 1; }
.border0 { border: 0px !important; }
.border-radius5 { border-radius: 5px; }
.gap4 { gap: 4px; }
.gap5 { gap: 5px; }
.gap10 { gap: 10px; }
.align-center { align-items: center !important; }
.align-end { align-items: end !important; }
.align-start { align-items: flex-start !important; }
.align-stretch { align-items: stretch !important; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end; }
.space-between { justify-content: space-between; }
.relative { position: relative; }
.padding-10 { padding: 10px !important; }
.margin-10 { margin: 10px !important; }
.margin-top10 { margin-top: 10px !important; }
.margin-top15 { margin-top: 15px !important; }
.margin-top20 { margin-top: 20px !important; }
.margin-top30 { margin-top: 30px !important; }
.margin-top40 { margin-top: 40px !important; }
.margin-right-50 { margin-right: 50px !important; }
.margin-left5 { margin-left: 5px !important; }
.margin-left10 { margin-left: 10px !important; }
.margin-left15 { margin-left: 15px !important; }
.margin-bottom0 { margin-bottom: 0px !important; }
.margin-bottom5 { margin-bottom: 5px !important; }
.margin-bottom10 { margin-bottom: 10px !important; }
.main-container .MuiPaper-root.margin-top30 { margin-top: 30px !important; }
.overflow { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-none { overflow-x: hidden; }
.no-overflow { overflow: hidden; align-self: normal !important; .MuiCardContent-root { overflow: auto; } }
.hidden { display: none !important; }
.pointer { cursor: pointer !important; }
.text-center { text-align: center; .MuiTypography-root { text-align: center; } }
.text-justify { text-align: justify; }
.user-none { user-select: none; }
.line-height-15 { line-height: 1.5rem !important; }

.width33 { width: 33%; }
.width50 { width: 50%; }
.width100 { width: 100%; }
.height100 { height: calc(100%); }
.height20px { height: 20px; }
.height50px { height: 50px; }

.font-weight-450 { &, span { font-weight: 450 !important; } }
.height-20 { min-height: 20px !important; height: 20px !important; }
.height-36 { min-height: 36px !important; height: 36px !important; }

@media (max-width: 800px) {
  .width33, .width50 { width: 100% !important; }
}

.text-underline { text-decoration: underline !important; text-underline-offset: 0.225rem !important; }

.text-grey { &, * { color: rgba(0, 0, 0, 0.625) !important; } }
.mode-dark .text-grey { &, * { color: rgba(255, 255, 255, 0.625) !important; } }
.text-black { &, * { color: black !important; } }
.mode-dark .text-black { &, * { color: white !important; } }

.text-primary { color: var(--mui-palette-primary-main) !important; }
.mode-dark .text-primary { color: var(--mui-palette-primary-main-dark) !important; }
.text-secondary { color: var(--mui-palette-secondary-main) !important; }
.mode-dark .text-secondary { color: var(--mui-palette-secondary-main-dark) !important; }
.text-error { color: var(--mui-palette-error-main) !important; }
.mode-dark .text-error { color: var(--mui-palette-error-main-dark) !important; }

.info { color: var(--mui-palette-info-main) !important; }
.mode-dark .info { color: var(--mui-palette-info-main-dark) !important; }
.success { color: var(--mui-palette-success-main) !important; }
.mode-dark .success { color: var(--mui-palette-success-main-dark) !important; }
.error { color: var(--mui-palette-error-main) !important; }
.mode-dark .error { color: var(--mui-palette-error-main-dark) !important; }

.border { border: 0px solid; }
.border-left { border-left: 2px solid; }
.border-primary { border-color: var(--mui-palette-primary-main) !important; }
.mode-dark .border-primary { border-color: var(--mui-palette-primary-main-dark) !important; }
.border-secondary { border-color: var(--mui-palette-secondary-main) !important; }
.mode-dark .border-secondary { border-color: var(--mui-palette-secondary-main-dark) !important; }
.border-info { border-color: var(--mui-palette-info-main) !important; }
.mode-dark .border-info { border-color: var(--mui-palette-info-main-dark) !important; }
.border-success { border-color: var(--mui-palette-success-main) !important; }
.mode-dark .border-success { border-color: var(--mui-palette-success-main-dark) !important; }
.border-error { border-color: var(--mui-palette-error-main) !important; }
.mode-dark .border-error { border-color: var(--mui-palette-error-main-dark) !important; }

.divider-margin { margin: 10px 0px; }
.margin-05 { margin: 0.5rem; }

.form-control { margin-bottom: 8px; margin-top: 16px; }
.form-checkbox { padding: 0px 2px; }

/***** TABLE ****/

.MuiTableCell-root { font-size: 1rem !important; }
table {
  thead { 
    th.MuiTableCell-root { 
      background-color: var(--mui-palette-primary-main) !important;  
      & > span, & > span > svg { color: #FFFFFF !important; }  
    }
  }
  th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.mode-dark thead th.MuiTableCell-root { background-color: var(--mui-palette-primary-main-dark) !important; }
.admin table { table-layout: fixed; min-width: 837px; }

.table-result { margin: 5px 0px; font-size: 1.2rem; }

.MuiTablePagination-toolbar { justify-content: center; & > div:nth-child(1) { flex: 0 !important; } }