/* =============================================== */
/* GENERAL */
/* =============================================== */

:root {

    /* ----> Color variables <---- */

    --color-main: #87A1AB;
    --color-font-main: #000000;
    --color-font-hover: #ffffff;
    --color-sec1: #90A59A;
    --color-sec1-detail: #C1D8BF;
    --color-sec2: #E4897B;
    --color-sec2-detail: #E8BAB3;
    --color-alternative: #F3F0DD;
    --color-detail: #797070;
    --color-detail-sec: #6f7c81;
    --color-detail-sec-hover: #7a878c;
    --color-detail-lighter: #dddddd;
    --color-neutral: #ffffff;
    --color-gr-sec2-sec1: linear-gradient(90deg, rgba(228,137,123,1) 0%, rgba(144,165,154,1) 100%);
    --color-gr-alt-main: linear-gradient(180deg, rgba(243,240,221,1) 0%, rgba(135,161,171,0.5) 100%);
    --color-gr-det-dark: radial-gradient(circle, rgba(121,112,112,1) 0%, rgba(59,67,75,1) 100%);
    --color-gr-sec1-dark: radial-gradient(circle, rgba(144,165,154,1) 0%, rgba(61,75,59,1) 100%);

    --color-whatsapp: #25D366;
    --color-input-hover: #1E90FF;
    --color-success: #006400;
    --color-alert: #ca5b11;
    --color-error: #8B0000;
    --color-lighter-hover: #bbe3f3;


    /* ----> Font variables <---- */
    --bold: 800;
    --base-font-size: 10px;
    --def-font-size: 3rem;


    /* ----> Size variables <---- */
    --screen-size-tablet: 1064px;
    --screen-size-mobile: 768px;

    --def-space: 2.5rem;

    --card-width: 48rem;
    --card-height: 30rem;

    --def-icon-container-width: 13rem;

    --header-inner-height: 14rem;

    --header-padding: calc(var(--header-inner-height) * 0.14); /* 1,96 */
    --header-total-height: calc(var(--header-inner-height) + (var(--header-padding) * 2)); /* 17,92 */
    /* Aqui a intenção é que o tamanho do logo + padding (top e bottom) fique exatamente igual à altura interna do header */
    --logo-inner-height: calc(var(--header-inner-height) * 0.85); /* 11,9 */
    --logo-padding: calc(var(--header-inner-height) * 0.075); /* 1,05 */

    --def-container-width: 130rem;
    --def-cont-topbot-pad: 10rem;

    --floating-button-size: 6rem;
    --def-circle-size: 12rem;

    /* Aqui usa-se um cálcul,o baseado na largura da view port, para que o tamanho ajuste-se automaticamente ao mudar a largura da tela */
    --slideshow-base-height: calc(65vw / 2);


    /* ----> Effects variables <---- */
    --def-opacity: 0.5;
    --transition-time: 0.75s;
    --shadow:#000000 4px 4px 10px;
}



/* =============================================== */
/* SEMANTIC STYLES */
/* =============================================== */

html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Main font", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: calc(var(--def-font-size) * 0.6);
}

h1 {
    font-size: calc(var(--def-font-size) * 2.6667);
}

h2 {
    font-size: 6rem;
    margin: 2rem 0;
}

h3 {
    font-size: 5rem;
	text-wrap: nowrap;
    margin: 2rem 0;
}

h4 {
    font-size: 3.5rem;
	text-wrap: nowrap;
    font-weight: normal;
    margin: 2rem;
}

p {
    font-size: var(--def-font-size);
}

a {
    text-decoration: none;
    text-wrap: nowrap;
    font-size: calc(var(--def-font-size)*0.8333333333333333);
    color: var(--color-font-main);
}

a:hover {
    color: var(--color-font-hover);
}

ul {
	padding-inline-start: 0;
    list-style-type: none;
	margin-block: 0;
}

section {
    box-sizing: border-box;
}

footer {
    padding: 4rem var(--def-space) 6rem var(--def-space);
}

img {
    height: inherit;
}

table {
    border-collapse: collapse;
    padding: 2rem;
    width: max-content;
}

