.body
{
    /* background-color: lightgray; */
    background-color: rgb(116, 69, 224);
    /* background-color: red; */
    /* background-color: rgb(101, 33, 255); */
}

.navbarOur
{
    
    display:grid;
    grid-template-areas: 'logo logo input input input input input input jform jform'
                         'logo logo input input input input input input jform jform'
                         'TC TC input input input input input input jform jform' 
                         'TC TC input input input input input input jform jform' ;

    background-color: rgb(101, 33, 255);
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.journalForm
{
    grid-area: jform;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
}

.contentInputBox
{
    resize: none;
    grid-area: input;
}

.navbarImg
{
    grid-area: logo;
}

.navbarTC
{
    grid-area:TC;
    color:white;
    text-align: left;

}

.giphytextsearch
{
    grid-area:jgs;
}

.SubmitJournalButton
{
    grid-area:jsbtn;
}

.giphybtnsearch
{
    grid-area:jgbtn;
}

.NavGiphyPreview
{
    grid-area:jgprev;
}



/* GENERAL JOURNAL APPEARANCE CLASSES*/
.journaldiv
{
    
    display:grid;

    grid-template-areas: 'id id id id id id id id id id giphy giphy'
                         'content content content content content content content content content content giphy giphy'
                         'content content content content content content content content content content react react';
    background-color: white;
    margin-top: 5px;
    margin-bottom: 5px;    
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;

}

.journalId
{
    grid-area:id;   
    color: rgb(204, 203, 203);
}

.journalContent
{
    grid-area:content;
    margin-right: 5px;
}

.journalGiphy
{
    grid-area:giphy;
    display : flex;
    width:300px;
    height:120px;

}

.JournalgiphyImg
{
    width:300px;
    height:120px;
    object-fit: fill;
}

.JournalReactionDiv
{
    grid-area:react;
    display:flex;
    justify-content: space-evenly;
}

.journalReactionValue
{   
    border-color: rgb(101, 33, 255);
    margin-top: 15px;
    width:20%;
   text-align: center;
   border-style:solid;
   border-radius: 5px;
}

.journalReactionEmoji
{
    border-color: rgb(101, 33, 255);
    margin-top: 15px;
    width:20%;
    text-align: center;
    border-style:solid;
    border-radius: 5px;
}

.journalGiphyPreview
{
    grid-area:giphy;
}


.ViewAllCommentsBtn
{

}

/* JOURNAL COMMENT INPUT DIV CLASSES */
.JournalCommentInputDiv
{
    
}

.journalCommentForm
{
    margin-left: 2em;
    
    display:grid;
    grid-template-areas: 'txt txt txt txt txt txt giphy giphy giphy giphy giphy giphy'
                           'txt txt txt txt txt txt giphy giphy giphy giphy giphy giphy'
                           'txt txt txt txt txt txt searchBar searchBar searchBar searchBar searchBar searchBar'
                           'submit submit submit submit submit submit searchBtn searchBtn searchBtn searchBtn searchBtn searchBtn';
    background-color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}

.JournalCommentInputDiv
{

}

.journalCommentInput
{
    grid-area: txt;
    resize: none;
}

.journalCommentInputSubmitBtn
{
    grid-area:submit;

}

.JournalCommentGiphySearchBar
{
    grid-area:searchBar;
}

.journalCommentGiphySearchBtn
{
    grid-area:searchBtn;
}

.journalCmtGiphyPreview
{
    grid-area:giphy;
    height:8vh;
    display:flex;
}





/* COMMENT DISPLAY CLASSES */

.commentDiv
{
    
    display:grid;
    grid-template-areas: 'cid cid cid cid cid cid cid cid cid cid cgiphy cgiphy'
                         'ccontent ccontent ccontent ccontent ccontent ccontent ccontent ccontent ccontent ccontent creact creact';
    margin-left: 2em;
    background-color: white;
    margin-bottom: 5px;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;

}

.JournalCommentInputDiv
{
    grid-area:cid;
    
}

.commentContent
{
    grid-area:ccontent;
    display: flex;
    text-align:center;
}

.commentGiphyP
{
    grid-area:cgiphy;
    display: flex;
}

.commentGiphyImg
{
    width:300px;
    height:120px;
    object-fit: fill;

}

.commentReactionDiv
{
    grid-area:creact;
    display:flex;
    justify-content: space-evenly;
}

.commentReactionValue
{
    width:20%;
    text-align: center;
    border-style:solid;
    border-color: rgb(101, 33, 255);
    border-radius: 5px;
}

.commentReactionEmoji
{
    width:20%;
    text-align: center;
    border-style:solid;
    border-color: rgb(101, 33, 255);
    border-radius: 5px;
}

.paginationDiv
{
    margin-left:2em;
}
.commentId{
    color: rgb(204, 203, 203);
}



/* VISIBILITY CLASSES */
.hidden
{
    visibility: "hidden";
}

.visible
{
    visibility: "visible";
}

































/* .container {
   padding-top: 50px;
   
}

.card {
    padding-left:40px;
    align-content: space-around;

}

img {
  
}

.journalReactionDiv {
    align-content: flex-end;
}

#inputSection {
    display: inline-block;
    margin: 0 auto;
    padding: 10px;
    background-color: #6521ff;
    width: 100%;
    align-content: space-around;
}

#contentInputBox {
    height:100px;
    font-size:14pt;
    margin-top: 25px;
    margin: 25px;
}

#giphytextsearch {
    
}

#navbar {
    z-index: 9999;
    background-color: #6521ff;
  }
  
  #navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  }
  
  .content {
    padding: 16px;
    float: center;
  }
  

  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky + .content {
    padding-top: 60px;
  } */

/*#displayJournalSelection {
    padding-right: 20px;
    display: flex;

}