/* 
    Created on : 29 déc. 2019, 21:30:55
    Author     : Voy
*/
body{
    overflow-x: hidden;
}

section.frontend{
    margin-top: -15px;
}

.backgroundIndex{
    background-image: url("../images/night.jpg"); 
    background-size: cover;
    left: 0;
    height: 59rem;
    position: sticky;
    width: 100%;
    top: 0;
}

.backGroundPostView{
    background-image: url("../images/summer.jpg"); 
    background-size: cover;
    left: 0;
    height: 59rem;
    width: 100%;
    position: fixed;
    top: 0;
}

h1 {
    text-align:center;
    color: red;
    position: relative;
    top: 1rem;
    font-weight: bolder;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    z-index: 1;
}

.btn.btn-light.specific.front{
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border-radius: 3px;
    z-index: 99;
    position: relative;
    left: 1rem;
    top: -2rem;
}

h2.indexView {
    position: relative;
    left: 2rem;
    bottom: 15rem;
    font-weight: bolder;
    color: #DCDCDC;
    text-shadow: -1px 0 white, 0 1px black, 1px 0 black, 0 -1px black;

}

h2.comment{
    font-weight: bolder;
    color: #DCDCDC;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

h3 {
    text-align: center;
    background-color: white;
    border-radius: 3px; 
}

.intro{
    position: relative;
    bottom: 46rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.intro p {
    color: white;
    font-size: 3rem;
    text-align: center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.news p
{

    margin-top:0px;
    word-wrap: break-word;
}

article.news{
    max-width: 100%;
}

article.news.col-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: auto;
    margin: 5px;
    max-width: 40%;
    overflow-y: auto;   
    border: solid 0.2px;
    background-color: #DCDCDC;
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border-radius: 3px;
}

article.news.col-3.postDetails{
    position: relative;
    margin-bottom: 4rem;
    top: 3rem;
    left: 29.5%;
    justify-content: space-between;
}

article.news.col-3.indexView{
    max-width: 30%;
}

article h3 {
    margin-top: 0.6rem;
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 1rem;
    background-color: #FFF;
}

article.news h3 {
    font-size: 1.5rem;
}

.chapter{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: relative;
    bottom: 15rem;
}

a{
    text-decoration: none;
    color: blue;
}

.commentView{
    position: absolute;
    top: 11rem;
    right: 1rem;
    width: 19rem;
}

article.comment{
    position: relative;
    max-height: 15rem;
    overflow-y: auto;
    width: 19rem;;
    border: solid 0.2px;
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background-color: white;
    padding: 3px;
    text-align: center;
    margin-top: 5px;
    border-radius: 3px;
    background-color: #DCDCDC;
}

.postView article.comment a.btn.btn-danger{
    margin-top: 3px;
    visibility: hidden;
}

.postView article.comment:hover a.btn.btn-danger{
    visibility: visible;
    width: 15rem;
}

.addCommment{
    border: solid 0.2px;
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align: center;
    padding-bottom: 3px;
    background-color: #DCDCDC;
    border-radius: 3px;
}
form.addCommment{
    width: 19rem;
    position: absolute;
    left: 1rem;
    top: 14rem;
}
#comment{
    margin: 3px;
}

.container.login{
    margin-top: 5rem;
    max-width: 40%;
}
.btn.btn-info.loginView{
    position: relative;
    left: 1.1rem;
    top: 3.25rem;
}

a.loginView{
    position: relative;
    left: 1rem;

}

.form-group {
    text-align: center;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: -1px 0 #212529, 0 1px #212529, 1px 0 #212529, 0 -1px #212529;
    border: solid 0.2px;
    border-radius: 3px;
}


.form-control.loginView{
    width: 35%;
    margin: 5px;
}

label.loginView{
    margin-right: 3px; 
}

.pagin{
    text-align: center;
    font-size: 2rem;
    position: relative;
    bottom: 10rem;
    left: 45%;
    text-shadow: -1px 0 #212529, 0 1px #212529, 1px 0 #212529, 0 -1px #212529;
    border: solid 0.2px;
    width: max-content;
    border-radius: 3px;
    max-width: 20%;
    background-color: #DCDCDC;    
    padding: 4px;
}

.btn{
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    margin-bottom: 0.5rem;
    border-radius: 3px
}

label{
    font-weight: bold;
}

/*--------------------------------specific backend-----------------------------*/
html body header.backend nav.navbar.navbar-expand-lg.navbar-light.bg-light{
    padding-top: 1.325rem;
    padding-bottom: 1.325rem;
    text-align: center;
}

header.backend{
    position: sticky;
    top: 0;
    z-index: 999;
}

.back h1{
    text-align:center;
    color: red;
    position: relative;
    top: .3rem;
}

.indexView div a.btn.btn-dark {
    width: 100%;
}

.indexView div a.btn.btn-info{
    width: 100%;    
}

h2.chapterView{
    position: relative;
    left: 12rem;
}

h2.adminView{
    position: initial
}

.adminCommentReportedByChapter{
    margin-left: 1rem;
    display: flex;
    margin-bottom: 1rem;
    margin-top: 3rem;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;
    flex-direction: column;
}

.adminCommentReportedByChapterDetails{
    display: flex;
    flex-wrap: wrap;
}

.btn.btn-info.linkAdmin{
    position: relative;
    left: 1.1rem;
    top: 3.25rem;
    z-index: 2;
}
.btn.btn-info.linkAdmin.editChapter{
    top: 0;
    margin: 0.5rem;
}

.specific.back{
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border-radius: 3px;
}
a.nav-item.nav-link.specific.back{
    align-self: center;
}

.back section article.news{
    text-align: center;
}


.row.comment.adminComReported{
    margin: 5px;
    height: 15rem;
    background-color: #DCDCDC;
}
.row.comment.adminComReported div.col{
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.col.commentAdminView{

    position: absolute;
    top: 11rem;
    width: 24rem;
    overflow-y: auto;

}
input.btn.btn-danger.adminchapter{
    visibility: visible;
    margin-bottom: 0.5rem;
}
.titleAdminComReported{
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.container.adminComReported{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 80%;
    margin-bottom: 0.5rem;
}
.news.addChapView{
    max-width: 90%;
    margin-left: 5%;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.addChapView{

    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border: solid 0.2px;
    border-radius: 3px;
    background-color: #DCDCDC;
    text-align: center;
}

.addChapView.title{
    border: solid 0.2px;
    text-align: center;
    padding-bottom: 5px;
}

.addChapViewLabel{
    margin-left: 1rem;
}

.addChapViewBtn{
    position: relative;
    margin-top: 5px;
}

article.news.col-3.edChapView{
    display: flex;
    flex-direction: column;
    margin: 5px;
    max-width: 90%;
    margin-left: 5%;
    margin-top: 10px;
    border: solid 0.2px;
    background-color: white;
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border-radius: 3px;
    background-color: #DCDCDC;
}

.tox{ /*class of tinyMCE field*/
    margin-bottom: 5px;
}

div.tox.tox-tinymce{
    height: 30rem !important;
}

article.news.col-3.edChapView form div input.btn.btn-secondary{
    margin-bottom: 0.5rem;    
}

.comment.adminCommentReportedByChapter{
    max-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #DCDCDC;
}

#author{
    width: 80%;
}

#comment{
    width: 80%;
}

.commentAdminView strong{
    margin-bottom: 0.5rem;
}

/*-------------------------------Queries 1120px--------------------------------*/

@media all and (max-width: 1120px){
    .back{
        text-align: center;
    }
    .frontend{
        display: flex;
        flex-direction: column;
    }

    .btn.btn-info.loginView {
        left: 1rem;
        width: 80%;
    }

    .btn.btn-light.specific.front{
        left: 1rem;
        top: 3.125rem;
        width: 6rem;
    }

    .btn.btn-info.linkAdmin{
        top: 3.5rem;
        width: 14rem;
        left: 1rem;
    }
    .btn.btn-info.linkAdmin.adminCommentReportedByChapter{
        left: 0;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .btn.btn-info.linkAdmin.editChapter{
        margin-top: 2rem;
        position: initial;
    }

    .container.login{
        max-width: 100%;
    }

    .form-control.loginView{
        width: 80%
    }

    section.frontend{
        margin-top: 0;
    }
    .linkAdmin{
        top: 3.125rem;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
    .postView{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .commentView{
        position: initial;
        display: flex;
        flex-direction: column;

    }
    .commentView h2{
        font-size: 2rem;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        z-index: 2;
    }
    h2.chapterView{
        position: initial;
        text-align: center;
    }

    h2.indexView {
        bottom: 23rem;
        left: 0;
    }

    .chapter{
        bottom: 20rem;
    }    
    form.addCommment{
        position: initial;

        z-index: 2;
    }

    article.news.col-3.postDetails {
        margin-top: 1rem;
        max-width: 100%;
        width: 100%;
        left: 0;
    }
    article.news.col-3.indexView{
        max-width: 100%;
        margin-bottom: 0.5rem;
    }    
    article.news.col-3{
        max-width: 100%;
        margin: 0;
    }

    article.comment{
        width: 100%;
    }
    .container.adminComReported{
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    .row.comment.adminComReported{
        width: 100%;
        max-height: none;
        margin: 0;
        margin-bottom: 0.5rem;
        display: flex;
        flex-direction: column;
    }

    div.col.commentAdminView{
        position: initial;
        display: flex;
        flex-direction: column;    }

    h2.adminCommentReportedByChapter{
        position: initial;
        margin: 0;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .comment.adminCommentReportedByChapter{
        text-align: center;
        width: 100%;
        margin: 0;
        margin-bottom: 0.5rem;
        padding: 0;
    }
    
    .adminCommentReportedByChapter{
        max-height: initial;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0; 
    }
    
    div.col.commentAdminView {
        position: initial;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        margin-bottom: 0.5rem;
    }
    div.col.commentAdminView article.comment{
        position: initial;
    }

    .titleAdminComReported{
        position: initial;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .news.addChapView{
        margin-left: 0;
        max-width: 100%
    }
    
    article.news.col-3.edChapView{
        margin-left: 0;
        max-width: 100%;    
    }
    
    #title{
        max-width: 95%;
    }

}