:root {
  font-size: 16px;
  font-family: "Poppins";
}

* {
  padding: 0;
  margin: 0;
  outline: 0;
  box-sizing: border-box;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background-color: transparent;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 1440px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (max-width: 1280px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (max-width: 1024px) {
  :root {
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    font-size: 12px;
  }
}
:root {
  --secondary: #1767C0;
  --primary: #1767C0;
  --accent: #5420C2;
  --pinaculo: #1b4370;
  --telemetrix: #00b2ff;
  --fade-blue: linear-gradient(115deg, var(--primary), var(--secondary));
  --fade-sec-acc: var(--secondary), var(--accent);
  --fade-acc-sec: var(--accent), var(--secondary);
  --fade: linear-gradient(90deg, var(--fade-sec-acc));
  --fade-v: linear-gradient(180deg, var(--fade-sec-acc));
  --fade-d: linear-gradient(115deg, var(--fade-sec-acc));
  --primary-rgb: 0, 93, 163;
  --secondary-rgb: 23, 103, 192;
  --accent-rgb: 84, 32, 194;
  --success-rgb: 68, 187, 85;
  --error-rgb: 255, 68, 85;
  --alert-rgb: 255, 136, 85;
  --warning-rgb: 240, 184, 15;
  --success: #44bb55;
  --error: #ff4455;
  --alert: #FF8855;
  --warning: #f0b80f;
  --info: #337ab7;
  --opacity-900: .9;
  --opacity-800: .8;
  --opacity-700: .7;
  --opacity-600: .6;
  --opacity-500: .5;
  --opacity-400: .4;
  --opacity-300: .3;
  --opacity-200: .2;
  --opacity-100: .1;
  --good: #0b2;
  --bad: #f45;
  --bg-good: #0b22;
  --bg-bad: #f452;
  --spacing-tiny: .25rem;
  --spacing-small: .5rem;
  --spacing-medium: .75rem;
  --spacing-large: 1rem;
  --spacing-xlarge: 1.5rem;
  --dyn-spacing-tiny: 0.25em;
  --dyn-spacing-small: 0.50em;
  --dyn-spacing-medium: 0.75em;
  --dyn-spacing-large: 1.00em;
  --dyn-spacing-xlarge: 1.50em;
  --default-rounding: 2px;
  --shadow-normal-color: #0122;
  --shadow-color: var(--shadow-normal-color);
  --shadow-small-size: 0px 4px 8px;
  --shadow-medium-size: 0px 6px 16px;
  --shadow-large-size: 0px 12px 64px;
  --shadow-xlarge-size: 0px 24px 128px;
  --shadow-small: var(--shadow-small-size) var(--shadow-color);
  --shadow-medium: var(--shadow-medium-size) var(--shadow-color);
  --shadow-large: var(--shadow-large-size) var(--shadow-color);
  --shadow-xlarge: var(--shadow-xlarge-size) var(--shadow-color);
  --shadow-size-xlarge: 0px 16px 64px;
  --light-background-600: #CED7DD;
  --light-background-500: #DBE1E6;
  --light-background-400: #E7EBEE;
  --light-background-300: #EAEBEC;
  --light-background-200: #F0F1F2;
  --light-background-100: #FFFFFF;
  --dark-background-500: #2A2C3C;
  --dark-background-400: #222434;
  --dark-background-300: #1A1C2C;
  --dark-background-200: #121424;
  --dark-background-100: #0A0C1C;
  --background-shade-100: var(--light-background-100);
  --background-shade-200: var(--light-background-200);
  --background-shade-300: var(--light-background-300);
  --background-shade-400: var(--light-background-400);
  --background-shade-500: var(--light-background-500);
  --background-shade-600: var(--light-background-600);
  --text-light-900: #334455;
  --text-light-800: #445566;
  --text-light-700: #556677;
  --text-light-600: #8899aa;
  --text-light-500: #aabbcc;
  --text-light-400: #bccadc;
  --text-light-300: #daeafc;
  --text-light-200: #eaeefa;
  --text-light-100: #FFFFFF;
  --text-dark-900: #20292D;
  --text-dark-800: #303E44;
  --text-dark-700: #3F525A;
  --text-dark-600: #4A5D65;
  --text-dark-500: #54676F;
  --text-dark-400: #697B84;
  --text-dark-300: #7E8F99;
  --text-dark-200: #9EAEB8;
  --text-dark-100: #BDCCD6;
  --text-900: var(--text-dark-900);
  --text-800: var(--text-dark-800);
  --text-700: var(--text-dark-700);
  --text-600: var(--text-dark-600);
  --text-500: var(--text-dark-500);
  --text-400: var(--text-dark-400);
  --text-300: var(--text-dark-300);
  --text-200: var(--text-dark-200);
  --text-100: var(--text-dark-100);
  --text-color-headings: var(--text-900);
  --text-color-subheadings: var(--text-800);
  --text-color-texts: var(--text-700);
  --text-color-normal: var(--text-500);
  --text-color-info: var(--text-300);
  --text-color-anchor: var(--secondary);
  --text-color-error: var(--error);
  --font-size-100: 3.5rem;
  --font-size-200: 3.0rem;
  --font-size-300: 2.5rem;
  --font-size-400: 2.0rem;
  --font-size-500: 1.5rem;
  --font-size-600: 1.2rem;
  --font-size-700: 1.0rem;
  --font-size-800: 0.9rem;
  --font-size-900: 0.8rem;
  --font-size-tiny: .8rem;
  --font-size-small: .9rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.2rem;
  --font-size-xlarge: 1.4rem;
  --text-size-100: 1.4rem;
  --text-size-200: 1.2rem;
  --text-size-300: 1rem;
  --text-size-400: .9rem;
  --text-size-500: .8rem;
  --header-size-100: 3rem;
  --header-size-200: 2.5rem;
  --header-size-300: 2rem;
  --header-size-400: 1.5rem;
  --transition-duration-quick: .15s;
  --transition-duration-medium: .25s;
  --transition-duration-long: .5s;
  --transition-duration-xlong: 1s;
  --transition-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
:root[data-theme=dark] {
  --background-shade-500: var(--dark-background-100);
  --background-shade-400: var(--dark-background-200);
  --background-shade-300: var(--dark-background-300);
  --background-shade-200: var(--dark-background-400);
  --background-shade-100: var(--dark-background-500);
}
:root[data-theme=dark] {
  --text-100: var(--text-light-900);
  --text-200: var(--text-light-800);
  --text-300: var(--text-light-700);
  --text-400: var(--text-light-600);
  --text-500: var(--text-light-500);
  --text-600: var(--text-light-400);
  --text-700: var(--text-light-300);
  --text-800: var(--text-light-200);
  --text-900: var(--text-light-100);
}

:root {
  --animation-pulsating-shadow-spread-size: 1rem;
  --modalIn-transalte-y-amount: -20px;
}

.animation-popOut {
  animation: popIn 0.5s reverse forwards;
}

.animation-popIn {
  animation: popIn 0.5s forwards;
}

.animation-pulsating-sm {
  --animation-pulsating-shadow-spread-size: .5rem;
  animation: pulsatingShadow 2s infinite;
}

.animation-pulsating-md {
  --animation-pulsating-shadow-spread-size: 1rem;
  animation: pulsatingShadow 2s infinite;
}

.animation-pulsating-lg {
  --animation-pulsating-shadow-spread-size: 1.5rem;
  animation: pulsatingShadow 2s infinite;
}

.animation-hovering-lg {
  animation: hoverLarge 4s infinte alternate;
}

@keyframes modalIn {
  0% {
    opacity: 0;
    transform: perspective(1000px) translateY(var(--modalIn-transalte-y-amount)) rotateX(5deg);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) translateY(0px) rotateX(0deg);
  }
}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes pulsatingShadow {
  70%, 100% {
    box-shadow: 0 0 0 var(--animation-pulsating-shadow-spread-size) transparent;
  }
}
* {
  font-family: "Poppins";
}

button {
  border: none;
  cursor: pointer;
}

input, label {
  margin: 0;
  padding: 0;
  border: none;
}

.sinking-button {
  position: relative;
  box-shadow: var(--shadow-small);
}

.sinking-button:active {
  transform: translateY(4px);
  box-shadow: none;
}

.custom-table-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  background: var(--fade-blue);
  padding: 0px 20px;
  color: white;
  font-family: "Poppins";
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.-checkbox {
  max-width: 60px;
}

.custom-table-header div {
  flex: 1;
}

.custom-row {
  margin-bottom: 10px;
  border-radius: 2px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1333333333);
  background: #fff;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0px 20px;
  color: #333;
  font-family: "Poppins";
  font-size: 16px;
  border-left: 8px solid var(--secondary);
}

.custom-row div {
  flex: 1;
}

.custom-row div.actions {
  display: flex;
  justify-content: flex-end;
}

.custom-table-actions {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  color: #222;
  transition: 0.15s;
}

.custom-table-actions:last-child {
  margin-right: 0px;
}

.custom-table-actions:hover {
  background: rgba(0, 0, 0, 0.0666666667);
  color: var(--secondary);
}

.table-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.justify-start {
  justify-content: start;
}

.-vertical {
  flex-direction: column;
}

.form-row {
  width: 100%;
  min-height: 40px;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: var(--spacing-medium);
  display: flex;
  gap: var(--spacing-medium);
}

.form-input {
  display: flex;
  flex: 1;
  position: relative;
}

div.my-input {
  height: 40px;
  flex: 1;
  display: flex;
  align-items: center;
  --icon-size: 1.5rem;
  --font-color: var(--text-100);
  position: relative;
}
div.my-input::after {
  position: absolute;
  font-size: 12px;
  color: #f45;
  right: 10px;
  top: -8px;
  padding: 0px 4px;
  background: #fff;
  content: attr(data-error-msg);
}
div.my-input::before {
  position: absolute;
  font-size: 12px;
  color: var(--primary);
  right: 10px;
  content: attr(data-success-msg);
}
div.my-input input:disabled, div.my-input select:disabled {
  filter: brightness(0.9);
  cursor: not-allowed;
}
div.my-input input, div.my-input select {
  height: 100%;
  width: 100%;
  border: 1px solid var(--font-color);
  background: #fff;
  padding: var(--spacing-medium);
  padding-left: calc(3 * var(--spacing-medium) + var(--icon-size));
  border-radius: 0;
  border-radius: 2px;
}
div.my-input > span {
  font-size: var(--icon-size);
  margin-right: var(--spacing-medium);
  color: var(--font-color);
  left: var(--spacing-medium);
  position: absolute;
}
div.my-input > span:after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  height: var(--icon-size);
  width: 1px;
  background: var(--font-color);
}
div.my-input.-no-icon input {
  padding: 8px 12px;
}
div.my-input label {
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  padding: 0 8px;
  background: transparent;
  font-weight: 400;
  color: #aaa;
  position: absolute;
  left: 44px;
  top: 13px;
  margin: 0;
  pointer-events: none;
  transition: 0.15s ease-in-out;
}
div.my-input input:not(:-moz-placeholder-shown) {
  border-color: var(--primary);
  color: #444;
}
div.my-input input:focus, div.my-input input:not(:placeholder-shown), div.my-input select:focus, div.my-input select.selected {
  border-color: var(--primary);
  color: #444;
}
div.my-input input:not(:-moz-placeholder-shown) ~ label {
  left: 20px;
  top: -7px;
  color: var(--primary);
  background: #fff;
}
div.my-input input:focus ~ label, div.my-input input:not(:placeholder-shown) ~ label, div.my-input select:focus ~ label, div.my-input select.selected ~ label {
  left: 20px;
  top: -7px;
  color: var(--primary);
  background: #fff;
}
div.my-input input:not(:-moz-placeholder-shown) ~ span {
  color: var(--primary);
}
div.my-input input:focus ~ span, div.my-input input:not(:placeholder-shown) ~ span, div.my-input select:focus ~ span, div.my-input select.selected ~ span {
  color: var(--primary);
}
div.my-input input:not(:-moz-placeholder-shown) ~ span:after {
  background: var(--primary);
}
div.my-input input:focus ~ span:after, div.my-input input:not(:placeholder-shown) ~ span:after, div.my-input select:focus ~ span:after, div.my-input select.selected ~ span:after {
  background: var(--primary);
}
div.my-input input.error {
  border: 1px solid #f45;
  color: #f45;
}
div.my-input input.error ~ label, div.my-input input.error ~ span {
  color: #f45;
}
div.my-input input.error ~ span:after {
  background: #f45;
}

.form-row > .my-input + .my-input {
  margin-left: 10px;
}

.form-input:last-child {
  margin-right: 0px;
}

.checkbox-container {
  display: block;
  position: relative;
  padding-left: 36px;
  height: 28px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
}

.checkbox-container input {
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: 28px;
  background-color: #eee;
  transition: 0.15s ease-in-out;
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #4b5;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: flex;
}

.checkbox-container .checkmark:after {
  width: 8px;
  height: 16px;
  top: 4px;
  left: 10px;
  display: none;
  position: absolute;
  content: "";
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.table-select-box-with-label {
  display: flex;
  align-items: center;
  transform: translateX(-10px);
}

.table-select-box.select {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.table-select-box {
  border-radius: 20px;
  height: 40px;
  width: 40px;
  color: #222;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  transition: 0.15s;
}

.table-select-box:focus-within {
  color: var(--secondary);
  background: rgba(0, 0, 0, 0.0666666667);
}

.table-select-box:hover {
  background: rgba(0, 0, 0, 0.0666666667);
  color: var(--secondary);
}

#table-selected-actions.open {
  background: rgba(0, 0, 0, 0.0666666667);
  max-width: 160px;
}

#table-selected-actions {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 40px;
  overflow: hidden;
  border-radius: 20px;
  transition: 0.15s;
}

#table-selected-actions button {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: transparent;
  transition: 0.15s;
  flex-shrink: 0;
}
#table-selected-actions button:hover {
  background: rgba(255, 255, 255, 0.0666666667);
}

.switch {
  width: 60px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  outline: none !important;
}

.switch .trail {
  width: 40px;
  height: 14px;
  border-radius: 10px;
  background: #ccc;
  transition: 0.15s;
}

.switch .handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #aaa;
  left: 0px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  transition: background 0.15s, 0.15s ease-in;
  transition-delay: box-shadow 1s;
}

