@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body{
    font-family: 'Roboto', sans-serif;
}

.scroll {
    height: 98vh;
    overflow-y: scroll;
}

.cabecalho{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8em;
    /* background-color: aquamarine; */
}

.cabecalho img{
    width: 100px;
    border-radius: 6px;
}

.cabecalho h1{
    /* font-size: max(16px, 3.2em + 1vw) */
    font-size: min(3em, 10vw);
    border-bottom: #0096bf59 solid 1px;
}

.cabecalho button{
    width: 45px;
    height: 45px;
    justify-content: center;
    margin: 0;
    padding: 0;
}

h2{
    font-size: min(1.5em, 5vw);
}

li {
    margin-bottom: 6px;
}

li>code {
    padding: 6px 8px;
    font-size: 1.2em;
}

input[type="text"] {
    width: 98%;
}

.config {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 6px;
    position: sticky;
    top: 30px;
}

input[type="radio"] {
    margin: 0;
    padding: 0;
}

fieldset {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: fit-content;
    gap: .5em;
}

.forms {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5em;
}

.forms img {
    width: 24px;
}

dialog{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

dialog > header:first-child{
    width: 100%;
}

dialog > menu{
    display: flex;
    flex-direction: column;
    gap: .8em;
    padding-left: 0px;
}

dialog > menu > div{
    width: 250px;
    display: flex;
    flex-grow: 0;
    gap: .5em;
    padding-left: 0px;
    justify-content: space-between;
}

dialog > menu > button{
    align-self: flex-end;
    /* margin: 0px; */
}

.pesquisa {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;

    transition: all .3s ease-in-out
}

.pesquisa input[type="search"] {
    width: 34px;
    margin: 0;
    transition: width .6s ease-in-out
}

.pesquisa input[type="search"]::placeholder {
    opacity: 0;
    transition: opacity .5s ease-in-out .65s
}

.pesquisa i {
    transform: translateX(150%);
    transition: all .2s ease-in-out .65s
}

input[type="search"]:focus,
input[type="search"]:hover {
    width: calc(100% - 35px);
    transition: width .3s ease-out
}

input[type="search"]:focus .pesquisa {
    width: calc(100% - 35px);
}

input[type="search"]:focus,
.pesquisa:hover input[type="search"]::placeholder {
    opacity: 1;
}

input[type="search"]:focus,
.pesquisa:hover i {
    transform: translateX(0);
}

blockquote {
    border-bottom: #0096bf59 solid 1px;
}

.display-none {
    display: none;
}

button,
label,
small {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5em;
}

.div-aviso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div[data-aviso]>div {
    visibility: hidden;
    opacity: 0;
    width: fit-content;
    max-width: 500px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    margin-top: 6px;
    bottom: 30px;
    transition: opacity .5s ease-in-out
}

div[data-aviso]>div.mostrar {
    visibility: visible;
    opacity: 1;
    animation: fadein 0.5s, fadeout 0.8s 4.5s;
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-hourglass 1.5s infinite;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}