/**
 * Author: Alberto Jordane Adolfo
 * Email: albertoadolfo27@gmail.com
 * GitHub: https://github.com/albertoadolfo27
 * Date: 2025-07-22 12:22
 */

:root {
    --blue: rgb(0, 141, 210);
    --yellow: rgb(255, 200, 80);
    --gray: rgb(102, 102, 102);
    --black: rgb(43, 42, 41);
    --red: rgb(210, 60, 60);
    --green: rgb(60, 170, 60);
    --opacity-white: rgb(255, 255, 255, 30%);
    --opacity-blue: rgb(0, 141, 210, 30%);
    --opacity-yellow: rgb(255, 200, 80, 30%);
    --opacity-gray: rgb(102, 102, 102, 30%);
    --opacity-black: rgb(43, 42, 41, 30%);
    --opacity-red: rgb(210, 60, 60, 30%);
    --opacity-green: rgb(60, 170, 60, 30%);
    --light-blue: rgb(244 248 254);
    --light-gray: rgb(240, 242, 244);
}

body {
    font-size: 1rem;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


main {
    padding: 90px 0 0 0;
}

header .navbar {
    /* padding: 0 3.5rem; */
    height: 90px !important;
}

#nav-logo {
    height: 75px;
    width: 75px;
}

#nav-logo2 {
    height: 75px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    /* centraliza verticalmente */
    gap: 0.5rem;
    outline: none;
    /* espaço entre brand e títulos */
}

#brand-name {
    font-size: 2.4rem;
    font-weight: bolder;
    letter-spacing: -0.5px;
}

.navbar-nav .nav-link {
    color: var(--black);
    padding: 0;
}

.sidebar {
    padding-top: 90px !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
}

.sidebar-admin {
    /* bottom: 0; */
    padding-top: 90px !important;
    /* position: absolute; */
    position: fixed !important;

    top: 0;
    left: 0;
    height: 100%;
}

.scroll-bar {
    overflow: auto;
    scrollbar-color: var(--opacity-blue) var(--opacity-yellow);
    transition: scrollbar-color 0.3s;
}

.navbar-nav .nav-link.active,
.sidebar-nav .nav-link.active {
    color: var(--blue);
    font-weight: bold;
    border-radius: 0 0 3px 3px;
}


.sidebar-nav .nav-link {
    color: var(--black);
    /* border: 1px solid; */
}

.btn.active {
    outline: 0;
    box-shadow: 0 0 0 3px var(--opacity-blue);
}

.btn-unip-outline-blue {
    border: 1px solid;
    border-color: var(--blue);
    color: var(--blue);
}

.btn-unip-outline-blue:hover {
    background-color: var(--blue);
    color: #ffffff;
}

.btn-unip-outline-green {
    border: 1px solid;
    border-color: var(--green);
    color: var(--green);
}

.btn-unip-outline-green:hover {
    background-color: var(--green);
    color: #ffffff;
}

.btn-unip-outline-yellow {
    border: 1px solid;
    border-color: var(--yellow);
    color: var(--yellow);
}

.btn-unip-outline-yellow:hover {
    background-color: var(--yellow);
    color: #000000;
}


.btn-unip-outline-red {
    border: 1px solid;
    border-color: var(--red);
    color: var(--red);
}

.btn-unip-outline-red:hover {
    background-color: var(--red);
    color: var(--red);
}

.btn {
    border-radius: 0;
}

.btn-unip-blue,
.btn-unip-blue:hover {
    background-color: var(--blue);
    border-color: var(--blue);
    color: #ffffff !important;
}

.btn-unip-green,
.btn-unip-green:hover {
    background-color: var(--green);
    border-color: var(--green);
    color: #ffffff !important;
}

.btn-unip-yellow,
.btn-unip-yellow:hover {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: #000000 !important;
}

.btn-unip-red,
.btn-unip-red:hover {
    background-color: var(--red);
    border-color: var(--red);
    color: #ffffff !important;
}

.btn-unip-gray,
.btn-unip-gray:hover {
    background-color: var(--gray);
    border-color: var(--gray);
    color: #000000 !important;
}

.btn-unip-light-gray,
.btn-unip-light-gray:hover {
    background-color: var(--light-gray);
    border-color: var(--light-gray);
    color: #000000 !important;
}

.text-unip-blue {
    color: var(--blue) !important;
}