.switch.active .trail {
  background: rgba(24, 153, 47, 0.6666666667);
  left: 40px;
}

.switch.active .handle {
  background: #0b2;
  left: 40px;
}

.switch.active:focus .handle {
  box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.0666666667);
}

.my-alert {
  padding: 8px 12px 8px 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  border-radius: 0px;
  font-size: 1.2rem;
  border: none;
}

.page-actions {
  display: flex;
  justify-content: space-between;
}

.my-container {
  width: 100%;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
.my-table-header th div {
  width: 100%;
  display: inline-flex;
  align-items: center;
}
.my-table-header .material-icons {
  margin-right: 10px;
}

@media screen and (max-width: 768px) {
  .form-row {
    flex-wrap: wrap;
  }
  .form-row:not(.mobile-maintain) {
    flex-direction: column;
  }
  .my-input {
    width: 100%;
  }
  .form-row > .my-input + .my-input {
    margin-left: 0;
    margin-bottom: 20px;
  }
  .form-row > .form-input + .form-input {
    margin-left: 0;
    margin-top: 20px;
  }
  .plataform-list-toolbar {
    flex-direction: column;
  }
  .plataform-list-toolbar > * {
    width: 100%;
  }
  .plataform-list-toolbar > * + * {
    margin: 10px 0 0 0 !important;
  }
  .plataform-page-toolbar {
    flex-direction: column;
  }
  .plataform-page-toolbar > * + * {
    margin-top: 4px;
  }
}
@media screen and (max-width: 700px) {
  .my-table-header th {
    border: none;
  }
  .my-table-header .material-icons {
    margin-right: 0px;
  }
  .my-container {
    padding: 20px 0px;
  }
  .my-container.mobile-fit-content {
    width: -moz-fit-content;
    width: fit-content;
  }
  .page-actions {
    flex-direction: column;
  }
  .page-actions button + button, .page-actions button + a[type=button], .page-actions a[type=button] + a[type=button] {
    margin-top: 10px;
  }
  table .inline-button {
    font-size: 0px;
  }
  table .inline-button > span {
    margin: 0 !important;
  }
}
.my-container-header {
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
}

.my-panel {
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.panel-title {
  background: rgba(0, 0, 0, 0.0392156863);
}
.panel-title > span {
  height: 40px;
  width: 40px;
  color: var(--secondary);
  display: flex;
  justify-content: center;
  align-items: center;
}

.plataform-list-toolbar {
  display: flex;
  padding: 10px;
  background-color: var(--secondary);
}
.plataform-list-toolbar.content-between {
  justify-content: space-between;
}
.plataform-list-toolbar.content-between > div {
  display: flex;
}
.plataform-list-toolbar.-white {
  background-color: var(--bg-plataform);
}

.plataform-page-toolbar {
  display: flex;
}

@keyframes hoverLarge {
  100% {
    transform: translateY(-20px);
  }
}
.page-title {
  display: flex;
  align-items: center;
  font-family: "Poppins";
  color: var(--text-800);
}
.page-title > header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 1.5rem;
}
.page-title > header h4 {
  margin: 0 0 4px 0;
}
.page-title > header p {
  font-size: 0.9rem;
  color: var(--text-300);
  margin: 0;
}

.page-title-icon {
  height: 50px;
  width: 50px;
  min-width: 50px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: var(--telemetrix);
  color: white;
  margin-right: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
}

input.hide-arrows {
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
  -moz-appearance: textfield;
}
input.hide-arrows::-webkit-outer-spin-button, input.hide-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.our-form-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  height: 40px;
}

.our-input {
  background: #fafafa;
  color: #222;
  height: 40px;
  width: 360px;
  padding: 6px 12px;
  padding-left: 46px;
  border-radius: 2px;
  transition: 0.15s;
}
.our-input:focus {
  border-color: var(--telemetrix);
}
.our-input:focus + label {
  color: var(--primary);
}
.our-input + label {
  transition: 0.15s;
  width: 40px;
  display: flex;
  justify-content: center;
  position: absolute;
  border-right: 1px solid rgba(0, 0, 0, 0.1333333333);
}

.system-note {
  padding: 10px;
  background: rgba(0, 0, 0, 0.0862745098);
  border-left: 4px solid;
  border-radius: 2px;
  margin-bottom: 10px;
}
.system-note > span {
  margin-bottom: 10px;
  margin-right: 10px;
  font-size: var(--text-size-100);
}
.system-note p {
  color: var(--text-300);
  margin: 0;
}
.system-note.--single-line {
  display: flex;
  align-items: center;
}
.system-note.--single-line span {
  margin-bottom: 0;
}
.system-note.neutral {
  color: var(--text-600);
  border-left-color: currentColor;
}
.system-note.neutral-erased {
  border-left-color: #888;
  color: #888;
}
.system-note.success {
  border-left-color: var(--success);
  background-color: rgba(68, 187, 85, 0.0823529412);
  color: var(--success);
}
.system-note.warning {
  border-left-color: var(--warning);
  color: var(--warning);
  background-color: rgba(var(--warning-rgb), var(--opacity-100));
}
.system-note.danger {
  border-left-color: var(--error);
  color: var(--error);
  background-color: rgba(255, 68, 85, 0.0823529412);
}
.system-note.focus {
  border-left-color: var(--primary);
  color: var(--primary);
  background-color: rgba(0, 93, 163, 0.0196078431);
}
.system-note.focus p {
  color: rgba(0, 93, 163, 0.6666666667);
  margin: 0;
}

.our-select {
  height: 40px;
  font-size: 1.2rem;
  margin-right: 10px;
  padding: 4px 8px;
  cursor: pointer;
  color: #333;
  border-radius: 2px !important;
  background: #fff !important;
  border: none !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  color: #555;
}
.our-select:focus {
  box-shadow: 0px 0px 0px 2px var(--bg-plataform), 0px 0px 0px 4px var(--telemetrix) !important;
}

.time-picker {
  font-family: "Poppins";
  height: 40px;
  background: rgba(255, 255, 255, 0);
  border-radius: 2px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  margin: 10px 10px 10px 0px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.time-picker .title {
  width: auto;
  height: 100%;
  background: var(--secondary);
  color: white;
  padding: 0px 10px;
  display: flex;
  align-items: center;
}
.time-picker .timer {
  display: flex;
  align-items: center;
  padding: 10px;
}
.time-picker span {
  font-size: 16px;
  color: #222;
  display: block;
}
.time-picker input {
  height: 40px;
  width: 160px;
  cursor: pointer;
}
.time-picker input:hover {
  background: #f4f4f4;
}
.time-picker select {
  padding: 4px 6px;
  background: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
  -moz-text-align-last: center;
       text-align-last: center;
  cursor: pointer;
  border-bottom: none !important;
  transition: 0.15s;
}
.time-picker select option {
  cursor: pointer;
}
.time-picker select:hover {
  background: #f4f4f4;
}
.time-picker select:focus {
  border-bottom: none;
  background: #f4f4f4;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
}

.highlight-text {
  padding: 4px 8px;
  border-radius: 2px;
  line-height: 2em;
}
.highlight-text.primary {
  background-color: rgba(0, 93, 163, 0.0823529412);
  color: var(--primary);
}

#expired-plan-wave-background-image {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  padding: 0px;
}

#expired-plan-content {
  max-width: 800px;
  display: flex;
}
#expired-plan-content img {
  margin-right: 20px;
  max-width: 400px;
}
#expired-plan-content .text-content-div {
  max-width: 400px;
  background: rgba(255, 255, 255, 0.9333333333);
  padding: 20px;
  margin-bottom: 20px;
  border-left: 4px solid var(--error);
  border-radius: 4px;
}
#expired-plan-content .text-content-div h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px 0;
}
#expired-plan-content .text-content-div h2 .expired {
  padding: 0 2px;
  background-color: var(--error);
  color: #fff;
}
#expired-plan-content .text-content-div p {
  text-align: justify;
}
#expired-plan-content .action-buttons {
  display: flex;
  justify-content: end;
  border-left: 4px solid var(--error);
  border-radius: 4px;
}
#expired-plan-content .action-buttons button + button {
  margin-left: 6px;
}

@media screen and (max-width: 768px) {
  #expired-plan-wave-background-image {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 260px;
  }
  #expired-plan-content {
    max-width: 300px;
    display: block;
    padding: 0px;
    position: relative;
  }
  #expired-plan-content:before {
    content: "";
    width: calc(100% + 40px);
    height: 280px;
    position: absolute;
    left: -20px;
    bottom: -20px;
    background: var(--error);
    z-index: -1;
  }
  #expired-plan-content img {
    margin-right: 0px;
    margin-bottom: 10px;
    max-width: 100%;
  }
  #expired-plan-content div:last-child {
    isolation: isolate;
  }
  #expired-plan-content .text-content-div {
    z-index: 10;
    max-width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: -40px;
    border: none;
    padding-top: 14px;
  }
  #expired-plan-content .text-content-div h2 {
    font-size: 20px;
  }
}
#form-send-license {
  width: -moz-fit-content;
  width: fit-content;
  height: 40px;
  width: 320px;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
}
#form-send-license input {
  height: 40px;
  width: 100%;
  border-radius: 0px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  padding: 6px 12px 6px 48px;
  background: #fff;
  border: 1px solid transparent;
  transition: 0.15s ease-in-out;
  font-family: "Poppins";
  color: #333;
  font-size: 16px;
}
#form-send-license input:focus {
  border: 1px solid var(--secondary);
}
#form-send-license input:focus ~ div {
  color: var(--secondary);
}
#form-send-license > .icon {
  transition: 0.15s ease-in-out;
  position: absolute;
  width: 40px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1333333333);
}
#form-send-license > button {
  height: 40px;
  width: 40px;
  position: absolute;
  right: 10px;
  background: rgba(0, 0, 0, 0);
  transition: 0.15s ease-in-out;
}
#form-send-license > button:hover {
  background: rgba(0, 0, 0, 0.1333333333);
}

.divider {
  background: rgba(0, 0, 0, 0.0666666667);
  height: 2px;
  flex: 1;
  margin: 20px 0px;
}

#redeem-license {
  font-family: "Poppins";
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  border: solid 0px;
  border-width: 0px 0px 0px 6px;
}
#redeem-license .header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
#redeem-license .header .plano-label {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  color: #fff;
  font-size: 18px;
}
#redeem-license .header .cc {
  margin-left: 10px;
}
#redeem-license .cc {
  padding: 4px 10px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1333333333);
  color: #444;
}
#redeem-license .cc span {
  margin-right: 10px;
}
#redeem-license .body {
  background: #f4f4f4;
  padding: 10px;
  display: flex;
  align-items: center;
}
#redeem-license .body p {
  margin: 0;
  font-size: 18px;
}
#redeem-license .body .material-icons {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  #form-send-license {
    width: 100%;
  }
  #redeem-license {
    border-width: 6px 0px 0px 0px;
    padding: 20px;
  }
  #redeem-license .header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  #redeem-license .header .plano-label {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  #redeem-license .header .cc {
    margin: 0;
    margin-top: 10px;
  }
  #redeem-license .cc {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #redeem-license .body {
    flex-direction: column;
  }
  #redeem-license .body p {
    margin-bottom: 10px;
  }
}
#body {
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
}

#header-c {
  width: 100%;
  height: 340px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - 20px));
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% calc(100% - 20px));
}

#body-c {
  width: 100%;
  padding: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: grid;
  grid-template-areas: "msg-confirm img" "msg-email img";
}
#body-c img {
  height: 60vh;
  -o-object-fit: contain;
     object-fit: contain;
  grid-area: img;
}
#body-c .msg-concluido {
  grid-area: msg-confirm;
  font-family: "Poppins";
  color: white;
  padding: 40px;
}
#body-c .msg-concluido.erro {
  color: #000;
}
#body-c .msg-concluido h2 {
  font-size: 56px;
  font-weight: 600;
}
#body-c .msg-concluido .separator {
  width: 240px;
  height: 2px;
  margin: 20px 0px;
  background: #fff;
}
#body-c .msg-concluido p {
  font-size: 18px;
  width: 420px;
}
#body-c .msg-email {
  grid-area: msg-email;
  width: -moz-fit-content;
  width: fit-content;
  height: 100px;
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
  font-family: "Poppins";
  margin-left: -40px;
  padding-left: 40px;
}
#body-c .msg-email div {
  width: 100%;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#body-c .msg-email div b {
  font-size: 20px;
}

.table-tipos td > input, select, textarea {
  box-shadow: none;
  background: rgba(0, 0, 0, 0.0666666667);
  border-radius: 0px;
  border: 0;
  outline: none !important;
  border-bottom: 2px solid transparent;
  transition: 0.25s;
}

.container_table {
  position: relative;
  flex-grow: 1;
}

.container_table:first-child {
  margin-right: 10px;
  width: 70%;
}

.container_table:last-child {
  margin-right: 10px;
  width: calc(30% - 10px);
}

.table-tipos select {
  width: 100%;
  height: 40px;
  cursor: pointer;
  border: 0;
  text-align: center;
}

.table-tipos textarea {
  width: 100%;
  border: 0;
  text-align: left;
}

.header_tables {
  width: 100%;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_tables button {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 0;
  background: #47f;
  color: #fff;
  font-size: 24px;
  font-weight: bolder;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2666666667);
  outline: 0;
}

.save_button {
  background-color: #0a2;
  font-size: 18px;
  color: #fff;
  border: 0;
}

#save_tipos_button {
  display: none;
  width: 60px;
}

.category_actions {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
}

.button_action {
  width: 45px;
  height: 41px;
  position: relative;
  border: 0;
  border-radius: 5;
  box-shadow: 0px 4px 0px #b12;
  color: #fff;
  outline: 0;
  transition: 0.15s;
}

.button_action:active {
  box-shadow: 0px 0px 0px #b12;
  transform: translateY(4px);
}

.button_action.delete {
  background: #f23;
}

.button_action.edit {
  background: #fd3;
}

.input_name {
  width: 250px;
  height: 40px;
}

.input_ev_numb {
  width: 50px;
  height: 40px;
  text-align: center;
}

.form_events {
  width: 100%;
  height: auto;
  display: none;
  position: relative;
  z-index: 1;
  border-radius: 5px;
  background: #fff;
  margin-bottom: 10px;
}

