@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--fo-family);
font-size: var(--fo-size);
font-weight: var(--fo-weight);
line-height: var(--fo-line-height);
color: var(--body-color);
background-color: var(--body-bg);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: var(--fo-bold);
font-size: var(--fo-size);
}
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 10px;
}
p {
margin: 0;
padding: 0;
}
.p {
margin-bottom: 7px;
}
i {
font-style: normal;
}
a {
text-decoration: none;
}
a, a:visited {
color: var(--font-a);
}
img, a {
display: inline-block;
}
img, svg {
vertical-align: middle;
}
.bold {
font-weight: var(--fo-bold);
}
.inside {
display: flex;
align-items: center;
gap: 4px;
}
.maxwidth {
margin: 0 auto;
width: 100%;
max-width: var(--max-width);
}
.fs-90 {
font-size: 90%;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.alert {
margin: 7px auto;
max-width: var(--max-width); 
font-size: 90%;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
.bs-danger {
color: #dc3545;
}
.bs-success {
color: #198754;
}
.short-text {
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.hiding {
display: none;
}
.opacity-0 {
opacity: 0;
}
/*container*/
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex-grow: 1;
padding: 50px 25px;
}
main.hidden-elements > .content-new-questions {
    display: none !important;
}
main.hidden-elements > #loadMoreBtn {
    display: none !important;
}
.switch-buttons {
width: 100%;
max-width: var(--max-width);
margin: 0 auto 50px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.switch-buttons div {
display: flex;
align-items: center;
gap: 30px;
}
.switch-buttons button,
.switch-buttons i {
display: block;
cursor: pointer;
background-color: var(--switch-buttons-bg);
color: var(--switch-buttons-color);
line-height: 0;
font-size: 18px;
transition: all 0.3s ease-in-out;
border-bottom: 1px solid transparent;
padding: 7px;
border-radius: 5px;
border: 1px solid var(--switch-buttons-border);
transition: all 0.3s ease-in-out;
}
.switch-buttons button.active {
color: var(--switch-buttons-active);
border-color: var(--switch-buttons-active);
}
.content-new-questions {
width: 100%;
max-width: var(--max-width);
margin: 0 auto 25px auto;
position: sticky;
position: -webkit-sticky;
top: 25px;
z-index: 999;
justify-content: center;
}
.header {
background-color: var(--header-bg);
color: var(--header-color);
width: 100%;
}
.header .content {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 15px 25px;
}
.header .logo {
width: 76px;
height: 100px;
background-image: var(--logo);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.footer {
padding: 15px 25px;
font-size: 80%;
letter-spacing: 1px;
direction: ltr;
display: flex;
justify-content: center;
}
.start {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 100px 25px;
background-color: var(--start-bg);
position: relative;
}
.waiting {
position: absolute;
top: 0; 
left: 0;
bottom: 0;
right: 0;
background-image: url('waiting.svg');
background-position: center;
background-size: 80px;
background-repeat: no-repeat;
z-index: 999;
}
/**/
input, textarea, button {
font-family: inherit;
font-size: medium;
}
button {
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
white-space: nowrap;
padding: 0;
}
button:disabled {
cursor: auto;
}
/**/
.data-waiting {
position: relative;
}
.data-waiting::before {
content: '';
position: absolute;
top: 0; 
left: 0;
bottom: 0;
right: 0;
background-image: url('waiting.svg');
background-position: center;
background-size: 80px;
background-repeat: no-repeat;
z-index: 999;
}
.cards {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
min-height: 100px;
box-shadow: var(--shadow);
}
.card {
background-color: var(--card-bg);
padding: 25px;
width: 100%;
transition: all 0.3s ease-in-out;
border-right: 3px solid transparent;
position: relative;
}
.card:first-child {
padding-top: 50px;
}
.card-hide {
display: none;
}
.new-posts {
color: #39739d !important;
}
.card-focus {
border-color: #7aa7c7;
}
.new-card {
border-color: #FFB703;
}
.my-question {
border-color: #9D4EDD;
}
.card-body {
font-size: 110%;
cursor: pointer;
color: var(--card-color);
}
.card-footer {
display: flex;
justify-content: space-between;
margin-top: 25px;
border-bottom: 1px solid var(--card-border);
padding-bottom: 25px;
}
.card:last-child .card-footer {
border-bottom: none !important;
}
.card-footer .actions {
display: flex;
align-items: center;
gap: 25px;
}
.card-footer .actions i {
font-size: 14px;
cursor: pointer;
color: var(--card-icon);
}
.timestamp {
color: var(--timestamp) !important;
font-size: 80% !important;
}
/* Answers */
.answers {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;
}
.field-add-answer,
.field-add-question {
border-width: 0 0 1px 0;
border-style: solid;
border-color: var(--field-border);
position: relative;
overflow: hidden;
}
.field-add-answer textarea,
.field-add-question textarea {
display: block;
width: calc(100% - 60px);
resize: none;
border: none;
outline: none;
padding: 15px 0;
background-color: transparent;
color: var(--field-color);
}
.field-add-question textarea {
font-size: 150%;
}
.field-add-answer button,
.field-add-question button {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.answer-cards {
display: flex;
flex-direction: column;
}
.answer {
color: var(--answer-color);
padding: 20px 0;
border-bottom: 1px solid var(--answer-border);
transition: all 0.7s ease-in-out;
}
.answer-hide {
display: none;
}
.answer .actions {
display: flex;
align-items: center;
justify-content: space-between;
}
.answer .actions i {
font-size: 14px;
cursor: pointer;
color: var(--card-icon);
}
.answer-body {
display: flex;
gap: 15px;
}
.answers .content {
width: calc(100% - 50px);
}
.character {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
font-weight: var(--fo-bold);
}
.bg-1 {
background-color: #00A776;
color: #fff;
}
.bg-2 {
background-color: #FFC107;
color: #fff;
}
.bg-3 {
background-color: #FF5722;
color: #fff;
}
.bg-4 {
background-color: #E91E63;
color: #fff;
}
.bg-5 {
background-color: #9C27B0;
color: #fff;
}
.bg-6 {
background-color: #3F51B5;
color: #fff;
}
.bg-7 {
background-color: #2196F3;
color: #fff;
}
.bg-8 {
background-color: #00BCD4;
color: #fff;
}
.bg-9 {
background-color: #009688;
color: #fff;
}
.bg-10 {
background-color: #4CAF50;
color: #fff;
}
.bg-11 {
background-color: #795548;
color: #fff;
}
.bg-12 {
background-color: #607D8B;
color: #fff;
}
.bg-13 {
background-color: #DDA15E;
color: #fff;
}
.bg-14 {
background-color: #002bff;
color: #fff;
}
.bg-15 {
background-color: #ff00c8;
color: #fff;
}
.bg-16 {
background-color: #ff7300;
color: #fff;
}
.m-10 {
margin: 25px auto 0 auto;
}
.button-10 {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
border-radius: 6px;
border: none;
color: #fff;
box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
background-color: #3A6CD9;
}
.button-10:focus {
box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
outline: 0;
}
.btn-waiting {
background-image: url('waiting-2.svg');
background-position: left center;
background-size: 30px;
background-repeat: no-repeat;
padding-left: 30px !important;
}
/* button 85 */
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}
/* pupup */
.hidene {
display: none;
}
.show {
display: block;
}
.pupup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
color: #000;
}
.pupup-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.pupup-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
border-bottom:  1px solid #ddd;
padding-bottom: 15px;
}
.pupup-header p {
border-right:  1px solid #ddd;
padding-right: 15px;
width: 100%;
}
.pupup-content {
display: flex;
flex-direction: column;
gap: 15px;
}
.close-pupup {
cursor: pointer;
}
/* alert */
.pop-up-alert {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
transition: all 0.3s ease-in-out;
}
.alert-b {
  position: relative;
  padding: 1rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}