බුකිය profile එක ලස්සන කර ගන්න අලුත්ම CSS template එකක්...

අද මම ඔයාලට දෙන්නේ මම හදපු අලුත්ම CSS template එකක්. කලින් එක වගේ නෙමෙයි, මේක ටිකක් වෙනස් විදිහක එකක්.

මම කලින් ලිපියකින් CSS File එකකින් බුකිය profile එක ලස්සන කර ගන්නේ කොහොමද කියලා කියලා දුන්නා. ඒ වගේම මම ඔයාලට මම හදපු සරල  CSS template එකකුත් දුන්නා. ඒකට හොඳ ප්‍රතිචාර ලැබිලා තිබුනා. ඒ වගේම 200කට වැඩි පිරිසක් මේ වෙනකොට ඒක කියවලා තියෙනවා. ඒ හැමොටම ස්තුතියි.


අද මම ඔයාලට දෙන්නේ මම හදපු අලුත්ම CSS template එකක්. කලින් එක වගේ නෙමෙයි, මේක ටිකක් වෙනස් විදිහක එකක්. පහල screen shots බැලුවහම ඒක ඔයලට පෙනෙයි. මගේ profile එකට ඇවිල්ලත් මේ template එක බලාගන්නත් පුලුවන් (Kasun Chaturanga)


මේකත් කලින් එක වගේම ඔයලට වෙනස් කර ගන්න පුලුවන්. මගේ කලින් ලිපිය බැලුවොත් මේක වෙනස කර ගන්න ලේසි වෙයි. මෙතනින් ගිහින් ඒක බලන්න පුලුවන් ඔයාලට.  (කලින් ලිපිය)


කලින් වගේම මෙකෙදිත් ඔයලට කරන්න තියෙන්නේ පහල තියෙන code ටික copy කරලා Notepad එකකට paste කරලා code ටික ඔයාලා කැමති විදිහට වෙනස් කරගන්න එක. ඊට පස්සේ file එක save කරන කොට file එකේ නමේ අගට .css කියලා ගහලා save කරන්න. Eg:- MyStyle.css
අන්තිමට කරන්න තියෙන්නෙ බුකියට log වෙලා settings --> design ගිහින් CSS file එක upload කරල save කරන එක.

හරි එහෙනම් ප්‍රශ්න තියේනම්  හරි මේක තව ලස්සන කර ගන්න ඕනිනම් හරි comment එකක් දාලා අහන්නකෝ ... එහෙනම් ජය වේවා..!

/* Bukiya CSS template by Kasun Chaturanga */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Bree+Serif&subset=latin-ext');

/* Hide cover img */
.profile-container .card.hovercard .cardheader { visibility: hidden; }

/* Hide cover img dark mask */
.problackback {
    visibility: hidden;
}

/* Profile info container */
.wo_user_profile .pic-info-cont {
    display: block;
    text-align: -moz-center;
}

@media (min-width: 768px) {
.wo_user_profile .pic-info-cont { height: 208px; }
}

@media (min-width: 1270px) {
.wo_user_profile .pic-info-cont { height: 280px; }
}

@media (max-width: 767px) {
.wo_user_profile .pic-info-cont {
    height: 160px;
    position: relative;
    bottom: 0;
    display: block;
    background-color: transparent;
    box-shadow: none;
    margin: 0;
    text-align: center;
}
}

@media (max-width: 767px) {
.container .wo_user_profile .pic-info-cont .user-avatar { top: 0; }
}

/* Profile pic */
.profile-container .card.hovercard .user-avatar img {
    width: 100%;
    background: transparent;
    border: 1px solid #A17A00;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #FEB11A, 0 0 0 4px #FEC001, 0 0 0 5px #E2A517, 0 0 0 6px #DB8A1E;
    padding: 0;
    animation: ani_pro_img 1s linear infinite alternate;
}