table caption {
    display: none;
    /* font-weight: calc(var(--bold)*0.9);
    padding: var(--def-space);
    font-size: var(--def-font-size); */
}

td {
    border: 1px solid var(--color-detail-lighter);
    text-align: left;
    padding: 1rem;
}

thead tr {
    background-color: var(--color-detail-sec-hover);
    color: var(--color-neutral);
    position: sticky;
    top: 0;
}

thead tr th {
    font-weight: calc(var(--bold)*0.8);
    text-align: left;
    padding: 1rem;
    border: 1px solid var(--color-neutral);
}

tbody tr:hover {
    background-color: var(--color-lighter-hover) !important;
}

tbody tr:nth-child(odd) {
    background-color: var(--color-neutral);
}
  
tbody tr:nth-child(even) {
    background-color: var(--color-alternative);
}



/* =============================================== */
/* GENERIC CLASSES */
/* =============================================== */

.sfc-bg-to-colorsec2::before {
    background: var(--color-sec2);
}

.sfc-bg-to-colorsec1::before {
    background: var(--color-sec1);
}

.sfc-floating-button,
.sfc-wapp-button,
.sfc-up-button {
    height: var(--floating-button-size);
    width: var(--floating-button-size);
    position: fixed;
    border-radius: 50%;
    box-shadow: var(--shadow);
    z-index: 90;
    right: calc(var(--floating-button-size) / 2);
}

.sfc-floating-button > a,
.sfc-wapp-button > a,
.sfc-up-button > a {
    height: inherit;
    width: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfc-floating-button > a > img,
.sfc-wapp-button > a > img,
.sfc-up-button > a > img {
    height: 65%;
}

.sfc-floating-button > a > svg:hover,
.sfc-wapp-button > a > svg:hover,
.sfc-up-button > a > svg:hover {
    fill: var(--color-detail);
}

.sfc-ul-default {
	padding-inline-start: 6rem;
    list-style-type: disc;
    font-size: var(--def-font-size);
    list-style-image: url(https://solvitassessoria.com.br/images/icons/icon-check.svg);
}

.sfc-bg-main {
    background-color: var(--color-main);
}

.sfc-bg-colorsec2 {
    background-color: var(--color-sec2);
}

.sfc-bg-colorsec1 {
    background-color: var(--color-sec1);
}

.sfc-bg-colorsec1-detail {
    background-color: var(--color-sec1-detail);
}

.sfc-bg-colorsec2-detail {
    background-color: var(--color-sec2-detail);
}

.sfc-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--bold);
    color: var(--color-font-main);
    border-radius: 1rem;
    padding: 0 1.2rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    min-width: 19rem;
    border: solid var(--color-detail) 1px;
    height: 6.2rem;
    font-size: 2rem;
    text-transform: uppercase;
}

.sfc-button:hover {
	border-color: var(--color-font-hover);
    color: var(--color-font-hover);
    cursor: pointer;
}

.sfc-button::before {
    content: '';
    width: 0;
    height: 350%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: var(--transition-time);
    z-index: -1;
}
       
.sfc-button:hover::before {
    width: 100%;
}

/* Default fade animation */
.sfc-fade {
    animation-name: fade;
    animation-duration: var(--transition-time);
    transition: var(--transition-time);
}
  
@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* Default styles for background images */
.sfc-bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sfc-color-inverted, .sfc-color-inverted * {
	color: var(--color-font-hover);
}

.sfc-color-inverted:hover, .sfc-color-inverted a:hover, .sfc-color-inverted a > span:hover {
    color: var(--color-font-main);
}

.sfc-icon {
    height: 3rem;
    padding: 0.5rem;
    margin: auto 0;
}

.sfc-width-fitcontent {
    width: fit-content;
}

.sfc-minwidth-fitcontent {
    min-width: fit-content;
}

.sfc-margin-right {
    margin-right: var(--def-space);
}

.sfc-color-blue {
    color: var(--color-main);
}

.sfc-display-none {
    display: none;
}

.sfc-bold {
    font-weight: var(--bold);
}

