body,button, html, input, select, h1,textarea {
font-family:system-ui;
font-size: 14px;
}
/* Section des commentaires */
.comments-section {
margin: 15px 10px;
background-color: #f0f2f5; /* Couleur de fond comme Facebook */
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 12px;
}
/* Titre des commentaires */
.comments-section h4 {
margin-bottom: 12px;
font-size: 14px;
color: #1c1e21;
font-weight: 600;
padding-bottom: 8px;
border-bottom: 1px solid #dadde1;
}
/* Conteneur d'un commentaire */
.comment {
margin-bottom: 10px;
position: relative;
}
/* Informations de l'utilisateur et bulle de commentaire */
.comment-user {
display: flex;
align-items: flex-start;
margin-bottom: 2px;
}
.comment-user img {
border-radius: 50%;
height: 32px;
width: 32px;
margin-right: 8px;
border: 1px solid #dadde1;
}
.comment-user span {
font-weight: 600;
color: #385898;
font-size: 13px;
margin-bottom: 2px;
display: block;
}
/* Texte du commentaire */
.comment-text {
background-color: #ffffff;
border-radius: 18px;
padding: 8px 12px;
font-size: 13px;
color: #1c1e21;
line-height: 1.3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
max-width: calc(100% - 40px);
margin-left: 40px;
margin-top: -15px;
position: relative;
word-wrap: break-word;
}
/* Date du commentaire */
.comment-date {
font-size: 11px;
color: #65676b;
margin-top: 4px;
margin-left: 40px;
}
/* Options du commentaire (Like, Reply) */
.comment-actions {
display: flex;
margin-left: 40px;
margin-top: 2px;
}
.comment-actions a {
font-size: 12px;
font-weight: 600;
color: #65676b;
margin-right: 8px;
text-decoration: none;
}
.comment-actions a:hover {
text-decoration: underline;
}
/* Formulaire d'ajout de commentaire */
.comment-form {
display: flex;
align-items: center;
margin-top: 15px;
padding: 8px;
border-top: 1px solid #dadde1;
}
.comment-form textarea {
flex: 1;
padding: 8px 12px;
border: 1px solid #ccd0d5;
border-radius: 20px;
font-size: 13px;
color: #1c1e21;
resize: none;
background-color: #f0f2f5;
outline: none;
}
.comment-form textarea:focus {
border-color: #1877f2;
background-color: #ffffff;
}
.comment-form button {
background-color: transparent;
border: none;
color: #1877f2;
font-size: 16px;
margin-left: 8px;
cursor: pointer;
padding: 8px;
}
.comment-form button:hover {
color: #165bba;
}
/* Animation de transition */
.comment, .comment-text {
transition: all 0.2s ease;
}
/* Pour afficher l'icône d'envoi dans le bouton Commenter */
.comment-form button::after {
content: "\f1d8"; /* Code Unicode pour l'icône d'envoi */
font-family: FontAwesome;
}
/* Actions du commentaire (les trois points) */
.comment-actions {
position: absolute;
top: 10px;
right: 10px;
opacity: 0; /* Masqué par défaut */
transition: opacity 0.2s ease; /* Animation douce */
}
/* Afficher les actions au survol du commentaire */
.comment:hover .comment-actions {
opacity: 1;
}
/* Style du bouton des trois points */
.action-menu {
background: none;
border: none;
cursor: pointer;
padding: 5px;
color: #666;
font-size: 16px;
}
.action-menu:hover {
color: #333;
}
/* Menu déroulant */
.menu-content {
display: none;
position: absolute;
right: 0;
top: 20px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 5px 0;
z-index: 1;
}
.menu-content a {
display: block;
padding: 5px 10px;
font-size: 12px;
color: #333;
text-decoration: none;
}
.menu-content a:hover {
background-color: #f5f5f5;
}
/* Responsive design pour mobile */
@media (max-width: 576px) {
.comment-text {
max-width: calc(100% - 30px);
margin-left: 30px;
}
.comment-user img {
height: 28px;
width: 28px;
}
}
/* Style pour les réponses aux commentaires (si besoin) */
.comment-replies {
margin-left: 40px;
margin-top: 5px;
}
/* Ajouter un compteur de likes */
.comment-likes {
font-size: 11px;
color: #65676b;
margin-left: 40px;
margin-top: 2px;
}
.comment-likes i {
color: #1877f2;
margin-right: 3px;
}
.quran-text {
font-size: 1.05rem;
line-height: 2.5;
margin-top: 1rem;
}
.verse-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid #000;
border-radius: 50%;
margin: 0 0.5rem;
font-style: normal;
}
.brand {
font-size: 1.5rem;
text-decoration: none;
color: #000;
margins: 1rem 0;
display: block;
}
.stats {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin: 1rem 0;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.stat-label {
border-radius: 9999px;
padding: 0.25rem 1rem;
color: white;
font-size: 0.9rem;
}
.stat-value {
font-size: 1rem;
direction: ltr;
}
.members { background-color: #b69dfc; }
.documents { background-color: #2cc302; }
.images { background-color: #f36; }
.user-avatars {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 2rem;
}
.avatar {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.more-users {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.question img{
width: 100%;
}
.exercise-title {
color: #2c3e50;
font-size: 22px;
margin-bottom: 20px;
}
.exercise-image {
margin-bottom: 20px;
border-radius: 10px;
display: block;
width: 100%;
}
.exercise-text {
background-color: #f0f4ff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
.blank-input-valid {
width: 120px;
padding: 8px;
margin: 5px ;
border: 2px solid #3498db;
border-radius: 6px;
font-size: 16px;
transition: all 0.3s ease;
}
.blank-input-valid:focus {
outline: none;
border-color: #2ecc71;
box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);
}
.button-container {
display: flex;
justify-content: flex-start;
gap: 15px;
}
.action-button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-family: 'Comic Neue', cursive;
transition: all 0.3s ease;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.action-button:hover {
background-color: #2ecc71;
transform: translateY(-2px);
}
#evaluation {
max-width: 800px;
margin: 20px auto;
background: #FFFFFF;
border-radius: 0;
padding: 10px;
padding-bottom: 10px;
box-shadow: 0 8px 32px rgba(147, 112, 219, 0.15);
}
@media only screen and (max-width: 400px) {
#evaluation {
padding: 0;
padding-bottom: 10px;
}
.exerciseContainerFleche {
padding: 10px;
}
}
#evaluation-container {
max-width: 800px;
padding: 0px;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.evaluation-section {
transition: opacity 0.5s ease-in-out;
border-radius: 10px;
}
.evaluation-section.active {
display: block;
opacity: 1;
}
.evaluation-section h1 {
font-size: 1.2rem;
color: #333;
margin-top: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
transform: scale(0.95);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateX(30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes shine {
from {
background-position: -200% center;
}
to {
background-position: 200% center;
}
}
/* Container principal avec animation */
.containerJson {
margin: 0 auto;
padding: 20px;
background: linear-gradient(to bottom, #f0f9ff, #ffffff);
border-radius: 16px;
animation: fadeIn 0.6s ease-out;
}
/* Question avec animation */
.question {
background-color: #ffffff;
border-radius: 16px;
padding: 10px 20px;
color: #2d3748;
margin: 0px auto;
font-size: 16px;
width: 90%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: right;
font-family: system-ui;
line-height: 1.6;
animation: scaleIn 0.5s ease-out;
}
/* Options avec animations */
.question label {
display: flex;
align-items: center;
background-color: #f7fafc;
color: #4e5e7a;
padding: 12px 16px;
margin: 8px 0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid #e2e8f0;
animation: slideIn 0.5s ease-out backwards;
}
/* Animation décalée pour chaque option */
.question label:nth-child(2) { animation-delay: 0.1s; }
.question label:nth-child(3) { animation-delay: 0.2s; }
.question label:nth-child(4) { animation-delay: 0.3s; }
.question label:nth-child(5) { animation-delay: 0.4s; }
/* Hover sur les options avec effet brillant */
.question label:hover {
background: linear-gradient(
90deg,
#f7fafc 0%,
#ebf8ff 50%,
#f7fafc 100%
);
background-size: 200% 100%;
animation: shine 1.5s infinite linear;
border-color: #4299e1;
transform: translateY(-2px);
}
/* Option sélectionnée avec animation pulse */
.question label.selected {
background-color: #ebf8ff;
border-color: #4299e1;
animation: pulse 2s infinite;
}
/* Boutons avec animations */
.buttonQuizz{
background-color: #4299e1;
padding: 10px 24px;
color: white;
border: none;
border-radius: 12px;
margin: 0 6px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
margin-top:20px;
}
/* Effet d'ondulation sur les boutons */
.buttonQuizz::after,
.buttonQuizz_1035658::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
transition: transform 0.6s;
}
.buttonQuizz:hover::after,
.buttonQuizz_1035658:hover::after {
transform: translate(-50%, -50%) scale(1);
}
/* Animation du feedback */
.feedback {
padding: 16px;
margin: 20px auto;
width: 90%;
border-radius: 12px;
text-align: center;
font-weight: 500;
animation: scaleIn 0.4s ease-out;
transform-origin: center;
}
/* Animation spécifique pour le feedback correct */
.feedback.correct {
background-color: #c6f6d5;
color: #276749;
border: 1px solid #9ae6b4;
animation: scaleIn 0.4s ease-out, pulse 2s infinite;
}
/* Animation spécifique pour le feedback incorrect */
.feedback.incorrect {
background-color: #fed7d7;
color: #9b2c2c;
border: 1px solid #feb2b2;
animation: scaleIn 0.4s ease-out, shake 0.5s ease-out;
}
/* Animation de secousse pour les erreurs */
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Animation pour l'apparition des éléments du lecteur audio */
.audio-player {
animation: fadeIn 0.6s ease-out;
}
/* Animation pour le chargement initial */
@keyframes loadIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.rtl {
animation: loadIn 0.5s ease-out;
}
.phrases {
background-color: #f0f8ff;
text-align: center;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
.phrases h1 {
font-size: 2.5rem;
color: #333;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.instruction {
font-size: 1rem;
color: #555;
line-height: 25px;
margin: 10px;
font-weight: bold;
}
/* Main container for words */
.word-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin: 20px auto;
padding: 10px;
background: linear-gradient(135deg, #ffffff, #e9f5ff);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 15px;
max-width: 700px;
border: 3px dashed #007bff;
transition: all 0.3s ease;
}
.word-container:hover {
border-color: #0056b3;
background: #eaf3ff;
}
/* Word styles */
.wordPhrase {
padding: 12px 20px;
font-size: 1rem;
font-weight: bold;
text-transform: capitalize;
border: 2px solid #007bff;
border-radius: 12px;
background-color: #e7f3ff;
color: #0056b3;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
user-select: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.wordPhrase:hover {
background-color: #007bff;
color: white;
transform: translateY(-5px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.wordPhrase:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Custom buttons */
.custom-button {
padding: 12px 30px;
font-size: 1rem;
font-weight: bold;
background-color: #28a745;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s ease, box-shadow 0.2s ease;
margin: 10px 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.custom-button:hover {
background-color: #218838;
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.custom-button:active {
background-color: #1e7e34;
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Result display */
.resultPhrase {
font-size: 1.2rem;
font-weight: bold;
border-radius: 10px;
padding: 10px;
margin-top: 15px;
transition: opacity 0.3s ease;
}
.resultPhrase.correct {
color: #28a745;
}
.resultPhrase.wrong {
color: #dc3545;
font-size: 1.2rem;
font-weight: bold;
border-radius: 10px;
padding: 10px;
}
.download-button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s;
}
.download-button:hover {
background-color: #0056b3;
}
h2 {
font-family:system-ui;
font-size: 16px;
}
.rtl
{
direction: rtl;
}
.containerJson {
background: #fff;
margin: 0 10px;
padding: 0;
border-radius: 10px;
padding-top: 0;
margin-top: 10px;
}
#feedback-message {
margin-top: 10px; /* Espace entre le message de feedback et l'explication */
}
#feedback-message span.second-part {
color: black; /* Couleur de la deuxième partie */
display: block; /* Assure que le margin-top fonctionne correctement */
margin-top: 20px; /* Augmenter l'espacement au-dessus de la deuxième partie */
line-height: 30px;
}
.question-container {
margin-bottom: 20px;
}
.next-button {
margin: 10px auto;
border: none;
padding: 10px 20px;
color: #fff;
border-radius: 5px;
cursor: pointer;
width: auto;
}
.reset-button {
margin: 10px auto;
border: none;
padding: 10px 20px;
color: #fff;
border-radius: 5px;
cursor: pointer;
width: auto;
}
.next-button {
background-color: #007bff; /* Couleur de fond pour le bouton "Question suivante" (bleu) */
width: auto;
}
.reset-button {
background-color: #28a745; /* Couleur de fond pour le bouton "Répéter le quiz" (vert clair) */
width:auto;
}
.containerForm {
margin: 20px auto;
margin-top: 5px;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.h1Form {
font-size: 24px;
color: #cd17e7;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 20px;
margin-top: 15px;
}
.form-group label {
display: block;
font-weight: 500;
margin-bottom: 8px;
color: #555;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.form-group select {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
.form-group button {
margin-top: 15px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.form-group button:hover {
background-color: #0056b3;
}
.question-form {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
background: #f9f9f9;
}
.question-form h3 {
margin-top: 0;
color: #333;
}
.option {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #ffffff;
}
.option input[type="radio"] {
margin-right: 10px;
}
.option-text {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.option button {
padding: 8px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
.option button:hover {
background-color: #218838;
}
.explanation-group {
margin-top: 10px;
}
.explanation-group label {
display: block;
font-weight: 500;
color: #555;
}
.explanation-text {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
#result {
margin-top: 20px;
font-weight: bold;
text-align: center;
}
.success {
color: #28a745;
}
.error {
color: #dc3545;
}
.scrollable-container {
background-color: #f5f6f7;
padding: 10px;
margin-top: 10px;
border-radius: 4px;
overflow-y: auto;
height: 200px;
}
.scrollable-container label {
display: block;
margin-bottom: 10px;
font-family: system-ui;
}
.scrollable-container input[type="checkbox"] {
margin-right: 10px;
}
.emploi {
max-width: 585px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding-top: 10px;
}
.TitleH{
text-align: center;
color: #e6452;
margin-bottom: 20px;
font-size: 24px;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-top:0;
}
.carousel {
position: relative;
overflow: hidden;
}
.carousel-images {
display: flex;
transition: transform 0.5s ease;
}
.carousel-images img {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.carousel-button {
width: 50px;
height: 50px;
font-size: larger;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
}
.carousel-button.prev {
left: 10px;
}
.carousel-button.next {
right: 10px;
}
body{
margin: 0px;
margin:0px;
background-color: #f0f2f5;
}
#hd{
height: 45px;
justify-content: space-between;
}
#approbation
{
display:none;
}
.closeX{
border-radius: 50%;
background-color: red;
width: 25px;
height: 25px;
color: white;
display: flex;
justify-content: center;
font-weight: 600;
position: absolute;
right: 0;
top: -10px;
font-size: 18px;cursor: pointer;
}
.status-circle {
width: 13px;
height: 13px;
border-radius: 50%;
display: inline-block;
position: absolute;
bottom: 8px;
left: 50px;
border: 2px solid white;
}
/* Statut en ligne */
.status-circle.online {
background-color: green; /* Couleur verte pour "en ligne" */
}
/* Statut hors ligne */
.status-circle.offline {
background-color: gray; /* Couleur grise pour "hors ligne" */
}
/* Statut occupé */
.status-circle.busy {
background-color: red; /* Couleur rouge pour "occupé" */
}
/* Statut absent */
.status-circle.away {
background-color: orange; /* Couleur orange pour "absent" */
}
.send{
color: #00d9ff;
background-color: #f5f6f7;
height: 30px;
transform: rotate(4deg);
width: 30px;
margin-left: 10px;
display: flex;
padding: 5px;
border-radius: 50%;
justify-content: center;
font-size: 1.7em;
align-self: center;
cursor: pointer;
align-items: center;
}
#score{
border-radius: 50%;
background-color: #f53f46;
color: white;
font-weight: bold;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
transform: translateY(20px);
padding: 3px;
align-items: center;"
}
.target.small, .wrong.small {
height: 20px;
line-height: 20px;
border-radius: 10px;
padding: 0 10px;
font-weight: normal;
font-size: 14px;
float: none;
display: inline-block;
}
.target, .wrong {
/* min-width: 100px; */
background-color: transparent;
border: solid 1px #643b6a;
margin: 0 auto;
padding:0;
}
.word.small, .target.small, .wrong.small, .correct.small {
display: inline-block;
}
.word, .target, .wrong{
color: #fff;
border-radius: 25px;
font-weight: bold;
font-size: 12px;
padding: 6PX 20px;
letter-spacing: 1px; margin-right: 10px;
}
#word1,#word2,#word3,#word4,#word5,#word6{
background-color: #643b6a;text-align: center;margin-top: 10px;
}
.imgHeader{
border: solid 1px #00d9ff;
padding: 2px;
width:35px;height:35px ;
border-radius:50%;
}
.theme
{
height: 200px;
display: flex;
font-size: x-large;
background-size: cover;
font-weight: bold;
justify-content: center;
line-height: 40px;
align-items: center;
padding: 60px;
text-align: center;
}
.btnMarket{
padding: 10px;
width: 50%;
font-size: 1rem;
color: black;
margin: 3px;
border: 0;align-self: center;
margin-bottom: 15px; font-size: 1.5rem;
}
.imgMarket{
height:250px;
}
.market {
display: flex;
flex-wrap: wrap;
padding:10px;
gap:5px;
width: 100%;
height: fit-content;
}
.titre-article{
text-align: left;
direction: ltr;
line-height: 27px;
font-size: 1.2rem;
margin: 0px 10px 0 10px;
font-weight: bold;
font-family: Lato,Almarai,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color emoji;
}
.marketChild
{
width: 32%;
height: 250px;
font-size: 1.2rem;
overflow: hidden;
background-color: #f5f6f7;
border: solid 1px #ddd;
border-radius: 10px;
}
.tooltip {
position: relative;
display: inline-block;
}
.Abonne{
background-color: rgb(29, 155, 240);
color: white;
}
.Suivre{
background-color: white;
color: #4080ff;
border: 0;
margin: 0 10px;
padding: 0;
width: auto;
}
.Clg{
background-color: white;
}
.Clg a{
color: rgba(0, 0, 0, .8);
padding: 10px;
text-align: center;
width: 33.33%;
font-size: 1.15rem;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.AllCl{
justify-content: center;
background-color: #fff;
border-radius: 12px;
box-shadow: inset 0 0 0 1px #d3d9e0;
padding: 8px;
max-width: 300px;
margin: auto;
}
.ClActif
{
color: #3092fa;
background-color: #e2effd;
}
.BoxCl{
background-color: white;
border: solid 1px #ccc;
padding: 5px 0;margin: 5px;border-radius: 10px;
}
.BoxCl:hover{
background-color: #E0E0E0;
}
.AllCl a{
text-decoration: none;
background-color: transparent;
border-radius: 8px;
color: #9ea9b5;
font-size: 14px;
height: 24px;
padding: 0 20px;
font-size: 18px;
height: 32px;
}
.tooltiptext {
color: white;
text-align: center;
padding: 10px;
font-weight: bold;
border-radius: solid 5px red;
transition: opacity 0.3s;
}
#AffichePlus{
display: block;
max-width: 650px;
margin: auto;
margin-top: 10px;
}
.DialogMsg{
display:none;
height: 400px;
max-width: 350px;
width: 100%;
border: solid 1px;
bottom: 0;
position: fixed;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
border-radius: 15px;
background-color: #FFF;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
z-index: 1;
}
.envoyer{
background-image: url(/img/play.png);
padding-right: 5px;
background-size: cover;
height: 30px;
width: 30px;
border-radius: 50%;
border: none;
cursor: pointer;
background-position: center;
}
.grade-list-item {
list-style: none;
margin: 5px 10px 5px 0;
cursor:pointer;
}
.grade-module {
border: 1px solid #00d9ff;
border-radius: 5px;
width: 170px;
max-height: 420px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
._415
{
position: absolute;
right: calc(50% - 630px);
top: 50px;
max-width: 895px;
width: 100%;
}
.grade-box-link {
cursor: pointer;
display: block;
padding: 2px 5px 2px 0;
position: relative;
text-decoration: none;
}
.grade-box{
color:white; position: absolute;
}
.grade-box-tab {
border-radius: 19px 0 0 19px;
color: #fff;
text-align: center;
display: inline-block;
right: -3px;
padding: 8px;
top: 6px;
font-size: 1.01rem;
font-weight: bold;
}
.grade-box-tab-ar {
top: 3px;
margin-bottom: 7px;
right: -5px;
left: auto;
margin-left: 5px;
margin-right: 0;
border-radius: 20px 0 0 20px;
}
.grades-list{
flex-wrap: wrap;
padding: 0;
}
.grades-list-ar{
margin:0;
margin-right: 30px;
direction: rtl;
align-items: flex-start;
}
.grades-list-fr{
margin-left: 30px;
direction: ltr;
align-items: flex-start;
}
.grade-box-hdr {
align-self: center;
font-size: 14px;
font-weight: bold;
display: block;
margin: 0;
text-decoration: none;
}
.grade-box-short-name {
}
.logo{
border-radius: 50%;
background-color: #00d9ff;
color: white;
height: 15px;
width: 15px;
margin-right: 5px;
font-size: .8rem;
align-items: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
font-weight: 600;
}
#UpPhoto img {
margin-bottom: 10px;
margin-right: 10px;
}
#linkClose,#linkUp{
display: none;
line-height: normal;
position: fixed;
top:0px;
z-index:500;
font-size: 40px;
color: #7ebb00;
}
#msgErreurConfirmPw,#,#msgErreurPw,#msgErreurNewPw{
text-align: center;
color: red;
}
#faRej{
font-size: 1.2em;margin-right: 5px;
}
.notification {
color: white;
text-decoration: none;
position: relative;
display: inline-block;
padding:0px;
border-radius:50%;
}
.notification .badge {
position: absolute;
top: 0px;
right: 0px;
padding: 3px 7px;
border-radius: 50%;
background: red;
color: white;
display: none;
}
.infoUser{
margin: 0 5px;
color: black;
font-weight: 600;
}
.progress-container {
margin: 20px 0;
padding: 5px;
background: #f7fafc;
border-radius: 10px;
}
.progress-bar {
height: 10px;
background: linear-gradient(90deg, #ff6f61 0%, #ff9671 100%);
border-radius: 10px;
width: 40%;
transition: width 1.5s ease;
position: relative;
}
.progress-bar::after {
content: "🚀";
position: absolute;
right: -5px;
top: -15px;
font-size: 18px;
animation: pulse 1.5s infinite;
}
#progress-wrp {
display: none;
border: 1px solid #0099CC;
padding: 1px;
position: relative;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
height: 10px;
background: linear-gradient(90deg, #ff6f61 0%, #ff9671 100%);
border-radius: 10px;
width: 40%;
transition: width 1.5s ease;
position: relative;
}
#progress-wrp .status{
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}
.dropbtn,.dropbtnP,.dropbtnN,.dropbtnNEmoji{
color: #00d9ff;
border: none;
cursor: pointer;
}
.dropbtnP:hover, .dropbtnP:focus {
background-color: #2980B9;
}
.dropdown{
position: relative; align-items: center;
}
.dropdown-menu,.dropdown-menu-P,.dropdown-content,.dropdown-menu-N,.dropdown-menu-Msg,.dropdown-menu-Emoji {
display: none;
position: absolute;
background-color: #f1f1f1;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu-N,.dropdown-menu-Msg{
background-color: white;
}
#DropdownAbonne a,#DropdownMsg a,#DropdownMsgIndex a,#DropdownNotif a{
font-weight: normal;
background-color: white;
text-decoration: none;
color: black;
padding: 5px 7px;
margin: 5px 5px;
}
#DropdownMsg img, #DropdownMsgIndex img, #DropdownNotif img {
height: 55px;
width: 55px;
min-width: 55px;
}
#myDropdown,#DropdownProFil,#DropdownNotif,#DropdownMsg,#DropdownMsgIndex{
top:42px;
width: 300px;
position: absolute;
line-height: 20px;
flex-wrap: wrap;
right:0;
font-size: 12px;
color: black;
border-radius: 0 0 5px 5px;
overflow: auto;
background-color: white;
}
#Contenu1{
width:100%; margin-top: 10px;background-color: #f8f9fa; max-width: 650px;
margin: auto;
}
#DropdownAbonne{
max-width: 350px;
top:42px;
position: absolute;
line-height: 20px;
flex-wrap: wrap;
color: black;
border-radius: 0 0 5px 5px;
overflow: auto;
max-height: 570px;
padding: 5px 7px;
background-color: white;
z-index:1;
}
#Emoji{
width: 100%;
position: absolute;
line-height: 20px;
flex-wrap: wrap;
background-color: #f5f6f7;
border-radius: 0 0 5px 5px;
overflow: auto;
max-width: 460px;
}
#DropdownNotif a:hover {
background-color: #ddd;
border-radius: 5px;
}
#DropdownMsg a:hover {
background-color: #ddd;
border-radius: 5px;
}
#DropdownMsgIndex a:hover {
background-color: #ddd;
border-radius: 5px;
}
#DropdownAbonne, #DropdownProFil a {
color: black;
font-weight: normal;
justify-content: flex-end;
}
#myDropdown2{
grid-template-columns: 95px 95px 95px;
top: 48px;
position: absolute;
transform: translateX(-100px);
background-color: white;
}
.dropdown-menu a,.dropdown-menu-P a,.dropdown-menu-N a{
display: flex;
color: black;
background-color: white;
padding: 2px;
text-decoration: none;
}
.dropdown-content a {
align-items: center;
display: flex;
padding: 5px 10px;
text-decoration:none;
color: black;
font-size: 1.05rem;
text-align: center;
}
.dropdown a:hover {background-color: #ddd;}
.dropbtnP a:hover {background-color: #ddd;}
.showGrid { display: -ms-grid; /* IE 10 */
display: grid; /* None yet */}
.show {display: block;}
.hide {display: none;}
.BoxPhotos{
display: -ms-grid; /* IE 10 */
display: grid; /* None yet */
max-width: 680px;
grid-template-columns: repeat(auto-fill,minmax(160px, 1fr));
grid-gap: 10px;
background-color: white;
padding: 5px;
}
.txt_commentaire{
width: 100%;border: 0;height: 20px;margin: 0 10px 0 10px;;overflow: hidden; padding-right: 10px;
}
.erreur{
color:red;font-weight:bold;font-size: 11px;margin: 0 10px 10px;text-align:center;
}
.BoxPdF{
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 2px #ccc;
}
.BoxPdF a:hover{
background-color: #eee;
}
._16ve{
border-bottom: 1px solid #ccc;
}
.hi{
font-weight: bold;
align-items: center;
}
.hi a{
margin: 10px 5px 0;
text-decoration: none;
color: #1d2129;
}
.img_gr {
justify-content: flex-end;
flex-wrap: wrap;
margin: 5px;
}
.img_gr a{
padding:5px;
text-decoration: none;
}
.img-circle_gr{
border-radius: 50%;
width: 40px;
height: 40px;
}
.img-circle {
align-self: center;
border-radius: 50%;
width:30px;
height:30px;
-webkit-transform: translateY(2px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(2px); /* IE 9 */
transform: translateY(2px); /* IE 10, Fx 16+, Op 12.1+ */
}
.NewClass{
margin-top: 10px;
height: 32px;
font-size: 1.2rem;
font-weight: bold;
color: white;
background-color: #00d9ff;
align-self: center;
border-radius: 5px;
}
}
.Prec{
display:none;
}
.Rejoin {
cursor: pointer;
padding: 2.5px 10px;
height: 30px;
text-align: center;
color: white;
background-color: #00d9ff;
font-weight: bold;
border-radius: 5px;
/* width: 125px; */
margin: 5px;
font-size: large;
border: 0;
}
.suiv_img{
border-bottom: solid 1px #ccd0d596;
justify-content: space-between;
margin: 2px 5px;
}
.news{
padding: 5px;
border-bottom: solid 1px #ccc;
}
.news img{
width: 100%;
max-height:125px;
}
.news a{
text-decoration: none;
color: #3a7390;
line-height: 20px;
}
._10bt{
margin-bottom:5px;
}
.FlexCenter{
display: flex;
justify-content: center;
align-items: center;
}
.site-nav-header {
background: white;
position: fixed;
width: 100%;
z-index: 1;
border-top: 0;
}
.site-nav-fixed-width{
margin: 0 auto;
}
.update_cover_img{
float: right;
text-align: center;
margin: 10px;
background-color: #000;
border: 1px solid #fff;
border-color: rgba(255, 255, 255, .8);
box-shadow: 0 0 6px rgba(0, 0, 0, .6);
box-sizing: border-box;
color: #fff;
display: inline-block;
padding: 6px 12px;
width: 150px;
}
#ProfilMobile{
display:none;
}
#ProfilPc{
display:block;
}
.img_profile{
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
color: transparent;
text-decoration: none;
}
.img_profile:hover{
color: white;
opacity: .6;
background-color: black;
}
.img_profile_Mob{
height: 150px;
width: 150px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
color: transparent;
text-decoration: none;
}
.img_profile_Mob:hover{
color: white;
opacity: .6;
background-color: black;
}
.site-nav-category {
align-items: center;
color: #00d9ff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.theme0{
background-image: url(https://classi.tn/theme/1.jpg);
height: 80px;
padding-top: 50px;
font-size: x-large;
text-align: center;
color: rgb(102, 102, 102);
background-size: cover;
font-weight: bold;
line-height: 35px;
display: block;
justify-content: flex-start;}
.site-nav-category-active:before,.Group-nav-category-active:before {
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #fff transparent;
bottom: -1px;
content: "";
display: block;
height: 0;
left: 50%;
position: absolute;
visibility: visible;
-webkit-transform:translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateX(-50%); /* IE 9 */
transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
.Group-nav-category {
color: #4b9bc3;
line-height: 30px;
position: relative;
text-decoration: none;
padding: 0 5px;
}
.Group-nav-category-active
{
font-weight: bold;
}
.Group-nav-category-active:before {
bottom: -10px;
}
.classes{
background-color: white;
position: fixed;
top: 30px;
width: 100%;
border-bottom: 1px solid #ddd;
}
#DivEmpty{
height: 40px;
}
.login-box,.login-box-2 {
float: right;
}
.box-login-input-btn-remember {
align-items: center;
}
.box-login-input-btn-remember a {
margin-right: 0;
text-decoration: none;
color: white;
font-size: 1rem;
font-weight: bold;
font-size:12px;
padding: 5px;
}
.box-site-nav-right {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
float: right;
height: 52px;
position: relative;
margin-right: 5px;
}
#nomConnecte{
margin: 10px;
}
.tn-logo{
color:#0092af;
}
.site-logo {
font-size: 15px;
height: 28px;
font-weight: bold;
color: #f53f46;
text-transform: uppercase;
vertical-align: middle;
-webkit-transform: translateY(-5px);/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-5px); /* IE 9 */
transform: translateY(-5px); /* IE 10, Fx 16+, Op 12.1+ */
}
.login-box .login-text-input,.login-box-2 .login-text-input {
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: none;
padding: 3px 5px;
width: 120px;
margin-left: 5px;
}
.box-site-nav-tabs{
display: none;
flex-direction: row-reverse;
margin-right: 5px;
}
#nav-primaire,#nav-college, #nav-sec-1,#nav-sec-2,#nav-sec-3,#nav-sbac, #nav-bac, #nav-sup
{
display: none;
}
.site-nav-tab:last-child {
border-left: none;
}
.site-nav-tab-content-active{
color: #7ebb00;
}
.site-nav-tab {
color: #777;
font: 400 12px/35px system-ui;
text-decoration: none;
margin-left: 10px;
}
.matiere_selected{
background: #36690c3b;
font-weight: bold;
}
.site-nav-tab:first-child {
border-left: none;
}
.site-nav-tab.recommendations-nav-tab .nav-tab-icon {
width: 24px;
}
.site-nav-tab .nav-tab-icon {
height: 22px;
width: 22px;
background-size: contain;
background-repeat: no-repeat;
}
.site-nav-tab.with-left-sep {
border-right: 1px solid #ddd;
padding-right: 10px;
}
.site-nav-logo {
background-size: 78px 28px;
font-size: 0;
display: inline-block;
height: 28px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-ms-transform: translateY(-50%); /* IE 9 */
width: 78px;
}
.box-f1-col {
text-align: center;
width: 32%;
background: white;
transform: translatey(30px);
-webkit-transform: translateY(30px);
-ms-transform: translatey(30px); /* IE 9 */
margin: auto;
}
.lk-f1-blurb {
color: #666;
font: normal 16px/24px system-ui;
text-align: center;
}
.box-f1-col a {
display: inline-block;
text-decoration: none;
}
.hdr-desc {
font: 300 22px/30px 'Roboto Slab',system-ui;
color: #8d33aa;
margin-bottom: 10px;
}
.fa-Mod{
margin: 0 5px;
}
.formStatut{
display:none;margin:10px;flex-direction: column;
}
.textStatut{
width:100%;
background-size: 0;
background-position: center;
background-repeat: no-repeat, repeat;
}
/* -----------------------------fin header------------------------*/
/*------------------Matieres-----------*/
.matieres__item {
list-style-type: none;
margin: 0;
padding: 0;
}
.matieres__item li {
height: 25px;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ddddddc4;
}
/*------------------Main---------------*/
.contenu{
transform: translateY(10px);
}
.Top10{
margin-top: 10px;
}
#loiGR{
display:none;
}
#content {
float: right;
max-width:650px;
width:100%;
}
.img_file{
background-color: white;
width: 170px;
height: 200px;
margin-bottom: 10px;
}
.site-splash-header{
}
.site-splash-header a {
color: #3f3f3f;
font-weight: bold;
}
.span_gr{
text-align: center;
color: #90949c;
margin: 10px 10px 0;
font-weight: bold;
font-size:11px;
}
.timestampContent{
color: #616770;
display: flex;
margin-top: 5px;
}
#spClass{
padding: 5px;
margin:auto;
text-align: center;
transform: translateY(-30px);
background-color: #1c74e9;
border-radius: 5px;
color: white;
font-weight: bold;
max-width: 70%;
min-height: 30px;
}
.buttonAnnuler{
margin: 0 5px;
background-color: buttonface;
border-width: 1px;
border-style: outset;
border-radius: 7px;
}
.buttonSauv{
background-color: #294e0b;
border-color: #52b730;
color: white;
}
.WindowSupp{
display:none;
max-width: 360px;
position: fixed;
top: 40%;
z-index: 100;
border-top: 1px solid #e5e5e5;
background: white;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.Marge07
{
margin: 0 7px;
}
.section_matiere a{
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
color: #365899;
}
.section_matiere{
box-sizing: border-box;
color: black;
font: normal 14px/16px system-ui;
overflow: hidden;
min-width: 200px;
max-width: 650px;
width: 100%;
background-color:white;
border: solid 1px #ddd;
margin:auto;
margin-top:5px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.n {
padding: 5px;
}
.err{
width: 70px;
height: 70px;
background-color: rgba(0, 0, 0, .4);
color: #fff;
font-size: 25px;
font-weight: normal;
text-align: center;
display: table-cell;
vertical-align: middle;
-webkit-transform: translateY(-100%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-100%); /* IE 9 */
transform: translateY(-100%); /* IE 10, Fx 16+, Op 12.1+ */
position: relative;
cursor: pointer;
}
.stylefa{
color:#294e0b;
}
/*-----------sidebarProf--------------*/
#sidebarProf {
width: 300px;
margin-bottom: 20px;
}
#lastprof {
color: #294e0b;
padding-right: 10px;
float:right;
}
.listprof{
padding-top: 10px;
padding-bottom: 25px;
font-weight: 600;
border-bottom: 1px solid #ddd;
}
.msgInsc{
color: red;
direction: rtl;
text-align: center;
padding: 20px;
font-weight: bold;
}
.msg{
min-width: 90px;
font-size: 14px;
background-color: #eee;
padding: 4px;
padding: 7px 5px;
text-align: center;
cursor: pointer;
color: #2c2e32;
border-radius: 5px;
border: 1px solid transparent;
}
/*-----------sidebarMatiere--------------*/
#BtnRejoin{
margin-left:10px;
}
#toutmat {
color: #294e0b;
padding-right: 10px;
float:right;
}
.listmat{
padding-top: 10px;
padding-bottom: 25px;
font-weight: 600;
}
.matiere__img {
border: 0;
max-width: 35px;
max-height: 35px;
}
.MatGrid{
width: 100%;
height: 100%;
}
.MatGrid a{
text-decoration:none;
color: #545454;
}
.MatGrid-active{
background-color: #ccc;
font-weight: bold;
}
.td_img_box{
text-align: center;
width: 32px;
}
.td_nom_box{
}
/* --------------- sign in -------------------*/
.mask {
position:inherit;
top: 0;
right: 0;
left: 0;
bottom:0;
z-index: 1;
background-color:rgba(0, 0, 0, .9);
}
#maskPhoto,#maskStatut{
position: inherit; left: 0; top: 0; bottom: 0;right: 0;
}
#h_photo{
display: none;
position: fixed;
z-index: 400;
top:45px;
flex-direction: column;
margin: auto;
padding: 5px;
justify-content: center;
align-self: center;
height: 100%;
background-color: rgb(0 0 0 / 80%);
}
#SignDialog {
display:none;
}
.yui-flow-dialog .yui-panel {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
outline: 0;
position: relative;
z-index: 1;
background-color: #FFF;
}
.container-close
{
position: absolute;
width: 44px;
height: 42px;
top: -15px;
left: -22px;
text-decoration: none;
border-radius: 50%;
background-image: url("http://classi.tn/img/fermer.png") ;
}
.Dialog .hd {
color: #00d9ff;
font-size:1.5rem;
font-weight: bold;
margin: 5px 15px 5px 15px;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.Box {
font: normal 14px system-ui;
border: solid 1px #ccd0d5;
}
.BoxClass{
margin-right: 10px;
margin-bottom: 10px;
text-decoration: none;
color: black;
width: 276px;
}
.BoxClass a{
text-decoration: none;
color: black;
border: 0;
}
.NvClasse{
padding: 0 0 10px;
text-align: center;
width: 100%;
}
.NvClasse a{
text-decoration: none;
color: #00d9ff;
font-size: 12px;
font-weight: bold;
}
.active_li_index a{
color:white;
color: white;
width: 100%;
}
.Noir{
color: black;
}
#BoxIndex{
position: absolute;
border: solid 1px #ccc;
left: calc(50% - 630px);
font: normal 14px system-ui;
background-color: white;
border-radius: 5px;
width: 300px;
}
#BoxDiscussion{
position: fixed; border: solid 1px #ccc;
left: 0;
font: normal 14px system-ui;
background-color: white;
border-radius: 5px;
width: 25%;
}
#BoxIndex a{
align-items: center;
text-decoration: none;
color: black;
align-self: center;
text-align: center;
padding:5px 10px;
font-size: 14px;
font-weight: 500;
}
.active_li_index a{
color:white;
}
#sidebarMat
{
width: 200px;
background-color: transparent;
position: fixed;
border: solid 1px #ddd;
}
.Dialog .bd {
margin-top: 10px;
display: flex;
flex-direction: row-reverse;
font-size: 12px;
justify-content: space-between;
}
.yui-flow-dialog .bd {
overflow: auto;
position: relative;
padding: 0 12px;
max-height: 425px;
height: 100%;
}
#fb-timeline-cover-name{
color: black;
direction: rtl;
font-size: 14px;
font-weight: 600;
}
.sign-in-non-member {
display: flex;
margin-left: 20px;
}
.memb{
display:block;
}
.sign-in-member {
margin-right: 20px;
}
.sign-in-header {
font-weight: 700;
color: #00d9ff;margin-top: 0;
}
.stylSelect
{
border-radius: 2px;
color: black;
max-width:300px;
height: 30px;
}
.Connex-Button {
color: #fff;
background-color: #00d9ff;
border: 1px solid #ccc;
border-radius: 8px;
font-weight: bold;
margin-right: 0;
padding: 7px 10px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.yui-flow-dialog .emptyft {
padding-bottom: 0;
}
.yui-flow-dialog .ft {
padding: 0 15px 20px;
-webkit-border-radius: 0 0 15px 15px;
-moz-border-radius: 0 0 15px 15px;
border-radius: 0 0 15px 15px;
}
.site-form input.sign-in-form-textfield {
width: 95%;
border: solid 1px;
padding: 5px;
line-height: 20px;
}
.site-form button {
-webkit-appearance: button;
cursor: pointer;
}
.sign-in-form-submit {
margin: 5px 0;
font-size: 15px;
}
.Connex-Button-secondary {
background-color:#00d9ff;
}
#infoDialog{
display: none;
width: 500px;}
/*--------------index----------------*/
.dv-home-skill-tree-wrapper {
background-color: #fff;
min-width: 200px; border: solid 1px #ddd;
}
.home-skill-tree {
display: flex;
justify-content:space-between;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.bd-grade {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
padding: 15px 20px 10px;
}
.Plus{
text-align: center;
background-color: #00d9ff;
border-radius: 5px;
color: white;
}
.Plus a{
text-decoration: none;
line-height: 40px;
color: white;
font-size: 14px;
cursor: pointer;
font-weight: bold;
}
.bleu1-bdr {
border-color: #0092af;
}
.bleu1-bg {
background: #0092af;
}
.bleu1-txt{
color: #0092af;
}
.bleuciel-bdr {
border-color: #0bc1b6;
}
.bleuciel-bg {
background: #0bc1b6;
}
.bleuciel-txt{
color: #0bc1b6;
}
.orange-txt{
color: #ff9800;
}
.orange-bg {
background: #ff9800;
}
.orange-bdr {
border-color: #ff9800;
}
.mauve-txt{
color: #d616d6ed;
}
.mauve-bg {
background: #d616d6ed;
}
.mauve-bdr {
border-color: #d616d6ed;
}
.vert-txt{
color: #7ebb00;
}
.vert-bg {
background: #7ebb00;
}
.vert-bdr {
border-color: #7ebb00;
}
.desc-grade {
line-height: 1.4em;
margin: 0 0 12px;
min-height: 60px;
padding: 0;
}
.list-subject-links {
border-top: 1px solid #e1e1e1;
margin-bottom: 0;
padding: 10px 0 0;
margin-top: 45px;
}
.item-subject-link {
display: block;
height: 24px;
}
.list-subject-links li
{
list-style: none;
}
.item-subject-link .lk-skills {
color: #1f9ac7;
display: inline-block;
text-decoration: none;
}
.condi{
text-decoration: none;
font-weight: bold;
color: black;
}
.new-member
{
min-width:270px;
}
.item-subject-link .subject-niv {
font:400 12px system-ui;
float: right;
color: #666;
margin-left: 10px;
}
.col{
height:100%;
}
.colbac{
display: flex;
flex-direction: column;
width: 100%;
}
.itr{
margin: 0 10px 20px 10px;
}
.inspr-header-sec {
background-image: url("http://classi.tn/img/ecole.png"),linear-gradient(90deg,#0092af,#00c68a);
background-repeat: no-repeat;
background-position: top center;
height: 220px;
}
.MaxHImg{
width: 50%;
padding-bottom: 5px;
max-height: 300px;}
.inspr-header-content {
background-image: linear-gradient(90deg,#0092af87,#00c68ab5);
height: 220px;
}
.precedent{
display:none;
margin-right: 20px;
color: white;
}
/*--------profil-form -------------*/
.profil-form {
border: solid 1px #ccc;
align-items: center;
}
.profil-form .h2-trailing-line em {
background: #fff none 0 50% no-repeat;
background-size: 23px 23px;
display: inline-block;
font-style: normal;
line-height: 23px;
padding: 0 10px 0 30px;
position: absolute;
z-index: 2;
}
.profil-form input, .profil-form select, .profil-form textarea {
line-height: 20px;
border: 1px solid #d7d7d7;
border-radius: 6px;
box-sizing: border-box;
box-shadow: inset 0 1px 3px #ddd;
padding: 0.2em .5em .2em .5em;
max-width: 200px;
}
.profil-form .sec-contact-info-fields {
padding-top: 30px;
}
.profil-form .sec-form, .profil-form .sec-form-hdr p {
}
.profil-form .sec-form {
}
.profil-form .sec-form-bd {
padding-bottom: 0;
}
.profil-form .sec-form-bd {
padding-bottom: 20px;
}
.profil-form .sec-form {
background-color: white;
color: #545454;
font: normal 14px/16px system-ui;
width: 100%;
}
.cond{
text-align: center;
font-size: 10px;
line-height: 20px;
margin: 20px;
}
.profil-form h2 {
font: 300 19px/1em "Roboto Slab",system-ui;
margin: 10px 0 15px 0;
}
.profil-form .box-input {
display: flex;
margin-bottom: 10px;
align-items: center;}
.profil-form label {
color: #3a7390;
min-width: 120px;
margin-right: 10px;
}
.profil-form input[type=checkbox], .profil-form input[type=radio] {
height: 1em;
margin: 5px;
width: 1em;
}
.box-err-msg-ins {
color: #f53f46;
line-height: 20px;
text-align: center;
margin-bottom: 10px;
}
}
.profil-form .box-err-msg {
color: #f53f46;
font-size: 1em;
text-align: left;
-webkit-transform: translateX(-12px);/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateX(-12px);/* IE 9 */
transform: translateX(-12px); /* IE 10, Fx 16+, Op 12.1+ */
margin: auto;
max-width: 320px;
line-height: 20px;
margin-bottom: 10px;
}
.profil-form .hdr-label {
color: #3a7390;
margin-left: 0;
margin-right: 0;
width: 28%;
}
.InfoClass{
align-items: flex-end;
align-items: flex-end;
}
.profil-form .sec-form-hdr {
background: white;
color: #0092af;
text-align: center;
}
.profil-form .sec-form-hdr a {
color: #a4bd60;
}
.profil-form .sec-form-hdr h1 {
font: 600 16px/1em "Roboto Slab",system-ui;
}
.profil-form .sec-form-hdr {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ddd;
padding: 20px 15px 20px 15px;
}
/* --------------------barre navigation------------------*/
.box-site-nav-tabs-visible {
justify-content: center;
overflow: auto;
flex-wrap: wrap;
}
.box-site-nav-tabs-visible a{
text-decoration: none;
}
.DesignTitle{
width: auto;
background-color: white;
color: black;
display: inline-block;
font: bold 14px/40px "Trebuchet MS",sans-serif;
padding-left: 10px;
position: relative;
font-size: 1.3rem;
}
.DesignTitleFr{
border-radius:5px;
background-color: #e5e5e5;
}
.selected{
background-color: #e5e5e5;
}
.DesignTitleAR{
border-radius: 19px 0px 0px 19px;
left: 10px;
}
.DesignTitleARMemb{
border-radius: 19px 0px 0px 19px;
left: 120px;
}
.nav-tab-icon {
height: 22px;
width: 22px;
margin-bottom: 2px;
}
#nav-tab-class-ar{
direction: rtl;
}
.site-nav-tab-doc {
box-shadow: 0 1px 3px 0 #00d9ff;
color: #00d9ff;
font-size: 1.2rem;
background-color: white;
display: -ms-flexbox;
cursor: pointer;
text-align: center;
font-weight: 600;
margin: 5px;
border-radius: 8px;
text-decoration: none;
padding: 3px;
border: solid 1px #dadde1;
}
.site-nav-tab-ico-active{
color: white;
background-color: #00d9ff;
}
#param{
margin-top: 10px;
color: #365899;
}
#param a{
text-decoration: none;
color: #365899;
font: normal 13px/16px system-ui;
}
#div_photo_pub{
position: relative;
text-align: center;
justify-content: center;
align-items: center;
z-index: 3;
min-width: 250px; max-height: 100%;
}
.statut{
border: solid 1px #0084ff;
line-height: 25px;
overflow-y: hidden;
border-radius: 10px;
padding-right: 0;
resize: none;
width: calc(100% - 10px);
}
.FlexBoxC{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:column;
}
.FlexBoxCREV{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:COLUMN-REVERSE;
}
.FlexBoxR{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:row;
}
.flexInv{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
}
.PrixClass{
border: solid 1px #cccccc;
border-top: 0;
line-height: 25px;
background-color: white;
border-radius: 0 0 10px 10px;
text-align: left;
}
.rejoin{
font-size: 1.1rem;
height: 25px;
padding: 5px 10px;
border-radius: 5px;
border: solid 1px #cccccc;
background-color: #ccc;
cursor: pointer;
width: auto;
font-weight: bold;
color: black;
border-top: 0;
margin-right: 0;
}
.gratuit{
color: #7ebb00;
font-weight: bold;
margin: 0 10px;
}
.cache-objet{
display:none;
}
#colsidebar{
width:250px;
position: fixed;
}
#id-scolaire,#id-trim,#doc,#id-titre,#id-correction,#id-num-dev{
display:none;
}
#BoxEtabPrim,#BoxEtabSec{
display:none;
}
#id-input-titre,#id-etab{
width: 38%;
}
#id-doc,#id-docPrim{
width: 33%;
}
#FileUpload{
display:none;
}
#message,#output{
color: red;
text-align: center;
margin: 10px;}
.box-input
{
flex:1;
margin: 10px;
}
.LabelStatut{
width: 100px;
padding: 5px;
}
.BtnFile{
cursor: pointer;
color: #90949c;
font-weight: bold;
}
.msg_File{
margin-right: 28%;
-webkit-transform: translateX(-12px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateX(-12px);/* IE 9 */
transform: translateX(-12px); /* IE 10, Fx 16+, Op 12.1+ */
margin-bottom: 0;
}
.label-checkbox{
display: initial;
}
.titre_Dev{
margin: 5px 15px 5px 15px;color: black;font-weight: bold;
}
#diez_mat{
color:black;
}
#Barleft{
position: absolute;
right: calc(50% - 630px);
}
#BarleftCl{
position: inherit;
}
.fa_Index{
align-items: center;
display: flex;
justify-content: center;
font-size:1.3em;
}
.faBar{
color: #000000c7;
height: 35px;
align-items: center;
width:35px;
border-radius: 50%;
background-color: #eee; font-weight: bold;
}
.fa_16{
font-size: 1.6em;
}
/* --------------------header mobile------------------*/
._129{
min-width: 200px;
display:none;
}
._4g33 {
display: flex;
}
._52we {
align-items: center;
}
._4g34 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Safari 6.1+. iOS 7.1+, BB10 */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
._59te.popoverOpen {
background: #294e0b;;
}
._4g34 a {
color: white;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}
._2ftp {
align-items: center;
justify-content: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 44px;
margin: 0 auto;
position: relative;
}
#infoMembre{
border-radius:0; background-color: white;width:270px;
}
/* ------------------------------------------*/
.H_img_stat{
}
.H_img_stat_user{
max-height: 750px;
}
.H_img_stat_user_2{
height: 500px;
}
.flex_inv{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
}
/* --------------------fb------------------*/
.uiScaledImageContainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
margin: 0 20px;
height:100%;
margin-top: 10px;
}
.uiScaledImageContainer img {
height: 100%;
width: 100%;
border-radius: 10px;
cursor: pointer;
}
.Clselected{
border-bottom: 2px;
border-bottom-style: solid;
border-color: #00d9ff;
color: #00d9ff;
}
._52d9 {
background-color: rgba(0, 0, 0, .4);
color: #fff;
font-size: 35px;
font-weight: normal;
position: relative;
width: 100%;
vertical-align: middle;
-webkit-transform: translateY(-100%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-100%); /* IE 9 */
transform: translateY(-100%); /* IE 10, Fx 16+, Op 12.1+ */ height: 100%;
}
._52da {
display: table;
height: 100%;
width: 100%;
}
._52db {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/*-------------upload ----------------------*/
#nb_img_uploade{
border:0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 10px 10px 0px 0;
}
#titreUp{
}
#main,#statut{display:none;
flex-direction: column;
background-color: white;
}
#selectImage,#typeFile,#choixcl,#nbimageUp,#anneeSco_Trim,#selectVid,#selectPdf,#selectWord,#selectExcel,#selectPPT,#selectFile{
display:none;
text-align: center;
margin: 10px 0;
}
#selectFile{
padding-left: 45px;
}
.H20{
height: 20px;
}
.PdL45{
padding-left: 45px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
-webkit-transform: translateY(-30px);/* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-30px); /* IE 9 */
transform: translateY(-30px); /* IE 10, Fx 16+, Op 12.1+ */
background-color: #666;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.VoirPlus {
color:#90949c;
padding-left: 5px;
text-decoration: underline;
}
.NomGr{
font-size: 14px;
font-weight: bold;
line-height: 30px;
text-align: center;
}
.TitleBox{
color: black;
padding: 10px;
font-weight: bold;
}
#H2ClAjout{
font-size: 14px;color: #0092af;display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.Cover{
flex-direction: column-reverse;
justify-content: space-between;
background-repeat: round;
color:white; border: solid 1px #ccc;
}
.H_Cover{
height: 300px;
justify-content: space-between;
flex-direction: column-reverse;
background-size: 100% 100%;
margin-bottom:5px;
}
.H_Cover_Index{
height: 90px;
}
.Hgr{
background-color: #f5f6f7;
text-decoration: none;
}
.Hgr ul{
margin:0;
padding:0;
}
.Hgr ul li a{
color:#616770;
}
.Hgr ul li a:Hover{
text-decoration:underline;
}
.Hgr ul li{
margin:2px 8px;
list-style-type: none;
}
.TitleBox a{
color: #616770;
font-weight: bold;
text-decoration:none;
font-size: 11px;
margin: 5px;
}
.cadeaux,#Mescadeaux{
position:absolute;display:none; width: 100%;
transform: translate(85px,30px);
position: absolute;
cursor: pointer;
-webkit-filter: drop-shadow(5px 5px #eee);
border: solid 1px #dddfe2;
width: 350px;
z-index: 1;
background-color: white;
height: 300px;
overflow: auto;
}
.Box ul{
line-height: 20px;
padding: 10px ;
margin:0;
}
.Box li{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.Marge05{
margin: 0 5px; align-self: center;
}
.Marge10{
margin: 0 10px; align-self: center;
}
.submit{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
height: 30px;
padding: 4px;
border-top: 1px solid #ccc;}
#fbProfileMobile,#introProfil{
display:none;
}
/*-------------photo----------------*/
.snowliftPager.next{
}
.snowliftPager.prev{
}
.snowliftPager{
text-decoration: none;
justify-content: center;
font-size: 20px;
background-color: #f5f6f7;
color: #90949c;
height: 40px;
width: 40px;
border-radius: 50%;
}
.footer{
border: 0;
background-color: transparent;
font-size: 10px;
text-align: center;
margin-top: 5px;
}
.SpanBar{
align-self: center;
font-size: 14px;
margin-left: 10px;
color: black;
}
#classSuiv,#ClassNext{
position: absolute;
left: calc(50% + 180px);
transform: translateY(20px);
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e5e5e5;
}
#classPrec,#ClassPrev{
position: absolute;
left: calc(50% - 220px);
transform: translateY(20px);
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e5e5e5;
}
.footer a{
text-decoration: none;
color: #90949c;
}
._410,._600{
max-width: 650px;
width: 100%;
padding: 0 5px;
margin: auto;
height: 1100px;
}
._600{
max-width: 650px;
}
.BoxDesc {
width: 300px;
background-color: white;
}
.faUser
{
margin-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.imgUser{
width: 80px;
height: 80px;
}
#Rejoincl{
flex: 1;
}
.headerUser{
color: #FF9800;
padding-right: 15px;
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ddd;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
.titre_dev{
margin: 5px 15px 5px 15px;color: black;font-weight: bold;
}
#fbProfileMobile {
margin: -1px -1px 10px 0;
}
.coverNom {
padding: 0;
-webkit-transform: translate(80px, -3px); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translate(80px, -3px); /* IE 9 */
transform: translate(80px, -3px);/* IE 10, Fx 16+, Op 12.1+ */
align-self: center;
}
.ProfileCover{
padding: 5px;
justify-content: space-between;
background: white;
min-height: 40px;
}
._513x{
float:right;
}
._2xc6 {
bottom: 2px;
right: 85px;
position: absolute;
}
._2xc2 {
bottom: 2px;
text-align: center;
}
._2nlv {
color:white;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
position: relative;
text-decoration: none;
}
#fbProfileCover .coverChangeThrobber {
display: none;
right: 50%;
margin-top: -8px;
position: absolute;
top: 50%;
}
#fbTimelineHeadline {
position: relative;
width: 100%;
z-index: 0;
}
.clearfix {
zoom: 1;
}
._70k {
clear: left;
}
._70k ul
{
list-style: none;
margin: 0;
height: 30px;
background-color: #e9f0f3;
}
._6_7 {
border-right: 1px solid #e8f7ff;
padding-right: 70px;
}
._6a {
display: inline-block;
}
._gs6 {
color: #89919c;
font-weight: normal;
}
._6-6 {
border-left: 1px solid #e8f7ff;
float: right;
font-weight: 600;
padding: 8px;
position: relative;
vertical-align: middle;
white-space: nowrap;
color: #365899;
text-decoration: none;
}
#namecl
{
flex: 1;align-items: center;
}
._6-6 : active{
text-decoration: underline;
}
._6-7 {
border-width: 0 1px;
color: #4b4f56;
}
a._p {
display: block;
}
.Hins{
display: block;
}
#fbTimelineHeadline .profilePicThumb .img {
display: block;
}
#fbTimelineHeadline .profilePicMob .img {
display: block;
}
#descSite{
background-color: white;
border-radius: 5px;
border-bottom: 1px solid #ccc;
margin-bottom: 5px;
}
._Pt{
display:none;
}
#spDes{
line-height: 25px; padding-right: 30px;
}
._1nv5 ._11kf {
border: 4px solid #fff;
}
._1nv3 ._11kf {
background-color: #fff;
border-radius: 50%;
display: block;
position: relative;
}
#msgImgCover{
display:none;
color:red;font-weight:bold;font-size: 11px;margin: 0 10px 10px;background: linear-gradient(45deg, #ccc, transparent);width: 200px;align-self: center;
}
#msgImgProfile
{
color:red;font-weight:bold;font-size: 11px;margin: 0 10px 10px;text-align:center;background: linear-gradient(45deg, #ccc, transparent);
}
.decorated{
overflow: hidden;
text-align: center;
}
.decorated > span{
position: relative;
display: inline-block;
}
.decorated > span:before, .decorated > span:after{
content: '';
position: absolute;
top: 50%;
border-bottom: 1px solid #ccc;
width: 100vw;
margin: 0 10px;
}
.decorated > span:before{
right: 100%;
}
.decorated > span:after{
left: 100%;
}
#DivNomCl{
justify-content: space-between;
background-color: white;
}
._1nv3 ._11kr {
background-color: #fff;
border-radius: 2px;
text-align: center;}
#fbTimelineHeadline .profilePicThumb {
position: absolute;
left: 10px;
margin-top: -80px;
height: 70px;
width: 70px;
padding: 1px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-color: white;
}
#fbTimelineHeadline .profilePicMob {
margin-top: -80px;
height: 150px;
width: 150px;
background-size: cover;
border-radius: 50%;
border: solid 3px #4b4f56;
}
#MenuGroup{
display:none;}
#NomCl{
text-decoration: none;
font-size: 14px;max-width: 230px;
color: black;
line-height: 25px;
}
.divHide{
display: none;
flex-direction: column;
position: absolute;
width: 123px;
right: 476px;
top: 39px;
opacity: 1;
border: 1px solid #e8f7ff;
line-height: 30px;
background-color: white;
}
.touch a {
color: #576b95;
cursor: pointer;
text-decoration: none;
font-weight: 600;
}
.divHide a{
text-decoration:none;
color: #365899;
}
.sign-in-non-member-mobile {
display:none;
}
.SpanSign{
display: block;
}
#PhotoStat{
max-width:50%;
max-height:300px;
}
.Bor_L{
border-left: 0;
}
.Width_Box_M{
width:270px;
}
#NomCl20{
display:none;align-self: center;font-size: 1.4rem;
}
#NomCl50{
display:block;font-size: 1.4rem;
}
#search1{
display:flex;
}
@media only screen and (max-width: 1000px) {
#BarLeft{
display: none;
}
#BoxDiscussion{
left: auto;
position: inherit;
}
#discussion{
margin: initial;
}
#BoxIndex{
display: none;
}
._410{
max-width: 550px;
}
}
@media only screen and (max-width: 870px) {
#classSuiv, #ClassNext
{
right: 20px;
left: auto;
}
#MemBdiscussion {
display: none;
}
._415 {
margin: auto;
position: inherit;
}
#classPrec, #ClassPrev {
left: 20px;
right: auto;
z-index: 1;
}
._410 {
padding: 0 ;
}
#search1{
order: 1;margin-bottom: 10px;
}
.cadeaux
{
right: 0;
transform: translate(0,38px);
}
#Mescadeaux
{
left: 0;
transform: translateX(0);
transform: translateY(-40px);
}
#ProfilMobile{
display:block;
}
#myDropdown{
right: 0px;
position: fixed;
top:42px;
}
#DropdownNotif,#DropdownMsg{
top: 42px;
}
#ProfilPc{
display:none;
}
.Rejoin{
margin: 0;
margin: 5px;
width: auto;
}
#namecl
{
order: 3;
}
#Rejoincl
{
order: 2;
}
#search2{
display:flex;
}
.sign-in-member {
margin: 10px;
margin-top: 0;}
#H2ClAjout{
justify-content: center;
}
body{
background-color: #ddd;
}
.grades-list,.serach,#search2{
background-color: white;
}
#search2{
padding-top: 10px;
background-color: white;
}
.sign-in-non-member-mobile {
display:block;
}
.Dialog .bd {
flex-direction: column-reverse;
}
.sign-in-non-member{
display:none;
}
.Dialog {
max-width: 300px;
}
.MaxHImg,.MaxHImg ,#PhotoStat{
max-height: 250px;
}
.precedent{
display:block;
}
.contenu {
border:solid 1px #ccc;
margin-top: 0px;
}
.BoxDesc {
display: none;
}
.InfoClass{
align-items: center;
}
#Nbmemb{
justify-content: center;
}
#Contenu1{
width:100%;
}
#BoxIndex {
display: none;
}
.Prec {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
#DivNomCl {
flex-direction: column-reverse;
align-items: center;
}
#NomCl{
text-align: center;
flex-direction: column-reverse;
}
.ShowP{
display: none;
}
#MenuGroup{
display: flex;
}
.Box_410 {
max-width: 100%;margin: auto;
}
.uiScaledImageContainer img {
max-width: 500px;
}
#video{
max-width: 500px;
}
#infoMembre{
display:none;
}
#discussion{
margin:0;
max-width: 570px;
}
.Width_Box_M {
width: 280px;
}
#DropdownAbonne {
position: fixed;
}
}
/* --------------------media screen 750px------------------*/
@media only screen and (max-width: 750px) {
.uiScaledImageContainer img {
max-width: 400px;
}
#video{
max-width: 400px;
}
#infoMembre{
display:none;
}
.marketChild
{
width:48.7%;
}
}
/* --------------------media screen 650px------------------*/
@media only screen and (max-width: 650px) {
._410 ,._600{
max-width: 100%;
}
#NomMemMobile{
display:block;
}
.uiScaledImageContainer img,#video {
max-width: 100%;
}
.MaxHImg,.MaxHImg,#PhotoStat {
max-height:200px;
}
#NomCl50{
display:none;
}
#NomCl20{
display:block;
}
#descSite{
flex-direction: column;
text-align: center;
border: solid 1px #ccc;
}
.NewClass {
align-self: center;
}
#spDes{
padding-right: 0;
}
.Hins{
display: none;
}
.SpanSign{display: none;
}
#DropdownMsg{
transform: translateX(-100px);
}
}
/* --------------------media screen 550px------------------*/
@media only screen and (max-width: 550px) {
#DropdownMsg{
transform: translateX(0);
}
#fbTimelineHeadline .profilePicMob {
margin-top: -70px;
height: 130px;
width: 130px;
}
#myDropdown2{
position: fixed;
transform: translateX(0);
right: 0;
left: 0;
padding: 10px 0;
}
#DropdownAbonne,#myDropdown,#myDropdown,#DropdownProFil,#DropdownNotif,#DropdownMsg,#DropdownMsgIndex{
position: fixed;
right: 0;
width: 100%;
}
.Dialog{
min-width: 290px;
}
#buttons{
display:none;
}
.msg{
width: 45%;
}
.img_profile_Mob{
height: 130px;
width: 130px;
}
.Bor_L{
border-left: solid 1px #ccd0d5;
}
.Width_Box_M{
width:100%;
}
}
/* --------------------media screen 500px------------------*/
@media only screen and (max-width: 500px) {
.Dialog {
min-width: 270px;
}
.theme{
padding: 20px;
}
#spClass
{
font-size:1.3rem;
}
#classSuiv {
left: auto;
right:20px;
}
#classPrec {
right: auto;
left:20px;
}
#download
{
display:none;
}
#input_login{
display:none;
}
#approbation
{
display:block;
}
.box-site-nav-tabs-visible{
margin-top:10px;
}
.profil-form label {
display: none;
}
}
/* --------------------media screen 400px------------------*/
@media only screen and (max-width: 400px) {
#DropdownNotif a{
background-color: #ebedf0;
}
.marketChild
{
width:48.3%;
}
.btnMarket{
font-size: 1.2rem;
}
.memb
{display:none;
}
._Pt{
display:block;
}
.profil-form {
width: 95%;
}
#NmCl1{
display:none;
}
.PdL45{
padding-left: 0px;
}
#profess{
display:none;
}
#H2Search{
display:none;
}
#H2ClAjout{
justify-content: center;
}
#fb-timeline-cover-name{
font-size: 0.8rem;
}
#nomConnecte {
display:none;
}
#FaBarClass{
margin: 10px;
}
._2nlv {
padding: 2px;
}
}
header
{
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar
{
background:transparent;
}
.force-overflow
{
min-height: 450px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
#DropdownMsgIndex::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #f8f9fa;
}
#DropdownMsgIndex::-webkit-scrollbar
{
width: 5px;
background-color: #f8f9fa;
}
#DropdownMsgIndex::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #5bc7ffs;
}
/*
* STYLE 1
*/
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #f8f9fa;
}
#style-1::-webkit-scrollbar
{
width: 5px;
background-color: #f8f9fa;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #5bc7ffs;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.containerCl {
background-color: #F3E5F5;
padding: 25px;
border: 2px solid #D1C4E9;
border-radius:5px;
margin-bottom: 5px;
color: #4A148C;
font-family: 'Arial', sans-serif;
text-align: center;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
animation: fadeIn 3s ease-out forwards;
}
.containerCl h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
color: #6A1B9A; /* Darker purple for the heading */
animation: fadeIn 3s ease-out 0.5s forwards;
line-height: 30px;
}
.containerCl a {
display: block;
line-height: 30px;
font-size: 16px;
color: #8E24AA;
text-decoration: none;
margin-bottom: 20px;
font-weight: 600;
animation: fadeIn 3s ease-out 1s forwards;
}
.containerCl a:hover {
text-decoration: underline;
color: #BA68C8;
animation: pulse 2s ease-in-out infinite;
}
.containerCl button {
width: 240px;
padding: 12px;
background-color: #7B1FA2;
color: #ffffff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.3s ease;
animation: fadeIn 3s ease-out 1.5s forwards;
}
.containerCl button:hover {
background-color: #9C27B0;
transform: scale(1.05);
animation: pulse 2s ease-in-out infinite;
}