/*
This time for Africa :)
POST VIEW PAGE :\
*/
.viewpost{
    width: 1441px;
    /* background-color: #4C566A; */
    margin: 30px auto;
    position: relative;
    padding: 0px;
}
.PostView{
    width: 888px;
    /* margin: 30px auto; */
    background-color: #EEF1F8;
    border-radius: 5px;
    padding: 50px;
    font-size: 1.05rem;
}
.PostView table{
    /*border: 1px solid #999999;*/
    height: 100% !important;
    width: 100%;
    overflow-x: scroll;
    display: flex;
    margin: 10px auto;
    white-space:nowrap;
}
.PostView th, td{
    border-top: 0px;
    padding: 2px 5px;
    border-right: 0;
}
.PostView blockquote , q{
    background-color: #E5E9F0;
    padding:  5px;
    border-radius: 5px;
    font-weight: 500;
    margin-top : 0;
}
.related{
    width: 385px;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: fit-content;
    background-color: #00ACEE;
    border-radius: 5px;
    padding: 20px;
}
.related h3{
    padding: 0 0 10px 0;
}
.related li{
    list-style: none;
    margin-top: 10px;
}
.related a{
    text-decoration: none;
    color: #E5E9F0;
    padding: 0 0 10px 0;
}
.related a:hover{
    text-decoration: overline;
    color: #2E3440;
    padding: 0 0 10px 0;
}
.related span{
    color: #2E3440;
    padding: 0 0 0 5px;
}
.related hr{
    margin: 10px 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #2E3440;
}
.title{
    padding: 0 0 20px 0;
}
.author{
    color: #2E3440;
    padding: 5px;
    background-color: #E5E9F0;
    width: fit-content;
    width: -moz-fit-content;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    /* transform: skew(-20deg); */
}
.author a{
    text-decoration: none;
    color: #5E81AC;
    font-weight: 900;
}
.author a:hover{
    text-decoration: none;
    color: #2E3440;
    font-weight: 900;
}
.shortlink{
    float: left;
    margin-top: -31px;
    background-color: #E5E9F0;
    padding: 5px;
    font-size: 0.85rem;
    border-radius: 5px;
    font-weight: bold;
}
.shortlink a{
    font-weight: 500;
    text-decoration: none;
    color: #00ACEE;
    border-radius: 5px;
}
.shortlink a:hover{
    text-decoration: none;
    color: #2E3440;
}
.summary-div{
    margin-top: 30px;
    background-size:cover;
    background-position: center;
    backdrop-filter: blur(0px);
    border: 0;
    border-radius: 5.5px;
}
.summary{
    background-size:cover;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.75);
    /* background-color: #D8DEE9; */
    /* box-shadow: 0 0 3px #D8DEE9; */
    padding: 20px;
    border-radius: 5px;
}
.context{
    font-weight: 300;
    margin-top: 30px;
}
.context p{
    margin: 10px 0 0 0;
    /* text-indent: 20px; */
}
.context a{
    text-decoration: none;
    color: #00ACEE;
    font-weight: 400;
    transition: 300ms;
}
.context a:hover{
    color: #5E81AC;
}
/*.context img{*/
/*    width: 100%;*/
/*    margin: 10px 0;*/
/*    border-radius: 5px;*/
/*}*/
.context hr{
    margin: 10px 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid #bbb;
}
.flags{
    font-size: 0.8rem;
    margin-top: 20px;
    width: 100%;
    color: #2E3440;
    background-color: #E5E9F0;
    padding: 5px;
    width: fit-content;
    width: -moz-fit-content;
    border-radius: 5px;
    border-right: 5px solid #AAAAAA;
}
.commenthr{
    margin: 80px 0 20px 0;
    border-top: 1px solid #D8DEE9;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.comments{
    background-color: #E5E9F0;
    padding: 10px;
    border-radius: 5px;
}
.statics-view{
    display: block;
    position: absolute;
    /* background-color: #5E81AC; */
    display: grid;
    grid-template-areas:
    'tags info';
    padding: 10px 0 10px 0;
    font-size: 1rem;
}
.statics-view .info{
    position: relative;
}
.statics-view .tags{
    margin-right: 0;
}
/* for POST COMMNETS :) */
.allcomments{
    padding: 10px;
}
.allcomments > li{
    list-style: none;
    width: 100%;
    background-color: #FFFFFF66;
    margin-top: 25px;
    border-radius: 5px;
    border-right: 5px solid #00ACEE;
    direction: rtl;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 100px;
}
.allcomments h4{
    padding: 5px 10px;
}
#timespan{
    position: absolute;
    font-size: 0.8rem;
    color: #888888;
    padding: 4px 10px;

}
.allcomments p{
    font-size: 0.9rem;
    font-weight: 400;
    padding: 10px;
    white-space: normal;
}