.sfc-sec-ff {
    font-family: sans-serif, "Main font", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.sfc-imgin-button > a > img {
    height: 3rem;
    padding: 0.5rem;
    margin: auto 0;
}

.sfc-imgin-button > a {
    display: none;
    width: 100%;
    justify-content: center;
    margin-inline: 0;
    margin: 0;
    padding: 0;
}

.sfc-imgin-button > span {
    margin-inline: 0;
    font-size: 1.8rem !important;
}

.sfc-imgin-button:hover > span {
    display: none;
}

.sfc-imgin-button:hover > a {
    display: flex;
}

.sfc-imgin-button::before {
    background: var(--color-whatsapp);
}

.sfc-emphasis {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sfc-emphasis:hover {
    transform: scale(1.05); /* Aumenta o tamanho em 5% */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
}

.sfc-source-link {
    color: var(--color-detail);
}

.sfc-source-link:hover {
    text-decoration: underline;
    color: var(--color-font-main);
}



/* =============================================== */
/* SPECIFIC CLASSES */
/* =============================================== */

/* Header - begin */

.sfc-hamb-menu {
    line-height: 5rem;
    margin-block: 0;
}

.sfc-hamb-menu > li {
    padding: 1rem;
}

.sfc-hamb-menu > li > a {
    display: flex;
}

.sfc-hamb-menu > li > a:hover {
    background-color: var(--color-sec1);
}

.sfc-hamb-menu > li > a > img {
    margin-right: 1rem;
}

.sfc-nav-menu > ul > li > a {
    margin-inline: 2.4rem;
}

.sfc-logo { /* 1,96 */
    height: var(--logo-inner-height);
    padding-top: var(--logo-padding);
    padding-bottom: var(--logo-padding);
    flex-grow: 9;
}

.sfc-logo > img {
    height: inherit;
}

/* Header - end */

/* About - begin */

.sfc-img-large-height {
    max-height: 75rem;
}

/* About - end */

/* Services - begin */

.sfc-card-container-left {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: var(--color-neutral);
    /* width: 100%; */
    justify-content: space-between;
    margin: calc(var(--def-space) * 2) 0;
    border: solid var(--color-sec1) 1px;
    border-radius: 10px 0 0 10px;
}

.sfc-card-container-right {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: var(--color-neutral);
    /* width: 100%; */
    justify-content: space-between;
    margin: calc(var(--def-space) * 2) 0;
    border: solid var(--color-sec2) 1px;
    border-radius: 0 10px 10px 0;
}

.sfc-card > img {
    box-sizing: border-box;
    max-width: var(--def-icon-container-width);
    padding: calc(var(--def-icon-container-width) * 0.15);
}

.sfc-card-icon-container {
    min-width: var(--def-icon-container-width);
    background-position: center;
    background-repeat: no-repeat;
}

.sfc-card article {
    height: inherit;
    min-width: calc(var(--card-width) - var(--def-icon-container-width));
    box-shadow: var(--shadow);
}

/* Services - end */

/* How it works - begin */

.sfc-down-arrow > div {
  width: 2rem;
  height: 2rem;
  border-top: 0.4rem solid var(--color-detail);
  border-left: 0.4rem solid var(--color-detail);
  transform-origin: center;
  transform: rotate(-135deg);
  opacity: 0.5;
}

.sfc-down-arrow > div::after {
  content: "";
  display: block;
  width: 0.4rem;
  height: 7.5rem;
  background-color: var(--color-detail);
  transform: rotate(-45deg) translate(2.5rem, 1rem);
}

.sfc-down-arrow {
	width: 11rem;
}

/* How it works - end */

/* Depoiments - begin */

.sfc-depoiment-text {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 3rem;
    font-weight: 100;
    line-height: 1.2em;
}

.sfc-depoiment-author, .sfc-depoiment-author a {
    font-size: 2rem;
    line-height: 2.5rem;
}

.sfc-avatar-img {
    height: 20rem;
    width: 20rem;
    border-radius: 50%;
    margin: calc(var(--def-space) * 2);
    border: solid var(--color-sec2) 0.5rem;
    z-index: 10;
}

/* Depoiments - end */

/* Tech - begin */

.sfc-img-medium-height {
    height: 55rem;
}

/* Tech - end */

.sfc-card-container-left > article,
.sfc-card-container-right > article,
.sfc-card-container > article {
    font-size: 1.4rem;
    padding: 2rem;
}

.sfc-card-container-left > article > p,
.sfc-card-container-right > article > p,
.sfc-card-container > article > p {
    font-size: 2rem;
    max-width: 75rem;
    margin: 0 auto;
}

/* Footer - begin */

.sfc-logo-footer {
	height: 20rem;
	width: auto;
}

.sfc-centralized-paragraph {
	padding: calc(var(--def-space) * 0.25) 0;
    font-size: calc(var(--def-font-size) * 0.6);
    text-align: center;
    max-width: 90vw;
    margin: 0 auto;
}

.sfc-centralized-paragraph > a {
    text-decoration: underline;
    font-size: calc(var(--def-font-size) * 0.6);
}

.sfc-secundary-menu {
    line-height: calc(var(--def-space) * 2);
}

.sfc-secundary-menu > p {
    font-size: calc(var(--def-font-size) * 0.6);
    margin: 0;
}

.sfc-secundary-menu > li > a {
    margin-inline: 0;
}

/* Footer - end */

.sfc-container {
    max-width: var(--def-container-width);
    margin: 0 auto;
    padding: var(--def-cont-topbot-pad) var(--def-space);
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    row-gap: 5rem;
}

.sfc-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sfc-flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sfc-flex-wrap {
    flex-wrap: wrap;
}

.sfc-padding-topbottom {
    padding-top: var(--def-cont-topbot-pad);
    padding-bottom: var(--def-cont-topbot-pad);
}

.sfc-padding-topbottom-ralf {
    padding-top: var(--def-cont-topbot-pad);
    padding-bottom: var(--def-cont-topbot-pad);
}

.sfc-padding-top {
    padding-top: var(--def-cont-topbot-pad);
}

.sfc-padding-default {
    padding-top: var(--def-cont-topbot-pad);
    padding-bottom: var(--def-cont-topbot-pad);
    padding-left: var(--def-space);
    padding-right: var(--def-space);
}

.sfc-padding-top-ralf {
    padding-top: calc(var(--def-cont-topbot-pad) / 2);
}

.sfc-padding-bottom-ralf {
    padding-bottom: calc(var(--def-cont-topbot-pad) / 2);
}

.sfc-padding-leftright-double {
    padding-left: calc(var(--def-space) * 2);
    padding-right: calc(var(--def-space) * 2);
}

.sfc-padding-topbottom-0 {
    padding-top: 0;
    padding-bottom: 0
}

.sfc-padding-bottom {
    padding-bottom: var(--def-cont-topbot-pad);
}

.sfc-padding-bottom-double {
    padding-bottom: calc(var(--def-cont-topbot-pad) * 2);
}

.sfc-padding-bottom-0 {
    padding-bottom: 0;
}

.sfc-padding-top-0 {
    padding-top: 0;
}

.sfc-padding-sides {
    padding-left: var(--def-space);
    padding-right: var(--def-space);
}

.sfc-align-start {
    justify-content: flex-start !important;
    align-items: start !important;
}

.sfc-quotes {
    font-size: 50rem;
    margin-block-start: 0;
    margin-block-end: 0;
    color: var(--color-sec1);
    opacity: var(--def-opacity);
}

.sfc-slideshow {
    height: var(--slideshow-base-height);
    min-width: 100%;
    justify-content: space-between;
}

.sfc-slide {
    height: inherit;
    display: none;
    justify-content: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-content: space-evenly;
}

.sfc-slide > div {
    align-self: center;
}

.sfc-dot-container {
    margin: calc(var(--def-space) * (-2)) 0 calc(var(--def-space) * 2);
    text-align: center;
}

.sfc-dot-container > .sfc-dot {
    cursor: pointer;
    height: var(--def-space);
    width: var(--def-space);
    margin: 0 calc(var(--def-space) / 5);
    background-color: var(--color-detail);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
    transition: var(--transition-time);
}

.sfc-dot-active, .sfc-dot:hover {
    background-color: var(--color-main) !important;
    opacity: 1 !important;
}

.sfc-prev, .sfc-next {
    cursor: pointer;
    padding: 2.08rem;
    color: var(--color-main);
    font-weight: bold;
    font-size: 2.4rem;
    transition: var(--transition-time);
    opacity: var(--def-opacity);
}

.sfc-prev {
    border-radius: 0 3px 3px 0;
}

.sfc-next {
    border-radius: 3px 0 0 3px;
}

.sfc-prev:hover, .sfc-next:hover {
    background-color: rgba(0,0,0,0.5);
    opacity: 1;
}

.sfc-circle, .sfc-circle-small {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: 2rem;
    border-style: solid;
    border-width: calc(1rem / 2);
    border-radius: 50%;
    transition: var(--transition-time);
}

.sfc-circle {
    height: var(--def-circle-size);
    width: var(--def-circle-size);
}

.sfc-circle-small {
    height: calc(var(--def-circle-size) / 2);
    width: calc(var(--def-circle-size) / 2);
}

.sfc-column-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sfc-line-beyondcolormain {
    min-height: 1.2rem;
    width: calc(100% + 8rem);
    background-color: var(--color-main);
}

.sfc-line-beyondcolorsec1 {
    min-height: 1.2rem;
    width: calc(100% + 8rem);
    background-color: var(--color-sec1);
}

.sfc-line-beyondcolorsec2 {
    min-height: 1.2rem;
    width: calc(100% + 8rem);
    background-color: var(--color-sec2);
}

.sfc-line {
    min-height: 1.2rem;
    width: 100%;
    background-color: var(--color-main);
}

.sfc-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Escurece o fundo */
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.sfc-modal-content {
    background-color: var(--color-alternative);
    padding: 2rem;
    border-radius: 0.8rem;
    max-width: 100rem;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-left: 1rem;
    margin-right: 1rem;
}

.sfc-modal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.sfc-card {
    height: var(--card-height);
    width: var(--card-width);
    display: flex;
}

[data-idmodal] {
    cursor: pointer;
}

.sfc-card h4 {
    text-align: center;
}

.sfc-bg-colorsec1 h4,
.sfc-bg-colorsec2 h4 {
    color: var(--color-alternative);
}

.sfc-bg-colorsec1 ul,
.sfc-bg-colorsec2 ul {
    color: var(--color-alternative);
}

.sfc-card ul {
    font-size: calc(var(--def-font-size) - 0.5rem);
    margin: 0 calc(var(--def-space) * 2);
    list-style-type: disc;
}

.sfc-bg-gr-colorsec2tosec1::before {
    background: var(--color-gr-sec2-sec1);
}

.sfc-bg-gr-coloralttomain {
    background: var(--color-gr-alt-main);
}

.sfc-menuitem-active {
    text-decoration: underline;
    text-decoration-color: var(--color-detail);
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 0.2rem;
}

.sfc-header-container {
    box-sizing: border-box;
    padding: var(--header-padding);
    max-width: var(--def-container-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.sfc-hamburguer {
    display: none;
}

.sfc-hamburguer + label {
    cursor: pointer;
}

.sfc-hamburguer:checked ~ nav:first-of-type {
    display: block;
}

.sfc-hamburguer ~ nav:first-of-type {
    display: none;
    position: absolute;
    top:  calc(var(--header-total-height) + 1rem);
    right: 1rem;
    min-width: 25rem;
    border: solid var(--color-detail) 2px;
    /* border-top-width: 0; */
	padding: 1rem;
    border-radius: 1rem;
}

/* Criando a ponta do balão */
.sfc-hamburguer ~ nav:first-of-type::before {
    content: "";
    position: absolute;
    top: -2rem; /* Define a posição da ponta acima da navbar */
    left: 50%; /* Centraliza a ponta */
    transform: translateX(-50%);
    border-width: 1rem; /* Tamanho do triângulo */
    border-style: solid;
    border-color: transparent transparent var(--color-detail) transparent; /* Apenas a parte inferior visível */
}

.sfc-hamburguer ~ nav:first-of-type > ul > li > a {
    font-size: 1.8rem;
    text-transform: uppercase;
}

.sfc-def-margin {
    max-width: var(--def-container-width);
    margin: 0 auto;
}

/* Default = space-between, Tablet = center  */
.sfc-container-dsb-tc {
    display: flex;
    justify-content: space-between;
    padding: 3rem 0;
}

.sfc-container-dsb-tc > div {
    padding: 0 calc(var(--def-space) * 2);
}

.sfc-gap {
    gap: 5rem;
}

.sfc-card-container {
    display: flex;
    align-items: center;
    background-color: var(--color-neutral);
    /* width: 100%; */
    justify-content: space-between;
    margin: calc(var(--def-space) * 2) 0;
}

.sfc-wapp-button:hover {
    background-color: var(--color-whatsapp);
}

.sfc-width-100p {
    width: 100%;
}

.sfc-space-around {
    justify-content: space-around;
}

/* Estiliza a tela de loading */
.sfc-loading-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--color-alternative);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Spinner (animação de carregamento) */
.sfc-loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--color-main);
    border-top-color: var(--color-detail);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Keyframes para animação do spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ocultar loader após o carregamento */
.sfc-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0,75s ease-out;
}

.sfc-reveal {
    opacity: 0;
    transform: translateY(5rem); /* Começa um pouco abaixo */
    transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

/* Quando o elemento estiver visível na tela, a classe "active" será adicionada */
.sfc-reveal.sfc-reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.sfc-menu {
    background-color: var(--color-main);
    border-radius: 1rem;
    padding: 2rem;
    /* width: 90%; */
    width: 95%;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    overflow: auto;
}

.sfc-menu li {
    width: 100%;
}

.sfc-menu li a {
    width: -webkit-fill-available;
    line-height: 5rem;
    color: var(--color-neutral);
    font-weight: calc(var(--bold) - 50);
    display: flex;
    gap: 1rem;
}

.sfc-menu li a div {
    border-radius: 0.5rem;
    background-color: var(--color-detail-sec);
    padding: 0 var(--def-space);
}

.sfc-menu li a:hover div {
    background-color: var(--color-detail-sec-hover);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.sfc-menu li a div:nth-child(1) {
    flex-grow: 9;
}

.sfc-menu li a div:nth-child(2) {
    text-align: center;
    width: calc(var(--def-space)*2);
}

.sfc-input-container {
    display: flex;
    width: 100%;
    gap: 1rem;
    container-type: inline-size;
}

.sfc-input-container label {
    font-weight: calc(var(--bold)*0.8);
    font-size: calc(var(--def-font-size)*0.55);
}

.sfc-input-container:has(input[type="file"]) {
    align-items: center;
}

.sfc-input-container:has(input[type="password"]), .sfc-input-container:has(input[type="text"]) {
    position: relative;
    flex-direction: column;
    /* width: 90%; */
}

/* .sfc-input-container:has(input[type="password"]) label, .sfc-input-container:has(input[type="text"]) label {
    position: absolute;
    top: -1rem;
    left: 1rem;
    background: var(--color-main);
    padding: 0 0.5rem;
    color: var(--color-font-hover);
    font-size: calc(var(--def-font-size)*0.45) !important;
}*/

.sfc-input-container:has(input[type="file"]) label {
    display: inline-block;
    background-color: var(--color-detail-sec);
    padding: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: calc(var(--transition-time)/2);
    width: calc(var(--def-font-size)*6);
    color: var(--color-font-hover);
}

.sfc-input-container:has(input[type="file"]) label:hover {
    background-color: var(--color-detail-sec-hover);
}

.sfc-input-container input[type="password"],
.sfc-input-container input[type="text"],
.sfc-input-container input[type="date"] {
    appearance: none; /* Remove o estilo padrão do navegador */
    padding: 1rem;
    border: 2px solid var(--color-detail);
    border-radius: 0.5rem;
    font-size: calc(var(--def-font-size)*0.55);
    transition: border-color calc(var(--transition-time)/2) ease, box-shadow calc(var(--transition-time)/2) ease;
}

.sfc-input-container input[type="date"]:hover,
.sfc-input-container input[type="date"]:focus,
.sfc-input-container input[type="password"]:hover,
.sfc-input-container input[type="password"]:focus,
.sfc-input-container input[type="text"]:hover,
.sfc-input-container input[type="text"]:focus {
    border-color: var(--color-input-hover);
    box-shadow: 0 0 0.5rem rgba(30, 144, 255, 0.5);
}

.sfc-input-container input[type=file] {
    display: none;
}

/* Ícone do calendário */
.sfc-input-container input[type="date"]::-webkit-calendar-picker-indicator {
    background: url('../../images/icons/calendar.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity calc(var(--transition-time)/2) ease;
}

.sfc-input-container input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.sfc-input-container .sfc-admin-button {
    align-self: flex-end;
}

.sfc-admin-button {
    box-sizing: border-box;
    background: var(--color-detail) !important;
    color: var(--color-font-hover);
    font-size: calc(var(--def-font-size)*0.8333333333333333);
    font-weight: calc(var(--bold)*0.8);
    padding: calc(var(--def-space)*0.5) var(--def-space);
    width: 100%;
    border: none;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-time) ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: fit-content;
}

.sfc-admin-button:hover {
    transition: var(--transition-time);
    background: var(--color-gr-det-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
}

.sfc-admin-button:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.sfc-presentation-img {
    background-color: var(--color-main);
    width: 50%;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;

    & img {
        height: auto;
        width: 40vw;
    }
}

.sfc-height100vh {
    height: 100vh;
}

.sfc-app-screen {
    display: flex;
    height: 100vh;
}

.sfc-status-message {
    box-sizing: border-box;
    display: none;
    text-align: center;
    background-color: var(--color-detail);
    color: var(--color-neutral);
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    width: inherit;
    gap: 2rem;
    cursor: pointer;
    align-items: center;
    width: 100%;
}

.sfc-status-message-error {
    border-left: 1rem solid rgb(82, 0, 0);
}

.sfc-status-message-alert {
    border-left: 1rem solid rgb(167, 61, 0);
}

.sfc-status-message-success {
    border-left: 1rem solid rgb(0, 41, 0);
}

.sfc-status-message-error:hover {
    box-shadow: 0 0 1rem 0.5rem rgba(230, 32, 32, 0.7);
    border-color: rgb(224, 27, 27);
}

.sfc-status-message-alert:hover {
    box-shadow: 0 0 1rem 0.5rem rgba(219, 99, 19, 0.7);
    border-color: rgb(219, 99, 30);
}

.sfc-status-message-success:hover {
    box-shadow: 0 0 1rem 0.5rem rgba(24, 248, 24, 0.7);
    border-color: rgb(77, 233, 56);
}

@keyframes border-glow-error {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 165, 0, 0);
        border-color: rgba(255, 165, 0, 0);
    }
    50% {
        box-shadow: 0 0 1rem 0.5rem rgba(230, 32, 32, 0.7);
        border-color: rgb(224, 27, 27);
    }
    100% {
        box-shadow: 0 0 0px 0px rgba(255, 165, 0, 0);
        border-color: rgba(255, 165, 0, 0);
    }
}

.sfc-highlight-border-error {
    animation: border-glow-error calc(var(--transition-time) * 2) ease-out;
    animation-iteration-count: 3;
}

@keyframes border-glow-alert {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 165, 0, 0);
        border-color: rgba(255, 165, 0, 0);
    }
    50% {
        box-shadow: 0 0 1rem 0.5rem rgba(219, 99, 19, 0.7);
        border-color: rgb(219, 99, 30);
    }
    100% {
        box-shadow: 0 0 0px 0px rgba(255, 165, 0, 0);
        border-color: rgba(255, 165, 0, 0);
    }
}

