body {
    background-image: url("../img/background.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
}

#login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
}

#main {
    width: 100%;
    height: auto;
}

.login-container {
    width: 60%;
    height: auto;
    background-color: white;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.llm-container {
    width: 60%;
    height: auto;
    background-color: white;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 15px;
}

.llm-container-selected {
    width: 95%;
    height: auto;
    background-color: white;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 15px;
}

#footer {
    height: 10%;
    width: 100%;
    background-color: white;
}

.form-check-input:checked {
    background-color: #8D64AA;
    border-color: #8D64AA;
}

.btn-custom {
    background-color: #684A7D;
    border: 1px solid #684A7D;
}

.btn-custom:hover {
    background-color: #8D64AA;
    border: 1px solid #8D64AA;
}

.custom-input-group {
    border-radius: 8px; /* Arrotonda i bordi */
    overflow: hidden;   /* Assicura che gli angoli dell'input siano arrotondati */
    transition: background-color 0.3s ease; /* Aggiunge una transizione al colore di sfondo */
}

.custom-input-group.active {
    background-color: purple; /* Colore viola quando la checkbox è selezionata */
}

.custom-input-group .form-control, .custom-input-group .input-group-text {
    border: none; /* Rimuove i bordi degli elementi interni */
    color: white;
}

.form-check-input:checked + .form-control {
    color: white; /* Colore del testo bianco */
}

.form-control.active {
    background-color: rgba(75, 18, 115, 0.18);
}

.selected.active::placeholder {
    color: white; /* Colore blu o quello che preferisci */
}

.correct.active {
    background: #CFEEDD;
    border: 1px solid #007C50;
}

.form-control.active::placeholder {
    color: black;
}

.readonly-like-disabled {
    background-color: #E9ECEF;
    color: #6C757D;
    cursor: not-allowed;
}

.readonly-like-disabled:focus {
    border-color: #CED4DA;
    box-shadow: none;
}

.sidebar-logos-box {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.sidebar-logos img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.answer-container-correct {
    background: #CFEEDD;
    border: 1px solid #007C50;
    border-radius: 15px;
}

.answer-container-incorrect {
    background: #FF1A1A0D;
    border: 1px solid #FF1A1A;
    border-radius: 15px;
}

.incorrect.active {
    background: #FF1A1A0D;
    border: 1px solid #FF1A1A;
}

.form-control.active::placeholder {
    color: black;
}