:root {
    --uo-color: #b1b2b3;
    --uo-color-dark: #393a3a;
    --uo-color-light: #727375;
}

/* #################################################### Css genérica */
a .btn-up:hover {
    border: 2px solid var(--uo-color);
    color: var(--uo-color);
}

a.dl-link:hover {
   border: 2px solid var(--uo-color);
   color: var(--uo-color);
}

.hot-links ul li a:hover .fas {
   color: var(--uo-color);
}

.text-gold {
    color: var(--uo-color-light);
}

p a {
  color: black;
}
/* ########## */



/* #################################################### upper-nav */
.upper-nav {
    background-color: var(--uo-color);
}

.upper-nav .upper-nav-left {
    background-color: var(--uo-color);
    color: black;
}

.upper-nav .upper-nav-left .btn {
    color: black;
}

.sigarra-sep {
  color: black;
}

.upper-nav .upper-nav-left .ico.user svg {
  fill: black;
}

.upper-nav .dropdown {
  border-right: 6px solid #fff;
}

.upper-nav .upper-nav-right {
    background-color: var(--uo-color);
}

.upper-nav .lang-up a:hover {
    color: unset;
}

/*.sep-uppernav a {*/
/*    color: white;*/
/*}*/

/*.sep-uppernav .btn:hover {*/
/*    color: unset;*/
/*}*/

.upper-nav .lang-up {
    color: black;
    background-color: var(--uo-color);
}

/*.upper-nav .lang-up .text-muted {*/
/*    color: var(--uo-color) !important;*/
/*}*/
/* ########## */



/* #################################################### Logótipo da UO */
.logo-up {

    background-repeat: no-repeat;
    background-size: contain;
}
/* ########## */



/* #################################################### Menu Principal */
.nav-wrapper .navbar-nav .active-underline {
    border-bottom: 3px solid var(--uo-color-light);
}

.nav-wrapper .navbar-nav li:hover {
    border-bottom: 3px solid var(--uo-color);
}

.nav-wrapper .navbar-nav li.show, .nav-wrapper .navbar-nav li:hover {
  border-bottom: 3px solid var(--uo-color);
}
/* ########## */



/* #################################################### Home Page - Caroucel */
.hp-uporto .hp-slider-wrapper .hp-slider .slider-content a {
    color: #ffffff !important;
    background-color: var(--uo-color) !important;
}

.hp-uporto .slider .slider-1-info .uo-div {
    background-color: rgba(177, 178, 179, 0.4);
    padding: 1.5em;
    min-height: 11.5em;
 }

/*.hp-uporto .slider-1 .slider-1-other .sep-destaque {*/
/*    border-top: 7px solid var(--uo-color);*/
/*}*/

.hp-uporto .slider-1 .slider-1-info button, .hp-uporto .slider .slider-1-info button {
    background-color: var(--uo-color-light);
    color: white;
}

.hp-uporto .slider-1 .slider-1-info button:hover, .hp-uporto .slider .slider-1-info button:hover {
    background-color: var(--uo-color-dark);
    color: white;
}
/* ########## */



/* #################################################### Home Page - Destaques */
.hp-uporto .highlights .card a .highlight-bar, .hp-uporto .one-highlights .card a .highlight-bar {
    border-bottom: 10px solid transparent;
}

.highlight-uo-color .card .card-body {
    background-color: var(--uo-color)!important;
}

.highlight-uo-color .card p {
    color: white !important;
}

.highlight-uo-color .card h3 {
    color: white !important;
}
/* ########## */



/* #################################################### Home Page - Notícias */
.hp-uporto .prev-next-rows button:hover {
    background-color: var(--uo-color);
    border: 2px solid var(--uo-color);
}

.hp-uporto p.ver-mais:hover {
    background-color: var(--uo-color);
    border: 2px solid var(--uo-color);
}
/* ########## */



/* #################################################### Home Page - Newsletter */
.hp-newsletter input {
    border-bottom: 3px solid var(--uo-color) !important;
}

.hp-newsletter input:focus {
    box-shadow: none;
}

.hp-uporto .hp-newsletter button {
    background-color: var(--uo-color-light);
    color: white;
}

.hp-uporto .hp-newsletter button:hover {
  background-color: var(--uo-color-dark);
    color: white;
}
/* ########## */



/* #################################################### Elemento - Texto Rico */
.row .component-margin .richtext-content a:hover{
    color: var(--uo-color-dark);
}

.row .component-margin ol li::marker {
    color: var(--uo-color);
}
.row .component-margin ul li::marker {
     color: var(--uo-color);
}
/* ########## */



/* #################################################### Elemento - Abas */
.tabs .tab-content p a:hover{
    color: var(--uo-color-dark);
}
/* ########## */


/* #################################################### Elemento - Destaques Branco e "Ouro" */
.banner-box .banner-box-txt-gold {
    background-color: var(--uo-color);
}

.banner-box .banner-box-txt-horizontal .btn-gold {
    background-color: var(--uo-color);
    border: 2px solid var(--uo-color);
    color: black;
}

.banner-box .banner-box-txt-horizontal .btn-gold:hover {
    background-color: var(--uo-color-dark);
    border: 2px solid var(--uo-color-dark);
}

.banner-box .banner-box-txt-gray a:hover {
    color: var(--uo-color-dark);
}
/* ########## */



/* #################################################### Elemento - Tabela Horizontal */
.row .component-margin .horizontal-table p a:hover {
     color: var(--uo-color-dark);
}
/* ########## */



/* #################################################### Elemento - Tabela Vertical */
.row .component-margin .vertical-table p a:hover {
     color: var(--uo-color-dark);
}
/* ########## */


/* #################################################### Elemento - Lista colapsável */
.collapsable-list div.tabela-b.t-collapse .col-4 {
    color: var(--uo-color-light);
}

.collapsable-list div.tabela-b .accordion .card-body ol li::marker {
     color: var(--uo-color);
}

.collapsable-list div.tabela-b .accordion .card-body p a:hover {
    color: var(--uo-color-dark);
}
/* ########## */



/* #################################################### Elemento - Call to Action */
.cta-button .btn-gold {
    background-color: var(--uo-color-light);
    border: 2px solid var(--uo-color-light);
}

.cta-button .btn-gold:hover {
    color: var(--uo-color-light);
}
/* ########## */



/* #################################################### Elemento - Texto em linha */
.h-two-column-text h2 {
  color: var(--uo-color-light);
}

.h-two-column-text a:hover {
  color: var(--uo-color-dark);
}
/* ########## */

/* #################################################### Elemento - Links Úteis */
.hot-links ul li a:hover {
    color: var(--uo-color-light);
}
/* ########## *


/* #################################################### Elemento - API-Lista de Cursos */
#courseListComponent ul .fa-chevron-right {
    color: var(--uo-color);
}


/* #################################################### Footer */
footer {
    min-height: 37px;
    background-color: var(--uo-color-dark);
}
/* ########## */

.pagination .page-item.active .page-link {
    background-color: var(--uo-color);
    border-color: var(--uo-color);
}

.pagination .page-link {
    border: 1px solid var(--uo-color);
    color: var(--uo-color);
}

.info-circle svg {
    fill: var(--uo-color);
}

.msg-course {
    color: var(--uo-color);
}