@font-face {
  font-family: "customFont"; /*a name to be used later*/
  src: url("../UbuntuMono-R.ttf"); /*URL to font*/
}

#foro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#foro .foro-post {
  border: 1px solid rgb(187, 187, 187);

  border-radius: 3px;
  padding: 20px 13px;
  color: black;
  text-decoration: none;
}

#foro .foro-post:hover {
  border: 1px solid rgb(121, 206, 177);

  transition: 0.4s;

  cursor: pointer;
}

#foro .h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

#foro .time {
  font-size: 12px;
  font-weight: 300;
  color: rgb(68, 68, 68);
  text-align: right;
  white-space: nowrap;
}

#foro .counter {
  font-size: 13px;
  font-weight: 300;
  color: rgb(68, 68, 68);
  margin-top: 8px;
  font-style: italic;
}

.flex {
  display: flex;
}

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

.right {
  justify-content: right;
}

.up svg {
  width: 30px;
}

#enviar_pregunta {
  /* background-color: #ffffff; */
  border: 1px solid rgb(146, 146, 146);

  margin-top: 20px;

  width: fit-content;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.r {
  justify-content: right;
}

#lanzar-pregunta {
  /* background-color: rgb(249, 253, 252); */
  margin-top: 20px;
  border-radius: 5px;
  padding: 20px;
  border: 1px solid rgb(187, 187, 187);

  display: none;
}

#lanzar-pregunta h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: rgba(0, 0, 0, 0.637);
}

#lanzar-pregunta #enviar {
  background-color: rgb(222, 252, 214);
  color: rgb(18, 100, 18);
  font-weight: 200;
  font-size: 20px;
  width: fit-content;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#lanzar-pregunta #cancelar {
  background-color: rgb(252, 214, 214);
  color: rgb(100, 18, 18);
  font-weight: 200;
  font-size: 20px;
  width: fit-content;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

#lanzar-pregunta h4 {
  margin: 0;
  font-size: 20px;
}

#text-imput {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgb(187, 187, 187);
}

#text-imput > input {
  all: unset;
  /* background-color: red; */
  width: 100%;
  font-size: 20px;
  font-weight: 600;
}

#text-imput > .input {
  /* all: unset; */
  /* background-color: red; */

  resize: none;
  overflow: hidden;
  outline: none;

  font-family: customFont system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  border: none;
  background-color: transparent;

  width: 100%;
  font-size: 20px;
  font-weight: 600;
  min-height: 20px;
  max-height: 100px;
}

#text-imput > .input2 {
  /* all: unset; */
  /* background-color: red; */

  resize: none;
  overflow: hidden;
  outline: none;

  font-family: customFont system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;

  border: none;
  background-color: transparent;

  width: 100%;
  font-size: 15px;
  font-weight: 400;
  min-height: 50px;
  max-height: 100px;
}

#login {
  margin-top: 20px;
  border-radius: 5px;
  padding: 20px;
  border: 1px solid rgb(187, 187, 187);

  flex-direction: column;
  gap: 10px;

  /* display: none; */
}

#login .h2 {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
}

#login input {
  all: unset;
  /* background-color: red; */

  font-size: 20px;
  font-weight: 300;
  padding: 2px 10px;
}

#login .input {
  border-bottom: 1px solid rgb(179, 179, 179);
  width: 50%;
}

#login .focus {
  border-bottom: 1px solid rgb(116, 116, 116);
}

#login .button {
  /* border: 1px solid rgb(179, 179, 179); */
  padding: 5px 10px;
  border-radius: 5px;
  color: rgb(190, 190, 190);
  background-color: rgb(173, 173, 173);
  cursor: default;
}
#login .active {
  color: white;
  background-color: rgb(56, 56, 56);
  cursor: pointer;
}

#login .enviado {
  color: white;
  background-color: rgb(23, 80, 32);
  cursor: pointer;
}

#login .input2 {
  border: 1px solid rgb(179, 179, 179);
  color: rgb(0, 0, 0);
  border-radius: 3px;
  padding: 10px 10px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(219, 219, 219);
  /* width: 20px; */
  /* height: 20px; */
}

#login .input2 span {
  width: 13px;
  height: 22px;
  /* background-color: red !important; */
}

.loader {
  width: 28px;
  height: 28px;
  border: 3px solid #62a59c;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}