/* ========================================================
====================== BACKEND ========================
======================================================== */
#category-all {
    max-height: unset !important;
}

/* ====================== Fiche établissement ====================== */
form .sg_form-submit {
    display: flex;
    flex-direction: row-reverse;
}

form#form_update_etablissement {
    background-color: #dceeff;
    padding: 50px;
}

div.ficheEtablissement_listCodes {
    padding: 50px;
}

form#form_update_etablissement h1,
.ficheEtablissement_listCodes h2 {
    text-align: center;
}

div.sg_menu_codes {
    padding: 0px;
}

button.sg_menu_codes-tests,
div.sg_codes-tests {
    background-color: #e0f7ff;
}

button.sg_menu_codes-eleves,
div.sg_codes-eleves {
    background-color: #C5E7F1;
}

button.sg_menu_codes-professeurs,
div.sg_codes-professeurs {
    background-color: #79CEED;
}
div.sg_codes-tests {
    padding-bottom: 30px;
}

div.sg_codes-eleves {
    padding-bottom: 30px;
}

div.sg_codes-professeurs {
    padding-bottom: 30px;
}

div.ficheEtablissement_listCodes table {
    background-color: white;
}

tr.ligne_code input,
tr.ligne_code select {
    width:max-content;
    margin-left:10px;
    height: min-content;
    background-color: #afdfed;
}




/* ========================================================
====================== FRONTEND ========================
======================================================== */

/* ====================== Menu Principal ====================== */
.sg_menu-improvisons li:nth-child(1) {
    background-color: #077D91 !important;
}

.sg_menu-improvisons li:nth-child(2) {
    background-color: #D6297B !important;
}

.sg_menu-improvisons li:nth-child(3) {
    background-color: #FFC72E !important;
}

/* ====================== Menu Cours ====================== */
.sg_menu-Module1 .awb-menu__main-background-active {
    top: 10px !important;
}



.sg_shortcode-displayEtapes {
    min-height: 80vh;
}
.sg_shortcode-displayEtapes > div,
.sg_shortcode-displayEtapes > div > div {
    height: 100%;
}

.sg_shortcodeCours {
    display: flex;
    height: 100%;
}

/* ====================== Colonne latérale Filtre ====================== */
.sg_colonneFiltres {
    background-color: #f9f9fb;
    /* height: 100%; */
    height: unset;
    /* position: fixed;
    left: 0; */
    padding-top: 20px;
}
/* ====================== Sélection instrument et tonalité ====================== */
.sg_div-tonaliteNote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 30px 0px;
}

.sg_div-tonaliteNote img {
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: 10px;
    transition: transform .1s;
}
/* Déclenche un zoom in en hover */
.sg_div-tonaliteNote img:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05); /* Déclenche un zoom in en hover */

}


.sg_div-tonaliteNote audio {
    display: none;
}


/* .sg_tonalite-selected {
    background-color: #FF7A36;
    color: white;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
} */

.sg_orchestre {
    margin-top: 50px;
    margin-bottom: 50px;
}

.sg_select-instruments {
    text-align: center;
}

/* ====================== Menu Etapes d'un cours ====================== */
.sg_div-Form {
    padding: 0px !important;
    margin-bottom: 30px;
}

#sg_form-categoryEtapes .sg_listEtapes {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


#sg_form-categoryEtapes .sg_listEtapes label {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 2px #0BB0EA solid;
    margin: 10px;
    transition: transform .1s;
}


#sg_form-categoryEtapes .sg_listEtapes label[for=Piano],
#sg_form-categoryEtapes .sg_listEtapes label[for=Guitare] {
/* #sg_form-categoryEtapes .sg_listEtapes label:nth-last-child(-1n+2) { */
    border: 2px #7e7e7e solid !important;
}


#sg_form-categoryEtapes input {
    display: none;
}

#sg_form-categoryEtapes .sg_listEtapes .sg_input-choice {
    padding: 5px;
    color: #0BB0EA;
}

#sg_form-categoryEtapes .sg_listEtapes label[for=Piano] .sg_input-choice,
#sg_form-categoryEtapes .sg_listEtapes label[for=Guitare] .sg_input-choice {
/* #sg_form-categoryEtapes .sg_listEtapes label:nth-last-child(-1n+2) .sg_input-choice { */
    /* padding: 20px; */
    color: #7e7e7e;
}

