@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');

:root {
    --branco: #FFFFFF;
    --cinza-escuro: #3D3F43;
    --cinza-claro: #F6F6F7;
    --cinza: #D8D9DB;
    --azul-cora: #154295;
    --azul-claro: #C6CFEA;
    --verde: #00a248;
    --vermelho: #920400;
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

main {
    flex: 1;
    padding: 2rem;
}

a {
    text-decoration: none;
}

p {
    margin-bottom: 0;
}

.navbar {
    border-bottom: 1px solid var(--cinza);
}

.nav-link {
    color: var(--cinza-escuro);
}

.nav-link-active{
    color: var(--azul-cora) !important;
    font-weight: 600;
}

.button-flashy{
    background-color: var(--verde);
    color: var(--branco);
    border-radius: 1rem;
}

.topic {
    color: var(--cinza-escuro);
}

.container-search {
    display: flex;
    flex-direction: column;
}

.container-search label {
    font-size: 1rem;
    color: var(--cinza-escuro);
}

.input-wrapper {
    position: relative;
    width: 300px;
}

.input-wrapper input {
    width: 100%;
    padding-left: 20px;
    padding-right: 40px;
    box-sizing: border-box;
    border: none;
    background-color: var(--cinza-claro);
    height: 50px;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
}

.input-wrapper input:focus-visible {
    outline: none;
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(21, 66, 149, 1);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(21, 66, 149, 1);
    box-shadow: inset 0px 0px 0px 2px rgba(21, 66, 149, 1);
}

.input-wrapper .icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    pointer-events: none;
    color: var(--cinza-escuro);
}

.container-input-component {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-component {
    background-color: var(--branco);
    border: 1px solid var(--cinza);
    color: var(--cinza-escuro);
    padding: 1rem;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.card-component-title {
    color: var(--azul-cora);
}

.card-component-info{
    margin-bottom: 2rem;
}

.card-info{
    font-weight: 800;
    color: var(--azul-cora);
    line-height: 2rem;
}

.lineheight-component{
    line-height: 2rem;
}

.document {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .625rem;
    margin-top: 2rem;
    text-decoration: underline;
}

.document p {
    color: var(--cinza-escuro);
    transition: 0.3s ease-in-out;
}

.document p:hover {
    color: var(--azul-cora);
}

div.dt-container .dt-search input{
    height: 50px !important;
    padding-left: 10px !important;
    border-radius: 10px !important;
    border: none !important;
    border: 1px solid var(--cinza) !important;
    transition: 0.3s ease-in-out;
}

div.dt-container .dt-search input:focus-visible{
    outline: none;
    outline-offset: 0;
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(21,66,149,1);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(21,66,149,1);
    box-shadow: inset 0px 0px 0px 2px rgba(21,66,149,1);
}

.dt-search{
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
}

div.dt-length {
    display: none;
}

.dt-layout-row{
    justify-content: flex-start !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start{
    margin-right: 0 !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end{
    margin-left: 0 !important;
}

.dt-info{
    display: none;
}

div.dt-length {
    display: none;
}

th {
    display: none;
}

div.dt-container .dt-paging .dt-paging-button{
    padding: 0.4rem 1rem !important;
}

div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover{
    background-color: var(--azul-cora) !important;
    color: var(--branco) !important;
    border: none !important;
    border-radius:  10px !important;
}

div.dt-container .dt-paging .dt-paging-button:hover{
    background-color: var(--azul-claro) !important;
    background: var(--azul-claro) !important;
    color: var(--branco) !important;
    border-radius:  10px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.4rem 1rem !important;
}

div.dt-container .dt-paging .dt-paging-button:active{
    background: none !important;
    box-shadow:  none !important;
}

.table>:not(caption)>*>*{
    border-bottom-width: 0 !important;
    padding: 0 !important;
}

div.dt-container.dt-empty-footer tbody>tr:last-child>*{
    border-bottom: 0 !important;
}


/* FOOTER */
.container-footer{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-evenly;
 }
 
footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    color: var(--branco);
    background-color: var(--azul-cora);
    padding: 1.25rem 0;
    text-align: center;
    font-size: .8125rem;
}

/* Responsivo */
/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-width: 320px) and (max-width: 480px) {}

/* (480x800) Android */
@media only screen and (min-width: 480px) and (max-width: 800px) {}

/* (640x960) iPhone 4 & 4S */
@media only screen and (min-width: 640px) and (max-width: 960px) {}

/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-width: 720px) and (max-width: 1280px) {}


/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/* (2048x1536) iPad 3 */
@media only screen and (min-width: 1536px) and (max-width: 2048px) {
    /* insert styles here */
}

/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-width: 720px) and (max-width: 1280px) {}

/* (1280x1024) SXGA Display */
@media screen and (min-width: 1280px) {}

/* (1366x768) WXGA Display */
@media screen and (min-width: 1366px) {}

/* (1440x900) WXGA+ Display */
@media screen and (min-width: 1440px) {}

/* (1680x1050) WSXGA+ Display */
@media screen and (min-width: 1680px) {}

/* (1920x1080) Full HD Display */
@media screen and (min-width: 1920px) {}