* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open sans', sans-serif;
    text-decoration: none;
    list-style: none;

}

:root {
    --bg-color: #290018;
    --text-color: #fff;
    --titre-color: rgb(1, 14, 247);
    --main-color: rgb(226, 194, 137);
    --header-bg-color: rgba(4, 140, 97, 0.881);
    --nav-bg-color: rgba(1, 168, 197, 0.966);
    --link-bg-color: rgba(252, 167, 48, 0.423);
    --link-for-color: rgb(248, 177, 190);
    /*--main-content-bg-color: #90dfd8de;*/
    --main-content-bg-color: #a6e7ca;
    --default-color: rgba(0, 0, 0, .9);
    --side-bg-color: rgba(2, 64, 187, 0.835);
    --side-bd-color: #eef7ea;
}


body {
    min-height: 100vh;
    height: 100%;
    width: 100%;
    /*
    display: flex;
    margin: 0 auto;*/
    background: var(--bg-color);
    color: var(--default-color);
}



header {
    position: fixed;
    height: 70px;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--nav-bg-color);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    /*  background: transparent;*/
    padding: 28px 12%;
    transition: all .50s ease;

}

.logo {
    display: flex;
    align-items: center;
}

.logo i {
    color: var(--main-color);
    font-size: 28px;
    margin-right: 3px;
}

.logo span {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.navbar {
    display: flex;
    align-items: center;
}

.auth {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--text-color);
}

.navbar a,
.auth a {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 400;
    padding: 5px 10px;
    margin: 0 25px;
    text-decoration: none;
    transition: all 0.50s ease;
}

.auth a {
    margin-left: 20px;
}

.navbar a:hover,
.auth a:hover {
    color: var(--link-for-color);
    background-color: var(--link-bg-color);
    border-bottom: 1px solid var(--link-for-color);
}

.navbar a.active,
.auth a.active {
    color: var(--link-for-color);
}

/* .auth a:hover {
    color: var(--main-color);
} */

.user {
    display: flex;
    align-items: center;
}

.user i {
    color: var(--main-color);
    font-size: 28px;
    margin-right: 7px;
}



#menu-icon {
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}

#main_content {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--main-content-bg-color);
    border-left: 2px solid rgba(162, 58, 132, 0.535);
    border-right: 2px solid rgba(162, 58, 133, 0.535);
    box-shadow: 0 1px 7px 4px #BD0746;
}

.top {
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #004e0ed9;
    background-image: url(../img/backgrd_header.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.top_left {
    border-left: 1px solid rgba(138, 174, 164, 0.686);
}

.top_mid {
    width: 90%;
    height: 80px;
    display: flex;
    margin-top: 25px;
}

.texte {
    margin-left: 15px;
    color: #e9e6e6;
    font-family: "Playball", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    text-shadow: 1px 1px 1px #3a4d00;
}

.top_right {
    height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: rgba(0, 29, 11, 0.872);
}

.over_text {
    margin-top: 5px;
    padding: 0;
    height: 40px;
    font-family: 'Tangerine', serif;
    font-size: 40px;
    color: rgb(106, 32, 1);
    text-shadow: 1px 1px 1px #bcdb67;
}

#midle {
    width: 100%;
    display: flex;
    justify-content: center;
}

#gauche {
    height: 100%;
    padding: 10px;
    min-width: 250px;
    margin: 0 15px;
    margin-right: 10px;
    background-color: var(--side-bg-color);
    color: white;
    border: 1px solid var(--side-bd-color);
    border-radius: 8px;
}

#gauche ul {
    width: 230px;
}

#gauche a {
    width: 100%;
    padding: 5px 5px;
    color: white;
    text-decoration: none;
    transition: 0.3s ease;
}

#gauche a:hover {
    color: #12f4f4ea;
    background-color: #84c1e85d;
}

#milieu {
    height: 100%;
    width: calc(100% - 500px);
    background-color: white;
    border: 1px solid rgba(12, 168, 127, 0.81);
    border-radius: 8px;
    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.1);
    /* margin-left: 5px;
    margin-right: 5px; */
    margin: 0 auto;
    margin-bottom: 15px;
    padding: 15px;
}

#milieu h1,
#milieu h2,
#milieu h3 {
    color: var(--titre-color);
}

#milieu_CRR,
.tuto_milieu {
    height: 100%;
    width: 80%;
    background-color: white;
    border: 1px solid rgba(12, 168, 127, 0.81);
    border-radius: 8px;
    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.1);
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 15px;
    padding: 15px;
}

