.body-bg {
    position: relative!important; flex: 1; background-image: url('/images/bg.jpg'); 
    background-size:cover; background-position: center; background-repeat: no-repeat
}

body {
    color:#414141;
    margin: 0; padding: 0; min-height: 100vh; /* Ocupa no mínimo a altura total da tela */ 
    display: flex; flex-direction: column;
    font-family: 'Gilroy', GilroyW05-SemiBold, arial, helvetica, clean, sans-serif;  font-weight: 300; 
}
/* Custom CSS */
h1 { font-size: 26px; line-height: 3.1rem }
h2 { font-size: 22px; line-height: 2.7rem } 
h3 { font-size: 18px; line-height: 2.5rem }
h5 { font-size: 16px; line-height: 2.1rem }
h6 { font-family: 'Gilroy', GilroyW05-Regular, sans-serif, helvetica, arial, clean; font-size: 1.8rem; line-height: 14px }

.navbar a:hover, .navbar button:hover {
    text-decoration: underline;
}

b { font-weight: bold!important; }

.main-card a { color: #414141; font-weight: 600; color: #414141 }
.main-card a:hover { color: rgb(255, 55, 0) }

.footer { color: #fff; background-color: #414141!important; padding: 30px 0 }
.footer .logo { width: 144px; height: auto; filter: brightness(0) invert(1) }

/* validation messages */
.text-danger { color: rgb(255, 55, 0)!important; }
.validation-summary-errors { position: relative!important; width: 100%; font-weight: bold;}
.validation-summary-errors ul { list-style: none; padding-left: 0px; }
.field-validation-error.text-danger { font-size: 14px; position: absolute; right: 12px; top: 2px; font-weight: bold; }

/* line that divides the login form */
.login-form { position: relative}
.login-form > div:first-child { border-right: 1px solid #ddd }

/* buttons */
.button, .btn-primary, .btn-secondary { 
    border: 0; 
    border-radius: 999px;
    padding: .375em 1em; 
    font-size: 1.2rem; 
    font-weight: 600; 
    text-align: center;
    color: #fff;
}

.btn-primary { background-color: rgb(255, 55, 0); min-width: 100px; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: rgb(233, 51, 0)!important; }

.btn-secondary { background-color: #414141; min-width: 100px; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: #a5a5a5!important;  }

input:focus:not([type="checkbox"]), button:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgb(255, 55, 0)!important;
    border-color: rgb(222, 226, 230)!important;
}

input[type="checkbox"] {
    accent-color: #ff3700;
    transform: scale(1.3);
    margin-right: 4px; margin-left: 4px;
}

.btn-danger {
    color: #fff!important;
}

/* at the login form, the secondary button should have a yellow background when hover */
#external-account .btn-secondary:hover, #external-account .btn-secondary:focus { background-color: #ffc700!important; color: #414141 }
#external-account .btn-secondary:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #ffc700!important;
    border-color: rgb(222, 226, 230)!important;
}

/* profile manage - personal data form */
.personal-data-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px }
.nav-pills .nav-link.active { background-color: rgb(255, 55, 0) }

/* Footer*/
.footer .nav { display: flex; gap: 13px }
.footer .nav a { color:#f1f1f1}
.footer .container { display: flex; align-items: center; justify-content: space-between }
.footer .container::after { content: ""; min-width:144px }

@media(max-width: 768px) {
    .login-form>div:first-child { border-right: 0 }

    /* Footer*/
    .footer .container { justify-content: space-around }
    .footer .container::after { display: none }
    .footer .nav a { font-size: 12px }
    .footer .nav { gap: 13px }
    
}