* {
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

.none {
    display: none !important;
}

html, body {
    margin: 0 !important;
    /* scrollbar-gutter: stable; */
}

a.logo {
    transition: .3s;
}

a.logo:hover {
    transform: scale(1.05);
}

#action-menu-toggle-0,
#action-menu-toggle-0 .caret, 
#action-menu-toggle-0 .userbutton
{
    transition: .3s;
}

#action-menu-toggle-0:hover .userbutton,
#action-menu-toggle-0:hover .caret {
    transform: translateY(-2px);
}

button {
    transition: .25s !important;
}

.breadcrumb {
    --gap: 5px;
    gap: var(--gap);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.breadcrumb .arrow.sep {
    font-size: 10px !important;
}

.breadcrumb li a {
    transition: .25s;
}

.breadcrumb li a:hover {
    transform: translateY(-1px);
}

a:not(.link-legenda, .btn-nav, .btn-danger, .qnbutton)
{
    color: #014698 !important;
}

a:not(.link-legenda, .btn-nav, .btn-danger, .qnbutton):hover
{
    color: #162c6a !important;
}

fieldset a,
fieldset a span {
    transition: .25s;
    display: block;
}

fieldset a:hover,
fieldset a:hover span
{
    color: #162c6a !important;
    /* transform: translateY(-1px) !important; */
}

.activityinstance {
    width: max-content !important;
}

/* body {
    position: relative;
} */
/* 
body::before {
    content: "";
    position: absolute;
    inset: 0;

    background: black;

    -webkit-mask: url("/projeto_questionario/view/img/footerimg.png") no-repeat center;
    mask: url("/projeto_questionario/view/img/footerimg.png") no-repeat center;

    -webkit-mask-size: cover;
    mask-size: cover;
} */

/* body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: black;

    -webkit-mask: url("/projeto_questionario/view/img/footerimg.png") no-repeat center;
    mask: url("/projeto_questionario/view/img/footerimg.png") no-repeat center;

    -webkit-mask-size: cover;
    mask-size: cover;

    z-index: 1;
}

body > * {
    position: relative;
    z-index: 1;
} */

.region-main-centered { 
    padding: 0 70px;
    margin-top: 40px;
}

.no-transition {
    transition: none !important;
}

#region-main-box {
    width: 100% !important;
}

#region-main-box {
    margin: 0 !important;
}

.fade-out {
    opacity: 0;
}

.d-flex {
    display: flex;
    gap: 8px;
    align-items: center;
}

.d-flex > label {
    margin: 0 !important;
}