/*.login-area{*/
/*    width: auto;*/
/*    border: 0;*/
/*    !* background-color: #4bcd23; *!*/
/*    background-color: #D8DEE9;*/
/*    position: relative;*/
/*    display: grid;*/
/*    grid-template-areas: 'signup login';*/
/*    !* padding: 10px; *!*/
/*}*/
/*.login-area input{*/
/*    text-align: center;*/
/*    width: 360px;*/
/*    background-color: #D8DEE9;*/
/*    padding: 7px 10px;*/
/*    margin: 10px 0 0 0;*/
/*    border-radius: 30px;*/
/*    border: 1px solid #D8DEE9;*/
/*    border-right: 5px solid #00ACEE !important;*/
/*    border-left: 5px solid #00ACEE !important;*/
/*    font-size: 0.9rem;*/
/*    transition: 300ms;*/
/*}*/
/*.login-area input:hover{*/
/*    text-align: center;*/
/*    width: 360px !important;*/
/*    background-color: #FFFFFF;*/
/*}*/
/*.login-area input:focus{*/
/*    text-align: center;*/
/*    width: 360px !important;*/
/*    background-color: #FFFFFF;*/
/*}*/
/*.login-comment-h3 span{*/
/*    color: #888888;*/
/*    font-size: 0.8rem;*/
/*}*/
/*.login-area h3{*/
/*    color: #2E3440;*/
/*}*/
/*.login-area input,button:focus{*/
/*    outline: none !important;*/
/*}*/


.login-comment-h3{
    padding: 10px;
}
.login-comment-h3 span{
    color: #888888;
    font-size: 0.8rem;
}

.loginn{
    position: relative;
    font-size: 0.85rem;
    background-color: #00ACEE;
    color: #2E3440;
    padding: 5px 10px;
    float: left;
    /*top: -35px;*/
    left: 0;
    bottom: 40px;
    border-radius: 5px;
    box-shadow: 0 0 5px #00ACEE;
    text-decoration: none;
    transition: 300ms;
}
.loginn:hover{
    background-color: #2E3440;
    color: #00ACEE;
    box-shadow: 0 0 5px #2E3440;
}



.newcooment{
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #BBBBBB;
    margin: 20px auto;
}
.comments{
    border: 0;
    /* background-color: #4bcd23; */
    /* background-color: #FFFFFF88; */
}
.comments > h3{
    padding: 10px;
}
.comments > input{
    text-align: center;
    width: 260px;
    background-color: #EBCB8B33;
    padding: 7px 10px;
    margin: 10px 0 0 0;
    border-radius: 5px;
    border: 1px solid #EBCB8B33;
    border-right: 5px solid #EBCB8B !important;
    font-size: 0.9rem;
    transition: 300ms;
}
.comments > textarea{
    width: 96%;
    margin-top: 10px;
    /* font-size: 1.2rem; */
    padding: 2%;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
    border-right: 5px solid #EBCB8B;
    font-size: 1rem;
}
.comments > textarea:focus{
    border: 1px solid #888888;
    outline: none;
    border-right: 5px solid #EBCB8B;
}
.comments > button{
    width: auto;
    margin-top: 10px;
    padding: 5px 15px;
    color: #2E3440;
    background-color: #EBCB8B;
    border: 1px solid #EBCB8B;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: 300ms;
    cursor: pointer;
    border-right: 5px solid #2E3440;
}
.comments > button:hover{
    color: #EBCB8B;
    background-color: #2E3440;
    padding: 5px 15px !important;
    border: 1px solid #2E3440;
    border-right: 5px solid #2E3440;
}
#commentSection {
    display: none;
}
#newcommentSection{
    display: none;
}
.btn{
    width: auto;
    margin: 10px 5px;
    padding: 5px 15px;
    background-color: #2E3440 !important;
    border: 0 !important;
    border-radius: 5px;
    font-size: 0.9rem;
    transition: 300ms;
    cursor: pointer;
    width: auto;
    margin-top: 10px;
    padding: 5px 15px;
    color: #D8DEE9 !important;
    font-size: 0.9rem;
    transition: 300ms;
    cursor: pointer;
    /* border-right: 5px solid #2E3440 !important;
    border-left: 5px solid #2E3440 !important; */
    box-shadow: 0 0 5px #2E3440;
}
.btn:hover, .btn:focus{
    background-color: #2E3440 !important;
    border: 0 !important;
    padding: 5px 15px !important;
}
.btn::after{
    background-color: #2E3440 !important;
    border: 0 !important;
    padding: 5px 15px !important;
}









