html{
    font-size: 0.9em;
}

html, body {
    height: auto;
}

body {
    margin: 0;
    font-family: Poppins,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #212529;
    background-color: #fff;
    position: relative;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Montserrat";
    color: #555;
    line-height: 1.2em;
    font-weight: 500;
    border-bottom: 0 none;
    margin: 0.5rem 0;
}

h1{
    font-size: 1.5rem;
}
h2{
    font-size: 1.2rem;
}
h3{
    font-size: 1.1rem;
}
h4, h5, h6{
    font-size: 1rem;
}

.small{
    font-size: 0.9rem;
}

.form-control-view{
    margin-bottom: 1.25rem;
}

.expandable-element {
    max-height: var(--height, 9999px);
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.expandable-element.hide-field {
    max-height: 0;
}

.no-js .expandable-element {
    --height: auto;
    overflow: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.accessibility-links {
    z-index: 9999999;
    position: fixed;
    top: 40px;
    left: 20px;
}
.js .remove-if-js{
    display: none;
}
.js .hide-if-js {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}

a {
    color: var(--transition-color-dark, #666);
    margin: 0;
    transition: all .3s;
}
a:is(:focus, :hover,:active) {
    text-decoration: none;
    color: var(--transition-color-dark, #227364);
    border-color: var(--transition-color-dark, #227364);
}

.link-primary {
    color: var(--transition-color-dark, #666) !important;
    margin: 0;
    transition: all .3s;
}
.link-primary:is(:focus, :hover,:active) {
    text-decoration: none;
    color: var(--transition-color-dark, #227364) !important;
    border-color: var(--transition-color-dark, #227364);
}

a:is(:scope, :link, :visited, :focus, :hover, :active):not(.btn, .visually-hidden, .visually-hidden-focusable){
    /* padding: 0;
    margin: 0; */
    background-color: transparent;
}
a:is(:scope, :link, :visited):not(.btn),
#footer  a:is(:scope, :link, :visited):not(.btn){
    text-decoration: none;
}
a:is(:focus, :hover, :active):not(.btn),
#footer  a:is(:focus, :hover, :active):not(.btn){
    text-decoration: underline;
}

/* background and animations */
body{
    --transition-color-start: #439080;
    --transition-color-middle: #61ae9e;
    --transition-color-end: #80cebc;
    --transition-color-dark: #227364;

    --linear-gradient: linear-gradient(90deg, rgb(245, 169, 46) 0%, rgb(215, 174, 40) 8%, rgb(185, 181, 49) 17%, rgb(156, 181, 64) 25%, rgb(128, 183, 82) 33%, rgb(99, 182, 100) 42%, rgb(71, 179, 120) 50%, rgb(60, 180, 132) 58%, rgb(49, 180, 143) 67%, rgb(43, 182, 154) 75%, rgb(38, 181, 164) 83%, rgb(40, 184, 174) 92%, rgb(47, 182, 182) 100%);
}
/* @keyframes color-change {
    0% { color: var(--transition-color-end, #864fe1); }
    25% { color: var(--transition-color-middle, #1797d2); }
    50% { color: var(--transition-color-start, #0cc898); }
    75% { color: var(--transition-color-middle, #1797d2); }
    100% { color: var(--transition-color-end, #864fe1); }
}
.color-change {
    animation: color-change 60s ease infinite;
    animation-delay: var(--color-animation-delay, 0);
} */

@keyframes backgroundColorAnimation {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}
.bg-animation {
    --blur:5px;
    /* --transition-color-middle:#4687D0;
    --transition-color-end:#6A75C6;
    --transition-color-dark:#3C6392; */

    position: fixed;
    z-index: -1;
    top: calc(var(--blur, 5px) * -2);
    right: calc(var(--blur, 5px) * -2);
    bottom: calc(var(--blur, 5px) * -2);
    left: calc(var(--blur, 5px) * -2);
    width: calc(100% + calc(var(--blur, 5px) * 4) );
    height: calc(100% + calc(var(--blur, 5px) * 4));
    filter: blur(var(--blur, 5px));

    background: var(--transition-color-start,#3C6392) linear-gradient(250deg, var(--transition-color-start, #0cc898), var(--transition-color-middle, #1797d2), var(--transition-color-end, #864fe1));
    background-size: 300% 300%;
    animation: backgroundColorAnimation 60s ease infinite;
    animation-delay: var(--color-animation-delay, 0);
  }

@media (prefers-reduced-motion: reduce) {
    .color-change,
    .bg-animation,
    a:is(:focus, :hover,:active){
        animation: none;
    }
}
.is-authenticated .background,
.is-authenticated .square,
.is-authenticated .color-change,
.is-authenticated a:is(:focus, :hover,:active){
    animation: none;
}

/* layout */
.wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.login-container {
    width: 100%;
    min-height: 100vh;
    /* min-height: 0vh;VR 2023.11.24 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
}

.layout-wrapper {
    background: #fff;
    border-radius: 10px;
    /* overflow: hidden; */
    position: relative;
    padding: 62px 1.5rem .75rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* @media(min-width: 576px) {
    .layout-wrapper {
        padding: 62px 60px .75rem;
    }
} */

@media(min-width: 658px) {
    .layout-wrapper {
        padding: 62px 60px .75rem;
        max-width: 1000px;
    }
}
@media(min-width: 1300px) {
    .layout-wrapper {
        max-width: 1120px;
    }
}

.header{
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 30px;
}
.header::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: var(--linear-gradient);
    background-size: 300% 300%;
    animation: backgroundColorAnimation 30s ease infinite;
}
a#brand-container {
    display: block;
    align-self: center;
    padding: 0.5rem 0 0.5rem;
    margin: 0;
    width: 100%;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    color: rgba(0, 0, 0, 0.9);
}
a#brand-container,
a.color-change{
    transition-duration: 0s;
}
/* 
a#brand-container:is(:hover, :active, :focus),
a.color-change:is(:hover, :active, :focus){
    /* filter: hue-rotate(45deg); *//*
} */

/* language menu */
.buttons-menu-bar{
    align-self: end;
    margin-bottom: 1rem;
    position: absolute;
    top: 15px;
    right: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
}

/* footer */
.footer{
    width: 100%;
}
.copyrights{
    /* border-top: 1px solid currentColor; */
    margin-top: .75rem;
    padding-top: .75rem;
    height: auto;
    font-size: .8rem;
    text-align: center;
    position: relative;
}
.copyrights::before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-image: var(--linear-gradient);
    background-size: 300% 300%;
    animation: backgroundColorAnimation 30s ease infinite;
    position: absolute;
    top: 0;
}
.bread-crumbs-wrapper{
    position: relative;
}
.bread-crumbs-wrapper::after{
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-image: var(--linear-gradient);
    background-size: 300% 300%;
    animation: backgroundColorAnimation 30s ease infinite;
    position: absolute;
    left: -12px;
}

#content{
    padding: 0 12px;
}

.copyright-text{
    color: #212529;
}
.meta-footer-wrapper{
    display: inline-block;
}
.meta-footer-wrapper-column{
    display: flex; 
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    color: white;
    font-weight: bold;
}
.co-funded-by-label{
    margin-bottom: 1rem;
    font-size: .8rem;
}
ul.funding{
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
ul.funding img{
    max-height: 40px;
    width: auto;
    /* filter: invert(1) hue-rotate(180deg); */
}
ul.institutional-links{
    padding: 0;
    list-style: none;
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 550px) {
    .meta-footer-wrapper-column{
        align-items: center;
    }
    ul.funding{
        gap: 1.9rem;
    }
    ul.institutional-links{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
    }
    ul.institutional-links li{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    ul.institutional-links li:not(:last-child):after{
        content: '\00B7';
        display: block;
        padding: 0 0.5rem;
    }
}

/* contents */
.message-box.warning{
    background-color: #fffdbf;
}

.message-box{
    margin: 1rem 0 3rem;
    outline: none;
}

.page-title{
    width: 100%;
    display: block;
    font-family: "Montserrat";
    font-size: 1.5rem;
    color: #555;
    line-height: 3rem;
    font-weight: 500;
    border-bottom: 0 none;
    margin: 1rem 0 1rem;
}

/* authentication form */
/* .btn{
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
    transition: all .4s;
    position: relative;
    z-index: 1;
    background-color: #EEEEEE;
    cursor: pointer;
    border: 0 none;
    /* text-shadow: 0px 0px 2px rgb(238 238 238 / 95%); *//*
    overflow: hidden;
    min-width: 0;
    gap: 0.5rem;
} */
.btn.btn-primary{
    /* background-color: var(--transition-color-middle, #207299); */
    color: white;
    text-shadow: none;
}
.btn.btn-primary:disabled{
    cursor: not-allowed;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
    background-color: #90979d;
}
.focus-element-wrapper .btn.has-focus-element:is(:hover, :active):disabled+.focus-form-element{
    display: none;
}
.btn:is(:scope, :hover, :focus, :active),
.btn.btn-primary:is(:scope, :hover, :focus, :active){
    background-color: #333;
    color: #fff;
}

.focus-element-wrapper{
    position: relative;
    width: 100%;
    min-width: 0;
    flex-basis: 0;
    flex-grow: 1;
}

.focus-element-wrapper .focus-form-element{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    border: 2px solid var(--transition-color-end, #fc00ff);
    border-radius: var(--bs-border-radius-lg, 10px);
    visibility: hidden;
    opacity: 0;
    transition: all .4s;
    transform: scaleX(1.1) scaleY(1.3);
    z-index: 1;
}
.uab-form,
.focus-element-wrapper .has-focus-element{
    outline: 0;
}
.focus-element-wrapper .has-focus-element:is(:focus)+.focus-form-element,
.focus-element-wrapper .has-focus-element:is(:hover, :active)+.focus-form-element {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

/* uab-form */
.uab-form{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: stretch;
}

.uab-form-group{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.uab-form label,
.uab-form legend{
    font-family: Montserrat;
    font-weight: 600;
    font-size: 1rem;
    color: #555;
    line-height: 1.5rem;
}

.uab-form input:is([type="text"], [type="password"], [type="email"]),
.uab-form select{
    font-family: Poppins;
    color: #333;
    line-height: 1.5rem;
    font-size: 1rem;
    display: block;
    width: 100%;
    background: 0 0;
    padding: 1rem 1.5rem;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}

.checkbox-wrapper {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
.checkbox-wrapper input:is([type="checkbox"],[type="radio"]){
    width: 1.3rem;
    height: 1.3rem;
}
.cuddle-above{
    margin-top: -1rem;
}

.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.order-3{
    order: 3;
}
.order-4{
    order: 4;
}
.order-5{
    order: 5;
}
.order-6{
    order: 6;
}
.font-semi-bold{
    font-weight: 600;
}

/* .layout-wrapper pre, 
.layout-wrapper code, 
.layout-wrapper kbd, 
.layout-wrapper samp, 
.layout-wrapper tt{
    white-space: normal;
    word-wrap: break-word;
} */

.layout-wrapper #push{
    height: auto;
}

.message-box {
    margin: 3rem 0 3rem;
}

.login-error-message{
    color: #cc4b37;
    padding: 0.5rem 1rem;
}

p {
    margin-bottom: 0;
}
p+p {
    margin-top: 1em;
}

.responsive-table-like {
    background-color: white;
    width: 100%;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 2rem;
    border: 1px solid var(--color-border, hsl(203, 33%, 83%));
}
.responsive-table-like.row{
    --bs-gutter-x: 4rem;
}
.responsive-table-like .thead,
.responsive-table-like .tr:not(:last-child){
  border-bottom: 1px solid var(--color-border, hsl(203, 33%, 83%));
}
.responsive-table-like a:is(:focus, :hover, :active){
  text-decoration: none;
}
.responsive-table-like a:is(:focus, :hover, :active) .underline{
  text-decoration: underline;
}
.go-link{
  position:relative
}
.go-link:after{
  content: '\27A4';
  display: block;
  position: absolute;
  right: 1.5rem;
  bottom: 0.5rem;
  translate: 0 -50%;
  font-weight: bold;
}
@media screen and (min-width: 992px) {
  .go-link:after{
    top: 50%;
    bottom: auto;
  }
}
.go-link:is(:hover, :focus, :active):after{
  animation: arrow-transition 1s infinite ease-in-out;
}
@keyframes arrow-transition {
  0% {
    content: '\27A3';
  }

  50% {
    content: '\27A2';
  }

  100% {
    content: '\27A3';
  }
}

.border-left{
    border-left: 1px solid var(--color-border, hsl(203, 33%, 83%));
}
.border-right{
    border-right: 1px solid var(--color-border, hsl(203, 33%, 83%));
}
.border-top{
    border-top: 1px solid var(--color-border, hsl(203, 33%, 83%));
}
.border-bottom{
    border-bottom: 1px solid var(--color-border, hsl(203, 33%, 83%));
}
@media screen and (min-width: 768px) {
    .border-left-md-1{
        border-left: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
    .border-right-md-1{
        border-right: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
    .border-top-md-1{
        border-top: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
    .border-bottom-md-1{
        border-bottom: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
}
@media screen and (min-width: 992px) {
    .border-left-lg-1{
        border-left: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
    .border-right-lg-1{
        border-right: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
    .border-top-lg-1{
        border-top: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
    .border-bottom-lg-1{
        border-bottom: 1px solid var(--color-border, hsl(203, 33%, 83%));
    }
}

.btn-group-sm>.btn, .btn-sm {
    padding: .5rem 1rem;
    font-size: .875rem;
    border-radius: .2rem;
}

img, svg {
    max-width: 100%;
    width: auto;
    height: auto;
}

.hide-from-alv-app{
    display: none !important;
}

.uab-form .application-form {
    --form-main-color: var(--transition-color-start, #3b9685);
    --main-color: var(--form-main-color, var(--transition-color-dark, #338677));
    --form-active-color: var(--transition-color-dark, #338677);
    --form-secondary-color: var(--transition-color-end, #85a8a2);
    --form-background-color: #FFFFFF;
    --border-radius: 10px;
}
.uab-form button.application-form-btn.btn-primary {
    --form-main-color: var(--transition-color-start, #3b9685);
    --form-active-color: var(--transition-color-dark, #338677);
}

.uab-form .btn-outline-primary {
    --bs-btn-color: var(--form-main-color, #0d6efd);
    --bs-btn-border-color: var(--form-main-color, #0d6efd);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--form-main-color, #0d6efd);
    --bs-btn-hover-border-color: var(--form-main-color, #0d6efd);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--form-main-color, #0d6efd);
    --bs-btn-active-border-color: var(--form-main-color, #0d6efd);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: var(--form-main-color, #0d6efd);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--form-main-color, #0d6efd);
    --bs-gradient: none;
}

.uab-form .form-check-input:checked {
    background-color: var(--form-main-color, #0d6efd);
    border-color: var(--form-main-color, #0d6efd);
}

.uab-form .form-check-input[type=checkbox]:indeterminate {
    background-color: var(--form-main-color, #0d6efd);
    border-color: var(--form-main-color, #0d6efd);
}

.uab-form .form-switch .form-check-input:focus {
    border-color: var(--form-secondary-color, var(--transition-color-end, #85a8a2));
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2385a8a2'/%3e%3c/svg%3e");
}

.uab-form .form-switch .form-check-input:checked:focus{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

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


/* custom tooltip */
.custom-tooltip {
    position: relative;
    cursor: default;
}

.custom-tooltip .custom-tooltiptext {
    position: absolute;
    background-color: #555;
    color: #fff;
    text-align: left;
    padding: 1.5rem;
    border-radius: 6px;
    z-index: 1020;
    transition: opacity .6s;
}

.custom-tooltip .custom-tooltiptext,
.custom-tooltip .custom-tooltip-legend::after {
    visibility: hidden;
    opacity: 0;
    transition: opacity .6s;
}

.custom-tooltip:is(:hover, :focus, :focus-within) .custom-tooltiptext,
.custom-tooltip:is(:hover, :focus, :focus-within) .custom-tooltip-legend::after  {
    visibility: visible;
    opacity: 1;
}

.custom-tooltip-form {
    bottom: 0%;
    left: 0;
    transform: translate(0, calc(100% + 0.5rem));
}

.custom-tooltip .custom-tooltip-legend {
    position: relative;
    display: inline-block;
}

.custom-tooltip .custom-tooltip-legend::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    bottom: -7px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}


/* pagination*/
.UAbFormacaoAlvV1 .pagination a {
    color: var(--transition-color-dark, #227364);
    background-color: white;
    border: 1px solid #ddd;
    padding: 5px 10px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.UAbFormacaoAlvV1 .pagination a:is(:hover,:focus, :active) {
    background-color: var(--transition-color-dark, #227364);
    color: white;
    border-color: var(--transition-color-dark, #227364);
}
.UAbFormacaoAlvV1 .pagination .active a {
    background-color: var(--transition-color-start, #207299);
    color: white;
    border-color: var(--transition-color-start, #207299);
}

.UAbFormacaoAlvV1 .pagination{
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.UAbFormacaoAlvV1 .pagination li a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.UAbFormacaoAlvV1 .table-component-content.table-responsive tfoot{
    font-size: 0.9rem;
}