﻿.tweets,
.tweets-skeleton {
    /*display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
    padding: 0 3rem;*/
}

.tweets-skeleton {
    position: relative;
    z-index: 9999;
}

/*.tweet,
.tweet-skeleton {
    width: 16.66666667%;
 
}*/

.tweet-skeleton {
    border: 0.05rem solid rgb(190, 190, 190);
    border-radius: 1rem;
    height: 30rem;
    margin-bottom: 2rem;
    width:100%;
    padding:15px;
}

    .tweet-skeleton .img {
        height: 5rem;
        width: 5rem;
        border-radius: 50%;
        background-color: rgb(209, 209, 209);
        animation: tweet-skeleton 1s linear infinite alternate;
    }

    .tweet-skeleton .content-1,
    .tweet-skeleton .content-2 {
        height: 25%;
        margin-top: 1rem;
    }

    .tweet-skeleton .line {
        height: 15%;
        margin: 0.5rem 0;
        width: 100%;
        border-radius: 0.3rem;
        background-color: rgb(209, 209, 209);
        animation: tweet-skeleton 1s linear infinite alternate;
    }

        .tweet-skeleton .line:last-child {
            width: 75%;
        }

@keyframes tweet-skeleton {
    0% {
        background-color: rgb(209, 209, 209);
    }

    100% {
        background-color: rgb(243, 243, 243);
    }
}
@keyframes tweet-skeleton {
    0% {
        background-color: rgb(209, 209, 209);
    }

    100% {
        background-color: rgb(243, 243, 243);
    }
}
/****************/

/****************/
:root {
    --ske-border-radius-3: 3px;
    --ske-border-radius-50: 50%;
    --ske-background: rgb(209, 209, 209);
    --ske-animation: tweet-skeleton 1s linear infinite alternate;
    --ske-xlLine: 25px;
    --ske-lgLine: 18px;
    --ske-mdLine: 14px;
    --ske-smLine: 11px;
}
.npSkeleton {
    padding:0px;
}
.npSkeletonimg {
    height: 33px;
    width: 33px;
    border-radius: var(--ske-border-radius-50) !important;
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.xlLine {
    width: 100%;
    height: var(--ske-xlLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.lgLine {
    width: 100%;
    height: var(--ske-lgLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.mdLine {
    width: 100%;
    height: var(--ske-mdLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.smLine {
    width: 100%;
    height: var(--ske-smLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}



.table thead tr th font i,
.table tbody tr td font i,
.npSkeleton .tabeheader span i,
.npSkeleton .tabeheader div.cont i,
.npSkeleton .pagination .paginate_button i,
.npSkeleton .dataTables_info span i,
.npSkeleton .logo-lg .logo-txt span i,
.npSkeleton .butbar i,
.npSkeleton .butbarUser span i,
.npSkeleton .mm-active a span i,
.npSkeleton .sidebar-alert h5 span i,
.npSkeleton .sidebar-alert p span i,
.npSkeleton .sidebar-alert a span i,
.npSkeleton .nProjectListBtn .img img,
.npSkeleton .nProjectListBtn i,
.npSkeleton .nav-tabs-custom a i,
.npSkeleton .list-title font i,
.npSkeleton .list-status b i,
.npSkeleton .list-status span i,
.npSkeleton .list-links font b,
.npSkeleton .list-filters font b,
.npSkeleton .footer font span, .npSkeleton .nHeader .sLogo img {
    visibility: hidden;
}
.npSkeleton .dataTables_length label, .npSkeleton .dataTables_filter label {
    display: flex;
    align-items: center;
}
.npSkeleton .dataTables_filter, .npSkeleton .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    padding-bottom:5px;
}
.npSkeleton .pagination .paginate_button {
    margin-left:2px;
}
.npSkeleton .table thead tr th, .npSkeleton .table tbody tr td {
    padding: 15px 15px;
}
    .npSkeleton .table thead tr th font, .npSkeleton .table tbody tr td font {
        width: 100%;
        display: block;
        height: var(--ske-smLine);
        border-radius: var(--ske-border-radius-3);
        background-color: var(--ske-background);
        animation: var(--ske-animation);
    }
.npSkeleton .tabeheader span {
    height: var(--ske-smLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
    display: inline-block;
}
.npSkeleton .tabeheader span.cont {
    height: var(--ske-lgLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
    display: inline-block;
}
.npSkeleton .dataTables_info span {
    height: var(--ske-lgLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
    margin-right: 2px;
}
.npSkeleton .pagination .paginate_button span{
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
    padding: 3px 10px;
}
.npSkeleton .logo-lg {
display:flex;
align-items:center;
}
.npSkeleton .logo-lg .npSkeletonimg {
    height: 24px;
    width: 24px;
    border-radius: var(--ske-border-radius-50);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}

    .npSkeleton .logo-lg .logo-txt span {
        border-radius: var(--ske-border-radius-3);
        background-color: var(--ske-background);
        animation: var(--ske-animation);
    }
.npSkeleton .butbar span {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .butbarUser span {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .butbarUser .npSkeletonimg {
    width: 36px;
    height: 36px;
}
.npSkeleton .butbarUser span + span{
    margin-right:3px;
}
.npSkeleton .butbarUser .mdi-chevron-down::before {
    content: "";
    width: 10px;
    height: var(--ske-mdLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .vertical-menu {
    
}
.npSkeleton .mm-active a i:before {
    /*content: "";
    width: 20px;
    height:20px !important;
    height: var(--ske-mdLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);*/
}
.npSkeleton .mm-active a span {
    height: var(--ske-smLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton #sidebar-menu .has-arrow:after {
    content: "";
    width: 10px;
    height: var(--ske-mdLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .sidebar-alert h5 span, .npSkeleton .sidebar-alert p span {
    height: var(--ske-smLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .sidebar-alert a {
    height: var(--ske-lgLine);
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
    padding:5px;
}
.npSkeleton .sidebar-alert .npSkeletonimg {
    width: 60px;
    height: 60px;
    margin:auto;
}
.npSkeleton .nProjectListBtn .img, .npSkeleton .nProjectListBtn b i {
font-size:inherit !important;
}
.npSkeleton .nProjectListBtn .img, .npSkeleton .nProjectListBtn b {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .nHeader .sLogo {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .nav-tabs-custom a span {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .list-title font {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .list-status b, .npSkeleton .list-status span {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .list-links font {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .list-links i:before{
    content: "";
    width: 10px;   
    height:14px;
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .list-filters font {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .list-filters i:before {
    content: "";
    width: 10px;
    height: 14px;
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}
.npSkeleton .footer font {
    border-radius: var(--ske-border-radius-3);
    background-color: var(--ske-background);
    animation: var(--ske-animation);
}