convertTailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.passive {
    transform: translateX(101%);
    bottom: 20px;
    right: 0px;
}

.active {
    transform: translateX(-2%);
}

.question-number-input {
    width: 150px;
}

.message-box {
    transform: translateX(110%);
    top: 10rem;
    right: 0px;
    z-index: 22;
}

.message-box.active {
    transform: translateX(0%);
}

.question-box {
    transition: all 150ms ease-in-out;
}

.question-box.false {
    filter: brightness(90%);
    background: #a84448;
    color: #eeeeee;
    pointer-events: none;
}

.question-box.true {
    filter: brightness(90%);
    background: #539165;
    color: #eeeeee;
    pointer-events: none;
}

.question-box.result-visible {
    filter: brightness(90%);
    background: #2c3333;
    color: #eeeeee;
    pointer-events: none;
}

.reply-button.false,
.reply-button.true {
    display: none !important;
}

.user-answer.false,
.user-answer.true {
    background: transparent;
    color: #eeeeee !important;
    margin: 0.25rem 0;
    padding: 0 !important;
}