.border-unip-blue {
    border: 1px solid;
    border-color: var(--blue);
}

.bg-unip-yellow {
    background-color: var(--yellow);
}

.text-unip-yellow {
    color: var(--yellow);
}

.border-unip-yellow {
    border: 1px solid;
    border-color: var(--yellow);
}

.bg-unip-blue {
    background-color: var(--blue);
}

.bg-unip-gray {
    background-color: var(--gray);
}

.text-unip-gray {
    color: var(--gray) !important;
}

.border-unip-gray {
    border: 1px solid;
    border-color: var(--gray);
}

.bg-unip-black {
    background-color: var(--black);
}

.text-unip-black {
    color: var(--black);
}

.border-unip-black {
    border: 1px solid;
    border-color: var(--black);
}

.bg-unip-red {
    background-color: var(--red);
}

.text-unip-red {
    color: var(--red);
}

.border-unip-red {
    border: 1px solid;
    border-color: var(--red);
}

.bg-unip-green {
    background-color: var(--green);
}

.text-unip-green {
    color: var(--green);
}

.border-unip-green {
    border: 1px solid;
    border-color: var(--green);
}

.bg-unip-opacity-blue {
    background-color: var(--opacity-blue);
}

.text-unip-opacity-blue {
    color: var(--opacity-blue);
}

.border-unip-opacity-blue {
    border: 1px solid;
    border-color: var(--opacity-blue);
}

.bg-unip-opacity-yellow {
    background-color: var(--opacity-yellow);
}

.text-unip-opacity-yellow {
    color: var(--opacity-yellow);
}

.border-unip-opacity-yellow {
    border: 1px solid;
    border-color: var(--opacity-yellow);
}

.bg-unip-opacity-gray {
    background-color: var(--opacity-gray);
}

.text-unip-opacity-gray {
    color: var(--opacity-gray);
}

.border-unip-opacity-gray {
    border: 1px solid;
    border-color: var(--opacity-gray);
}

.bg-unip-opacity-black {
    background-color: var(--opacity-black);
}

.text-unip-opacity-black {
    color: var(--opacity-black);
}

.border-unip-opacity-black {
    border: 1px solid;
    border-color: var(--opacity-black);
}

.bg-unip-opacity-red {
    background-color: var(--opacity-red);
}

.bg-unip-opacity-red.important {
    background-color: var(--opacity-red) !important;
}

.text-unip-opacity-red {
    color: var(--opacity-red);
}

.border-unip-opacity-red {
    border: 1px solid;
    border-color: var(--opacity-red);
}

.bg-unip-opacity-green {
    background-color: var(--opacity-green);
}

.bg-unip-opacity-green.important {
    background-color: var(--opacity-green) !important;
}

.text-unip-opacity-green {
    color: var(--opacity-green);
}

.border-unip-opacity-green {
    border: 1px solid;
    border-color: var(--opacity-green);
}

.bg-unip-light-blue {
    background-color: var(--light-blue);
}

.text-unip-light-blue {
    color: var(--light-blue);
}

.border-unip-light-blue {
    border: 1px solid;
    border-color: var(--light-blue);
}

.bg-unip-light-gray {
    background-color: var(--light-gray);
}

.text-unip-light-gray {
    color: var(--light-gray);
}

.border-unip-light-gray {
    border: 1px solid;
    border-color: var(--light-gray);
}

.jumbotron {
    background-size: cover !important;
    /* min-height: 500px; */
    background-repeat: no-repeat;
}

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


.aboutus-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

hr.separator,
hr.separator-start {
    width: 60px;
    margin-top: 0;
    height: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    color: var(--yellow) !important;
    opacity: 0.5;
    margin-top: 0px !important;
    margin-bottom: 0 !important;
}

.separator {
    margin-left: auto !important;
    margin-right: auto !important;
}

hr.separator-2 {
    width: 100%;
    margin: 0;
    height: 1px;
    color: var(--opacity-gray) !important;
    margin-bottom: 0 !important;
}

hr.separator-3 {
    width: 100%;
    margin: 0;
    height: 1px;
    color: var(--gray) !important;
    margin-bottom: 0 !important;
}

.title-1,
.title-1-start,
.title-2,
.title-3,
.title-4 {
    margin-top: 0px;
    margin-bottom: 5px;
}