.sfc-highlight-border-alert {
    /*border-inline: 2px solid transparent; Para evitar mudança de layout */
    animation: border-glow-alert calc(var(--transition-time) * 2) ease-out;
    animation-iteration-count: 3;
}

@keyframes border-glow-success {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 165, 0, 0);
        border-color: rgba(255, 165, 0, 0);
    }
    50% {
        box-shadow: 0 0 1rem 0.5rem rgba(24, 248, 24, 0.7);
        border-color: rgb(77, 233, 56);
    }
    100% {
        box-shadow: 0 0 0px 0px rgba(255, 165, 0, 0);
        border-color: rgba(255, 165, 0, 0);
    }
}

.sfc-highlight-border-success {
    animation: border-glow-success calc(var(--transition-time) * 2) ease-out;
    animation-iteration-count: 3;
}

.sfc-2col-screen {
    display: flex;
    overflow: auto;
    box-sizing: border-box;
}

.sfc-2col-screen > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.sfc-2col-screen > div:nth-child(1) {
    width: 40%;
}

.sfc-2col-screen > div:nth-child(2) {
    width: 60%;
}

.sfc-table-container {
    border-radius: 1rem;
    box-shadow: var(--shadow);
    background-color: var(--color-main);
    padding: 1rem;
    max-width: 97%;
    display: flex;
    flex-direction: column;
    max-height: 150vh;
    overflow: auto;
    gap: 1rem;
    width: 100%;
}