#milieu_CRR h2,
#milieu_CRR h3 {
    color: var(--titre-color);
}


#droite {

    /* height: 100vh; */
    height: 100%;
    padding: 10px;
    min-width: 250px;
    margin: 0 15px;
    margin-left: 10px;
    background-color: var(--side-bg-color);
    color: white;
    border: 1px solid var(--side-bd-color);
    border-radius: 8px;
}

#droite ul,
#gauche ul {
    padding-left: 10px;
}

#droite a {
    width: 100%;
    padding: 5px 5px;
    color: white;
    /*text-decoration: none;*/
    transition: 0.3s ease;
}

#droite a:hover {
    color: #12f4f4ea;
    background-color: #84c1e85d;
}

#tutos {

    /* height: 100vh; */
    height: 100%;
    padding: 10px;
    min-width: 250px;
    margin: 0 15px;
    margin-left: 10px;
    background-color: var(--side-bg-color);
    color: white;
    border: 1px solid var(--side-bd-color);
    border-radius: 8px;
}

#tutos a {
    width: 100%;
    padding: 5px 5px;
    color: rgb(4, 120, 244);
    /*text-decoration: none;*/
    transition: 0.3s ease;
}

#tutos a:hover {
    color: #daf5f5ea;
    background-color: #039e6bcf;
}

.msg_content {
    margin: 5px auto;
    width: 63%;
}

.line {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid rgba(216, 252, 238, 0.889);
    background-color: rgba(122, 130, 125, 0.5);
    margin: 5px 0;
}

.cadre {
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 10px 0;
    padding: 5px 10px;
    background-color: rgba(80, 247, 150, 0.299);
    border-radius: 5px;
}

.cadre a {
    margin-top: 0;
    padding: 5px 5px;
    color: rgba(0, 85, 255, 0.885);
    font-size: 1.0rem;
}

.cadre a:hover {
    background-color: #effc9e;
    color: rgb(146, 63, 4);
}

.music {
    width: 98%;
    margin: auto;
    max-width: 900px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    background-color: white;
    border-radius: 8px;
}

.musicInfo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-color: rgba(253, 184, 192, 0.3);
    padding: 5px;
}

.artist {
    margin: 0;
    color: #004520;
    font-size: 14px;
    font-weight: lighter;
    width: 220px;
    min-width: 25%;
}

.titre {
    margin: 0;
    color: #106730;
    font-size: larger;
    font-weight: lighter;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.arrgtBy {
    margin: 0;
    font-size: 12px;
    color: #004869;
}

.artist span,
.titre span,
.arrgtBy span {
    color: #555;
    font-size: small;
}

.track {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 4px 5px;
    background-color: #003414f4;
}

.track img {
    width: 50px;
    margin-right: 20px;
    cursor: pointer;
}

.track div {
    flex: 1;
}

.trackCtrl {
    height: 40px;
    background-color: #00420dcb;
    display: flex;
    position: relative;
}

.trackCtrl .btn {
    color: white;
    cursor: pointer;
    padding: 5px;
    width: 24px;
    margin-right: 8px;
    display: inline-block;
}

.time {
    position: absolute;
    right: 20px;
    top: 8px;
    color: white;
    font-size: 14px;
}

input[type=range].volume-slider {
    accent-color: rgb(0, 239, 56);
}

.trackCtrl .volume-slider {
    /* padding: 5px; */
    width: 200px;
}

.trackCtrl .mute-btn .fa-volume-xmark {
    display: none;
}

.trackCtrl .mute-btn.muted .fa-volume-xmark {
    display: inline-block;
}

.trackCtrl .mute-btn.muted .fa-volume-high {
    display: none;
}

#listAudio {
    width: 98%;
    margin: auto;
    margin-top: 20px;
    max-width: 900px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    background-color: white;
}

#waveform {
    display: flex;
    align-items: center;
}

.choix_item {
    margin: 0;
    cursor: pointer;
}

.choix_item:hover {
    background-color: rgba(0, 230, 145, 0.492);
}

.ligneItem {
    display: flex;
    align-items: center;
}

.curentAudio {
    background-color: rgba(171, 245, 218, 0.499);
}

.AudioLoading {
    color: white;
}

.paroles {
    margin: 5px 0;
    max-height: 140px;
    padding: 5px 0;
    width: 60%;
    overflow-y: auto;
}

.comments {
    margin: 0;
    padding: 0 10px;
    width: 50%;
    border-left: 1px solid rgba(1, 68, 90, 0.588);
}