@media screen and (max-width: 480px) {

    .viewpost {
        width: 100%;
    }

    .PostView {
        width: auto !important;
        margin: 30px 5px;
        background-color: #ECEFF4;
        border-radius: 5px;
        padding: 10px;
        font-size: 1rem;
    }

    .related {
        width: auto;
        display: block;
        position: relative;
        left: 0;
        top: 0;
        display: block;
        height: fit-content;
        background-color: #00ACEE;
        border-radius: 5px;
        padding: 20px;
        margin: 10px;
    }

    .related h3 {
        padding: 0 0 10px 0;
    }

    .related li {
        list-style: none;
        margin-top: 10px;
    }

    .related a {
        text-decoration: none;
        color: #E5E9F0;
        padding: 0 0 10px 0;
    }

    .related a:hover {
        text-decoration: overline;
        color: #2E3440;
        padding: 0 0 10px 0;
    }

    .related span {
        color: #2E3440;
        padding: 0 0 0 5px;
    }

    .related hr {
        margin: 10px 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid #2E3440;
    }

    .title {
        padding: 5px;
    }

    .author {
        color: #2E3440;
        padding: 5px;
        background-color: #E5E9F0;
        width: fit-content;
        width: -moz-fit-content;
        border-radius: 3px;
        font-weight: 400;
        /* transform: skew(-20deg); */
    }

    .author a {
        text-decoration: none;
        color: #5E81AC;
        font-weight: 900;
    }

    .shortlink {
        float: right;
        margin-top: 5px;
        background-color: #E5E9F0;
        padding: 5px;
        font-size: 0.85rem;
        border-radius: 3px;
    }

    .shortlink a {
        text-decoration: none;
        color: #00ACEE;
        border-radius: 3px;
    }

    .summary {
        margin-top: 50px;
        /*background-color: #D8DEE9;*/
        padding: 10px;
        border-radius: 5px;
    }

    .context {
        font-weight: 300;
        margin-top: 30px;
    }

    .context p {
        margin-top: 15px;
        text-indent: 0;
    }

    .context a {
        text-decoration: none;
        color: #00ACEE;
        font-weight: 400;
        transition: 300ms;
    }

    .context a:hover {
        color: #5E81AC;
    }

    .context img {
        width: 100%;
        margin: 0;
        border-radius: 5px;
    }

    .flags {
        font-size: 0.8rem;
        margin-top: 20px;
        color: #2E3440;
        background-color: #E5E9F0;
        padding: 5px;
        width: fit-content;
        width: -moz-fit-content;
        border-radius: 5px;
        border-right: 5px solid #AAAAAA;
    }

    .commenthr {
        margin: 80px 0 20px 0;
        border-top: 1px solid #D8DEE9;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .comments {
        background-color: #E5E9F0;
        padding: 10px;
        border-radius: 5px;
    }

    .statics-view {
        display: block;
        position: absolute;
        /* background-color: #5E81AC; */
        display: grid;
        grid-template-areas:
            'tags'
            'info';
        padding: 10px 0 10px 0;
        font-size: 0.9rem;
    }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .viewpost {
        width: 100%;
    }

    .PostView {
        width: auto !important;
        margin: 30px 5px;
        background-color: #ECEFF4;
        border-radius: 5px;
        padding: 10px;
        font-size: 1rem;
    }

    .related {
        width: auto;
        display: block;
        position: relative;
        left: 0;
        top: 0;
        display: block;
        height: fit-content;
        background-color: #00ACEE;
        border-radius: 5px;
        padding: 20px;
        margin: 10px;
    }

    .related h3 {
        padding: 0 0 10px 0;
    }

    .related li {
        list-style: none;
        margin-top: 10px;
    }

    .related a {
        text-decoration: none;
        color: #E5E9F0;
        padding: 0 0 10px 0;
    }

    .related a:hover {
        text-decoration: overline;
        color: #2E3440;
        padding: 0 0 10px 0;
    }

    .related span {
        color: #2E3440;
        padding: 0 0 0 5px;
    }

    .related hr {
        margin: 10px 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid #2E3440;
    }

    .title {
        padding: 5px;
    }

    .author {
        color: #2E3440;
        padding: 5px;
        background-color: #E5E9F0;
        width: fit-content;
        width: -moz-fit-content;
        border-radius: 3px;
        font-weight: 400;
        /* transform: skew(-20deg); */
    }

    .author a {
        text-decoration: none;
        color: #5E81AC;
        font-weight: 900;
    }

    .shortlink {
        float: right;
        margin-top: 5px;
        background-color: #E5E9F0;
        padding: 5px;
        font-size: 0.85rem;
        border-radius: 3px;
    }

    .shortlink a {
        text-decoration: none;
        color: #00ACEE;
        border-radius: 3px;
    }

    .summary {
        margin-top: 50px;
        /*background-color: #D8DEE9;*/
        padding: 10px;
        border-radius: 5px;
    }

    .context {
        font-weight: 300;
        margin-top: 30px;
    }

    .context p {
        margin-top: 15px;
        text-indent: 0;
    }

    .context a {
        text-decoration: none;
        color: #00ACEE;
        font-weight: 400;
        transition: 300ms;
    }

    .context a:hover {
        color: #5E81AC;
    }

    .context img {
        width: 100%;
        margin: 0;
        border-radius: 5px;
    }



    .commenthr {
        margin: 80px 0 20px 0;
        border-top: 1px solid #D8DEE9;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .comments {
        background-color: #E5E9F0;
        padding: 10px;
        border-radius: 5px;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .viewpost {
        width: 100%;
    }

    .PostView {
        width: auto !important;
        margin: 30px 30px;
        background-color: #ECEFF4;
        border-radius: 5px;
        padding: 30px;
        font-size: 1rem;
    }

    .related {
        width: auto;
        display: block;
        position: relative;
        left: 0;
        top: 0;
        display: block;
        height: fit-content;
        background-color: #00ACEE;
        border-radius: 5px;
        padding: 20px;
        margin: 30px;
    }

    .related h3 {
        padding: 0 0 10px 0;
    }

    .related li {
        list-style: none;
        margin-top: 10px;
    }

    .related a {
        text-decoration: none;
        color: #E5E9F0;
        padding: 0 0 10px 0;
    }

    .related a:hover {
        text-decoration: overline;
        color: #2E3440;
        padding: 0 0 10px 0;
    }

    .related span {
        color: #2E3440;
        padding: 0 0 0 5px;
    }

    .related hr {
        margin: 10px 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid #2E3440;
    }

    .title {
        padding: 5px;
    }

    .author {
        color: #2E3440;
        padding: 5px;
        background-color: #E5E9F0;
        width: fit-content;
        width: -moz-fit-content;
        border-radius: 3px;
        font-weight: 400;
        /* transform: skew(-20deg); */
    }

    .author a {
        text-decoration: none;
        color: #5E81AC;
        font-weight: 900;
    }

    .shortlink {
        float: right;
        margin-top: 5px;
        background-color: #E5E9F0;
        padding: 5px;
        font-size: 0.85rem;
        border-radius: 3px;
    }

    .shortlink a {
        text-decoration: none;
        color: #00ACEE;
        border-radius: 3px;
    }

    .summary {
        margin-top: 50px;
        /*background-color: #D8DEE9;*/
        padding: 10px;
        border-radius: 5px;
    }

    .context {
        font-weight: 300;
        margin-top: 30px;
    }

    .context p {
        margin-top: 15px;
        text-indent: 0;
    }

    .context a {
        text-decoration: none;
        color: #00ACEE;
        font-weight: 400;
        transition: 300ms;
    }

    .context a:hover {
        color: #5E81AC;
    }

    /*.context img {*/
    /*    width: 100%;*/
    /*    margin: 0;*/
    /*    border-radius: 5px;*/
    /*}*/

    .commenthr {
        margin: 80px 0 20px 0;
        border-top: 1px solid #D8DEE9;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .comments {
        background-color: #E5E9F0;
        padding: 10px;
        border-radius: 5px;
    }
    .statics-view{
        display: block;
        position: absolute;
        /* background-color: #5E81AC; */
        display: grid;
        grid-template-areas:
            'tags info' !important;
        padding: 10px 0 10px 0;
        font-size: 1rem;
    }

}
@media screen and (min-width: 1025px) and (max-width: 1460px) {
    .viewpost {
        width: 100%;
    }

    .PostView {
        width: 60% !important;
        margin: 30px 1%;
        background-color: #ECEFF4;
        border-radius: 5px;
        padding: 20px;
        font-size: 1rem;
    }

    .related {
        width: 30%;
        display: block;
        position: absolute;
        left: 0;
        top: -10px;
        height: fit-content;
        background-color: #00ACEE;
        border-radius: 5px;
        padding: 20px;
        margin: 10px;
    }

    .related h3 {
        padding: 0 0 10px 0;
    }

    .related li {
        list-style: none;
        margin-top: 10px;
    }

    .related a {
        text-decoration: none;
        color: #E5E9F0;
        padding: 0 0 10px 0;
    }

    .related a:hover {
        text-decoration: overline;
        color: #2E3440;
        padding: 0 0 10px 0;
    }

    .related span {
        color: #2E3440;
        padding: 0 0 0 5px;
    }

    .related hr {
        margin: 10px 0;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid #2E3440;
    }

    .title {
        padding: 5px;
    }

    .author {
        color: #2E3440;
        padding: 5px;
        background-color: #E5E9F0;
        width: fit-content;
        width: -moz-fit-content;
        border-radius: 3px;
        font-weight: 400;
        /* transform: skew(-20deg); */
    }

    .author a {
        text-decoration: none;
        color: #5E81AC;
        font-weight: 900;
    }

    .shortlink {
        float: right;
        margin-top: 5px;
        background-color: #E5E9F0;
        padding: 5px;
        font-size: 0.85rem;
        border-radius: 3px;
    }

    .shortlink a {
        text-decoration: none;
        color: #00ACEE;
        border-radius: 3px;
    }

    .summary {
        margin-top: 50px;
        /*background-color: #D8DEE9;*/
        padding: 10px;
        border-radius: 5px;
    }

    .context {
        font-weight: 300;
        margin-top: 30px;
    }

    .context p {
        margin-top: 15px;
        text-indent: 0;
    }

    .context a {
        text-decoration: none;
        color: #00ACEE;
        font-weight: 400;
        transition: 300ms;
    }

    .context a:hover {
        color: #5E81AC;
    }

    /*.context img {*/
    /*    width: 100%;*/
    /*    margin: 0;*/
    /*    border-radius: 5px;*/
    /*}*/

    .flags {
        font-size: 0.8rem;
        margin-top: 20px;
        color: #2E3440;
        background-color: #E5E9F0;
        padding: 5px;
        width: fit-content;
        width: -moz-fit-content;
        border-radius: 3px;
    }

    .commenthr {
        margin: 80px 0 20px 0;
        border-top: 1px solid #D8DEE9;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .comments {
        background-color: #E5E9F0;
        padding: 10px;
        border-radius: 5px;
    }
}


/*
footer display off
 */
.profiles{
    display: none;
}
.footer-about {
    display: none;
}
.f-notes{
    border-top: 3px dashed #FFFFFF;
}