.sfc-table-container:has(p) {
    padding: 0 1rem 1rem 1rem;
}

.sfc-table-container:has(input[data-cb="hideheader"]:checked) {
    gap: 0;
}

.sfc-table-container p {
    font-weight: calc(var(--bold)*0.8);
    text-align: center;
    margin: 0;
}

.sfc-table-container input[type="checkbox"] {
    display: none;
}

.sfc-table-container input[data-cb="hideheader"]:checked ~ *:not(:last-child),
.sfc-table-container input[data-cb="filter"]:checked ~ .sfc-filter-form {
    display: none;
}

/* .sfc-table-container input[data-cb="filter"]:hover ~ .sfc-filter-form,
.sfc-table-container input[data-cb="hideheader"]:hover ~ *:not(:last-child) {
    border: 1px solid var(--color-input-hover);
    box-shadow: 0 0 0.3rem 0.3rem rgba(18, 140, 253, 0.7);
} */

.sfc-table-container nav {
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    gap: 0.5rem;
}

.sfc-table-container .sfc-table-scroll {
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.sfc-system-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
}

.sfc-system-body h1 {
    text-align: center;
}

.sfc-system-body h1 {
    font-size: calc(var(--def-font-size) * 2);
}

.sfc-filter-form {
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px dashed var(--color-detail-lighter);
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 0.5rem;
    gap: 1rem;
}