.header_form_events {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1b4370;
  background: linear-gradient(90deg, #1b4370 13%, #1b5485 63%);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 0 10px;
  color: #fff;
  font-size: 16px;
}

.body_form_events {
  min-height: 70px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 10px;
}

#input_block_cat {
  width: 100%;
  height: 40px;
  display: flex;
}

.save_button_form {
  width: 60px;
  height: 40px;
  box-shadow: 0 0 4px #0b2;
  margin: 0;
  padding: 0;
}

#save_category_button {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#category_name {
  width: calc(100% - 60px);
  height: 40px;
  border: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2666666667);
  padding: 0 5px;
  border-radius: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.close_form_events {
  width: 30px;
  height: 30px;
  display: flex;
  background-color: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #fff;
  font-size: 14px;
  transition: 0.15s ease-in;
  outline: 0;
}

#close_form_new_category:hover {
  background: rgba(255, 255, 255, 0.1333333333);
  color: #f23;
}

#input_block_type {
  display: flex;
  justify-content: space-between;
}

.ev_inp {
  flex-grow: 1;
  height: 40px;
  border: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2666666667);
  padding: 0 5px;
  border-radius: 0px;
  margin-right: 10px;
}

textarea {
  resize: vertical !important;
}

#ev_category {
  background: #fff;
  cursor: pointer;
}

#ev_numb {
  max-width: 50px;
}

#save_category_button {
  border-radius: 0px 5px 5px 0px;
}

#save_type_button {
  border-radius: 5px;
}

.container_table td {
  max-width: 200px;
}

.ev_inp.error {
  box-shadow: 0 0 4px #f23;
}

#newTypeErrorMessage {
  position: absolute;
  left: 10px;
  bottom: 0;
  margin: 0;
  color: #f23;
  font-size: 14px;
  font-weight: 700;
}

.container_table:first-child {
  max-width: 70%;
}

.table-tipos td:first-child {
  width: 90px;
}

.table-tipos td {
  width: auto;
}

.cond_rev_name {
  max-width: 360px;
  position: relative;
}

.tooltip_alt {
  position: relative;
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -10px;
  left: 0px;
}

/* Tooltip text */
.tooltip_alt .tooltipText {
  visibility: hidden;
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgba(0, 0, 0, 0.8666666667);
  color: #fff;
  padding: 6px;
  border-radius: 5px;
  left: 0px;
  top: 40px;
  font-size: 16px;
  position: absolute;
  z-index: 1;
}
.tooltip_alt .tooltipText:after {
  display: block;
  width: 10px;
  height: 10px;
  background: #f23;
}
.tooltip_alt .tooltipText span {
  font-size: 12px;
  font-style: italic;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip_alt:hover .tooltipText {
  visibility: visible;
}

.cond_rev_name div {
  width: 100%;
  font-family: "Poppins";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cond_rev_name div:first-child {
  font-size: 16px;
}

.cond_rev_name div.rev {
  font-style: italic;
  font-size: 12px;
}

.td_contato {
  max-width: 360px;
}

.c_input {
  max-width: 100px;
  padding: 0px 10px;
  text-align: center;
  position: relative;
}
.c_input div {
  display: flex;
  justify-content: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1333333333);
}
.c_input div span {
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  left: 5px;
}
.c_input .max_apt_input {
  width: 100%;
  height: 30px;
  border: 0;
  background: rgba(0, 0, 0, 0.0666666667);
  text-align: center;
}

.plan-clients-table {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  color: #222;
  background: transparent;
  border: 1px solid currentColor;
  transition: 0.15s;
}
.plan-clients-table:hover {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1333333333), 0px 0px 8px rgba(0, 0, 0, 0.1333333333) inset;
}
.plan-clients-table div {
  padding: 6px;
  margin-left: 10px;
  border-radius: 20px;
  background: transparent;
  transition: 0.15s;
}
.plan-clients-table div span {
  font-size: 24px;
}

#plano-displayer {
  height: 40px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  border-radius: 3px;
}

#show-planos {
  width: 380px;
  max-height: 0px;
  height: -moz-fit-content;
  height: fit-content;
  border-top: 1px solid rgba(0, 0, 0, 0.1333333333);
  padding-top: 20px;
  margin-top: 20px;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
  transition: max-height 0.8s ease-in;
}
#show-planos.open {
  max-height: 1000px;
}
#show-planos button {
  height: 40px;
  width: 120px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.1333333333);
  color: #666;
  border-top: 2px solid #666;
  transition: 0.15s;
}
#show-planos button:hover {
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2666666667);
}

.add-coupon {
  background: #fff;
}

#add_cupon {
  width: 100%;
  height: 0px;
  opacity: 0;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #f4f4f4;
  outline: none !important;
  overflow: hidden;
  transition: opacity 0.25s, height 0.15s ease-out;
}

#add_cupon.open {
  height: 330px;
  opacity: 1;
  transition: opacity 0.15s, height 0.25s ease-in;
}

#button_randomize_coupon {
  height: 30px;
  width: 30px;
  position: absolute;
  right: 0px;
  border-radius: 15px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #aaa;
  background: rgba(204, 204, 204, 0);
  transition: 0.15s;
}

#button_randomize_coupon:hover {
  background: rgba(0, 0, 0, 0.1);
}

#button_randomize_coupon.loading {
  background: rgba(0, 0, 0, 0.1);
  animation: Looping 0.7s linear infinite;
  -webkit-animation: Looping 0.7s linear infinite;
}

@keyframes Looping {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
#select_type_discount {
  width: 60px;
  padding: 0px 10px;
  background: #ddd;
  border: 0;
  border-bottom: 2px solid #ccc;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none !important;
  font-weight: bold;
  font-family: "Roboto";
}

#select_discount_group:focus-within > #select_type_discount {
  background: rgba(27, 67, 112, 0.062745098);
  border-bottom: 2px solid #1b4370;
}

#select_plano_coupon {
  flex: 1;
  height: 40px;
  margin-left: 10px;
  background: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #ccc;
  font-weight: bold;
  font-family: "Roboto";
  box-shadow: none !important;
  cursor: pointer;
}

.icon-container {
  flex: 1;
  max-width: -moz-fit-content;
  max-width: fit-content;
  min-height: 36px;
  padding: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
}
.icon-container span {
  margin-right: 6px;
}

.date_input_coupon {
  border: none;
  height: 36px;
  width: calc(50% - 36px);
}

.date_input_coupon {
  -webkit-appearance: none;
}

.date_input_coupon::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

.licencas-lote-block {
  height: 40px;
  display: flex;
}
.licencas-lote-block .name {
  border: 1px solid #eee;
  padding: 6px 12px;
  border-radius: 0px;
  transition: 0.15s ease-in-out;
  margin-left: 10px;
  background: transparent;
}
.licencas-lote-block .name > option {
  color: #333;
}
.licencas-lote-block .name:hover, .licencas-lote-block .name:focus {
  border-color: #ddd;
}
.licencas-lote-block .name::-moz-placeholder {
  color: #bbb;
}
.licencas-lote-block .name::placeholder {
  color: #bbb;
}
.licencas-lote-block .name:valid {
  color: var(--secondary);
  border: 1px solid var(--secondary);
}
.licencas-lote-block .name:first-child {
  width: 200px;
  margin-left: 0px;
}
.licencas-lote-block select {
  cursor: pointer !important;
}
.licencas-lote-block select option {
  cursor: pointer !important;
}
.licencas-lote-block #tamanho-lote {
  width: 80px;
}

#license-preview {
  border-left: 4px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  position: relative;
  border-radius: 4px;
}
#license-preview #license-header {
  color: #333;
  margin-bottom: 10px;
}
#license-preview #license-header h2 {
  font-size: 20px;
}
#license-preview #license-header h2 span {
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 20px;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  font-size: 14px;
}
#license-preview #license-header p {
  color: #a7a7a7;
  font-size: 12px;
}
#license-preview #license-date span {
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.031372549);
  color: #666;
}
#license-preview p {
  margin: 0;
}
#license-preview .lote {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #a7a7a7;
}

.license-item {
  width: 100%;
  height: auto;
  padding: 10px;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  border-left: 0px solid;
  font-family: "Poppins";
  font-size: 18px;
}
.license-item .license-item-info {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.license-item .license-item-info div {
  padding: 10px;
  height: 100%;
  display: flex;
  align-items: center;
}
.license-item .license-item-info div p {
  margin: 0 10px 0 0;
  color: #aaa;
  font-size: 14px;
}
.license-item .license-item-info div button {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  transition: 0.15s ease-in-out;
}
.license-item .license-item-info div button:hover {
  background: rgba(0, 0, 0, 0.0392156863);
}
.license-item .license-item-info .license-plano {
  padding: 4px 8px;
  color: white;
  margin-left: 10px;
  border: 2px solid;
  margin-right: 10px;
}
.license-item .license-open-children span {
  transition: 0.15s ease-in-out;
}
.license-item .license-open-children.open span {
  color: var(--secondary);
  transform: rotate(-180deg);
}
.license-item .children {
  width: 100%;
  height: 0px;
  overflow: auto;
  opacity: 0;
  transition: 0.15s ease-in-out;
  background: #eee;
}
.license-item .children.open {
  height: 180px;
  opacity: 1;
}
.license-item .children div {
  margin: 0px 10px 10px 10px;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  font-size: 14px;
  border-left: 4px solid var(--secondary);
}
.license-item .children div.burnt {
  background: #f4f4f4;
  color: #666;
  border-left-color: #666 !important;
}
.license-item .children div.burnt span {
  padding: 4px 10px;
  border: 1px solid rgba(102, 102, 102, 0.6666666667);
  margin-left: 10px;
}
.license-item .children div:first-child {
  margin-top: 10px;
}

#modal-export-licenses-body {
  width: 460px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
#modal-export-licenses-body a {
  flex: 1;
  text-decoration: none;
  color: #222;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  padding: 8px 8px 8px 46px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: 0.15s ease-in-out;
}
#modal-export-licenses-body a span {
  position: absolute;
  top: 0;
  height: 36px;
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-export-licenses-body a span:first-child {
  left: 0;
  color: white;
  background: var(--secondary);
  opacity: 0.85;
  transition: 0.15s ease-in-out;
}
#modal-export-licenses-body a span:last-child {
  right: 0px;
}
#modal-export-licenses-body a:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  transform: translateY(-4px);
}
#modal-export-licenses-body a:hover span {
  opacity: 1;
}
#modal-export-licenses-body a:hover span:last-child {
  color: var(--primary);
}
#modal-export-licenses-body a:active {
  transform: translateY(4px);
}
#modal-export-licenses-body a + a {
  margin-left: 10px;
}

.admin-dashboard-row {
  color: #333;
  display: flex;
}
.admin-dashboard-row h3 {
  margin: 0;
  margin-right: 20px;
  font-size: 18px;
}

.admin-dashboard-panel {
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  padding: 10px;
  width: -moz-fit-content;
  width: fit-content;
  flex: 1;
}
.admin-dashboard-panel.m-4 {
  max-width: calc(40% - 10px);
}
.admin-dashboard-panel.m-5 {
  max-width: calc(50% - 10px);
}
.admin-dashboard-panel.m-6 {
  max-width: calc(60% - 10px);
}
.admin-dashboard-panel .tags {
  width: 100%;
  margin-top: 20px;
  padding: 0 10px;
  height: 40px;
  display: flex;
}
.admin-dashboard-panel .tags .tag {
  position: relative;
  padding: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  border-radius: 2px;
  border-left: 4px solid currentColor;
  flex: 1;
  margin-right: 10px;
}
.admin-dashboard-panel .tags .tag span + span {
  margin-left: 10px;
}
.admin-dashboard-panel .tags .tag:last-child {
  margin: 0;
}
.admin-dashboard-panel .tags .tag.up {
  color: var(--success);
}
.admin-dashboard-panel .tags .tag.down {
  color: var(--error);
}
.admin-dashboard-panel .tags .tag.neutral {
  color: #666;
}

.admin-dashboard-panel + .admin-dashboard-panel {
  margin-left: 20px;
}

.panel-title {
  font-size: 14px;
}
.panel-title > header {
  margin-left: 10px;
}

#admin_dashboard {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dashboard_column {
  width: 32%;
  height: auto;
}

.dashboard_info {
  width: 100%;
  border-radius: 0px;
  height: -moz-fit-content;
  height: fit-content;
  padding: 10px;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
  border-left: 6px solid var(--primary);
  margin-bottom: 20px;
  font-family: "Poppins";
}
.dashboard_info:last-child {
  margin-bottom: 0;
}
.dashboard_info header {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 24px;
}
.dashboard_info header h3 {
  font-weight: 600px;
  font-size: 24px;
  display: flex;
  align-items: center;
}
.dashboard_info header h3 span {
  font-size: 24px;
  color: var(--primary);
  margin-right: 10px;
}
.dashboard_info header a {
  width: 40px;
  height: 40px;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--primary);
  background-color: rgba(27, 67, 112, 0);
  transition: 0.15s;
}
.dashboard_info header a span {
  font-size: 24px;
}
.dashboard_info header a:hover {
  background: rgba(27, 67, 112, 0.062745098);
}
.dashboard_info section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dashboard_info section div {
  display: flex;
  align-items: center;
}
.dashboard_info section span {
  margin: 0px 10px;
  color: #333;
  font-size: 16px;
}
.dashboard_info section .button_details {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary);
  background-color: rgba(27, 67, 112, 0.062745098);
  transition: 0.15s;
}
.dashboard_info section .button_details.open span {
  transform: rotate(180deg);
}
.dashboard_info section .button_details span {
  font-size: 24px !important;
  transition: 0.15s ease-in-out;
}
.dashboard_info section .button_details:hover {
  background: rgba(27, 67, 112, 0.062745098);
}
.dashboard_info .details_panel {
  width: 100%;
  height: 0px;
  padding: 0px;
  justify-content: center;
  align-items: center;
  color: var(--primary);
  background-color: rgba(27, 67, 112, 0.062745098);
  overflow: hidden;
  transition: 0.15s ease-in-out;
}
.dashboard_info .details_panel.open {
  height: 120px;
}

#equip-config-modal-body {
  width: 940px;
  max-width: 90vw;
}

.config-separator {
  width: 100%;
  height: 1px;
  background: var(--text-100);
  margin: var(--spacing-medium) 0;
}