/* Profile Img animation*/
@keyframes ani_pro_img {
    from { box-shadow: 0 0 0 1px #FEB11A, 0 0 0 4px #FEC001, 0 0 0 5px #E2A517, 0 0 0 6px #DB8A1E; }
    to { box-shadow: 0 0 0 1px #FEB11A, 0 0 0 4px #FEC001, 0 0 0 5px #E2A517, 0 0 25px 18px #FABC63; }
}

/* Profile name & edit btn container */
.profile-container .card.hovercard .info {
    position: relative;
    margin-top: 15px;
}

@media (min-width: 1270px) {
.profile-container .card.hovercard .info { margin-top: 20px; }
}

/* Profile name txt */
.profile-container .card.hovercard .info .title a {
    font-family: 'Bree Serif', serif;
    text-shadow: 1px 1px 1px #FACC77, -1px -1px 2px #0F0F1E;
    color: #000;
}

@media (min-width: 1270px) {
.profile-container .card.hovercard .info .title a { font-size: 50px; }
}

/* Edit btn container */
.container .wo_user_profile .card.hovercard .info .options-buttons {
    position: relative;
    right: 0 !important;
    margin: 10px 10px 5px;
}

/* Main menu container */
.wo_user_profile .user-bottom-nav {
    width: 100%;
    height: 138px;
    background-color: transparent;
    box-shadow: none !important;
    text-align: center;
}

/* Main menu tab container */
.wo_user_profile .user-bottom-nav ul {
    width: 100%;
    height: 138px;
    background-color: transparent;
    background-image: url('https://drive.google.com/uc?export=download&id=13v_f_rb09cLbB5eosXy5yNYkDYhvjQ3B'),  
                      url('https://drive.google.com/uc?export=download&id=1oJhT7xtIItMifWlDBAVfVB3aeQ4Nk7D8'),  
                      url('https://drive.google.com/uc?export=download&id=1Je75ffrQ-S5NJdPNawXQA_mirZVAsCh9');
    background-position: left top, right top, 0 21px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    padding-left: 0;
}

/* Main menu tab */
.wo_user_profile .user-bottom-nav li a {
    width: 100px;
    height: 50px;
    display: block;
    font-family: 'Bree Serif', serif;
    color: #000;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px #FACC77, 0 0 1px #0F0F1E;
    padding: 6px 22px 7px;
    margin-top: 25px;
    transition: all .2s ease;
}

.row { margin-bottom: 5px !important; }

@media (max-width: 460px) {
.wo_user_profile .user-bottom-nav li a {
    width: 65px;
    padding: 7px 7px 7px;
}
}

/* Main menu active tab */
.wo_user_profile .user-bottom-nav li .menuactive {
    color: #fff !important;
    text-shadow: 1px 1px 1px #000408, 0 0 1px #D8EFF9;
    border-bottom: none;
}

/* Main menu icos */
.wo_user_profile .user-bottom-nav li a .split-link svg.feather {
    margin: 0 0 4px;
}

.wo_user_profile .user-bottom-nav li a .split-link svg.feather.feather-thumbs-up { color: #000; }

/* Publish box text area */
textarea.postText {
    height: 45px;
    border: none;
    box-shadow: 0 0 0 4px #FEC001, 2px 2px 3px 0 #000, -2px -2px 5px 0 #000, inset 0 0 5px 0 #FEB11A;
    padding-top: 12px;
    padding-left: 50px;
}

.form-control {
    width: 100%;
    height: 34px;
    padding: 2px 12px;
    background-color: #fff;
    border: 1px solid #ededed;
    border-radius: 3px;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

/* Publish box text area clicked */
.form-control:focus {
    border: none;
    outline: 0;
    box-shadow: none;
}

/* Publish box footer */
.publisher-box-footer {
    background: #fff;
    border-radius: 0 0 4px 4px;
}

/* Publish box post btn */
.publisher-box #publisher-button {
    height: 34px;
    background: #fec001;
    border-radius: 17px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 19px;
    padding: 6px 16px;
}

.btn-main:hover {
    background-color: #503c00 !important;
    border-color: #664d00;
    color: #ffffff;
}

/* Filter post menu */
#filterby-post {
    background: #C89700;
    box-shadow: 0 0 0 4px #FEC001, 2px 2px 3px 0 #000, -2px -2px 5px 0 #000;
}

/* Filter post menu tabs */
#filterby-post li {
    width: 14.28%;
    height: 35px;
    display: inline-block;
    float: left;
    background: transparent;
    outline: 2px solid #FEC001;
    box-shadow: inset 0px 0px 5px 0 rgba(62,59,0,.3);
    text-align: center;
    padding: 5px 10px;
}

/* Filter post menu active tab */
#filterby-post .avtive {
    background: #FEC001;
    border-top: 1px solid #B68900 !important;
    border-left: 1px solid #B68900 !important;
    border-bottom: 1px solid #B68900 !important;
    border-right: 3px solid #B68900 !important;
    transition: all .1s;
}