.chants {
    /*border-top: 1px solid rgba(81, 52, 1, 0.5);*/
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.id_chant {
    padding: 0 10px;
    width: 60%;
}


.chants_CRR {
    padding: 10px 0;
    background-color: rgba(4, 8, 51, 0.59);
    box-shadow: 0 1px 8px 5px rgba(0, 0, 0, 0.1);
}

.chant_titre {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(81, 52, 1, 0.5);
}

.chant_link {
    display: flex;
    align-items: center;
    width: 50%;
}

.chant_rating {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 10px;
}


.lnk_myrweb {
    display: flex;
    /* justify-content: space-around;
    gap: 30px;*/
    margin: 0;
    text-align: left;
}

.tuto {
    /*background-color: #fbf9f9;*/
    padding: 0 10px;
    width: 50%;
    border-left: 1px solid rgba(1, 68, 90, 0.588);
}

.tuto_profil {
    background-color: #ffffff;
    padding: 15px;
    /*border: 1px solid rgba(1, 68, 90, 0.464);*/
    box-shadow: 0px 1px 10px 5px rgba(0, 0, 0, 0.1);

}

.conteneur {
    margin: 10px 0;
    padding: 0 10px;
}

.inscription {
    margin: 10px auto;
    padding: 10px 20px;
    /*width: 40%;
    height: 67vh;*/
    background-color: #fbfbfb;
    border: 1px solid rgba(138, 174, 164, 0.686);
    border-radius: 10px;
}

.inscription form {
    width: 100%;
    max-height: 800px;
    padding: 10px 0;
}

.login,
.newpass {
    margin: 10px auto;
    padding: 10px 20px;
    width: 50%;
    /*height: 40vh;*/
    background-color: #fbfbfb;
    border: 1px solid rgba(138, 174, 164, 0.686);
    border-radius: 10px;
}

.login form {
    width: 100%;
    /*height: 400px;
    padding: 5px 0;*/
}

.forgot {
    margin: 10px auto;
    padding: 10px 0;
}

.forgot form {
    width: 100%;
    height: 150px;
    padding: 10px 0;
}

.forgot .btn {
    margin-top: 10px;
}

.newpass form {
    width: 100%;
    height: 400px;
    padding: 10px 0;
}

/************************* ALERT ******************/
.alert .icon {
    margin-right: 15px;
}

.alert .bx {
    font-size: 36px;
}

/************************* FIN ALERT ******************/

/************************** PROFIL Utilisateur **********/
.profil {
    margin: 0 auto;
    width: 100%;
    padding: 10px 0;
    height: 60vh;
}

.star_rate {
    display: inline-flex;
    margin-right: 0;
}

.light {
    color: darkorange;
}

.unlight {
    color: grey;
}

.btn-custom {
    margin: 0;
    padding: 4px 6px;
    color: #fff;
    font-size: 0.8rem;
    background-color: rgb(1, 111, 255);
    border-radius: 5px;
    transition: 0.3s ease;
}

.btn-custom:hover {
    background-color: rgba(123, 198, 255, 0.894);
    color: #000;
}

.notice {
    font-size: 0.8rem;
    background-color: #f4f1f1;
    border: 1px solid rgba(41, 149, 140, 0.894);
    border-radius: 5px;
    box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.1);
    margin: 15px auto;
    padding: 5px 10px;
    width: 98%;
}

.page_contact {
    width: 60%;
    /*height: 80vh;
    height: 100%;*/
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    padding: 15px 15px;
    background-color: #ffffff;
    border: 1px solid rgba(41, 149, 140, 0.894);
    border-radius: 5px;
    box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.1);
}

.page_contact .head_contact {
    padding: 0;
}

.form_contact form {
    /*height: 580px;*/
    height: 100%;
    padding: 20px;
    /*display: flex;
    align-items: left;
    gap: 20px;
    flex-direction: column;*/
    background-color: #99d1dd81;
}

.form_contact form .submit {
    width: 50%;
    margin: 10px;
}

.form_contact textarea {
    resize: none;
}

.case_check {
    padding: 10px;
}

footer {
    height: 100%;
    width: 100%;
    margin-top: auto;
    padding: 5px 10px;
    background-color: rgba(1, 64, 39, 0.802);
    color: #e9e6e6;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.foot_box {
    min-width: 250px;
    max-width: 380px;
    margin: 15px 15px;
}

.box_body {
    border-top: 1px solid white;
    padding: 20px 0;
}

