/* VARIABLES */
:root{
    --main-color: rgb(143, 0, 151);
    --main-color-dark: rgb(109, 0, 115);
    --secund-color: rgb(248, 249, 250);
    --white: rgb(255, 255, 255);
}

/* OVERWRITE BOOTSTRAP */
.btn{
    transition: 0.2s;
    padding:0.4rem 0.8rem;
    display: block;
    width: fit-content;
}
.btn:not(.btn-danger){
    border:solid var(--main-color) 0.1rem;
}
.btn:hover:not(.btn-danger){
    border:solid var(--main-color-dark) 0.1rem;
}
.btn:hover{
    padding:0.4rem 1.2rem;
}
.btn.btn-primary{
    background-color: var(--main-color);
    width:fit-content;
}
.btn.btn-primary:hover{
    background-color: var(--main-color-dark);
}
.btn.btn-secondary{
    background-color: var(--white);
    color:var(--main-color);
    width:fit-content;
}
.row {
    padding:2.5rem 0;
    background-color: var(--secund-color);
}

/* GLOBAL */
/*html{
    font-size: 62.5%;
}*/
pre{
    font-size: 12px;
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

ol, ul, li{
    list-style: none;
    padding:0;
    margin: 0;
}

a{
    color:var(--main-color);
    text-decoration: none;
    transition-duration: 0.2s;
}
a:hover{
    color:var(--main-color-dark);
    text-decoration: none;
}

/*a,p, label, input, textarea{
    font-size: 1.2rem;
}*/

/* SPECIFIC */
/* Navigation Bar */
nav{
    margin-bottom: 50px;
}
nav .pic_container img{
    height:3rem;
    border-radius: 50%;
    border:0.2rem solid var(--main-color);
}
nav .btn{
    margin-left:1rem;
}

/* Footer */
footer.container-fluid{
    background-color: var(--secund-color);
}
footer .row{
    background: none;
}
footer a.logo{
    font-size: 1.6rem;
    font-weight: bold;
}
footer .socials a{
    font-size: 1.6rem;
}

/* Movie card */
div.card h3{
    font-size: 1.2rem;
}


/* Page mon compte - PROFILE */
#my_account .picture_container .profile_pic{
    border-radius: 50%;
    width: 15rem;
}

#my_account ul.pwd_conditions li{
    list-style-type: disc;
    list-style-position: inside;
}
#my_account ul.pwd_conditions li::marker{
    color:var(--main-color);
}

#my_account form div:not(#my_account_file, #my_account_pwd) {
    display: flex;
    flex-direction: column;
}
#my_account form div button{
    width: fit-content;
}
#my_account form div:not(:last-child) {
    margin-bottom: 1.5rem;
}

#my_account form input:not(input[type="file"], input[type="submit"]),
#my_account form textarea {
    width:30rem;
    padding:0.2rem 0.4rem;
}
#my_account #avatar{
    border: solid var(--main-color) 0.1rem;
    border-radius:0.5rem;
    background-color: white;
    padding:0.3rem;
}
#my_account #avatar::file-selector-button{
    border: solid var(--main-color) 0.1rem;
    transition:0.2s;
    padding:0.4rem 0.8rem;
    border-radius: 0.375rem;
    background-color: var(--main-color);
    color:white;
    margin-right: 1rem;
}
#my_account #avatar::file-selector-button:hover{
    border: solid var(--main-color-dark) 0.1rem;
    padding:0.4rem 1.2rem;
    background-color: var(--main-color-dark);
    cursor: pointer;
}

#my_account form button{
    margin-top:0.5rem;
}
#my_account #my_account_file, #my_account #my_account_pwd{
    display:none;
}


/* Page liste utilisateurs (rôles) */
#users_list_role .row{
    padding:0;
    margin:0;
    background: none;
}
#users_list_role .accordion,#users_list_role .accordion-body{
    padding:0;
}
#users_list_role .form_left select{
    padding:0 0.5rem;
}
#users_list_role .user_item{
    border-radius:0.5rem;
    background-color: var(--secund-color);
    padding:1rem;
    border:none;
}
#users_list_role .user_item:not(:last-child){
    margin-bottom: 1rem;
}
#users_list_role .user_item .user_item_left img{
    border-radius: 50%;
    height:3rem;
}
#users_list_role .user_item .user_item_left .user_title{
    font-weight: bold;
    font-size: 1.2rem;
}
#users_list_role .user_item .user_item_left .user_pseudo{
    font-style: italic;
    font-size: 1rem;
    opacity:0.5;
}
#users_list_role .user_role{
    font-size: 1rem;
}

/* Page de tous les films */
#adv_search_movie .accordion-header input[type=search]{
    width:20rem;
}

/* Page de connexion (login) */
#login input{
    margin-bottom: 1rem;
}

/* Page de suppression du compte */
#delete_account .picture_container .profile_pic{
    border-radius: 50%;
    width: 15rem;
}
#delete_account ul li{
    line-height: 1.4rem;
}
#delete_account ul li:before{
    content:'\2297';
    color:var(--main-color);
    font-size: 1.4rem;
    margin:0 1rem 0 1rem;
}

#movie_contact #message{
    height: 200px;
}

/* Page liste commentaires (modération) */
#comment_manage .row{
    padding:0;
    margin:0;
    background: none;
}
#comment_manage .accordion,#comment_manage .accordion-body{
    padding:0;
}
#comment_manage .form_left select{
    padding:0 0.5rem;
}
#comment_manage .comment_item{
    border-radius:0.5rem;
    background-color: var(--secund-color);
    padding:1rem;
    border:none;
}
#comment_manage .comment_item:not(:last-child){
    margin-bottom: 1rem;
}
#comment_manage .comment_item .comment_item_left img{
    border-radius: 50%;
    height:3rem;
}
#comment_manage .comment_item .comment_item_left .user_title{
    font-weight: bold;
    font-size: 1.2rem;
}
#comment_manage .comment_item .comment_item_left .infos_comm{
    font-style: italic;
    font-size: 1rem;
    opacity:0.5;
}
#comment_manage .comment_status{
    font-size: 1rem;
}
#comment_manage .pic_comm_container img{
    height:15rem;
}
#comment_manage .comment_status .status_xmark{
    color:rgb(211, 0, 56) !important;
}
#comment_manage .comment_status .status_check{
    color:rgb(0, 186, 0) !important;
}