.banda div {
  height: 40px;
  background: var(--pinaculo);
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  padding: 0px 5px;
}
.banda div button {
  background: transparent;
  height: 30px;
  width: 54px;
  border-radius: 2px;
  z-index: 1;
  transition: 0.15s;
}
.banda div button.active {
  background: #fff;
  color: var(--pinaculo);
}

#equip-info-block {
  width: 100%;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.0666666667);
  border-radius: 5px;
}
#equip-info-block > .title {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
  margin-bottom: 10px;
}
#equip-info-block > .title span {
  margin-right: 10px;
}
#equip-info-block > .title h4 {
  margin: 0;
}

#equip-info-data {
  height: auto;
  padding: 10px 0px;
}
#equip-info-data h5 {
  background: rgba(0, 0, 0, 0.031372549);
  border-left: 4px solid #666;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px 0;
  display: flex;
  justify-content: space-between;
}
#equip-info-data h5:last-child {
  margin-bottom: 0;
}

.equip-info {
  max-width: 120px;
  height: 100%;
  margin-left: 40px;
}
.equip-info .header {
  height: 48px;
  width: 100%;
  border-bottom: 1px solid var(--pinaculo);
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.equip-info .header > div {
  width: 120px;
  height: 48px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--pinaculo);
  z-index: 1;
  border: 1px solid var(--pinaculo);
  border-bottom-color: #fff;
  border-radius: 2px 2px 0px 0px;
}
.equip-info .body {
  width: 100%;
  height: calc(100% - 88px);
  border: 1px solid var(--pinaculo);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.equip-info .body h4 {
  color: var(--pinaculo);
  margin: 0px 0px 10px 0px;
}
.equip-info #signal-label {
  color: var(--pinaculo);
  font-size: 14px;
  font-weight: 400;
  display: flex;
  margin-bottom: 10px;
}
.equip-info #signal-container {
  width: 40px;
  height: calc(100% - 60px);
  background: rgba(27, 67, 112, 0.062745098);
  overflow: hidden;
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
}
.equip-info .empty {
  border: 2px dashed rgba(0, 0, 0, 0.2666666667);
}
.equip-info #signal {
  width: 40px;
  background: rgba(0, 0, 0, 0.0666666667);
  border-radius: 5px 5px 0px 0px;
  transition: height 0.25s ease-in, background-color 0.1s;
}

#equip-config-block-save-changes {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, 0.0666666667);
}

#container-ultima-atualizacao h4 {
  font-size: 16px;
  margin: 0;
}
#container-ultima-atualizacao h4 > span {
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1254901961);
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
}
#container-ultima-atualizacao h4 > span button {
  background: transparent;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
#container-ultima-atualizacao h4 > span button:hover {
  background-color: rgba(0, 0, 0, 0.0666666667);
}

#equip-config-queue {
  display: flex;
  align-items: center;
  position: relative;
}
#equip-config-queue:focus > #equip-config-queue-modal, #equip-config-queue:focus-within > #equip-config-queue-modal,
#equip-config-queue #equip-config-queue-modal:hover {
  display: block;
}
#equip-config-queue #equip-config-queue-modal {
  top: -340px;
  right: -120px;
  position: absolute;
  width: 320px;
  height: 320px;
  padding: 10px;
  background: #eee;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2666666667);
  border-radius: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  transition: 0.15s;
}
#equip-config-queue #equip-config-queue-modal::-webkit-scrollbar {
  width: 4px;
}
#equip-config-queue #equip-config-queue-modal::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5333333333);
  border-radius: 4px;
  width: 4px;
}
#equip-config-queue #equip-config-queue-modal > div {
  width: 100%;
  height: 40px;
  padding: 4px 8px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2666666667);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
}
#equip-config-queue #equip-config-queue-modal > div .event-holder {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#equip-config-queue #equip-config-queue-modal > div .event-holder span {
  margin-right: 8px;
}
#equip-config-queue #equip-config-queue-modal > div.event-separator {
  height: 20px;
  padding: 0px;
  font-size: 14px;
  color: #aaa;
  box-shadow: unset;
  align-items: center;
  background: transparent;
}
#equip-config-queue #equip-config-queue-modal > div.event-separator > span {
  flex: 1;
  height: 2px;
  background: #ddd;
  margin-left: 10px;
}
#equip-config-queue #equip-config-queue-modal > div.error {
  background: var(--error);
  color: #fff;
}
#equip-config-queue #equip-config-queue-modal > div.error.removed {
  animation: removeThis 0.5s;
  animation-fill-mode: forwards;
}
#equip-config-queue #equip-config-queue-modal > div:last-child {
  margin-bottom: 0px;
}

@keyframes removeThis {
  0% {
    transform: translate(0px, 0px);
    height: 40px;
  }
  40% {
    transform: translate(230px, 0px);
    height: 40px;
  }
  100% {
    transform: translate(230px, 0px);
    height: 0px;
    padding: 0;
  }
}
input[type=range] {
  -webkit-appearance: none;
  background-color: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  height: 1.2rem;
  width: 1.2rem;
  box-shadow: 0px 0px 0px 0.5rem rgba(var(--secondary-rgb), 0.1);
  border-radius: 12px;
  background: var(--fade-d);
  cursor: pointer;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  -webkit-transition: 0.15s var(--transition-overshoot);
  transition: 0.15s var(--transition-overshoot);
}
input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0px 0px 0px 0.5rem rgba(var(--secondary-rgb), 0.25);
}
input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.2);
  box-shadow: 0px 0px 0px 0.8rem rgba(var(--secondary-rgb), 0.25);
}

.equipment-version-warning {
  width: 100%;
  height: 100%;
  cursor: help;
  position: relative;
}

.equipment-card-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.equipment-card-container + .equipment-card-container {
  margin-top: var(--spacing-medium);
}
.equipment-card-container > * + * {
  margin-left: var(--spacing-large);
}
.equipment-card-container > button {
  padding: var(--spacing-medium);
  background-color: #f4f4f4;
  border-radius: var(--spacing-medium);
  box-shadow: var(--shadow-medium);
  color: var(--text-700);
  transition: 0.15s;
}
.equipment-card-container > button:hover {
  box-shadow: var(--shadow-large);
  transform: translateY(-4px);
  color: var(--text-900);
}

.equipment-card {
  flex: 1;
  max-width: calc(100% - 7rem);
  padding: var(--spacing-large);
  background-color: white;
  box-shadow: var(--shadow-medium);
  border-radius: var(--spacing-tiny);
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;
}
.equipment-card.success {
  border-color: var(--success);
}
.equipment-card.warning {
  border-color: var(--warning);
}
.equipment-card.error {
  border-color: var(--error);
}
.equipment-card .title-block {
  width: 25%;
}
.equipment-card .title-block > * {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.equipment-card .title-block h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-700);
  margin: 0;
  margin-bottom: var(--spacing-small);
}
.equipment-card .title-block p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--text-200);
}
.equipment-card .status-info {
  display: flex;
}

.status-item .panel-title header {
  width: 140px;
}
.status-item .panel-title header h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-item .header-status-tag {
  font-family: "Poppins";
  font-size: 14px;
  color: #333;
  border: 1px solid #aaa;
  border-radius: 20px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  position: relative;
}
.status-item .header-status-tag span:first-child {
  margin-right: 10px;
  font-size: 18px;
}

#msg-unbind-phone {
  visibility: hidden;
  opacity: 0;
  max-height: 0px;
  transition: 0.15s;
  overflow: hidden;
  padding: 0 10px;
}
#msg-unbind-phone.open {
  visibility: visible;
  opacity: 1;
  max-height: 100px;
  padding: 10px;
}

#list-contacts {
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
}

#grid-contacts {
  min-width: min(100%, 440px);
  width: -moz-fit-content;
  width: fit-content;
  border-top: 1px solid #ccc;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: "Poppins";
}
#grid-contacts .table-heading {
  color: #222;
}
#grid-contacts div {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-width: 0px 1px 1px 0px;
}
#grid-contacts div:nth-child(4n-3) {
  border-left-width: 1px;
}

.form-add-contacts {
  display: flex;
  margin-bottom: 10px;
}
.form-add-contacts input {
  height: 40px;
  border-radius: 2px;
  padding: 6px 12px;
  color: #666;
  background: #fff;
  border: 1px solid #aaa;
  margin-right: 10px;
  transition: 0.15s ease-in-out;
}
.form-add-contacts input:focus {
  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px var(--telemetrix);
  color: #222;
  border-color: var(--secondary);
}

.add-contacts .testing {
  width: 40px;
  height: 40px;
  border: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#contacts {
  width: auto;
  display: flex;
  margin-top: 20px;
}
#contacts > div {
  border: 1px solid rgba(0, 0, 0, 0.2666666667);
  background: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  height: 64px;
  padding: 10px;
  width: 160px;
  border-radius: 2px;
}
#contacts > div + div {
  margin-left: 10px;
}
#contacts > div > .header {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#contacts > div > .header button {
  padding: 0px;
  border-radius: 50%;
}
#contacts > div > .header button:hover {
  background: #ddd;
  color: var(--error);
}
#contacts > div > .header span {
  font-size: inherit;
}
#contacts > div > .header h6 {
  margin: 0;
}
#contacts > div > .body {
  margin-top: 4px;
  font-size: 18px;
  color: #444;
}

#add-contacts {
  height: 0px;
  display: none;
  transition: 0.25s ease-out;
}
#add-contacts.open {
  display: block;
  height: -moz-fit-content;
  height: fit-content;
}

.header-divider {
  display: flex;
  align-items: center;
  margin: 20px 0px;
}
.header-divider h5 {
  margin: 0 20px 0 0;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins";
  color: #aaa;
}
.header-divider div {
  flex: 1;
  height: 2px;
  background: rgba(0, 0, 0, 0.1333333333);
}

#novo-apartamento-result {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 200;
}

#apartamento-existente {
  height: 0px;
  opacity: 0;
  overflow: hidden;
  padding: 0 10px;
  transition: 0.15s ease-in-out;
}
#apartamento-existente.open {
  height: 74px;
  opacity: 1;
  padding: 10px;
}

@media screen and (max-width: 768px) {
  #list-contacts {
    width: 100%;
  }
  #grid-contacts {
    grid-template-columns: repeat(3, 1fr);
    font-size: 1.2rem;
  }
  #grid-contacts div:nth-child(4n-2) {
    border-left-width: 1px;
  }
  #grid-contacts .icon-button {
    height: 32px;
    width: 32px;
  }
  #grid-contacts .icon-button span {
    font-size: 16px;
  }
  .form-add-contacts {
    flex-direction: column;
  }
  .form-add-contacts input, .form-add-contacts button {
    width: 100%;
  }
  .form-add-contacts input + input {
    margin-top: 10px;
  }
  .form-add-contacts .table-select-box-with-label, .form-add-contacts button {
    margin-bottom: 10px;
  }
  .campo-ordem {
    display: none !important;
  }
}
.form-add-responsible-email {
  width: calc(100% - 0px);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8666666667);
  position: relative;
}

#background-image-add-responsible-email {
  position: absolute;
  width: 100%;
}

#loading-validate-responsible-email {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1333333333);
  border-radius: 4px;
  margin: 10px 0;
  width: 100%;
  padding: 20px;
  top: 10px;
  display: none;
}

#responsible-email-success {
  position: relative;
  background: #fff;
  width: 100%;
  display: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  max-width: 100%;
}

#responsible-email-error {
  position: relative;
  background: #fff;
  width: 100%;
  display: none;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1333333333);
  max-width: 100%;
}

#related-email-displayer {
  display: none;
  align-items: center;
  padding: 0px 8px;
  border: 1px solid #222;
  color: #222;
}
#related-email-displayer > span.material-icons {
  margin-right: 8px;
}

#email-holder {
  margin-right: 20px;
}

.list-related-email {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  background: #ddd;
  color: #666;
}
.list-related-email span {
  margin-right: 6px;
}

.list-tag {
  padding: 8px 12px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}
.list-tag span {
  margin-right: 6px;
}
.list-tag.neutral {
  background-color: rgba(0, 0, 0, 0.0666666667);
  color: #666;
}
.list-tag.error {
  background: rgba(255, 68, 85, 0.1254901961);
  color: var(--error);
}
.list-tag.primary {
  background: rgba(0, 93, 163, 0.062745098);
  color: var(--primary);
}
.list-tag.success {
  background: rgba(68, 255, 85, 0.1254901961);
  color: var(--success);
}

.list-link {
  text-decoration: none !important;
}

.home-dashboard {
  display: flex;
  flex-wrap: wrap;
}
.home-dashboard > a {
  width: 280px;
  height: 156px;
  text-decoration: none !important;
  margin: 0px 10px 10px 0px;
}
.home-dashboard > a:last-child {
  margin-right: 0px;
}
.home-dashboard .dashboards_box {
  width: 100%;
  height: 100%;
  margin: 0;
}
.home-dashboard .dashboards_box:active {
  height: calc(100% - 10px);
  margin-top: 10px;
}

input[type=date]::-webkit-datetime-edit-text {
  padding: 0 6px;
}

input[type=date]::-webkit-datetime-edit-month-field {
  text-transform: uppercase;
}

input[type=date]::-webkit-datetime-edit-day-field {
  text-transform: uppercase;
}

input[type=date]::-webkit-datetime-edit-year-field {
  text-transform: uppercase;
}

#info_senha {
  text-align: right;
}

.select-time-picker {
  min-width: 60px;
  background-color: rgba(0, 0, 0, 0.0196078431) !important;
  border-bottom: 1px solid var(--secondary) !important;
  padding: 0 var(--spacing-tiny) !important;
  height: 100%;
}

#senhas-list {
  display: block;
  font-family: "Poppins";
  color: #222;
}