/* Mise en forme des éléments :checked et :hover */
#sg_form-categoryEtapes .sg_listEtapes label:has(.sg_input-checkbox:hover),
#sg_form-categoryEtapes .sg_listEtapes label:has(.sg_input-checkbox:checked) {
    background-color: #0BB0EA;
    border: none;
    box-shadow: 6px 6px 6px rgba(0,0,0,0.16);
}

/* Déclenche un zoom in en hover */
#sg_form-categoryEtapes .sg_listEtapes label:has(.sg_input-checkbox:hover) {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05); /* Déclenche un zoom in en hover */

}

/* #sg_form-categoryEtapes .sg_listEtapes label:has(.sg_input-checkbox:hover):nth-last-child(-1n+2),
#sg_form-categoryEtapes .sg_listEtapes label:has(.sg_input-checkbox:checked):nth-last-child(-1n+2) { */
#sg_form-categoryEtapes .sg_listEtapes label[for=Piano]:has(.sg_input-checkbox:hover),
#sg_form-categoryEtapes .sg_listEtapes label[for=Guitare]:has(.sg_input-checkbox:hover),
#sg_form-categoryEtapes .sg_listEtapes label[for=Piano]:has(.sg_input-checkbox:checked),
#sg_form-categoryEtapes .sg_listEtapes label[for=Guitare]:has(.sg_input-checkbox:checked) {
    background-color: #7e7e7e;
    /* border: none;
    box-shadow: 6px 6px 6px rgba(0,0,0,0.16); */
}

#sg_form-categoryEtapes .sg_listEtapes .sg_input-checkbox:hover ~ .sg_input-choice,
#sg_form-categoryEtapes .sg_listEtapes .sg_input-checkbox:checked ~ .sg_input-choice {
    color: white !important;
}


/* ====================== Colonne latérale Content ====================== */
.sg_colonneContent {
    padding-top: 20px;
}

/* ====================== Boutons Clé de sol Clé de fa et Filtres styles vidéo ====================== */
.sg_partition-cle,
.sg_improviserStyle {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 0px !important;
}

.sg_partition-cle .sg_cle,
.sg_improviserStyle .sg_filtreStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 2px #C772FF solid;
    margin: 20px 10px;
    padding: 5px;
    color: #C772FF;
    transition: transform .1s; /* Déclenche un zoom in en hover */
}

.sg_partition-cle .sg_cle:hover,
.sg_partition-cle .sg_cle.active,
.sg_improviserStyle .sg_filtreStyle:hover,
.sg_improviserStyle .sg_filtreStyle.active {
    background-color: #C772FF;
    /* border: #C772FF; */
    box-shadow: 6px 6px 6px rgba(0,0,0,0.16);
    color: white !important;
}

/* Déclenche un zoom in en hover */
.sg_partition-cle .sg_cle:hover,
.sg_improviserStyle .sg_filtreStyle:hover {
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari 3-8 */
    transform: scale(1.05);
}


/* ====================== Affichage Vidéo depuis Youtube en iframe ====================== */
/* Rendre l'affichage responsive de l'iframe */
/* .sg_improviser-video .fusion-column-wrapper {
    position: relative !important;
    overflow: hidden !important; 
    padding-top: 56.25% !important; *//*Permet de garder le ratio des vidéos youtube hauteur 9 ÷ largeur 16*/
/*}

.sg_improviser-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}*/

/* ====================== Element ====================== */
/* Element - Button */
.button-icon-left {
    margin-right: 0 !important;
}

.ilightbox-play,
.ilightbox-title {
    display: none;
}



@media only screen and (max-width: 600px) {
    .sg_shortcodeCours {
        display: flex;
        flex-direction: column;
        height: unset;
    }
    .sg_colonneFiltres form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sg_select-instruments,
    .sg_div-tonaliteNote {
        max-width: 50%;
    }
    #sg_form-categoryEtapes .sg_listEtapes {
        flex-wrap: wrap;
        flex-direction: row;
    }
    .sg_div-tonaliteNote {
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        margin: 0px 0px;
    }
    .sg_div-tonaliteNote img {
        max-width: 60px;
    }
}