/* css/ifc.css */
/*
.ifc-answer {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px;
    opacity: 1;
}
*/
.ifc-answer.new {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
/*
#ifc-answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ifc-answer {
    flex: 1 1 calc(25% - 20px);
}
*/
#ifc-answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Laatikoiden tasaus */
    gap: 15px; /* Väli laatikoiden välillä */
}

.ifc-answer {
    flex: 1 1 calc(33.333% - 15px); /* Maksimissaan kolme per rivi */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    min-height: 150px; /* Pitää laatikot tasakokoisina */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Varmistetaan, että rivi ei koskaan täyty yli kolmella */
@ifc-answer:nth-child(3n+1) {
    clear: left;
}

/* Responsiivisuus: max 2 per rivi */
@media (max-width: 768px) {
    .ifc-answer {
        flex: 1 1 calc(50% - 15px);
    }
}

/* Responsiivisuus: yksi per rivi */
@media (max-width: 480px) {
    .ifc-answer {
        flex: 1 1 100%;
    }
}

.ifc-blue { background-color: #add8e6; }    /* Vaaleansininen */
.ifc-pink { background-color: #ffb6c1; }   /* Vaaleanpunainen */
.ifc-green { background-color: #90ee90; }  /* Vaaleanvihreä */
.ifc-yellow { background-color: #ffff99; } /* Vaaleankeltainen */

.ifc-answer .card {
    background-color: #f0f0f0;
    border: none;
}

.ifc-answer .card-body {
    background-color: transparent;
}

.ifc-word-cloud-container {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin: 20px 0;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.ifc-word-cloud-container div[id^="ifc-word-cloud-"] {
    width: 600px;
    height: 400px;
    margin: 0 auto;
}

div.jqcloud {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 30px;
  line-height: normal;
}

div.jqcloud a {
  font-size: inherit;
  text-decoration: none;
}

div.jqcloud span.w10 { font-size: 280%; }
div.jqcloud span.w9 { font-size: 260%; }
div.jqcloud span.w8 { font-size: 240%; }
div.jqcloud span.w7 { font-size: 220%; }
div.jqcloud span.w6 { font-size: 200%; }
div.jqcloud span.w5 { font-size: 180%; }
div.jqcloud span.w4 { font-size: 160%; }
div.jqcloud span.w3 { font-size: 140%; }
div.jqcloud span.w2 { font-size: 120%; }
div.jqcloud span.w1 { font-size: 100%; }

div.jqcloud { color: #09f; }
div.jqcloud a { color: inherit; }
div.jqcloud a:hover { color: #0df; }
div.jqcloud a:hover { color: #0cf; }
div.jqcloud span.w10 { color: #0cf; }
div.jqcloud span.w9 { color: #0cf; }
div.jqcloud span.w8 { color: #0cf; }
div.jqcloud span.w7 { color: #39d; }
div.jqcloud span.w6 { color: #90c5f0; }
div.jqcloud span.w5 { color: #90a0dd; }
div.jqcloud span.w4 { color: #90c5f0; }
div.jqcloud span.w3 { color: #a0ddff; }
div.jqcloud span.w2 { color: #99ccee; }
div.jqcloud span.w1 { color: #aab5f0; }

/* layout */

div.jqcloud {
  overflow: hidden;
  position: relative;
}

div.jqcloud span { padding: 0; }