.senha {
  width: 100%;
  height: auto;
  margin-bottom: 4px;
  background: #fff;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1333333333);
  border-left: 10px solid var(--secondary);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.senha .header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.senha .header .header-tags {
  display: flex;
  align-items: center;
}
.senha .header .header-tags > * {
  margin-right: 20px;
}
.senha .header h4 {
  font-size: 18px;
  margin: 0;
  height: 24px;
  font-weight: 400;
}
.senha .header .type-indicator {
  color: var(--secondary);
  margin-right: 20px;
}
.senha .header .header-tag {
  height: 40px;
  padding: 0 10px;
  font-size: 16px;
  color: var(--secondary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  margin: 0 0 0 10px;
}
.senha .header .valor-senha {
  background: rgba(0, 110, 180, 0.1450980392);
  min-width: 120px;
  justify-content: center;
  font-weight: 500;
  font-size: 20px;
}
.senha .header .saida-senha {
  border: 1px solid var(--secondary);
}
.senha .header .saida-senha span {
  margin-right: 10px;
  color: inherit;
}
.senha .header .saida-senha.neutral {
  border-color: #666;
  color: #666;
}
.senha .header .senha-action {
  color: #222;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.15s ease-in-out;
}
.senha .header .senha-action:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.0666666667);
  transform: scale(0);
  transition: inherit;
}
.senha .header .senha-action:hover {
  color: var(--secondary);
}
.senha .header .senha-action:hover:before {
  transform: scale(1);
}
.senha .body {
  margin-top: 20px;
  height: 60px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.senha .body .title {
  font-size: 14px;
  color: #666;
  top: -10px;
}

.on {
  color: #fff !important;
  background: var(--secondary) !important;
}

.body-faixa-group {
  display: flex;
  align-items: center;
  height: 40px;
  margin-right: 20px;
}

.body-tag {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--secondary);
  border: 1px solid var(--secondary);
  background: #fff;
}
.body-tag span {
  margin-right: 10px;
}

.date-tag {
  height: 40px;
}
.date-tag + .date-tag {
  margin-left: 10px;
}

.weekDaysCalendar {
  overflow: hidden;
  display: inline-flex;
  border-radius: 4px;
  background-color: var(--secondary);
  background-image: var(--fade);
}
.weekDaysCalendar .weekDay {
  font-size: var(--text-size-400);
  padding: var(--spacing-small) var(--spacing-medium);
  display: inline-grid;
  place-items: center;
  color: var(--text-info);
  background: #eee;
}
.weekDaysCalendar .weekDay.on {
  background: transparent !important;
  color: white;
}

.time-group {
  display: block;
  width: 192px;
}
.time-group .time-header {
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.time-group .time-header .time-tag {
  padding: 0 6px;
  font-size: 14px;
  height: 24px;
  display: flex;
  align-items: center;
  border-radius: 2px;
  color: white;
  background-color: var(--accent);
}
.time-group .time-header .time-tag.on {
  background-color: var(--secondary) !important;
}
.time-group .time-body {
  background: #eee;
  width: 100%;
  height: 10px;
  border-radius: 2px;
  position: relative;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1333333333);
}
.time-group .time-body .bar {
  background-image: var(--fade);
  position: absolute;
  height: 100%;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1333333333);
  top: 0;
  left: 0;
}
.time-group .time-body .bar:before {
  content: "";
  display: block;
  height: 20px;
  width: 2px;
  border-left: 1px dashed var(--secondary);
  left: 0;
  top: -5px;
  position: absolute;
}
.time-group .time-body .bar:after {
  content: "";
  display: block;
  height: 20px;
  width: 2px;
  border-left: 1px dashed var(--accent);
  left: calc(100% - 1px);
  top: -5px;
  position: absolute;
}

@media screen and (max-width: 768px) {
  .senha {
    border-left: 0;
    border-top: 10px solid var(--secondary);
  }
  .senha .header {
    height: -moz-fit-content;
    height: fit-content;
    position: relative;
  }
  .senha .header .header-tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .senha .header .header-tags h4 {
    width: 100%;
    margin-right: 0px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .senha .header .header-tags > * {
    flex-grow: 1;
    margin: 10px 10px !important;
  }
  .senha .header .actions {
    position: absolute;
    width: 80px;
    top: 0;
    right: 0;
  }
  .senha .body {
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    align-items: center;
  }
  .senha .body > .body-faixa-group {
    margin: 10px 0;
  }
  .senha .body > .body-faixa-group:first-child {
    margin-top: 20px;
  }
  .senha .body > .body-faixa-group:last-child {
    margin-bottom: 0;
  }
}
.bg-shade-100 {
  background-color: var(--background-shade-100);
}

.bg-shade-300 {
  background-color: var(--background-shade-300);
}

.bg-fade-d {
  background-image: var(--fade-d);
}

.apply\:locked-by-requirement {
  --size: 4rem;
  --angl: 135deg;
  background-color: var(--dark-background-300);
  background-image: linear-gradient(var(--angl), var(--primary), var(--accent) var(--size), rgba(var(--accent-rgb), 0.4) var(--size), var(--dark-background-300) 95%);
  border: none !important;
}

.hatch {
  --line-clr: #fff4;
  --bg-clr: transparent;
  --line-width: .5px;
  --line-gap: .5rem;
  --angle: 45deg;
  background-image: repeating-linear-gradient(var(--angle), var(--line-clr) 0, var(--line-clr) var(--line-width), transparent 0, transparent 50%);
  background-size: var(--line-gap) var(--line-gap);
  background-color: var(--bg-clr);
}

.bg-grid {
  /* === Variables === */
  --bg-color: #0f0f0f;
  --line-color: rgba(255, 255, 255, 0.35);
  --line-size: 2px;
  --grid-size: 24px;
  --grid-angle: 0deg;
  background-color: var(--bg-color);
  background-image: repeating-linear-gradient(var(--grid-angle), var(--line-color) 0 var(--line-size), transparent var(--line-size) var(--grid-size)), repeating-linear-gradient(calc(var(--grid-angle) + 90deg), var(--line-color) 0 var(--line-size), transparent var(--line-size) var(--grid-size));
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  background-position: 0 0, 0 0;
}

.sys.note {
  height: -moz-fit-content;
  height: fit-content;
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-small);
  padding: var(--spacing-medium);
  padding-right: var(--spacing-xlarge);
  background-color: rgba(var(--secondary-rgb), 0.1);
  color: var(--secondary);
  border-color: currentColor;
  border-width: 0px 0px 0px 2px;
  border-style: solid;
}
.sys.note.line {
  grid-template-columns: 3rem 1fr;
  grid-template-rows: 1fr;
}
.sys.note > span, .sys.note > .title {
  color: inherit;
}
.sys.note > span {
  font-size: var(--text-size-100);
  display: grid;
  place-items: center;
}
.sys.note > .title {
  font-size: var(--text-size-300);
}
.sys.note > p, .sys.note > .content {
  grid-column: 2;
  color: var(--text-info);
  font-size: var(--text-size-400);
}
.sys.note.warn {
  color: var(--warning);
  background-color: rgba(var(--wraning-rgb), 0.1);
}
.sys.note.alert {
  color: var(--alert);
  background-color: rgba(var(--alert-rgb), 0.1);
}
.sys.note.error {
  color: var(--error);
  background-color: rgba(var(--error-rgb), 0.1);
}
.sys.note.success {
  color: var(--success);
  background-color: rgba(var(--success-rgb), 0.1);
}
.sys.note.neutral {
  color: var(--text-headings);
  background-color: var(--background-shade-300);
}
.sys.note.transparent {
  color: var(--text-headings);
  background-color: transparent;
  border-color: transparent;
}
.sys.note.white {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1254901961);
}

::-webkit-scrollbar-thumb {
  width: 4px;
  height: 4px;
  background: var(--text-100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-200);
}

nav.navbar {
  height: 100%;
  background-color: var(--background-shade-100);
  box-shadow: var(--shadow-large-size) rgba(0, 0, 0, 0.0666666667);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-700);
  font-size: var(--font-size-large);
}

nav.mobile-navbar {
  width: 100vw;
  z-index: 10;
  background-color: var(--background-shade-100);
}
nav.mobile-navbar > div:first-child {
  background: var(--dark-background-300);
}
nav.mobile-navbar > :last-child {
  padding: var(--spacing-medium) 0;
  padding-bottom: 0;
  box-shadow: 0 2px 16px -8px rgba(0, 0, 0, 0.1333333333);
}
nav.mobile-navbar .accounts {
  height: auto;
  padding: 0 !important;
}
nav.mobile-navbar .accounts .account {
  padding: var(--spacing-medium) var(--spacing-xlarge);
}
nav.mobile-navbar img {
  max-height: 2rem;
  -o-object-fit: contain;
     object-fit: contain;
}
nav.mobile-navbar .profile-picture img {
  max-height: 3rem;
}

.nav-options {
  padding: var(--spacing-large);
}

.accounts {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}
.accounts .account {
  display: block;
  height: 100%;
  position: relative;
  padding: 0 var(--spacing-xlarge);
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.accounts .account .sutil {
  font-size: var(--text-size-500);
  color: var(--text-color-info);
  font-weight: 400;
}
.accounts .account::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--fade);
  opacity: 0;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 50% 0;
  transition: transform 0.15s;
}
.accounts .account:hover {
  background-color: var(--background-shade-200);
}
.accounts .account:hover:not(.active)::after {
  background: var(--text-100);
}
.accounts .account:hover::after, .accounts .account.active::after {
  opacity: 1;
  transform: scaleX(1);
}
.accounts .account:active {
  background-color: var(--background-shade-100);
}
.accounts .account:active::after {
  background: var(--fade);
}
.accounts .account + .account {
  border-left: 1px solid var(--background-shade-500);
}

.nav-user-card {
  height: 100%;
  padding: 0 var(--spacing-large);
  position: relative;
  z-index: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.nav-user-card .profile-picture {
  height: 100%;
}
.nav-user-card .profile-picture img {
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  border-radius: 50%;
}
.nav-user-card .pile {
  gap: 0 !important;
}

.sidebar::after {
  content: "";
  z-index: -1;
  width: 300px;
  height: 300px;
  display: block;
  border-radius: 150px;
  background: var(--fade);
  position: absolute;
  left: -100px;
  top: -100px;
  filter: blur(300px);
}

.sidebar {
  z-index: 1;
  grid-row: span 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--spacing-large) 0;
  padding-bottom: 0;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: var(--dark-background-300);
}
.sidebar img#collapsed-sidebar-logo-img {
  display: none;
}
.sidebar img#sidebar-logo-img {
  display: block;
}
.sidebar.collapsed .item .arrow {
  opacity: 0;
}
.sidebar.collapsed > header {
  display: flex;
  justify-content: center;
}
.sidebar.collapsed > header #collapsed-sidebar-logo-img {
  display: block;
}
.sidebar.collapsed > header #sidebar-logo-img {
  display: none;
}
.sidebar.collapsed > header button {
  display: none;
}
@media screen and (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    position: fixed;
    z-index: 1000;
    width: min(100%, 320px);
    height: 100%;
    transition: 0.25s ease-in;
  }
  .sidebar.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
}

.item {
  text-decoration: none;
  padding: var(--spacing-medium) var(--spacing-xlarge);
  color: var(--text-light-500);
  display: flex;
  align-items: center;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5rem;
  position: relative;
  cursor: pointer;
}
.item.notify::after {
  content: "";
  position: absolute;
  top: -0.4rem;
  right: var(--spacing-medium);
  height: 0.8rem;
  width: 0.8rem;
  border-radius: 50%;
  background-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), 0.5);
  --animation-pulsating-shadow-spread-size: 1rem;
  animation: pulsatingShadow 2s infinite;
}
.item.dropdown {
  padding: 0;
  display: block;
  margin-bottom: 0;
}
.item.dropdown header.item {
  color: inherit;
}
.item.dropdown .item {
  line-height: 1.5rem;
}
.item.dropdown .arrow {
  position: absolute;
  right: var(--spacing-medium);
  transition: 0.15s ease-in;
}
.item.dropdown.open {
  color: var(--text-100);
}
.item.dropdown.open .arrow {
  transform: rotate(180deg);
}
.item.dropdown.open .children {
  margin-bottom: var(--spacing-medium);
}
.item.dropdown:not(.open) .children {
  height: 0;
}
.item.dropdown .children {
  margin-left: 2.25rem;
  overflow: hidden;
}
.item.dropdown .children .item {
  border-left: 2px solid rgba(255, 255, 255, 0.0666666667);
  padding: var(--spacing-small) var(--spacing-xlarge);
  padding-left: calc(var(--spacing-medium) + var(--spacing-xlarge));
}
.item.hr {
  padding: var(--spacing-small) 0;
}
.item.hr::after {
  content: "";
  height: 2px;
  background-color: rgba(255, 255, 255, 0.0666666667);
  width: 100%;
  border-radius: 2px;
  display: block;
}
.item.active {
  background-color: rgba(255, 255, 255, 0.0666666667) !important;
  color: #fff;
  border-left: var(--spacing-tiny) solid var(--secondary) !important;
}
.item.active::after {
  content: "";
  position: absolute;
}
.item.lock {
  --line-clr: #fff4;
  --bg-clr: transparent;
  --line-width: .5px;
  --line-gap: .5rem;
  --angle: 45deg;
  background-image: repeating-linear-gradient(var(--angle), var(--line-clr) 0, var(--line-clr) var(--line-width), transparent 0, transparent 50%);
  background-size: var(--line-gap) var(--line-gap);
  background-color: var(--bg-clr);
}
.item.lock .chip {
  background: linear-gradient(135deg, var(--primary), var(--accent) 4rem, var(--dark-background-300) 4rem);
  border: none;
}
.item.lock button {
  box-shadow: 0 0 8px 2px rgba(var(--primary-rgb), 0.8);
}
.item:hover:not(.dropdown, .hr, .lock), .item:focus:not(.dropdown, .hr, .lock) {
  color: var(--text-100);
  background-color: rgba(255, 255, 255, 0.0392156863);
}
.item .icon {
  font-size: 1.5rem;
  margin-right: var(--spacing-medium);
}

.logo-wrapper {
  justify-content: space-between;
  display: flex;
  font-size: var(--font-header-400);
  height: 2.5rem;
  background: transparent !important;
  margin-bottom: var(--spacing-tiny);
}

a > img {
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 2rem;
}

.system.collapse-sidebar .sidebar .item {
  color: transparent;
  overflow: hidden;
}
.system.collapse-sidebar .sidebar .item span {
  color: var(--text-light-500);
}

:root {
  --default-background: var(--background-shade-300);
}

#main {
  width: 100vw;
  height: 100vh;
}

.wrapper {
  display: none !important;
}