.d-flex > button {
    margin: 0;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: end;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.white-space-nowrap {
    white-space: nowrap !important;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    /* margin-bottom: 0.25rem (4px); */
    margin-bottom: 0.25rem;
}

.mb-2 {
    /* margin-bottom: 0.5rem (8px); */
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem !important;
    /* margin-bottom: 1rem (16px) */
}

.mb-4 {
    margin-bottom: 1.5rem;
    /* margin-bottom: 1.5rem (24px) */
}

.mb-5 {
    margin-bottom: 3rem;
    /* margin-bottom: 3rem (48px) */
}

.mt-3 {
    margin-top: 1rem !important;
    /* margin-top: 1rem (16px) */
}

.mt-4 {
    margin-top: 1.5rem !important;
    /* margin-top: 1.5rem (24px) */
}

.mt-5 {
    margin-top: 3rem !important;
    /* margin-top: 3rem (48px) */
}

.btn-danger,
a.btn-danger {
    background-color: white !important;
    color: red !important;
}

.btn-danger:hover,
a.btn-danger:hover {
    background-color: red !important;
    color: white !important;
}

.actions-navegation {
    display: flex;
    margin: 0;
    padding: 0;
    gap: 6px;
    padding: 10px 0;
}

.actions-navegation li a,
.actions-navegation li button {
    display: block;
    border: 1px solid black;
    min-width: 20px;
    text-align: center;
    font-size: 14px;
    /* background: #122235;
    background: #309cfb;
    color: #00f70a; */
    font-weight: bold;
    font-family: system-ui;
    border-radius: 6px;
    cursor: pointer;
    background: #1E4F9C; /* azul principal */
    color: #fff;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Hover */
.actions-navegation li a:hover,
.actions-navegation li button:hover {
    background: #2F6FD6; /* azul mais claro */
}

/* Ativo (tipo página atual) */
.actions-navegation li a.ativo,
.actions-navegation li button.ativo {
    background: #2FA84F; /* verde principal */
}

/* Hover do ativo */
.actions-navegation li a.ativo:hover,
.actions-navegation li button.ativo:hover {
    background: #1F7A3A;
}

.content-table {
    position: relative;
}

.content-navegation-table {
    position: sticky;
    bottom: 0;
    background: #ffffffd4;
    border-radius: 6px;
}

/* .content-navegation-table::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;

    border-radius: 6px;
    box-shadow: 0 -6px 8px rgba(0,0,0,0.2);
    pointer-events: none;
} */

.navegation-title {
    color: var(--secondary-color);
    font-weight: bold;
    font-family: system-ui;
    font-size: 16px;
}

/* @media (max-width: 1300px) {
    .container-fluid.breadcrumb {
        background-color: #eee;
    }
} */

.circle {
    --percent: 0;
    --w: 120px;

    width: var(--w);
    height: var(--w);

    border-radius: 50%;

    background: conic-gradient(
    #2196f3 calc(var(--percent) * 1%),
    #e0e0e0 0
    );

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    animation: fill 1s ease-in-out;
}

.circle::before {
  content: "";
  --w: 85px;

  width: var(--w);
  height: var(--w);

  background: white;
  border-radius: 50%;
  position: absolute;
}

.circle > span {
    z-index: 1;
}

.wmx {
    width: max-content !important;
}

.accesshide {
    display: none;
}

ul.breadcrumb {
    flex-wrap: wrap;
}

@keyframes fill {
  from {
    background: conic-gradient(#2196f3 0%, #e0e0e0 0%);
  }
}

@media (max-width: 980px) {
    .region-main-centered {
        margin-top: 30px;
    }

    /* body {
        border: 1px solid red;
    } */
}

@media (max-width: 900px) {
    .region-main-centered {
        margin-top: 30px;
    }
}

@media (max-width: 800px) {
    .region-main-centered {
        padding: 0 40px;
    }

    #region-main {
        padding: 0 10px !important;
        /* padding: clamp(10px, 5vw, 40px) !important; */
    }
}

@media (max-width: 700px) {
    .container-fluid.breadcrumb {
        background-color: #eee;
        display: flex;
        justify-content: center;
    }

    .container-fluid.breadcrumb #page-navbar {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 650px) {
    /* .region-main-centered {
        margin-top: 20px;
    } */
    .container-fluid.breadcrumb {
        padding: 0 !important;
    }

    ul.breadcrumb {
        padding: 6px 12px !important;
    }
}

@media (max-width: 600px) {
    .region-main-centered {
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .circle.circle-small-sm {
        --w: 100px;

        width: var(--w);
        height: var(--w);
        min-width: var(--w);

        /* border-radius: 50%;

        background: conic-gradient(
            #2196f3 calc(var(--percent) * 1%),
            #e0e0e0 0
        );

        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        animation: fill 1s ease-in-out; */
    }

    .circle.circle-small-sm::before {
        content: "";
        --w: 70px;

        width: var(--w);
        height: var(--w);
        min-width: var(--w);

        /* background: white;
        border-radius: 50%;
        position: absolute; */
    }
}

@media (max-width: 500px) {
    .region-main-centered {
        padding: 0 10px;
    }
}

@media (max-width: 400px) {
    .circle.circle-small-sm {
        --w: 80px;

        width: var(--w);
        height: var(--w);
        min-width: var(--w);

        /* border-radius: 50%;

        background: conic-gradient(
            #2196f3 calc(var(--percent) * 1%),
            #e0e0e0 0
        );

        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        animation: fill 1s ease-in-out; */
    }

    .circle.circle-small-sm::before {
        content: "";
        --w: 60px;

        width: var(--w);
        height: var(--w);
        min-width: var(--w);

        /* background: white;
        border-radius: 50%;
        position: absolute; */
    }
}

@media (max-width: 350px) {
    .circle.circle-small-sm {
        --w: 70px;

        width: var(--w);
        height: var(--w);
        min-width: var(--w);

        /* border-radius: 50%;

        background: conic-gradient(
            #2196f3 calc(var(--percent) * 1%),
            #e0e0e0 0
        );

        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        animation: fill 1s ease-in-out; */
    }

    .circle.circle-small-sm::before {
        content: "";
        --w: 50px;

        width: var(--w);
        height: var(--w);
        min-width: var(--w);

        /* background: white;
        border-radius: 50%;
        position: absolute; */
    }

    .no-p-350 {
        padding: 0 !important;
    }
}

@media (max-width: 320px) {
    :root {
        --width-card-redacao: 100%;
    }

    #page-content {
        margin-top: 0 !important;
    }

    #card-barra-lateral {
        display: none;
    }
    
    #region-main {
        margin-top: 10px !important;
    }

    .container-fluid {    
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    ul.breadcrumb {
        font-size: 13px;
    }

    ul.breadcrumb li {
        display: flex;
    }

    ul.breadcrumb li a,
    ul.breadcrumb li span {
        font-size: 10px !important;
    }
}

/* Configuração geral de todos os alerts */
.alert {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    padding: 10px;
}

.alert-absolute {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.alert-filler {
    position: relative;
    min-height: 46px;
}

/* SUCCESS */
.alert-success {
    background: #EAF7EE;
    border-color: #2E7D4F;
    color: #1F5135;
}

/* ERROR */
.alert-danger {
    background: #FCEBEC;
    border-color: #B23A48;
    color: #6E1F28;
}

/* WARNING */
.alert-warning {
    background: #FFF7E8;
    border-color: #C58B1B;
    color: #6B4B00;
}

.alert.alert-sm {
    font-size: 13px;
}

.alert.alert-sm .alert-closer {
    padding: 3px;
}

.alert.alert-sm .alert-closer .x {
    --tamanho-icone: 10px;
}

/* Alerta de erro */
/* .alert.alert-danger { */
    /* Cores */
    /* background-color: rgb(226, 110, 110); */
    /* color: black; */
/* } */

/* Alerta de sucesso */
/* .alert.alert-success { */
    /* Cores */
    /* background-color: rgb(156, 216, 156); */
    /* color: black; */
/* } */

/* O Botão de fechar o alert */
.alert-closer {
    width: max-content;
    margin: 0;
    padding: 6px;
    /* background: #74707030 !important; */
    background: #a39c9c30 !important;
    border-radius: 50%;
    border: none;
    outline: none !important;
}

.alert-closer:hover {
    background: #5e5e5e30 !important;
}

.x {
    --tamanho-icone: 14px;
    --grossura-icone: 1px;
    --cor-icone: black;

    display: block;
    position: relative;
    width: var(--tamanho-icone);
    height: var(--tamanho-icone);
    top: -1px;
}

.x::before,
.x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--grossura-icone); 
  background: var(--cor-icone);
}