/* Filter post menu icos */
#filterby-post li svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: #000;
    margin: 2px auto 1px;
}

/* Background */
body { background: radial-gradient(circle at 50% 40%, rgba(250,208,126,1) 0%, rgba(251,200,111,1) 12%, rgba(250,186,97,1) 23%, rgba(239,131,68,1) 44%, rgba(234,70,46,1) 65%, rgba(185,35,44,1) 92%) !important; }

@media (max-width: 480px) {
body { background: radial-gradient(circle at 50% 38%, rgba(250,208,126,1) 0%, rgba(251,200,111,1) 12%, rgba(250,186,97,1) 23%, rgba(239,131,68,1) 44%, rgba(234,70,46,1) 65%, rgba(185,35,44,1) 92%) !important; }
}

/* Filre post, profile completion, post search, about, friends, groups, likes panels */
.list-group {
    border-radius: 2px;
    box-shadow: 0 0 0 4px #FEC001, 2px 2px 3px 0 #000, -2px -2px 5px 0 #000, inset 0 0 5px 0 #FEB11A;
}

/* Seperation lines */
hr {
    height: 0;
    border-top: 1px solid #fad07e;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin: 5px 0 !important;
}

/* Profile completion panel */
ul.profile-completion-bar {
    width: 100%;
    background-color: #fff;
    background-image: url('https://drive.google.com/uc?export=download&id=1YeadCOPQPZ6lOF2Spp5zTXXpPfMB_B3c');
    background-repeat: no-repeat;
    background-position: 200px 95px;
    padding: 10px 0;
    overflow: hidden;
}

/* Profile completion panel header */
ul.profile-completion-bar li.percentage-bar h4 {
    width: 100%;
    background: transparent;
    font-family: 'Bree Serif', serif;
    font-size: 15px;
    font-weight: 600;
    color: #B9232C;
    margin: 0;
    padding: 10px;
    overflow: hidden;
}

/* Profile completion header icon */
.feather.feather-check-circle {
    stroke: #B9232C;
    fill: #FBCB75;
}

/* Profile completion bar wrapper */
ul.profile-completion-bar li.completion-bar div.completion-bar-wrapper {
    height: auto;
    background: #fff;
    border: 1px solid #B68900 !important;
    border-radius: 20px;
    box-shadow: none;
    margin-top: -1px;
    margin-left: 1px;
    overflow: hidden;
}

/* Profile completion bar status */
ul.profile-completion-bar li.completion-bar div.completion-bar-status {
    background: linear-gradient(to left, rgba(250,208,126,1) 0%, rgba(251,200,111,1) 12%, rgba(250,186,97,1) 23%, rgba(239,131,68,1) 44%, rgba(234,70,46,1) 65%, rgba(185,35,44,1) 92%) !important;
}

/* Profile completion + ico */
.feather.feather-plus {
    color: #b9232c;
}

/* Profile completion tick ico */
ul.profile-completion-bar li.completion-step svg.feather.feather-check {
    color: #fad07d;
}

/* Profile completion panel body */
ul.profile-completion-bar li.completion-step {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    color: #EF8344;
    cursor: pointer;
    margin: 0;
    padding: 3px 10px;
    overflow: hidden;
}

