:root {
  --bitask-gray-bg: #efefef;
  --bitask-gray-input-bg: #fafafa;
  --bitask-ingray-text: #666666;
  --bitask-inwhite-text: #505050;
  --bitask-list-text: #999999;
  --bitask-footer-text: #bbbbbb;
  --bitask-red-alert:#ff2e31;
  --bitask-red-alert-rgb:255, 46, 49;
  --bitask-orange-alert:#ffb700;
  --bitask-yellow-alert:#ffe100;
  --bitask-green-alert:#d8eccb;
}

* {
  font-family: Arial, Helvetica, sans-serif;
  outline: none !important;
}

html {
  font-size: 62.5%;
}

@media screen and (max-width: 767.98px) {
  html {
    font-size: 63%;
  }
}
@media screen and (max-width: 575.98px) {
  html {
    font-size: 66%;
  }
}
body {
  line-height: normal;
  outline: none !important;
  padding-right: 0 !important;
  background-color: var(--bitask-gray-bg);
  color: var(--bitask-inwhite-text);
  min-height: 100vh;
}

body.loading {
  position: relative;
  overflow: hidden;
}

body.loading::before {
  content: attr(data-text-feedback);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  font-size: 3rem;
  color: rgba(50, 50, 50, 0.5);
  z-index: 66;
}

body.login.loading::before {
  background-color: rgba(0, 0, 0, 0.95);
  color: rgba(180, 180, 180, 0.5);
}

body.loading::after {
  content: "";
  position: absolute;
  z-index: 67;
  top: calc(50vh - 3rem);
  left: calc(50vw - 3rem);
  width: 6rem;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eb174c;
  --_m:
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}
header {
  background-color: #000;
  color: #fff;
  font-size: 1.4rem;
}

header img.logo {
  max-width: 130px;
}

header span {
  color: rgba(255, 255, 255, 0.6);
}

header button.btn {
  font-size: 1.2rem;
}

main {
  font-size: 1.4rem;
}

footer {
  color: var(--bitask-footer-text);
}

.task-alert {
  color: #000;
  box-shadow: inset 0 0 0.1rem rgba(0, 0, 0, 0.2);
}

.red-alert {
  background-color: var(--bitask-red-alert);
}

.orange-alert {
  background-color: var(--bitask-orange-alert);
}

.yellow-alert {
  background-color: var(--bitask-yellow-alert);
}

.green-alert {
  background-color: var(--bitask-green-alert);
}

.txt-header {
  font-size: 1.2rem;
  color: var(--bitask-list-text);
}

.toggleOrder {
  position: relative;
  cursor: pointer;
}

.toggleOrder span {
  transition: color 200ms ease-in-out;
}

.toggleOrder:hover span {
  color: #000;
}

.toggleOrder:hover:after {
  opacity: 1;
  transition: opacity 200ms ease-in-out;
}

.toggleOrder:after {
  display: block;
  opacity: 0.6;
  margin-left: 0.6rem;
  width: 0;
  height: 0;
  border-bottom: none;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.8rem solid #666;
}

.toggleOrder.activeOrder:after {
  content: "";
}

.toggleOrder.activeOrder[data-asc-mode]:after {
  border-top: none;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-bottom: 0.8rem solid #666;
}

.task-item {
  font-size: 1.6rem;
  background-color: #fff;
  color: var(--bitask-inwhite-text);
  box-shadow: inset 0 0 0.1rem rgba(0, 0, 0, 0.2);
  transition: background-color 200ms ease-in-out;
}

.task-item.focus {
  background-color: rgba(0, 255, 34, 0.3);
}

.created-col {
  background-color: rgba(220, 220, 220, 0.1);
}

.created-col p {
  font-size: 1.2rem;
  color: var(--bitask-list-text);
}

.input-col {
  background-color: rgba(200, 200, 200, 0.1);
  transition: background-color 200ms ease-in-out;
}

.input-col.done {
  background-color: var(--bitask-green-alert);
}

.input-col.error {
  background-color: rgba(var(--bitask-red-alert-rgb), 0.2);
}

.task-item .taskName {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease-in-out;
}

.task-item .taskName:focus,
.task-item .taskName:hover {
  color: #000;
}

.task-item span {
  font-size: 1rem;
  text-transform: uppercase;
}

.task-item span.status {
  color: #fff;
  padding: 0.3rem 0.8rem;
  margin: 0 0.8rem 0 0;
  border-radius: 0.3rem;
  flex: none;
}

.task-item span.list {
  color: var(--bitask-list-text);
  margin: 0.3rem 0;
  flex: none;
}

.form-switch {
  padding-left: 2.9em;
}

.form-switch input[type=checkbox]:focus {
  box-shadow: none;
}

.form-switch input[type=checkbox] {
  transform: scale(1.3);
}

.form-check-input[type=checkbox]:checked {
  background-color: #1ebd4b;
  border-color: #1aac44;
}

/* login: BEGIN */
body.login {
  --bcbi-primary-color: #ccc;
  --bs-heading-color:#ccc;
  background-color: #111;
  display: flex;
  align-items: center;
}

body.login #app {
  flex: 1;
  width: 100vw;
}

.box-login {
  font-size: 1.4rem;
  border-radius: 1rem;
  background-color: #000;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.2);
}

.box-login h2 {
  margin-top: 1.5rem;
}

.box-login .form-control {
  font-size: 1.4rem;
  height: auto;
  line-height: 2;
}

.box-login .msg-error > span {
  display: block;
  margin-top: 2rem;
  padding: 1rem;
  background-color: rgba(255, 0, 0, 0.7);
  color: #fff;
  font-size: 1.2rem;
}

/* login: END */
/* --------------- 
MEDIA QUERIES
---------------  */
@media screen and (max-width: 767.98px) {
  .tableHeader:before {
    content: "Ordenar por: ";
    font-size: 1.2rem;
    color: var(--bitask-list-text);
  }
  .task-item {
    display: grid;
    grid-template-columns: minmax(50px, 14%) 1fr 60px;
    grid-template-rows: auto;
    grid-template-areas: "time task task" "time created input";
  }
  .task-alert {
    grid-area: time;
  }
  .task-info {
    grid-area: task;
  }
  .created-col {
    grid-area: created;
    padding: 1rem calc(var(--bs-gutter-x) * 0.5);
  }
  .created-col p:before {
    content: "Inserida em: ";
    color: inherit;
    font-size: inherit;
  }
  .input-col {
    grid-area: input;
    padding: 1rem calc(var(--bs-gutter-x) * 0.5);
  }
  .form-switch input[type=checkbox] {
    transform: scale(1);
  }
}/*# sourceMappingURL=main.css.map */