/* ===== Base ===== */
body,
.sp-preloader {
    background-color: var(--color-bg-site) !important;
    color: var(--ocb-azul-marinho) !important;
}

.sp-preloader > div {
    background: var(--ocb-azul-marinho) !important;
}

.sp-preloader > div:after {
    background: var(--color-bg-site) !important;
}

/* ===== Top Bar ===== */
#sp-top-bar {
    background: var(--ocb-branco) !important;
    color: var(--ocb-azul-marinho) !important;
}

#sp-top-bar a {
    color: var(--ocb-azul-marinho) !important;
}

/* ===== Header ===== */
#sp-header {
    background: var(--ocb-branco) !important;
}

#sp-menu ul.social-icons a:hover,
#sp-menu ul.social-icons a:focus {
    color: var(--ocb-azul-marinho) !important;
}

/* ===== Links ===== */
a {
    color: var(--ocb-azul-marinho);
}

a:hover,
a:focus,
a:active {
    color: var(--ocb-azul-marinho);
}

/* ===== Tags ===== */
.tags > li {
    display: inline-block !important;
}

.tags > li a {
    background: rgba(23, 28, 102, 0.1) !important;
    color: var(--ocb-azul-marinho) !important;
}

.tags > li a:hover {
    background: var(--ocb-azul-marinho) !important;
    color: var(--ocb-branco) !important;
}

/* ===== Social Share ===== */
.article-social-share .social-share-icon ul li a {
    color: var(--ocb-azul-marinho) !important;
}

.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
    background: var(--ocb-azul-marinho) !important;
    color: var(--ocb-branco) !important;
}

/* ===== Pager ===== */
.pager > li a {
    border: 1px solid #ededed !important;
    color: var(--ocb-azul-marinho) !important;
}

/* ===== Reading Progress ===== */
.sp-reading-progress-bar {
    background-color: var(--ocb-azul-marinho) !important;
}

/* ===== Menu ===== */
.sp-megamenu-parent > li > a {
    color: var(--ocb-azul-marinho) !important;
}

.sp-megamenu-parent > li:hover > a {
    color: var(--ocb-azul-ceu) !important;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
    color: var(--ocb-azul-ceu) !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: var(--ocb-branco) !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    color: #000 !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-mega-group > li > a {
    color: #000 !important;
}

/* ===== Offcanvas Toggler ===== */
#offcanvas-toggler > .fa,
#offcanvas-toggler > .fas,
#offcanvas-toggler > .far {
    color: var(--ocb-azul-marinho) !important;
}

#offcanvas-toggler > .fa:hover,
#offcanvas-toggler > .fa:focus,
#offcanvas-toggler > .fa:active,
#offcanvas-toggler > .fas:hover,
#offcanvas-toggler > .fas:focus,
#offcanvas-toggler > .fas:active,
#offcanvas-toggler > .far:hover,
#offcanvas-toggler > .far:focus,
#offcanvas-toggler > .far:active {
    color: var(--ocb-azul-ceu) !important;
}

/* ===== Offcanvas Menu ===== */
.offcanvas-menu {
    background-color: var(--ocb-branco) !important;
    color: var(--ocb-azul-marinho) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li a,
.offcanvas-menu .offcanvas-inner ul.menu > li span {
    color: var(--ocb-azul-marinho) !important;
}

.offcanvas-menu .offcanvas-inner a:hover,
.offcanvas-menu .offcanvas-inner a:focus,
.offcanvas-menu .offcanvas-inner a:active,
.offcanvas-menu .offcanvas-inner li.active a,
.offcanvas-menu .offcanvas-inner li.active:hover a,
.offcanvas-menu .offcanvas-inner li:hover a,
.offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu > li span:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
    color: var(--ocb-azul-ceu) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler {
    color: var(--ocb-azul-marinho) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li li a {
    color: var(--ocb-azul-marinho) !important;
}

/* ===== Social Icons ===== */
ul.social-icons > li a:hover {
    color: var(--ocb-azul-marinho) !important;
}

/* ===== Page Title ===== */
.sp-page-title {
    background: var(--ocb-azul-marinho) !important;
}

/* ===== Layout Boxed ===== */
.layout-boxed .body-innerwrapper {
    background: var(--color-bg-site) !important;
}

/* ===== Modules ===== */
.sp-module ul > li > a,
.sp-module .latestnews > div > a {
    color: var(--ocb-azul-marinho) !important;
}

.sp-module ul > li > a:hover,
.sp-module .latestnews > div > a:hover {
    color: var(--ocb-azul-marinho) !important;
}

.sp-module .tagscloud .tag-name:hover {
    background: var(--ocb-azul-marinho) !important;
    color: var(--ocb-branco) !important;
}

/* ===== Search ===== */
.search .btn-toolbar button {
    background: var(--ocb-azul-marinho) !important;
    color: var(--ocb-branco) !important;
}

/* ===== Footer & Bottom ===== */
#sp-footer,
#sp-bottom {
    background: var(--ocb-azul-marinho) !important;
    color: var(--ocb-branco) !important;
}

#sp-footer a,
#sp-bottom a,
#sp-footer a:hover,
#sp-footer a:active,
#sp-footer a:focus,
#sp-bottom a:hover,
#sp-bottom a:active,
#sp-bottom a:focus {
    color: var(--ocb-branco) !important;
}

#sp-bottom .sp-module-content .latestnews > li > a > span {
    color: var(--ocb-branco) !important;
}

/* ===== Coming Soon / Error ===== */
.sp-comingsoon body {
    background-color: var(--ocb-azul-marinho) !important;
}

.error-code,
.coming-soon-number {
    color: var(--ocb-azul-marinho) !important;
}

/* ===== Pagination ===== */
.pagination > li > a,
.pagination > li > span {
    color: var(--ocb-azul-marinho) !important;
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    color: var(--ocb-azul-marinho) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    border-color: var(--ocb-azul-marinho) !important;
    background-color: var(--ocb-azul-marinho) !important;
    color: var(--ocb-branco) !important;
}