.sfc-icon-button,
.sfc-icon-inline {
    /* position: absolute;
    top: 1rem; */
    display: flex;
    border: none;
    background: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: box-shadow 0.3s ease; /* Efeito suave na transição */
}

.sfc-icon-button:hover,
.sfc-icon-inline:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
}

.sfc-icon-button:active,
.sfc-icon-inline:active {
    box-shadow: inset 0 4px 15px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
}

.sfc-icon-button:hover img {
    filter: invert(100%) brightness(200%);
}

.sfc-icon-inline:hover img {
    filter: invert(30%) sepia(70%) saturate(500%) hue-rotate(-10deg);
}

.sfc-icon-button img,
.sfc-icon-inline img {
    height: calc(var(--def-icon-container-width) * 0.175);
    transition: filter 0.3s ease; /* Efeito suave na transição */
}

.sfc-table-tallrow table tbody tr {
    height: calc(var(--def-space) * 5);
}

.sfc-table-tallrow table tbody tr td,
.sfc-table-tallrow table tbody tr td a {
    height: inherit;
}



.tst-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

.tst-header {
    width: 100%;
    height: 75px;
    background-color: #797070;
}

.tst-main {
    flex-grow: 1; /* Faz o main ocupar o espaço restante da tela */
    width: 100%;
    background-color: #6f7c81;
    display: flex;
}

.tst-aside {
    width: 300px;
    background-color: #87A1AB;
}

.tst-section {
    width: 100%;
    background-color: #C1D8BF;
}