.system {
  --system-navbar-height: 4.5rem;
  --system-sidebar-width: 300px;
  transition: 0.15s ease-in;
  width: 100vw;
  height: 100vh;
  position: relative;
  background: var(--default-background);
  display: grid;
  grid-template-columns: var(--system-sidebar-width) 1fr;
  grid-template-rows: var(--system-navbar-height) 1fr;
}
.system:not(.collapse-sidebar) #uncollapse {
  display: none;
}
.system.collapse-sidebar {
  --system-sidebar-width: 5rem;
}
.system.collapse-sidebar #sidebar .item > :not(header, span) {
  color: transparent;
}
.system.collapse-sidebar #sidebar .item .arrow {
  opacity: 0;
}
.system.collapse-sidebar #sidebar > header {
  display: flex;
  justify-content: center;
}
.system.collapse-sidebar #sidebar > header #collapsed-sidebar-logo-img {
  display: block;
}
.system.collapse-sidebar #sidebar > header #sidebar-logo-img {
  display: none;
}
.system.collapse-sidebar #sidebar > header button {
  display: none;
}
@media screen and (max-width: 1024px) {
  .system {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}
.system .online {
  --animation-pulsating-shadow-spread-size: 20px;
  height: 0.7rem;
  width: 0.7rem;
  margin: 0.15rem;
  border-radius: 1000px;
  background-color: var(--success);
  box-shadow: 0 0 0 2px rgba(var(--success-rgb), var(--opacity-500));
  animation: pulsatingShadow 3s linear infinite;
}

.system-content {
  padding: var(--spacing-large);
  overflow: auto;
  height: 100%;
  width: 100%;
  position: relative;
}

.page-header h2 + p {
  margin-top: var(--spacing-large);
  color: var(--text-color-info);
  font-size: var(--size-text-400);
}

select {
  color: inherit;
  border: 1px solid var(--text-100);
  padding: var(--spacing-tiny) var(--spacing-small);
  cursor: pointer;
}

.wrapped-field {
  border-radius: 0px;
  border-radius: var(--default-rounding);
  padding: var(--spacing-medium);
  color: var(--text-400);
  border: 1px solid;
  border-color: var(--text-100);
  font-size: 1rem;
  cursor: pointer;
}
.wrapped-field:hover {
  color: var(--text-500);
  border-color: var(--text-200);
}
.wrapped-field:focus-within {
  border-color: var(--text-100);
  color: var(--text-700);
  box-shadow: var(--shadow-medium);
}
.wrapped-field.switch-inside-active {
  color: var(--secondary);
}
.wrapped-field.no-border {
  border-width: 0;
}
.wrapped-field.-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapped-field.-line > label:first-child {
  margin: 0 var(--spacing-xlarge) 0 0;
  white-space: nowrap;
}
.wrapped-field.-line > input[type=text], .wrapped-field.-line > input[type=number] {
  text-align: right;
  border-bottom: 1px dashed var(--text-100);
}
.wrapped-field.-line > input[type=text]:focus, .wrapped-field.-line > input[type=number]:focus {
  border-bottom-style: "solid";
}
.wrapped-field.success {
  color: var(--success);
  border-color: var(--success);
  background-color: rgba(var(--success-rgb), 0.1);
}
.wrapped-field.error {
  color: var(--error);
  border-color: var(--error);
  background-color: rgba(var(--error-rgb), 0.1);
}
.wrapped-field label {
  display: block;
  cursor: pointer;
  font-size: var(--font-size-small);
  color: inherit;
  margin-bottom: var(--spacing-medium);
}
.wrapped-field label:first-child {
  display: flex;
  align-items: center;
}
.wrapped-field textarea {
  min-height: 4rem;
  height: 8rem;
  transition: height 0s;
}
.wrapped-field input,
.wrapped-field select,
.wrapped-field textarea {
  font-size: var(--font-size-medium);
  font-weight: 400 !important;
  color: var(--text-700);
  height: 1.5rem;
  width: 100%;
  border-radius: 4px;
  background-color: transparent;
}
.wrapped-field input:hover,
.wrapped-field select:hover,
.wrapped-field textarea:hover {
  color: var(--text-900);
}
.wrapped-field input:focus,
.wrapped-field select:focus,
.wrapped-field textarea:focus {
  color: var(--text-900);
}
.wrapped-field input::-moz-placeholder, .wrapped-field select::-moz-placeholder, .wrapped-field textarea::-moz-placeholder {
  color: var(--text-200);
}
.wrapped-field input::placeholder,
.wrapped-field select::placeholder,
.wrapped-field textarea::placeholder {
  color: var(--text-200);
}
.wrapped-field input:disabled,
.wrapped-field select:disabled,
.wrapped-field textarea:disabled {
  color: var(--text-300);
  cursor: not-allowed;
}
.wrapped-field select {
  padding: 0;
  border: none;
  box-shadow: none !important;
  cursor: pointer;
  background-color: var(--light-200);
}
.wrapped-field select:not(:valid):not(:focus) {
  color: var(--text-200);
}
.wrapped-field * {
  line-height: 1em;
}

label.switch {
  --switch-handle-size: 1rem;
  --switch-padding: calc(var(--switch-handle-size)/4);
  height: calc(var(--switch-handle-size) + 2 * var(--switch-padding));
  width: calc(var(--switch-handle-size) * 2.5 + 2 * var(--switch-padding));
  display: block;
  position: relative;
  margin: 0;
  cursor: pointer;
}
label.switch.sm {
  --switch-handle-size: .6rem;
}
label.switch.md {
  --switch-handle-size: .8rem;
}
label.switch > input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  position: absolute;
}
label.switch > .slider {
  height: 100%;
  width: 100%;
  border-radius: calc((var(--switch-handle-size) + 2 * var(--switch-padding)) / 2);
  border: 1px solid var(--text-200);
  padding: calc(var(--switch-padding) - 1px);
  transition: 0.15s;
  pointer-events: none;
}
label.switch > .slider::after {
  content: "";
  position: absolute;
  width: var(--switch-handle-size);
  height: var(--switch-handle-size);
  background-color: var(--text-200);
  border-radius: 50%;
  transition: 0.15s;
}
label.switch > :disabled {
  cursor: block;
}
label.switch > :disabled + .slider {
  background: var(--text-200);
}
label.switch > :disabled + .slider::after {
  background-color: #fff;
}
label.switch > input:checked + .slider {
  background-color: var(--secondary);
  border-color: transparent;
}
label.switch > input:checked + .slider::after {
  background-color: white;
  transform: translateX(150%);
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2666666667);
}

label.checkbox {
  --checkbox-size: var(--text-size-200);
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
  font-size: var(--font-size-small);
  cursor: pointer;
}
label.checkbox.sm {
  --checkbox-size: var(--font-size-tiny);
}
label.checkbox:hover .cbox {
  background-color: rgba(var(--primary-rgb), 0.5);
  transition: 0s;
}
label.checkbox > input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
}
label.checkbox > .cbox {
  position: relative;
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  border-radius: 2px;
  border: 2px solid transparent;
  background-color: rgba(26, 28, 44, 0.1254901961);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1333333333);
  padding: 0 2px 2px 0;
  margin-right: var(--spacing-medium);
  transition: 0.15s;
  pointer-events: none;
  display: grid;
  place-items: center;
}
label.checkbox > .cbox::after {
  content: "\ea5e";
  color: white;
  font-size: 1rem;
  font-family: "tabler-icons" !important;
  opacity: 0;
  transform: translate(-100%, 0%);
  transition: 0.15s var(--transition-overshoot);
}
label.checkbox > input:focus + .cbox {
  box-shadow: 0 0 0 4px rgba(var(--secondary-rgb), 0.1);
}
label.checkbox > input[data-state=semi] + .cbox {
  background-image: linear-gradient(to bottom right, white, white 50%, var(--secondary) 50%);
  border-color: var(--secondary);
}
label.checkbox > input:checked + .cbox {
  background-color: var(--secondary);
}
label.checkbox > input:checked + .cbox::after {
  opacity: 1;
  transform: translate(0px, 0%);
}

.radio {
  width: 100%;
  height: 5rem;
  padding: var(--spacing-medium);
  padding-left: 3rem;
  color: var(--text-300);
  border: 1px solid var(--text-100);
  border-radius: var(--spacing-tiny);
  display: flex;
  align-items: center;
  gap: var(--spacing-medium);
  position: relative;
  cursor: pointer;
}

.radio:hover,
.radio:focus-within {
  border-color: var(--text-300);
}

.radio.selected {
  border-color: var(--secondary);
}

.radio input {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}

.radio > span:not(.chip) {
  width: 1rem;
  height: 1rem;
  color: inherit;
  position: absolute;
  left: 1.5rem;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.radio > input:checked ~ span {
  color: var(--secondary);
  background-color: var(--secondary);
  box-shadow: 0 0 0 10px rgba(var(--secondary-rgb), 0.1);
  transition: 0.15s var(--transition-overshoot);
}

.wrapped-field.password {
  position: relative;
}

/**
	FILE INPUT
*/
.dropzone-label {
  width: 100%;
  height: 120px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 0px;
  transition: 0.15s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dropzone-label.beingDragged {
  border-color: var(--secondary);
  background: rgba(27, 67, 112, 0.1254901961);
}
.dropzone-label.invalid {
  color: var(--error);
  border-color: var(--error);
  background: rgba(255, 64, 80, 0.1254901961);
}
.dropzone-label.invalid #customFileName,
.dropzone-label.invalid legend {
  background: var(--error);
}
.dropzone-label.valid {
  color: var(--success);
  border-color: var(--success);
  background: rgba(68, 187, 85, 0.1254901961);
}
.dropzone-label.valid #customFileName,
.dropzone-label.valid legend {
  background: var(--success);
}
.dropzone-label input[type=file] {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.dropzone-label #customFileName,
.dropzone-label legend {
  background: var(--secondary);
  color: white;
  font-family: "Poppins";
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  border-radius: 2px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2666666667);
}
.dropzone-label #customFileName > *,
.dropzone-label legend > * {
  margin: 0;
}

.form-section {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--spacing-medium);
}
.form-section header {
  margin-bottom: var(--spacing-large);
}
.form-section header h2 {
  font-weight: 400;
  font-size: var(--font-size-medium);
  color: var(--text-500);
  margin: 0 0 var(--spacing-small) 0;
}
.form-section.end {
  border-top: 1px solid var(--background-shade-400);
  padding-top: calc(var(--spacing-medium) * 2);
}

fieldset {
  border: none;
}

hr.hr {
  margin: var(--spacing-medium) 0;
  height: 0px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--text-100);
}

:where(span, div).vr {
  margin: 0 var(--spacing-medium);
  width: 0px;
  border: 0;
  border-left: 1px solid var(--text-100);
}

.mark-border {
  border: 1px solid var(--text-100);
}

.form-row:not(.no-stretch) > * {
  flex: 1;
}

.my-table {
  --table-border: 1px solid var(--text-100);
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background-color: var(--background-shade-100);
}
.my-table th.menu {
  width: 4rem;
}
.my-table td, .my-table th {
  padding: var(--spacing-large);
  text-align: left;
}
.my-table th {
  color: var(--text-100);
  font-size: 0.9rem;
  font-weight: 400;
  background-color: var(--dark-background-500);
}
.my-table td {
  font-weight: 500;
  color: var(--text-700);
  font-size: 1rem;
  border-bottom: var(--table-border);
}
.my-table tr:last-child td {
  border-bottom: none;
}

.my-table.interactive tbody > tr {
  cursor: pointer;
}
.my-table.interactive tbody > tr.selected {
  background-color: rgba(var(--secondary-rgb), 0.1);
  box-shadow: 0 0 0 1px var(--secondary);
}
.my-table.interactive tbody > tr:hover {
  transition: 0;
  background-color: rgba(var(--secondary-rgb), 0.05);
}

[draggable=true] {
  z-index: 1;
}

table.my-table.align-start td {
  vertical-align: top;
}

table.excel-table {
  --border-color: var(--text-300);
  --header-bg: var(--text-200);
  --row-bg: var(--text-100);
  --row-alt-bg: var(--text-200);
  --text-color: var(--text-900);
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  color: var(--text-color);
  border: none;
}
table.excel-table :in(th,td) {
  padding: 8px;
  text-align: left;
  font-weight: 400;
}
table.excel-table :in(th,td) + :in(th,td) {
  border-left: 1px solid var(--border-color);
}
table.excel-table tr:nth-child(even) {
  background-color: var(--row-alt-bg);
}

