@import url('https://fonts.googleapis.com/css2?family=Monomaniac+One&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

body {
    font-size: 100%;
    font-family: "Ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #f1f2f6;
}

#content {
    height: 100%;
}

.pointer {
    cursor: pointer;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
}

/** Flash messages */
.flash.alert {
    margin-bottom: 5px;
}
.flash.alert svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}
.flash.alert-warning {
    border-left: 4px solid #ff9305;
    fill: #ff9305;
}
.flash.alert-danger {
    border-left: 4px solid #ff4747;
    fill: #ff0000;
}
.flash.alert-success {
    border-left: 4px solid #25a140;
    fill: #25a140;
}
.flash.alert-info {
    border-left: 4px solid #4772ff;
    fill: #4772ff;
}

.loader {
    width: 20px;
    height: 20px;
}

/**
 * App
 */
#top-nav {
    border-bottom: 1px solid #ccc;
}
#bottom-nav {
    border-top: 1px solid #ccc;
    font-size: 1.3rem;
}

#bottom-nav .nav-link {
    opacity: 0.7;
}
#bottom-nav .nav-link.active {
    opacity: 1;
    font-weight: bold;
}
.navbar-brand {
    cursor: pointer;
    font-family: "Monomaniac One", sans-serif;
    color: #222;
    letter-spacing: 2px;
    font-style: normal;
}
#app {
    width: 100%;
    max-width: 800px;
}
#app #center {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 500px;
}
#app #post-button {
    text-align: center;
    font-size: 1.3rem;
    position: fixed;
    border-radius: 50%;
    z-index: 1000;
    opacity: 0.7;
    bottom: 70px;
    right: 10px;
    width: 60px;
    height: 60px;
    border: 1px solid #ccc; 
}
#app #scroll-top {
    display: none;
    text-align: center;
    font-size: 1.3rem;
    position: fixed;
    border-radius: 50%;
    z-index: 1000;
    opacity: 0.7;
    bottom: 70px;
    left: 10px;
    width: 60px;
    height: 60px;
    border: 1px solid #ccc; 
}
#app #center #post-button:hover {
    opacity: 1;
}
#app #left, #app #right {
    max-width: 132px;
}
#app #left ul li {
    font-size: 1.0rem;
}
#app #left #avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ccc; 
}
#app #left nav, #app #right nav {
    position: sticky;
    top: 0;
}
#app #right ul li {
    font-size: 0.9rem;
}
#app #right #search {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
#app #content-modal .modal-body {
    background-color: #f1f2f6;
}
#app #content-modal #avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc; 
}
#app #content-modal #content {
    height: 120px;
    resize: none;
}

#app .post-cont {
    min-height: 117px;
    border: 1px solid #ccc; 
    margin-bottom: 10px;
    border-radius: 6px;
}
#app .post .top {
    font-size: 0.7rem;
    padding: 0 5px;
}
#app .post .bottom .action {
    font-size: 0.9rem;
    cursor: pointer;
}
#app .post .like.disabled {
    opacity: 0.3;
}
#app .post .like.active {
    color: rgb(236, 72, 153);
}
#app .post .name {
    font-size: 0.9rem;
    font-weight: 700;
}
#app .post .username {
}
#app .post .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc; 
}
#app .post .content {
    font-size: 0.9rem;
    margin: 0;
}
#app .post .ago {
}
#app .post .image {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ccc;
}
#app .post .top a {
    text-decoration: none;
    color: #222;
}


#app .news .title {
    font-size: 1.0rem;
}
#app .news .source, #app .news .author {
    font-size: 0.8rem;
}
#app .news .content {
    margin-top: 10px;
    font-size: 0.9rem;
}


#app .profile #banner {
    height: 150px;
    background-color: #ddd;
}
#app .profile #name {
    font-size: 1.8rem;
    font-weight: 900;
}
#app .profile #pic {
    position: relative;
    left: 10px;
    top: -40px;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    border: 1px solid #ccc;
}
#app .profile #info {
    position: relative;
    top: -50px;
    line-height: 20px;
}
#app .profile #description {
    font-size: 0.9rem;
}
#app .profile #stats {
    font-size: 0.8rem;
}
#app .profile #profile-feed {
    margin-top: 10px;
}
#app .profile #feed-nav {
    position: relative;
    top: -10px;
}
#app .profile #feed-nav .btn {
    opacity: 0.7;
}
#app .profile #feed-nav .btn.active {
    opacity: 1;
    color: white;
    font-weight: bold;
    background-color: unset;
}
#app .profile #edit-profile {
    position: relative;
    top: -38px;
    right: -8px;
}

#app .settings #user #avatar {
    border-radius: 50%;
    height: 80px;
    width: 80px;
    border: 1px solid #ccc;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
#app .post-cont .loader {
    background: #eee;
    background: linear-gradient(110deg, #ececec 9%, #f5f5f5 18%, #ececec 33%);
    background-size: 201% 100%;
    animation: 1.5s shine linear infinite;
}

@media (max-width: 575.98px) {
}

@media (max-width: 767.98px) {
    #app #center {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    #app #scroll-top.active {
        display: block !important;
    }
    #app #scroll-top.disable {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    #app {
        padding-bottom: 50px;
    }
}

@media (max-width: 1199.98px) {
}

@media (max-width: 1399.98px) {
}