.title-1,
.title-1-start {
    font-size: 1.7rem;
    font-weight: 400;
}

.title-1 {
    text-align: center;
}

.title-2 {
    text-align: left;
    font-size: 1.4rem;
    font-weight: 400;
}

.title-3 {
    font-size: calc(1.1rem + .3vw);
    font-weight: 350;
    text-align: center;
}

.title-4 {
    font-size: 1.25rem;
    font-weight: 300;
}

.red-star::after {
    content: "*";
    color: var(--red);
    padding-left: 5px;
    padding-right: 5px;
}

.optional::after {
    content: "(Opcional)";
    color: var(--blue);
    padding-left: 5px;
    padding-right: 5px;
}

.sidebar-nav .accordion-button,
.sidebar-nav .accordion-item {
    text-align: left;
    align-items: start;
    text-decoration: none;
    font-weight: normal;
    color: var(--black);
    background-color: rgb(255, 255, 255, 0) !important;
    border: 0 !important;
    border-width: 0 !important;
    box-shadow: none;

}

.sidebar-nav .accordion-button:focus {

    border-color: #000 I !important;
}

#profile-photo,
.profile-photo {
    width: 45px;
    height: 45px;
    box-shadow: 0 0 0 2px #ffffff;
    object-fit: cover;
}

.nav-link.active #profile-photo,
.nav-link.active .profile-photo {
    outline: 0;
    box-shadow: 0 0 0 2px var(--blue);
}

.nav-tabs .nav-link {
    color: var(--black);
}

.nav-tabs .nav-link.active {
    font-weight: bold;
}

.card-work-experience {
    text-decoration: none;
    color: #000000 !important;
}

.card-work-experience:hover .card,
.card-hover:hover {
    box-shadow: 0 0 0 1px var(--opacity-blue);
}

.tox-statusbar__right-container {
    display: none !important;
}

#divAddPost {
    background-color: var(--light-gray);
    width: 100%;
    border: 1px solid #ffffff;
}

#divAddPost:hover {
    background-color: #ffffff;
    width: 100%;
    cursor: text;
    border: 1px solid var(--light-gray);
}

.btn-close {
    border-radius: 100%;
    /* background-color: var(--opacity-red); */
}

.btn-close,
.modal-header {
    margin: 0 !important;
}

.alert-dismissible .btn-close {
    padding: 0.4rem;
    margin: 5px !important;
}

.right-0 {
    right: 0;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.top-30 {
    top: 30px !important;
}

#inputMediaContainer {
    position: absolute;
    bottom: 0;
    right: 0;
}

#inputMediaContainer input {
    visibility: hidden !important;
}

.more-medias {
    background-color: rgb(43, 42, 41, 50%);
    ;
    border: 1px solid var(--yellow);
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
}

.offcanvas-top {
    bottom: unset !important;
    height: unset;
}

/* Stop click backdrop */
/* .modal-backdrop,
.offcanvas-backdrop {
    pointer-events: none;
} */

#postCommentsContainer {
    max-height: 55vh;
    overflow-y: hidden;
}

#postComments {
    height: 100%;
    max-height: 100%;
    overflow-y: auto !important;
}

#suggestedConversationUsers {
    overflow-x: auto;
}

.resize-none {
    resize: none;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default !important;
}

.fs-7 {
    font-size: .9rem;
}

.radius-1 {
    border-radius: 5px;
}

.radius-2 {
    border-radius: 10px;
}

.radius-3 {
    border-radius: 15px;
}

.radius-5 {
    border-radius: 20px;
}

.radius-6 {
    border-radius: 25px;
}

.radius-circle {
    border-radius: 100%;
}

/* Gallery slider */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.swiperCarousel {
    height: 80%;
    width: 100%;
}

.swiperThumbnail {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
    padding-bottom: 0;
}

.swiperThumbnail .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.swiperThumbnail .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.swiper-pagination {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 8px 4px;
    border-radius: 100%;
    color: white;
    font-size: 16px;
    width: auto;
    bottom: auto;
    right: auto;
    z-index: 10;
    background-color: rgb(0, 0, 0, 30%);
}

.slide-gallery-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
}

.swiper-slide-active .slide-gallery-title {
    display: block;
}
#paginationOffeset{
    margin-top: 50px;
}
.page-link{
    color: var(--blue);
}
.page-item.active .page-link{
    background-color: var(--blue) !important;
}