.completion-step a {
    color: #EF8344 !important;
}

/* Post search ico */
.feather.feather-search.glyphicon {
    stroke: #B9232C;
}

/* User info panel */
.right_user_info li {
    background: transparent;
    color: #EF8344;
    padding: 7px 13px;
}

/* User info panel icos */
.right_user_info li svg.feather.feather-eye { color:rgb(76, 175, 80); }

.right_user_info li svg.feather.feather-edit-3 { color:rgb(35, 150, 243); }

.right_user_info li svg.feather.feather-user { color:#B2B200; }

.right_user_info li svg.feather.feather-heart { color:#D90000; }

.right_user_info li svg.feather.feather-book { color:rgb(107, 55, 107); }

.right_user_info li svg.feather.feather-globe { color:rgb(204, 131, 23); }

.right_user_info li svg..feather.feather-map-pin { color: #000; }

/* About header */
.widget-heading {
    background: transparent;
    font-family: 'Bree Serif', serif;
    font-size: 15px;
    font-weight: 600;
    color: #B9232C;
    padding: 12px 15px 10px;
}

/* About panel ico */
.feather.feather-info {
    background: #d90000 !important;
    stroke: #FFF;
    fill: #d90000;
}

/* About panel body */
.list-group-item.text-left {
    background: transparent;
    border: 1px solid rgba(250,190,101,0.60);
    border-radius: 5px;
    color: #EF8344;
    margin: 5px;
}

/* Album panel ico */
.feather.feather-image {
    background: #4caf50 !important;
    stroke: #FFF;
    fill: #4caf50;
}

/* Album panel body */
.sidebar-albums-container {
    background: #C89700;
    border-top: 4px solid #FEC001;
    padding-top: 5px;
    padding-left: 3px;
    padding-bottom: 1px;
    padding-right: 3px;
}

/* Album, friends, groups, likes thumb container */
.sidebar-user-data a {
    position: relative;
    display: block;
    border-radius: 5%;
}

/* Album, friends, groups, likes thumb */
.sidebar-user-data .sidebar-listed-user-avatar img {
    width: 100%;
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5%;
    box-shadow: 1px 1px 3px 0 #b47d08, -1px -1px 3px 0 #b47d08;
    margin: 0;
    padding: 3px;    
}

/* Album, friends, groups, likes thumb name */
.sidebar-user-data .sidebar-listed-user-name {
    width: 93%;
    max-height: 56px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    font-family: 'Bree Serif', serif;
    font-size: 12px;
    color: #cf232c;
    line-height: 16px;
    padding: 5px;
    margin-left: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    animation: ani_thumb_name 5s linear infinite alternate;
}

/* Album, friends, groups, likes thumb name ani */
@keyframes ani_thumb_name {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Albums, friends, groups, likes header */
.widget-heading a {
    background: transparent;
    font-family: 'Bree Serif', serif;
    font-weight: 600;
    color: #B9232C;
}

/* Albums, friends, groups, likes count txt */
.widget-heading h5 {
    display: inline;
    color: #EF8344;
    margin: 0 1px;
}

/* Friends panel body */
.sidebar-followers-users-container {
    background: #c89700;
    border-top: 4px solid #FEC001;
    padding-top: 5px;
    padding-left: 3px;
    padding-bottom: 1px;
    padding-right: 3px;
}

/* Likes panel body */
.sidebar-likes-container {
    background: #C89700;
    border-top: 4px solid #FEC001;
    padding-top: 5px;
    padding-left: 3px;
    padding-bottom: 1px;
    padding-right: 3px;
}

/* Groups panel body */
.sidebar-groups-container {
    background: #c89700;
    border-top: 4px solid #FEC001;
    padding-top: 5px;
    padding-left: 3px;
    padding-bottom: 1px;
    padding-right: 3px;
}

/* Post container */
.post-container {
    background: rgba(200,151,0,.3);
    border-radius: 3px;
    box-shadow: 0 0 0 4px #FEC001, 2px 2px 3px 0 #000, -2px -2px 5px 0 #000, inset 0 0 5px 0 #FEB11A;
}

.panel-white {
    background: transparent;
    box-shadow: none;
}

/* Post header */
.post .post-heading {
    height: 70px;
    padding: 5px 15px 10px 15px;
    text-align: -moz-center;
}

/* Post avatar container */
.pull-left.image {
    width: 100%;
    text-align: -moz-center;
    margin-bottom: 5px;
}

/* Post avatar */
.post .post-heading .avatar {
    width: 46px;
    height: 46px;
    display: block;
    position: relative;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 2px;
}

@media (max-width: 767px) {
.post .post-heading .avatar { top: 15px; margin-bottom: 10px; }
}

/* Post options ico */
.feather.feather-chevron-down {
    position: relative;
    top: -50px;
    color: #fff;
}

@media (max-width: 767px) {
.feather.feather-chevron-down { top: -60px; }
}

/* Post options dropdown menu */
.dropdown-menu.post-privacy-menu {
    background: #b9232c;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 3px;
    opacity: .7;
}

.post-options {
    left: auto;
    right: 5px;
    top: -38px;
    border: none;
}

@media (max-width: 767px) {
.post-options { top: -48px; right: 3px; }
}

/* Post options dropdown menu txt */
.post-privacy-menu li div {
    color: #FFF !important;
    font-size: 12px;
    padding: 6px 8px !important;
    transition: none !important;
}

/*li div:hover {
    background: transparent !important;
    color: #262626 !important;
}
*/

/* Post user name */
.post .post-heading .meta .title a {
    font-family: 'Bree Serif', serif;
    color: #fff;
    margin-right: -7px;
}

/* Small txt after post user name */
.small-text {
    font-family: 'Georgia';
    color: #fff !important;
}

/* Post album name */
.main-color, .small-text a {
    font-family: 'Georgia';
    color: #ccc!important;
}

/* Post time, privacy container */
h6 {
    position: relative;
    top: -70px;
    text-align: left;
    margin-right: 15px;
}

@media (max-width: 767px) {
h6 { top: -80px; }
}

/* Post time txt */
.ajax-time { color: #fff !important; }

/* Post "Translate" txt */
.post .post-heading .meta .time {
    font-family: 'Times New Roman';
    color: #FFFCFc;
    margin-top: 8px;
}

/* Post privacy dropdown ico */
.pointer.post-privacy { color: #fff !important; }

.caret {
    width: 0;
    height: 0;
    display: inline-block;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    color: #fff !important;
    margin-left: 2px;
}

/* Post description txt */
.post .post-description p {
    width: 100%;
    background: rgba(255,255,255,.3);
    border-radius: 5px;
    font-size: 14px;
    color: #555;
    word-wrap: break-word;
    word-break: keep-all;
    padding: 5px;
    overflow: hidden;
}

@media (max-width: 767px) {
.post .post-description p { margin-top: 10px; }
}

/* For post shared to timline */
.post-fetched-url {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ededed;
    padding: 5px;
    transition: all .2s;
}

.wo_post_fetch_blog .fetched-url-text h4 {
    font-family: 'Georgia';
    font-size: 21px !important;
    color: #444;
    margin-bottom: 10px;
}

.post-fetched-url .fetched-url-text .description {
    font-size: 13px !important;
    margin-bottom: 10px;
}

.post-fetched-url-con {
    max-height: 300px;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
}

.wo_post_fetch_link .url {
        opacity:0.0;
}

/* Likes, dislikes, comments container */
.post .post-description .post-actions .stat-item {
    background: #fff;
    border: 1px solid #C89700;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #FEC001, 1px 1px 2px 0 #000, -1px -1px 4px 0 #000, inset 0 0 4px 0 #FEB11A;
    padding: 8px 5px;
    margin-top: 10px !important;
    margin-left: 5px;
    margin-bottom: 4px;
}

.btn.btn-default.stat-item.post-like-status { margin-right: 3px; }

/* Thumbup ico */
.feather.feather-thumbs-up { color: #2b9af3; }

/* Likes, comment count txt */
#likes { color: #309cf3; }

/* Thumbdown ico */
.feather.feather-thumbs-down { color: #d90000; }

/* Dislikes count txt */
#wonders { color: #d90000; }

/* Comment ico */
.feather.feather-message-circle { color: #4caf50; }

/* Share ico */
.feather.feather-share-2 { color: #774777; }

/* Like, dislike, comment share btns */
#wo_post_stat_button .stat-item {
    width: 24%;
    background-color: #D19B04 !important;
    background:url('https://drive.google.com/uc?export=download&id=1P7xudXj_D5OAxVN8IxL_1bw45krJ6ZJb') top repeat-x;
    border: 1px solid #A88800;
    border-radius: 5px;
    box-shadow: none;
    font-family: 'Georgia';
    color: #FFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 14px;
    padding: 10.1px 5px 7.4px;
    transition: all .1s ease-in-out;
}

@media (max-width: 480px) {
#wo_post_stat_button .stat-item {
    width: 22.5%;
    font-size: 11px;
    font-weight: 400;
}
}

@media (max-width: 320px) {
#wo_post_stat_button .stat-item {
    width: 22.5%;
    padding: 10.1px 0px 7.4px;
}
#wo_post_stat_button .stat-item svg {
    width: 10px !important;
    height: 10px !important;
}
}

/* Like, dislike, comment share btns icos */
#wo_post_stat_button .stat-item svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

/* Like btn clicked */
.active-like {
    color: #124874;
    animation: ani_active_like_txt linear 2s infinite alternate;  
}

#wo_post_stat_button .stat-item .active-like svg.feather.feather-thumbs-up {
    color: #124874;
    animation: ani_active_like_ico linear 2s infinite alternate;
}

@keyframes ani_active_like_txt {
    from { color: #fff; }
    to { color: #124874; }
}

@keyframes ani_active_like_ico {
    from { color: #fff; }
    to { color: #124874; }
}

/* Dislike btn clicked */
.active-wonder {
    color: #a84849;
    animation: ani_active_dislike_txt linear 2s infinite alternate;
}

#wo_post_stat_button .stat-item .active-wonder svg.feather.feather-thumbs-down {
    color: #a84849;
    animation: ani_active_dislike_ico linear 2s infinite alternate;
}

@keyframes ani_active_dislike_txt {
    from { color: #fff; }
    to { color: #a84849; }
}

@keyframes ani_active_dislike_ico {
    from { color: #fff; }
    to { color: #a84849; }
}

/* Post footer */
.post .post-footer.post-comments {
    background: transparent;
    border-top: 0;
}

/* Comment list main avatar */
.post .post-footer .comments-list .comment .avatar {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 2px;
}

/* Comment list */
.comment-body {
    background: rgba(255,255,255,.3);
    border-radius: 5px;
    font-family: 'georgia';
    padding: 5px;
}

/* Comment like, dislike icos */
.comment-container .comment-options svg.feather {
    width: 14px;
    height: 14px;
    margin-top: -3px;
}

/* Comment like, dislike icos active */
.comment-container .comment-options svg.feather.feather-thumbs-up.active-like {
    animation: none !important;
}

/* Navigation bar */
.navbar-default {
    height: 45px !important;
    display: block !important;
    background: rgba(200,151,0,.9);
    box-shadow: 0 0 0 4px #FEC001, 2px 2px 3px 0 #000, -2px -2px 5px 0 #000, inset 0 0 5px 0 #FEB11A;
    margin-top: 4px;
    visibility: visible !important;
}

.sixteen-font-size { background: transparent !important; }

/* Nav bar search box container */
.navbar-form {
    width: auto;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-top: 4px;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
}

/* Nav bar search box */
.search-container .search-input {
    color: #000 !important;
    background: #fff !important;
}

/* Nav bar tab hover, focus, clicked */
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: #ffffff !important;
    background-color: rgba(200,151,0,1) !important;
}

/* Nav bar user avatar */
.header-container .user-avatar img {
    width: 27px;
    height: 27px;
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow: none;
    padding: 1px;
    margin-top: -5px;
    margin-right: 3px;
}

/* User menu */
.navbar-default .open > .dropdown-menu.ani-acc-menu {
    top: 53px;
    background: linear-gradient(to right, rgba(250,208,126,1) 0%, rgba(251,200,111,1) 12%, rgba(250,186,97,1) 23%, rgba(239,131,68,1) 44%, rgba(234,70,46,1) 65%, rgba(185,35,44,1) 92%);
    border-radius: 5px;
    filter: none;
    -webkit-filter: none;
    opacity: 1;
    visibility: visible;
}

.headtoppoint {
    height: 0;
    width: 0;
    position: absolute;
    top: -10px;
    left: 100%;
    border: solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #bb252c;
    pointer-events: none;
    margin-left: -30px;
    -webkit-filter: drop-shadow(0 -5px 4px rgba(0,0,0,.2));
    filter: drop-shadow(0 -5px 4px rgba(0,0,0,.2));
}

/* User menu txt */
.dropdown-menu > li > a {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #000;
    text-shadow: none;
    padding: 5px 10px;
    clear: both;
}

/* User menu txt hover */
.dropdown-menu > li > a:hover {
    background: transparent !important;
    color: #fff !important;
}

/* Loading bar */
#bar_loading {
    background: linear-gradient(to left, rgba(250,208,126,1) 0%, rgba(251,200,111,1) 12%, rgba(250,186,97,1) 23%, rgba(239,131,68,1) 44%, rgba(234,70,46,1) 65%, rgba(185,35,44,1) 92%);
}

/* Chat container */
.chat-container {
    width: 205px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 66;
    background: #c89700;
    box-shadow: 0 0 0 4px #FEC001, 2px 2px 3px 0 #000, -2px -2px 5px 0 #000, inset 0 0 5px 0 #FEB11A;
    font-size: 13px;
    color: #bbb;
    padding-top: 0;
    margin-top: 52px;
    overflow: auto;
}

/* Chat header */
.chat-container .online-toggle {
    width: 100%;
    position: relative;
    background: #fec001;
    color: #000;
    font-weight: 700;
    padding: 10px 10px 5px;
    margin-bottom: 5px;
    
}

/* Chat header icos */
.chat-status {
    position: absolute;
    top: 9px;
    right: 9px;
    color: #000;
    margin-top: 2px;
}

@media (min-width: 1140px) {
    .chat-status { margin-top: 0; }
}

/* Chat menu tabs */
.wo_chat_tabs li a {
    color: #000;
    border-bottom: 1px solid #000;
}

/* Chat menu active tab */
.wo_chat_tabs li.active a {
    color: #fff !important;
    border-bottom: 1px solid #fff !important;
}

/* Chat "no-online-users" txt */
.no-online-users {
    font-family: 'georgia';
    font-size: 12px;
    color: #FFF9F9;
    margin: 20px;
}

/* Chat list avatars */
.recipient-chat-user img {
    max-width: 35px;
    border-radius: 100%;
    border: 1px solid #fff;
    padding: 2px;
}

/* Chat list name txt */
.recipient-chat-user .chat-user-text {
    font-family: 'georgia';
    cursor: pointer;
    color: #fffcfc;
    font-size: 12px;
    font-weight: 700;
}

/* Chat list small txt */
.user-lastseen .small-last-seen {
    font-size: 10px;
    color: #ddd;
}

/* Chat search */
.chat-container input {
    height: 38px;
    width: 205px;
    background-color: #fec001;
    border-color: #E29D0E !important;
    border-bottom: 0;
    border-radius: 0;
    font-size: 13px;
    color: #000;
    padding: 3px 14px;
}

/* | Kasun Chaturanga | 2018.06.03 | */