.format {
  /**

    --text-color-headings:    var(--text-900);
    --text-color-subheadings: var(--text-700);
    --text-color-normal:      var(--text-500);
    --text-color-info:        var(--text-300);
    */
  /** default settings */
  font-family: inherit;
  /**
   * color-100 -> color-text-100
   */
}
.format.color-heading {
  color: var(--text-color-headings);
}
.format.color-subheading {
  color: var(--text-color-subheadings);
}
.format.color-text {
  color: var(--text-color-texts);
}
.format.color-normal {
  color: var(--text-color-normal);
}
.format.text-info, .format.color-info {
  color: var(--text-color-info);
}
.format.text-white, .format.color-white {
  color: white !important;
}
.format.text-primary, .format.color-primary {
  color: var(--primary);
}
.format.text-dark {
  color: var(--text-700);
}
.format.text-error, .format.color-error {
  color: var(--error);
}
.format.text-warning, .format.color-warning {
  color: var(--warning);
}
.format.text-alert, .format.color-alert {
  color: var(--alert);
}
.format.text-success, .format.color-success {
  color: var(--success);
}
.format.text-fade, .format.color-fade {
  background-image: var(--fade);
  background-size: 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.format.text-inherit {
  color: inherit;
}
.format.color-100 {
  color: var(--text-100);
}
.format.color-200 {
  color: var(--text-200);
}
.format.color-300 {
  color: var(--text-300);
}
.format.color-400 {
  color: var(--text-400);
}
.format.color-500 {
  color: var(--text-500);
}
.format.color-600 {
  color: var(--text-600);
}
.format.color-700 {
  color: var(--text-700);
}
.format.color-800 {
  color: var(--text-800);
}
.format.color-900 {
  color: var(--text-900);
}
.format.align-center {
  text-align: center;
}
.format.align-left {
  text-align: left;
}
.format.align-right {
  text-align: right;
}
.format.w-bold {
  font-weight: 700;
}
.format.w-sbold {
  font-weight: 600;
}
.format.w-medium {
  font-weight: 500;
}
.format.w-normal {
  font-weight: 400;
}
.format.w-light {
  font-weight: 300;
}
.format.border {
  border: 1px solid currentColor;
}
.format.anchor {
  text-decoration: underline;
}
.format.h1, .format.h2, .format.h3 {
  font-weight: 600;
  color: var(--text-color-headings);
}
.format.h1 {
  font-size: var(--header-size-100);
  line-height: var(--header-size-100);
}
.format.h2 {
  font-size: var(--header-size-200);
  line-height: var(--header-size-200);
}
.format.h3 {
  font-size: var(--header-size-300);
  line-height: var(--header-size-300);
}
.format.h4 {
  font-size: var(--header-size-400);
  line-height: var(--header-size-400);
  color: var(--text-color-subheadings);
  font-weight: 500;
}
.format.size-inherit, .format.sz-inherit {
  font-size: inherit;
}
.format.sz-100 {
  font-size: var(--font-size-100);
}
.format.sz-200 {
  font-size: var(--font-size-200);
}
.format.sz-300 {
  font-size: var(--font-size-300);
}
.format.sz-400 {
  font-size: var(--font-size-400);
}
.format.sz-500 {
  font-size: var(--font-size-500);
}
.format.sz-600 {
  font-size: var(--font-size-600);
}
.format.sz-700 {
  font-size: var(--font-size-700);
}
.format.sz-800 {
  font-size: var(--font-size-800);
}
.format.sz-900 {
  font-size: var(--font-size-900);
}
.format.family-monospace {
  font-family: "Courier New", Courier, monospace;
}
.format.size-text-500 {
  font-size: var(--text-size-500);
}
.format.size-text-400 {
  font-size: var(--text-size-400);
}
.format.size-text-300 {
  font-size: var(--text-size-300);
}
.format.size-text-200 {
  font-size: var(--text-size-200);
}
.format.size-text-100 {
  font-size: var(--text-size-100);
}
.format.nowrap {
  text-wrap: nowrap;
}

.layout-row, .layout.row {
  display: flex;
  gap: var(--spacing-medium);
}
.layout-row > .stretch, .layout.row > .stretch {
  flex: 1;
}
.layout-row.no-stretch > *, .layout.row.no-stretch > * {
  flex: 0;
}

.layout-end, .layout-justify-end, .layout.justify-end {
  justify-content: flex-end;
}

.layout-justify-between, .layout.justify-between {
  justify-content: space-between;
}

.layout-align-center, .layout.align-center {
  align-items: center;
}

.layout-align-end, .layout.align-end {
  align-items: end;
}

.layout-align-start, .layout.align-start {
  align-items: start;
}

.layout-f-wrap, .layout.f-wrap {
  flex-wrap: wrap;
}

.layout-f-nowrap, .layout.f-nowrap {
  flex-wrap: nowrap !important;
}

.layout-d-hidden, .d-hidden {
  display: none !important;
}

.layout-p-relative, .layout .relative {
  position: relative;
}

.layout-section, .layout.section {
  padding: var(--spacing-large);
}
.layout-section.overflow, .layout.section.overflow {
  overflow: auto;
}

.layout.i-row {
  display: inline-flex;
}
.layout.pile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}
.layout.justify-center {
  justify-content: center;
}
.layout.grid {
  display: grid;
}
.layout.place-items-center {
  place-items: center;
}
.layout.p-relative {
  position: relative;
}
.layout.p-absolute {
  position: absolute;
}
.layout.mb-sm {
  margin-bottom: var(--spacing-small);
}
.layout.mb-md {
  margin-bottom: var(--spacing-medium);
}
.layout.mb-lg {
  margin-bottom: var(--spacing-large);
}
.layout.mb-xl {
  margin-bottom: var(--spacing-xlarge);
}
.layout.mt-sm {
  margin-top: var(--spacing-small);
}
.layout.mt-md {
  margin-top: var(--spacing-medium);
}
.layout.mt-lg {
  margin-top: var(--spacing-large);
}
.layout.mt-xl {
  margin-top: var(--spacing-xlarge);
}
.layout.mr-sm {
  margin-right: var(--spacing-small);
}
.layout.mr-md {
  margin-right: var(--spacing-medium);
}
.layout.mr-lg {
  margin-right: var(--spacing-large);
}
.layout.mr-xl {
  margin-right: var(--spacing-xlarge);
}
.layout.mx-md {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}
.layout.mx-md {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}
.layout.mx-md {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}
.layout.mx-md {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}
.layout.w-full {
  width: 100%;
}
.layout.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.layout.min-w-fit {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.layout.p-sm {
  padding: var(--spacing-small);
}
.layout.p-md {
  padding: var(--spacing-medium);
}
.layout.p-lg {
  padding: var(--spacing-large);
}
.layout.p-xl {
  padding: var(--spacing-xlarge);
}
.layout.p-0 {
  padding: 0;
}
.layout.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.layout.px-0 {
  padding-left: 0;
  padding-right: 0;
}
.layout.py-md {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}
.layout.px-md {
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}
.layout.px-xl {
  padding-left: var(--spacing-xlarge);
  padding-right: var(--spacing-xlarge);
}
.layout.no-gap, .layout.gap-0 {
  gap: 0 !important;
}
.layout.gap-0 {
  gap: 0rem;
}
.layout.gap-1 {
  gap: 0.25rem;
}
.layout.gap-2 {
  gap: 0.5rem;
}
.layout.gap-3 {
  gap: 0.75rem;
}
.layout.gap-4 {
  gap: 1rem;
}
.layout.gap-5 {
  gap: 1.25rem;
}
.layout.gap-6 {
  gap: 1.5rem;
}
.layout.gap-7 {
  gap: 1.75rem;
}
.layout.gap-8 {
  gap: 2rem;
}
.layout.gap-9 {
  gap: 2.25rem;
}
.layout.gap-10 {
  gap: 2.5rem;
}
.layout.gap-11 {
  gap: 2.75rem;
}
.layout.gap-12 {
  gap: 3rem;
}
.layout.rounded-0 {
  border-radius: 0rem;
}
.layout.rounded-1 {
  border-radius: 0.25rem;
}
.layout.rounded-2 {
  border-radius: 0.5rem;
}
.layout.rounded-3 {
  border-radius: 0.75rem;
}
.layout.rounded-4 {
  border-radius: 1rem;
}
.layout.rounded-5 {
  border-radius: 1.25rem;
}
.layout.rounded-6 {
  border-radius: 1.5rem;
}
.layout.rounded-7 {
  border-radius: 1.75rem;
}
.layout.rounded-8 {
  border-radius: 2rem;
}
.layout.rounded-9 {
  border-radius: 2.25rem;
}
.layout.rounded-10 {
  border-radius: 2.5rem;
}
.layout.rounded-11 {
  border-radius: 2.75rem;
}
.layout.rounded-12 {
  border-radius: 3rem;
}

@media screen and (max-width: 768px) {
  .layout-hide-sm,
  .layout.hide-sm {
    display: none !important;
  }
  .layout-row, .layout.row {
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .layout-hide-md,
  .layout.hide-md {
    display: none !important;
  }
  .layout-row, .layout.row {
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .layout.hide-lg {
    display: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .layout.hide-xl {
    display: none !important;
  }
}
.limit-width {
  --max-width: 0px;
  --total-padding: ;
}

.hide {
  display: none !important;
}

button.open-context-menu > span {
  transition: 0.15s;
}

.context-menu.open {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translate(var(--translate-x), var(--translate-y));
}

.context-menu {
  --translate-x: 0px;
  --translate-y: 0px;
  --scale: 0;
  min-height: -moz-fit-content;
  min-height: fit-content;
  max-height: 50vh;
  visibility: hidden;
  opacity: 0;
  transform: scale(0) translate(var(--translate-x), var(--translate-y));
  transform-origin: 100% 0%;
  z-index: 1000;
  padding: var(--spacing-medium);
  border-radius: 2px;
  background-color: var(--background-shade-100);
  box-shadow: var(--shadow-large);
  display: block;
  position: fixed;
  right: 80px;
  width: -moz-fit-content;
  width: fit-content;
  transition: 0.15s;
  overflow: auto;
}
.context-menu.center {
  --translate-x: -50%;
  transform-origin: 0% 0;
}
.context-menu.right {
  --translate-x: -100%;
  transform-origin: 0% 0;
}
.context-menu .actions-hr {
  height: 1px;
  background: var(--text-100);
  border-radius: 2px;
  margin: var(--spacing-small) 0;
}
.context-menu .action {
  width: 100%;
  min-width: -moz-max-content;
  min-width: max-content;
  font-size: var(--text-size-300);
  padding: var(--spacing-small);
  border-radius: 2px;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--text-color-info);
  text-decoration: none !important;
  font-weight: 500;
}
.context-menu .action > span.ti {
  margin-right: var(--spacing-medium);
  font-size: var(--text-size-100);
}
.context-menu .action.delete {
  color: var(--error);
}
.context-menu .action:hover {
  color: var(--text-color-hover);
  background-color: var(--background-shade-300);
  border-color: currentColor;
}
.context-menu .action:hover.delete {
  color: #FFF;
  background-color: var(--error);
}
.context-menu .action:focus {
  outline: auto;
}
.context-menu .action.active {
  border-color: currentColor;
}

.inline-button, .btn {
  width: -moz-fit-content;
  width: fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: var(--dyn-spacing-small) var(--dyn-spacing-medium);
  cursor: pointer;
  border-radius: 0px;
  font-size: 1rem;
  color: white;
  text-decoration: none !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: 0.15s;
  border: 1px solid transparent;
  background-color: transparent;
  color: #fff;
}
.inline-button:hover, .btn:hover {
  filter: brightness(0.9);
}
.inline-button:disabled, .inline-button.disabled, .btn:disabled, .btn.disabled {
  filter: brightness(0.8);
  cursor: not-allowed;
}
.inline-button > .ti, .btn > .ti {
  font-size: 1.4em;
  margin-right: var(--dyn-spacing-tiny);
}
.inline-button > .ti.-right, .btn > .ti.-right {
  margin-left: 6px;
}
.inline-button > .ti.-left, .btn > .ti.-left {
  margin-right: 6px;
}
.inline-button > .ti.-center, .btn > .ti.-center {
  margin: 0;
}
.inline-button:focus, .btn:focus {
  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px var(--telemetrix);
}
.inline-button.full, .btn.full {
  min-width: 100%;
  width: 100%;
}
.inline-button.whatsapp, .btn.whatsapp {
  --whatsapp: #25D366;
  --whatsapp-teal: #128C7E;
  background-color: var(--whatsapp-teal);
  border: none;
}
.inline-button.transluscent-light, .btn.transluscent-light {
  background: rgba(255, 255, 255, 0.0666666667);
}
.inline-button.transluscent-dark, .btn.transluscent-dark {
  background: rgba(0, 0, 0, 0.0666666667);
}
.inline-button.border-pop, .btn.border-pop {
  border: 1px solid rgba(255, 255, 255, 0.1333333333);
}
.inline-button.success, .btn.success {
  background-color: var(--success);
  border-color: var(--success);
}
.inline-button.alert, .btn.alert {
  background-color: var(--alert);
  border-color: var(--alert);
}
.inline-button.error, .btn.error {
  background-color: var(--error);
  border-color: var(--error);
}
.inline-button.text-white, .btn.text-white {
  color: white;
}
.inline-button.text-primary, .btn.text-primary {
  color: var(--primary);
}
.inline-button.text-secondary, .btn.text-secondary {
  color: var(--secondary);
}
.inline-button.text-success, .btn.text-success {
  color: var(--success);
}
.inline-button.text-alert, .btn.text-alert {
  color: var(--alert);
}
.inline-button.text-warn, .btn.text-warn {
  color: var(--warn);
}
.inline-button.text-error, .btn.text-error {
  color: var(--error);
}
.inline-button.text-dark, .btn.text-dark {
  color: var(--text-700);
}
.inline-button.bg-dark, .btn.bg-dark {
  background-color: var(--text-700);
}
.inline-button.bg-white, .btn.bg-white {
  background-color: white;
}
.inline-button.border, .btn.border {
  border: 1px solid currentColor;
}

.inline-button, .btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--default-rounding);
}
.inline-button:disabled, .btn:disabled {
  filter: grayscale(0.5);
  cursor: not-allowed;
  box-shadow: none !important;
}
.inline-button.shadow, .btn.shadow {
  box-shadow: var(--shadow-large);
}
.inline-button.primary, .btn.primary {
  box-shadow: var(--shadow-large);
  border: 0 !important;
}
.inline-button.primary::after, .btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: var(--fade);
  z-index: -1;
  border-radius: 2px;
}

.icon-button {
  --bg-color: #fff0;
  --bg-effect-color: rgba(var(--primary-rgb), .1);
  --color: var(--text-700);
  --hover-color: var(--primary);
  background: rgba(255, 255, 255, 0);
  color: var(--color);
  border-radius: 4px;
  padding: var(--spacing-tiny);
  display: inline-grid;
  place-items: center;
  position: relative;
  font-size: var(--text-size-300);
}
.icon-button > * {
  font-size: inherit;
  z-index: 1;
}
.icon-button:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--bg-effect-color);
  transform: scale(0);
  pointer-events: none;
  transition: 0.1s;
}
.icon-button:hover, .icon-button:focus {
  color: var(--hover-color);
}
.icon-button:hover:before, .icon-button:focus:before {
  transform: scale(1);
}
.icon-button.delete {
  --bg-effect-color: rgba(var(--error-rgb), .2);
  --color: var(--error);
  --hover-color: var(--error);
}
.icon-button.light {
  --color: white;
  --hover-color: white;
  --bg-effect-color: background: #fff2;
}
.icon-button:disabled {
  cursor: not-allowed;
  --color: #888;
  --hover-color: #888;
}
.icon-button:disabled:before {
  transform: scale(1);
}

