@font-face {
    font-family: 'material-icons';
    src: url(../font/material-icons.ttf);
}

@font-face {
    font-family: 'raleway';
    src: url(../font/raleway.ttf);
}

.loader-area div {
    width: 60px;
    height: 60px;
    border: 4px solid #fff;
    border-radius: 50%;
    border-top: 4px solid #1876f3;
    animation: rot 1s ease-in infinite;
}

@keyframes rot {
    100% {
        transform: rotate(360deg);
    }
}

span.ico {
    font-family: 'material-icons';
}

.container {
    font-family: 'raleway';
}

.container .navbar {
    width: 280px;
    box-shadow: 10px 0 20px rgb(115, 133, 186, .2);
}

.container .navbar ul li a {
    font-size: 13px;
}

.container .navbar ul li a.active {
    background: #fff;
    border-left: 5px solid #3387e7;
    color: #3387e7;
    padding-left: 0.7rem;
}

.container .navbar ul li a.active .ico {
    color: #3387e7;
}

.container .navbar ul li a span.ico {
    font-size: 21px;
}

.container .navbar ul li a span.sam {
    font-size: 20px;
    color: #949292;
}

.container .posts .post .pt-4 {
    font-size: 12px;
}

.container .posts .user .time {
    font-size: 10px;
    font-weight: 500;
}

.container .blog {
    width: calc(100% - 750px);
}

.container .blog .top-bar .ico {
    font-size: 23px;
    color: #949292;
    cursor: pointer;
}

.container .blog .message span {
    cursor: pointer;
}

.container footer {
    position: absolute;
    bottom: 10px;
    right: 32%;
    font-size: 13px;
}