.landing-content {
    z-index: 999;
    position: relative;
}

.content-bg-wrap.bg-landing:before,
.landing-page .content-bg-wrap:before {
    background-color: rgba(86, 85, 85, .95) !important;
}

.registration-login-form .nav-link.active {
    fill: #335893 !important;
}

.btn-purple,
.fixed-sidebar .logo,
.checkbox input[type=checkbox]:checked+.checkbox-material .check {
    background-color: #335893 !important;
}

a {
    color: #335893;
}

.btn-primary {
    background-color: #335893 !important;
    border-color: #335893 !important;
}

.align-right {
    text-align: right;
}

.trilha__box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lfex {
    width: 100%;
    max-width: 650px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.imagem {
    border-radius: 10px;
    position: relative;
    margin-right: 25px;
}

.imagem img {
    border-radius: 10px;
}

.imagem .label-avatar {
    position: absolute;
    right: -5px;
    top: -5px;
}

.dados,
.dados a {
    font-size: 20px;
}

.trilha__box .skills-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.trilha__box .skills-item .percent {
    margin: -28px 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.trilha__box .skills-item .butons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin: 22px 0px;
}

.trilha__box .skills-item .butons button {
    float: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}



.post-add-icon.active {
    fill: #ff5e3a;
    color: #ff5e3a;
}

.post-control-button .btn-control.active {
    background-color: #ff5e3a;

}

.js__comentar__form {
    display: none;
}


.conquistas {
    list-style: none;
    margin: 0px;

}

.conquistas li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px;
}

.conquistas .pontos, .pontos_barra {
    font-family: 'Black Ops One';
    font-size: 14px;
}

.conquistas h6 {
    margin: 0px;
}

.conquistas .icone {
    min-width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}


.conquistas li, .gray {
    filter: grayscale(1); 
}


.conquistas li.active, .gray.active {
    filter: grayscale(0);
}

.conquistas li .pontos {
    color: #fff;
    min-width: 50px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 11px;

}

.conquistas li.verde .pontos {
    background: #48a1a9;
}

.conquistas li.verde .desctarefa h6 {
    color: #48a1a9;
}

.conquistas li.amarelo .pontos {
    background: #f0b14e;
}

.conquistas li.amarelo .desctarefa h6 {
    color: #f0b14e;
}

.conquistas li.vermelho .pontos {
    background: #e36a5c;
}

.conquistas li.vermelho .desctarefa h6 {
    color: #e36a5c;
}


.conquistas li.azul .pontos {
    background: #3d53ff;
}

.conquistas li.azul .desctarefa h6 {
    color: #3d53ff;
}


.conquistas li.gray {
    filter: grayscale(1);
}

.niveis_barra {
    position: relative;
    margin-top: 30px;
}


.niveis_barra .prog {
    position: absolute;
    left: 1%;
    border-radius: 15px;
    top: 11.5%;
    max-width: 98%;
    width: 50%;
    object-fit: cover;
    height: 50%;
    object-position: left center;
}

.pontos_barra {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 8px;
    position: relative;
    margin-top: -6px;
}

.pontos_barra .inicio, .pontos_barra .progresso, .pontos_barra .fim {
    width: 60px;
    background: #e36908;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #9b3c00;
    border-radius: 20px;
    height: 25px;
}

.pontos_barra .fim  {
    background: #feba01;
    border-color: #e44000;
}

.pontos_barra .progresso {
    position: absolute;
    z-index: 3;
    background: #335893;
    border-color: #f0c300;
    margin-left: -25px;
    top: -22px;
}

.progresso::before {
    content: " ";
    position: absolute;
    z-index: 0;
    top: -7px;
    left: 20px;
    background: #335893;
    width: 15px;
    height: 15px;
    z-index: -1;
    transform: rotate(45deg);
}

.mosaico {
    display: flex;
    width: 100%;
    width: 660px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mosaico .linha1,
.mosaico .linha2,
.mosaico .linha3 {
    display: flex;
    justify-content: flex-end;
    height: 130px;
    width: 100%;
}

.mosaico .linha3 {
    height: 300px;
}

.mosaico .linha3 .div1 {
    position: relative;
    width: 167px;
    overflow: hidden;
}

.mosaico .linha3 .div2,
.mosaico .linha3 .div3 {
    width: 50%;
    height: 300px;
}

.linha3 .div2 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.linha3 .div2 div {
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mosaico .linha3 .div1::before {
    width: 300px;
    height: 100%;
    content: "";
    background-color: #491880;
    border-radius: 50%;
    display: block;
}

.mosaico .linha2 {
    height: 390px;
}

.mosaico .linha1 div {
    width: 20%;
    position: relative;
    z-index: 2;
}

.mosaico .linha1 .div1 {
    overflow: hidden;
}

.mosaico .linha1 .div1::before {
    content: "";
    position: absolute;
    right: -52%;
    top: 0;
    height: 100%;
    width: 100%;
    background: #491880;
    border-radius: 50%;
}

.mosaico .linha2 .div1 {
    width: 20%;
    display: flex;
    flex-direction: column;
}

.mosaico .linha2 .div1 div {
    width: 100%;
    height: 130px;
}

.mosaico .linha2 .div1 .sub3 {
    overflow: hidden;
    border-radius: 50%
}

.mosaico .linha2 .div2 {
    width: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

.mosaico .linha2 .div2 .sub1 {
    display: flex;
    height: 260px;
    width: 176px;
}

.mosaico .linha2 .div2 .sub2 {
    height: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 0px 50% 50% 50%;
}


.bkgvverde {
    background: #48a1a9;
}

.bkgamarelo {
    background: #f0b14e;
}

.bkgvermelho {
    background: #e36a5c;
}

.bkgazul {
    background: #3d53ff;
}

.bkgroxo {
    background: #491880;
}

.mosaico .opaco {
    opacity: .2;
}

.active .opaco {
    opacity: 1;
}


.centrs {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}