:root {
  --clr-bg: #0f0f1a;
  --clr-text: #ccc;
  --clr-checkbox-bg: #1a1a2e;
  --clr-stroke-inactive: #555;
  --clr-stroke-active: #0e1271;
  --clr-text-active: #0e1271;
  --clr-bg-2: #f2f2f2;

  /* komatsu #0e1271*/
  /* vermelho b41f17 */
}

.container-layout-n input[type="checkbox"] {
  display: none;
}

.container-layout-n {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--clr-bg-2);
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #dfdfdf;
}
.container-layout-n label {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 0.5rem;
}
.container-layout-n .flex p {
  opacity: 0.6;
  margin-bottom: 0;
}
.container-layout-n .flex span {
  font-size: 1.3rem;
  font-weight: 600;
}
.container-layout-n label span {
  transition: 0.3s ease-in;
  transition-delay: 3s;
}
.container-layout-n svg {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background-color: var(--clr-text);
  box-shadow: 0 0 10px rgba(0 0 0 / 10%);
}
.container-layout-n svg path:nth-of-type(2) {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 0.3s ease-in;
}
.container-layout-n svg path:nth-of-type(3) {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 0.3s ease-in;
  /* stroke: var(--clr-stroke-inactive); */
}
.container-layout-n input.active + label svg path:nth-of-type(2),
.container-layout-n input.active + label svg path:nth-of-type(3) {
  animation: checked 1s forwards;
  animation-delay: 0.5s;
}

.container-layout-n input.active + label span {
  animation: color 0.5s forwards;
  animation-delay: 1.3s;
}
.container-layout-n .div-checkbox {
  border-bottom: dashed;
  border-width: thin;
  border-color: #bbbbbb;
  margin-bottom: 0.5rem;
}
.container-layout-n .div-checkbox:last-child {
  border: none;
}
@keyframes checked {
  0% {
    stroke-dashoffset: 70;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: var(--clr-stroke-active);
  }
}
@keyframes color {
  0% {
  }
  100% {
    color: var(--clr-text-active);
  }
}
.alert-layout-n {
  --bs-alert-color: #ffffff;
  --bs-alert-bg: var(--clr-stroke-active);
  --bs-alert-border-color: var(--clr-stroke-active);
}

.alert-layout-n .checkbox1 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 0.5rem;
}

.alert-layout-n .checkbox1 svg {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0 0 0 / 10%);
}
.alert-layout-n .checkbox1 svg path:nth-of-type(2) {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 0.3s ease-in;
}
.alert-layout-n .checkbox1 svg path:nth-of-type(3) {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset 0.3s ease-in;
  /* stroke: var(--clr-stroke-inactive); */
}
.alert-layout-n .checkbox1 svg path:nth-of-type(2),
.alert-layout-n .checkbox1 svg path:nth-of-type(3) {
  animation: checked2 1s forwards;
}
@keyframes checked2 {
  0% {
    stroke-dashoffset: 70;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #23c378;
  }
}