.x::before {
  transform: rotate(45deg);
}

.x::after {
  transform: rotate(-45deg);
}

.btn-voltar {
    background: #1e3a8a;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
}

.btn-voltar:hover {
    background: #162c6a;
    transform: translateY(-2px);
}

.alert-success .x {
    --cor-icone: rgb(255, 255, 255);
}

ul li a.marked {
    background-color: #eff5ff;
    color: #243564;
    border-left: 3px solid #243564;
    padding-left: 24px !important;
    border-radius: var(--border-radius);
}

#region-main {
    padding: 0 70px !important;
    margin-top: 40px !important;
}

textarea.input {
    width: 100%;
    min-height: 150px;
}

.btn.btn-similar-link {
    background: white;
    color: var(--secondary-color);
    border: none;
    text-transform: none;
    margin: 0 0 10px 5px;
    outline: none;
}

.btn.btn-similar-link:hover {
    background-color: #fcfcfc;
}

.btn.btn-similar-link:focus {
    box-shadow: none;
}

.btn.btn-similar-link:active {
    background-color: #f3f3f3;    
}

.btn.btn-similar-link:disabled {
    background-color: #eeeeee;
}

.btn-voltar span {
    color: white;
}

.content-legenda span {
    color: white;
}

.general-informations {
    margin-top: 25px;
}

.general-informations div {
    margin-bottom: 5px;
}

a.btn-nav {
    align-items: center !important;
}

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

/* * {
    outline: 1px solid red;
} */

/* .card {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
} */

@media (max-width: 1400px) {
    ul li a.marked {
        padding-left: 10px !important;
    }
}

@media (max-width: 1000px) {
    #region-main {
        padding: 0 45px !important;
    }
}

@media (max-width: 979px) {
    #region-main {
        margin-top: 0 !important;
    }
}

@media (max-width: 825px) {
    #region-main {
        padding: 0 !important;
        margin-top: 15px !important;
    }
}

@media (max-width: 500px) {
    .container-fluid {
        /* padding: 0 5px !important; */
    }

    #region-main {
        /* margin-top: 10px !important; */
        /* padding: 0 5px !important; */
    }
}

@media (max-width: 450px) {
    .container-fluid {
        padding: 0 !important;
    }

    #region-main {
        padding: 0 !important;
        margin-top: 0 !important;
    }

    #page-content {
        margin-top: 0 !important;
    }
}

@media (max-width: 350px) {
    .container-fluid {
        padding: 0 !important;
    }
}

@media (max-width: 320px) {
    #region-main {
        padding: 0px 8px !important;
    }
}