#copyright {
    width: 100%;
    padding: 0 10px;
}

p {
    margin: 10px 0;
}

footer a {
    color: white;
}

footer p {
    margin: 5px 0;
}

.copy_box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.container .page {
    margin: 25px 30px;
    padding: 30px;
    background-color: white;
    border: 1px solid rgba(41, 149, 140, 0.894);
    border-radius: 10px;
    box-shadow: 3px 3px 8px 4px rgba(0, 0, 0, 0.1);
}

.container .page h4 {
    color: #004da5;
    line-height: 2rem;
}

.container .page p {
    text-align: justify;
    padding-bottom: 12px;
}

.line {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid rgba(216, 252, 238, 0.889);
    background-color: rgba(122, 130, 125, 0.5);
    margin: 5px 0;
}

.article h4 {
    margin-bottom: 0;
}

.auteur_news {
    border-top: 1px solid rgb(172, 172, 172);
    padding-right: 20px;
    text-align: right;
    font-style: italic;
    font-size: small;
}

.top-link,
.top-link:link,
.top-link:hover {
    position: fixed;
    bottom: 130px;
    right: 0;
    padding: 7px 7px 9px;
    border-top-left-radius: 5px;
    color: #fff;
    border: 2px solid #fff;
    border-right: none;
    border-bottom-left-radius: 5px;
    width: auto;

}

.top-link:hover {
    background: none repeat scroll 0 0 #10bd19;
    transition: all .5s;
}

#top_page {
    display: none;
    z-index: 100;
}

.stick_up img {
    margin: 10px auto;
    width: 100%;
}

/*--- RESPONSIVE ----*/

@media (max-width:1280px) {
    body {
        width: 100%;
    }

    #main_content {
        width: 100%;
        margin: 0;
    }

    header {
        width: 100%;
        margin: 0;
        padding: 14px 2%;
        transition: .2s;
    }

    .navbar a {
        padding: 5px 0;
        margin: 0px 20px;
    }

    .texte {
        font-size: 36px;
    }

    .playball-regular {
        font-size: 2rem;
    }
}

@media screen and (max-width:920px) {
    .texte {
        font-size: 28px;
    }

    .chants {
        flex-direction: column;
    }

    .id_chant {
        width: 100%;
    }

    .tuto {
        border: none;
    }

    #main_content {
        margin: 0;
        align-self: auto;
    }

    #midle {
        flex-direction: column;
        align-items: center;
    }

    #gauche {
        width: 100%;
        height: 100%;
    }

    #droite {
        width: 100%;
        height: 100%;
    }

    .logo {
        display: none;
    }

    .texte {
        font-size: 1.6rem;
    }

    .login {
        width: 80%;
    }

    .inscription {
        width: 80%
    }

    .paroles {
        width: 100%;
    }

    .comments {
        width: 100%;
    }

    .tuto {
        width: 100%;
    }

    #milieu {
        width: 98%;
    }

    #milieu_CRR {
        width: 98%;
    }

    .tuto_milieu {
        width: 98%;
    }
}


@media (max-width:720px) {
    #menu-icon {
        display: block;
        padding-left: 25px;
    }

    .auth {
        display: flex;
        font-size: 1.0rem;
        /*gap: 30px;*/
    }

    .texte {
        font-size: 28px;
        text-align: center;
    }

    .navbar {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 300px;
        height: 42vh;
        background: var(--nav-bg-color);
        border: 1px solid rgba(0, 163, 57, 0.597);
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }

    .navbar a {
        display: block;
        margin: 0;
        padding: 15px 25px;
        transition: all .50s ease;
    }

    .navbar a:hover {
        color: var(--link-for-color);
    }

    .navbar a.active {
        color: var(--link-for-color);
    }

    .navbar.open {
        right: 2%;
    }

    .top {
        flex-direction: column;
    }

    .login {
        width: 98%;
    }

    .inscription {
        width: 98%;
    }

    .notice {
        width: 98%;
    }

    .foot_boxs {
        flex-direction: column;
        justify-content: left;
    }

    .page_contact {
        width: 100%;
        /*height: 78vh;*/
    }

    .msg_content {
        width: 100%;
    }

    .container .page {
        margin: 25px 10px;
        padding: 10px;
        font-size: 16px;
        width: 96%;
    }

    .artist,
    .titre {
        width: 100%;
    }

    .titre {
        font-size: 14px;
        font-weight: bold;
    }

    .ligneItem {
        flex-direction: column;
        justify-content: left;
        width: 100%;
    }
}