.tabs:not(.no-default) {
  /*
   * When tabs overflow on mobile
   */
  overflow-x: auto;
  overflow-y: hidden;
  --tabbing-text-color: var(--text-300);
  --tabbing-background-color: var(--background-shade-300);
  --tabbing-border-color: var(--text-100);
  display: flex;
  position: relative;
  padding: 0 var(--spacing-medium);
  margin: 0;
  border-bottom: 1px solid var(--tabbing-border-color);
}
.tabs:not(.no-default).white {
  --tabbing-background-color: var(--background-shade-100);
}
.tabs:not(.no-default) .tab {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: transparent;
  color: var(--tabbing-text-color);
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom-color: var(--tabbing-border-color);
  position: relative;
  border-radius: 4px 4px 0 0;
}
.tabs:not(.no-default) .tab::after {
  content: "";
  position: absolute;
  opacity: 0;
  top: -2px;
  left: -1px;
  width: calc(100% + 2px);
  border-radius: 4px 4px 0 0;
  height: 4px;
  background: var(--fade);
}
.tabs:not(.no-default) .tab:hover:not(.active) {
  color: var(--text-600);
}
.tabs:not(.no-default) .tab.active {
  color: var(--text-800);
  background-color: var(--tabbing-background-color);
  border-color: var(--tabbing-border-color);
  border-bottom-color: var(--tabbing-background-color);
}
.tabs:not(.no-default) .tab.active::after {
  opacity: 1;
}

.tab-page:not(.active) {
  display: none;
  animation: popin 1s var(--transition-overshoot);
}
.my-modal-bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.5333333333);
  opacity: 0;
  z-index: -1;
  left: 0;
  top: 0;
  cursor: pointer;
  transition: 0.15s;
  padding: var(--spacing-xlarge);
  overflow: auto;
  visibility: hidden;
}
.my-modal-bg#modal-loading {
  z-index: 1;
}
.my-modal-bg.no-backdrop {
  background-color: rgba(0, 0, 0, 0);
}
.my-modal-bg.top {
  align-items: flex-start;
}
.my-modal-bg.right {
  justify-content: end;
}
.my-modal-bg.blur {
  background-color: rgba(0, 0, 0, 0.6666666667);
}
.my-modal-bg.open {
  visibility: visible;
  z-index: 10000;
  opacity: 1;
}
.my-modal-bg.open > .my-modal, .my-modal-bg.open > .modal {
  animation: modalIn 0.3s ease-in;
}
.my-modal-bg.open.popin > .my-modal, .my-modal-bg.open.popin > .modal {
  animation: popIn 0.25s ease-in;
}
.my-modal-bg .my-modal, .my-modal-bg .modal {
  min-width: 200px;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 100%;
  background: var(--background-shade-100);
  box-shadow: var(--shadow-large);
  border-radius: 0.25rem;
  overflow: hidden;
  cursor: default;
}
.my-modal-bg .my-modal.driver\:grid, .my-modal-bg .modal.driver\:grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.my-modal-bg .my-modal.driver\:grid .body, .my-modal-bg .my-modal.driver\:grid main, .my-modal-bg .modal.driver\:grid .body, .my-modal-bg .modal.driver\:grid main {
  height: 100%;
  overflow: auto;
}
.my-modal-bg .my-modal.full, .my-modal-bg .modal.full {
  height: 100%;
}
.my-modal-bg .my-modal > *, .my-modal-bg .modal > * {
  padding: var(--spacing-xlarge);
}
.my-modal-bg .my-modal .my-modal-header, .my-modal-bg .my-modal > .header, .my-modal-bg .my-modal > header, .my-modal-bg .modal .my-modal-header, .my-modal-bg .modal > .header, .my-modal-bg .modal > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--header-size-300);
  color: var(--text-800);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
}
.my-modal-bg .my-modal .my-modal-header.--no-divider, .my-modal-bg .my-modal > .header.--no-divider, .my-modal-bg .my-modal > header.--no-divider, .my-modal-bg .modal .my-modal-header.--no-divider, .my-modal-bg .modal > .header.--no-divider, .my-modal-bg .modal > header.--no-divider {
  border-bottom: none;
}
.my-modal-bg .my-modal .my-modal-header h3, .my-modal-bg .my-modal > .header h3, .my-modal-bg .my-modal > header h3, .my-modal-bg .modal .my-modal-header h3, .my-modal-bg .modal > .header h3, .my-modal-bg .modal > header h3 {
  margin: 0px;
  font-size: inherit;
}
.my-modal-bg .my-modal .my-modal-header span, .my-modal-bg .my-modal > .header span, .my-modal-bg .my-modal > header span, .my-modal-bg .modal .my-modal-header span, .my-modal-bg .modal > .header span, .my-modal-bg .modal > header span {
  font-size: inherit;
}
.my-modal-bg .my-modal .my-modal-header button.-close, .my-modal-bg .my-modal > .header button.-close, .my-modal-bg .my-modal > header button.-close, .my-modal-bg .modal .my-modal-header button.-close, .my-modal-bg .modal > .header button.-close, .my-modal-bg .modal > header button.-close {
  margin-left: var(--spacing-xlarge);
}
.my-modal-bg .my-modal .my-modal-body, .my-modal-bg .my-modal > .body, .my-modal-bg .my-modal > main, .my-modal-bg .modal .my-modal-body, .my-modal-bg .modal > .body, .my-modal-bg .modal > main {
  display: block;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}
.my-modal-bg .my-modal .my-modal-actions, .my-modal-bg .my-modal > .actions, .my-modal-bg .my-modal > footer, .my-modal-bg .modal .my-modal-actions, .my-modal-bg .modal > .actions, .my-modal-bg .modal > footer {
  display: flex;
  justify-content: flex-end;
}
.my-modal-bg .my-modal .my-modal-actions > *, .my-modal-bg .my-modal > .actions > *, .my-modal-bg .my-modal > footer > *, .my-modal-bg .modal .my-modal-actions > *, .my-modal-bg .modal > .actions > *, .my-modal-bg .modal > footer > * {
  margin-left: 10px;
}
.my-modal-bg .my-modal .my-modal-row, .my-modal-bg .modal .my-modal-row {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.my-modal-bg .my-modal .my-modal-row *, .my-modal-bg .modal .my-modal-row * {
  margin-right: 10px;
}
.my-modal-bg .my-modal .my-modal-row *:last-child, .my-modal-bg .modal .my-modal-row *:last-child {
  margin-right: 0px;
}
.my-modal-bg .my-modal .my-modal-row button, .my-modal-bg .modal .my-modal-row button {
  background: rgba(0, 0, 0, 0.1333333333);
  border-radius: 5px;
  height: 40px;
  width: 40px;
}
.my-modal-bg .my-modal .my-modal-row button.--confirm, .my-modal-bg .modal .my-modal-row button.--confirm {
  width: -moz-fit-content;
  width: fit-content;
  display: none;
  align-items: center;
  padding: 0px 10px;
  background: var(--success);
  color: white;
}
.my-modal-bg .my-modal .my-modal-row button.--confirm span, .my-modal-bg .modal .my-modal-row button.--confirm span {
  margin-right: 6px;
}

.my-modal-bg.r {
  padding: 2rem;
  display: block;
  overflow: hidden;
}
.my-modal-bg.r .modal {
  position: absolute;
  width: min(440px, 90vw);
  top: 0;
  right: 0;
  height: 100%;
  background-color: white;
  box-shadow: -16px 0 64px rgba(0, 0, 0, 0.1333333333);
  transform: translateX(100%);
  overflow: hidden;
  animation: unset;
}
.my-modal-bg.r.open .modal {
  pointer-events: all;
  transition-delay: 200ms;
  transition: 200ms ease-out;
  transform: translate(0) !important;
}

.my-modal-bg.drawer {
  padding: 2rem;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.my-modal-bg.drawer .modal {
  position: absolute;
  width: min(400px, 95vw);
  top: 0;
  right: 0;
  height: 100%;
  padding: 1rem;
  background-color: white;
  box-shadow: -16px 0 64px rgba(0, 0, 0, 0.1333333333);
  transform: translateX(100%);
  overflow: hidden;
  animation: unset;
}
.my-modal-bg.drawer.open .modal {
  pointer-events: all;
  transition-delay: 200ms;
  transition: 200ms ease-out;
  transform: translate(0) !important;
}

.loader {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  display: inline-block;
  color: inherit;
  border: 2px solid currentColor;
  border-left-color: transparent !important;
  animation: rotateFull infinite 1s linear;
}
@keyframes rotateFull {
  100% {
    transform: rotate(359deg);
  }
}

.clr--primary {
  color: var(--secondary);
}

.chip {
  font-size: 1rem;
  line-height: 1em;
  padding: var(--dyn-spacing-small) var(--dyn-spacing-medium);
  border-radius: var(--default-rounding);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  position: relative;
  border: 1px solid transparent;
}
.chip.nowrap {
  text-wrap: nowrap;
}
.chip > .chip-icon, .chip > span[class^=material-icons], .chip > span.ti {
  margin-right: var(--spacing-small);
  font-size: 1.2em;
}
.chip > .chip-icon.check-bg, .chip > span[class^=material-icons].check-bg, .chip > span.ti.check-bg {
  padding: 0.25rem;
  border-radius: 50%;
  background: rgba(var(--success-rgb), 0.15);
}
.chip + .chip:not(.no-gutter) {
  margin-left: var(--spacing-medium);
}
.chip.no-padding {
  padding: 0;
}
.chip.neutral {
  background: var(--background-shade-200);
  color: var(--text-600);
}
.chip.primary {
  background-color: rgba(var(--primary-rgb), var(--opacity-100));
  color: var(--primary);
}
.chip.warning {
  background-color: rgba(var(--warning-rgb), var(--opacity-100));
  color: var(--warning);
}
.chip.alert {
  background-color: rgba(var(--alert-rgb), var(--opacity-100));
  color: var(--alert);
}
.chip.error {
  background-color: rgba(var(--error-rgb), var(--opacity-100));
  color: var(--error);
}
.chip.success {
  background-color: rgba(var(--success-rgb), var(--opacity-100));
  color: var(--success);
}
.chip.dark {
  background-color: var(--text-700);
  color: white;
}
.chip.border {
  border-color: currentColor;
}
.chip.bold {
  font-weight: 500;
}
.chip.rect {
  border-radius: 0;
}
.chip.bg-primary {
  background-color: var(--primary);
}
.chip.bg-error {
  background-color: var(--error);
}
.chip.bg-success {
  background-color: var(--success);
}
.chip.bg-alert {
  background-color: var(--alert);
}
.chip.bg-success {
  background-color: var(--success);
}
.chip.bg-white {
  background-color: white;
}
.chip.bg-fade {
  background-image: var(--fade);
  -o-border-image: 1 var(--fade);
     border-image: 1 var(--fade);
}
.chip.bg-shade-100 {
  background-color: var(--background-shade-100);
}
.chip.text-primary {
  color: var(--primary);
}
.chip.text-dark {
  color: var(--text-700);
}
.chip.text-white {
  color: white;
}
.chip.text-error {
  color: var(--error);
}
.chip.shadow-m {
  box-shadow: var(--shadow-medium);
}
.chip.tiny {
  font-size: var(--font-size-tiny);
}
.chip.rounded-full {
  border-radius: 9999px;
  -o-border-image: none;
     border-image: none;
}

kbd {
  --border-color: #1232;
  --background-color: white;
  --color: #223344;
  border-radius: 0.25rem;
  padding: 0.2rem 0.4rem;
  font-size: var(--text-size-800);
  background-color: var(--background-color);
  border: solid var(--border-color);
  border-width: 1px 1px 3px 1px;
  box-shadow: 0 2px 0 1px rgba(17, 34, 51, 0.1333333333);
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  letter-spacing: 0.15rem;
  color: var(--color);
}
kbd.bravo {
  --color: var(--primary);
  --border-color: #888;
  --background-color: #123;
  text-shadow: 0 0 4px rgba(var(--primary-rgb), 0.2);
}

span.my-tooltip, span.tooltip {
  --spacing: var(--spacing-medium);
  --x: 0px;
  --y: 0px;
  z-index: 100;
  position: absolute;
  visibility: hidden;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8666666667);
  border-radius: 4px;
  color: white;
  opacity: 0;
  transition: 0.15s ease-in-out;
  box-shadow: var(--shadow-large);
  transform: translate(calc(var(--x) - var(--spacing)), var(--y));
  z-index: 1000;
  font-size: var(--text-size-500);
}
span.my-tooltip:not(.hold-events), span.tooltip:not(.hold-events) {
  pointer-events: none;
}
span.my-tooltip:after, span.tooltip:after {
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, 0.8666666667);
  left: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  -webkit-clip-path: polygon(0px 0px, 0px 10px, 10px 10px);
          clip-path: polygon(0px 0px, 0px 10px, 10px 10px);
}
span.my-tooltip.left, span.tooltip.left {
  right: calc(100% - 2 * var(--spacing));
  --x: 100%;
}
span.my-tooltip.left:after, span.tooltip.left:after {
  left: unset;
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(-315deg);
}
span.my-tooltip.right, span.tooltip.right {
  left: calc(0px - var(--spacing));
  right: 0px;
  --x: -100%;
}
span.my-tooltip.right:after, span.tooltip.right:after {
  left: unset;
  top: 50%;
  right: -5px;
  transform: translateY(-50%) rotate(-135deg);
}
span.my-tooltip.bottom, span.tooltip.bottom {
  top: 0px;
  left: 50%;
  --y: -100%;
  --x: -50%;
  transform: translate(var(--x), calc(var(--y) + var(--spacing)));
}
span.my-tooltip.bottom::after, span.tooltip.bottom::after {
  transform: translateY(100%) rotate(315deg);
  left: calc(50% - 5px);
  bottom: -5px;
}
span.my-tooltip.top, span.tooltip.top {
  left: 50%;
  top: 100%;
  --y: 0px;
  --x: -50%;
  transform: translate(var(--x), calc(var(--y) - var(--spacing)));
}
span.my-tooltip.top::after, span.tooltip.top::after {
  transform: rotate(135deg);
  left: calc(50% - 5px);
  top: -5px;
}
span.my-tooltip.top.right, span.tooltip.top.right {
  left: 100%;
  --x: -100%;
}
span.my-tooltip.top.right::after, span.tooltip.top.right::after {
  left: unset;
  right: 8px;
}
span.my-tooltip.top.left, span.tooltip.top.left {
  left: 0%;
  --x: 0%;
}
span.my-tooltip.top.left::after, span.tooltip.top.left::after {
  right: unset;
  left: 8px;
}

*:hover + span.my-tooltip, *:hover > span.my-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(var(--x), var(--y));
}

*:hover + span.tooltip, *:hover > span.tooltip, .tooltip.active {
  visibility: visible;
  opacity: 1;
  transform: translate(var(--x), var(--y));
}

.my-tooltip-anchor, .tooltip-anchor {
  position: relative;
  overflow: visible;
}/*# sourceMappingURL=main.css.map */