* {
    box-sizing: border-box;
    /*importante para manter a %*/
}

:root {
    --cinza: rgb(195, 195, 209);
    --amarelo: rgb(255, 212, 70);
    --laranja: rgb(241, 177, 57);
    --azul: rgb(0, 0, 139);
    --txt1: sans-serif;
    --alertaTrue: rgb(154, 201, 135);
    --alertaFalse: rgb(241, 135, 119);
    --alertaPergunta: rgb(241, 182, 119);
    --brds: 8px;


}

@font-face {
    font-family: Bvalentina;
    src: url(Best\ Valentina\ TTF.ttf);
    size-adjust: 120%;
}

img {
    border-radius: 50%;
}

body {
    margin: 0;
    /*zerar o browser*/
    padding: 0;
    /*zerar o browser*/
    background-image: url("imgs/conquilha.jpg");
    background-attachment: fixed;
    /*  opacity: 0.85; */
}

header {
    background-color: rgba(0, 255, 255, 0.15);
    text-align: center;
    text-shadow: 2px 2px 5px white;
    font-family: Bvalentina;
    /*   display: flex; */
    font-size: 2rem;
    padding: 2px;
}

footer {
    background-color: rgba(0, 255, 255, 0.5);
    text-align: center;
    font-family: Bvalentina;
    font-size: 2rem;
    padding: 20px;

}

#cxsite {
    background-color: rgba(0, 255, 255, 0.489);
    width: 40%;
    margin-left: 20%;
    margin-right: 40%;
    min-height: 80vh;
    padding: 1%;

}

nav {
    background-color: var(--laranja);
    float: right;
    border-radius: var(--brds);
    padding: 1%;
    text-transform: capitalize;
    font-variant: small-caps;
    font-size: 0.9rem;

}

nav a {
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;

}

#nav2 {
    background-color: var(--laranja);
    text-align: center;
    border-radius: var(--brds);
    padding: 1%;
    text-transform: capitalize;
    font-variant: small-caps;
    font-size: 1.1rem;

}

#nav2 a {
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
    text-decoration: none;

}

a:link,
a:visited {
    color: var(--azul);
}

a:hover,
a:active {
    color: var(--amarelo);
}

.caixa {
    font-family: verdana;
    font-size: 1.5rem;
    background-color: bisque;
    border-radius: var(--brds);
    padding: 1%;
    text-align: justify;

}

.caixaind {
    font-family: Bvalentina;
    font-size: 1.5rem;
    background-color: mediumturquoise;
    border-radius: var(--brds);
    padding: 1%;
    text-align: center;
}

#caixinha {
    font-family: Bvalentina;
    font-size: 1.5rem;
    background-color: aquamarine;
    border-radius: var(--brds);
    padding: 1%;
    text-align: center;
}

.cxinput {
    size: 200%;
    width: 200px;
}

#cxLogin input {
    width: auto;
}

#cxLogin {
    float: right;
    padding: 20px;

}

#cxLogin input[type=password] {
    width: 100px;
}

#cxLogin input [type=submit] {
    width: 50px;
}

#cxLogin .fdbkLogo {
    font-size: 2rem;
    margin: 0;
    padding: 4px;
}

#cxAlerta {
    width: 50;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--brds);
    text-align: center;
    margin-top: 20px;

}

.sucesso {
    background-color: lightgreen;
}

.falha {
    background-color: lightcoral;
}

.cxImagens {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.pic {
    width: 23%;
    margin: 1%;
    border: 3px solid --laranja;
    border-radius: 5px;

}

.tit1 {
    font-family: var(--txt2);
    font-size: 1.6rem;
    color: var(--cor4);
    font-weight: bold;
    width: 100%;
    text-align: left;
}

.tit2 {
    font-family: var(--txt1);
    font-size: 1.2rem;
    text-align: justify;
}

.tit3 {
    font-family: var(--txt2);
    font-size: 1.6rem;
    color: var(--cor4);
    font-style: italic;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.crudLink {
    font-size: 1.4rem;
    margin-left: 10px;
    margin: 0;
}

.crudLink2 {
    font-size: 1rem;
    color: #333;
    margin: 0;

}

.crudLink a span {
    font-size: 1.8rem;
}

.crudLink a:link,
.crudLink a:visited {
    color: #000;
}

.crudLink a:hover,
.crudLink a:active {
    color: var(--cor2);
}

#imgAgrega {
    display: flex;
    flex-wrap: wrap;
    /*background-color: aqua;*/
    justify-content: flex-start;
}

.moldura {
    width: 49%;
    margin: 0.5%;
    padding-top: 30%;
    /* SUPER IMPORTANTE: foi assim que consegui que ficasse com altura  (12% da largura de #imgagrega) */
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid var(--cor1);
    border-radius: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
}

.pics {
    min-width: 120%;
    min-height: 120%;
    visibility: hidden;
}

.pics:hover {
    cursor: pointer;
}

#formTab {
    width: 70%;
}

#formTab td:first-child {
    width: 25%;
}

.finp {
    width: 100%;
}

textarea.finp {
    height: 300px;
}

#preview {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
    text-align: center;
}

#preview img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    max-width: 80vw;
    max-height: 80vh;
    border: 3px solid var(--tit1);
    /*border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;*/
}

.intro {
    font-family: arsenica;
    line-height: 160%;
    font-size: 1.2rem;
}

.signature {
    font-family: Bvalentina;
    font-style: italic;
    font-weight: bold;
    text-align: right;
    font-size: 1.8rem;
    margin-right: 6%;
    color: #555;
}

/*Filtros de cor*/
.saturate {
    filter: saturate(3);
}

.grayscale {
    filter: grayscale(100%);
}

.contrast {
    filter: contrast(160%);
}

.brightness {
    filter: brightness(0.25);
}

.blur {
    filter: blur(3px);
}

.invert {
    filter: invert(100%);
}

.sepia {
    filter: sepia(100%);
}

.huerotate {
    filter: hue-rotate(180deg);
}

.rss.opacity {
    filter: opacity(50%);
}

#tabCRUD {
    width: 70%;
    font-size: 1.1rem;
    padding: 0;
    margin-bottom: 50px;
}

#tabCRUD td:first-child {
    width: 90%;
    padding-left: 10px;
}

#tabCRUD td:not(:first-child) {
    width: 10%;
    text-align: center;
}

#tabCRUD td {
    background-color: var(--alertas);
    padding: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

#tabCRUD tr:hover {
    background-color: var(--cor2);
}

#tabCRUD td:not(:first-child) {
    cursor: pointer;
}

#tabCRUD a:link,
#tabCRUD a:visited {
    color: #111;
}

#tabCRUD a:hover,
#tabCRUD a:active {
    cursor: pointer;
    color: var(--tit1);
}

.icon {
    width: 36px;
}

/*
header{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}
*/
#logo {
    height: 5vh;
    opacity: 0.6;
}

#logTab {
    width: 14%;
    font-size: 1.1rem;
}

.logInput {
    width: 100px;
}

#pHeader {
    font-family: Bvalentina;
}

.logP {
    padding: 0;
    margin: 0;
    color: orangered;
}

.logP2 {
    padding: 0;
    margin: 0;
    font-size: 1.5rem;

}
footer {
    font-family: Bvalentina;
}


#sistAlerta {
    font-family: var(--txt4);
    font-weight: bold;
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
}

.bdAlerta {
    margin: 0;
    margin-top: 20vh;
    border-radius: 5px;
    padding: 40px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 40%;
}

.bdAlertaTrue {
    background-color: var(--alertaTrue);
}

.bdAlertaFalse {
    background-color: var(--alertaFalse);
}

.bdAlertaPergunta {
    background-color: var(--alertaPergunta);
}

.btAlerta input:not(:first-child) {
    margin-left: 20px;

}

.btAlerta input {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    color: aliceblue;
    background-color: rgb(40, 40, 40);
    border: 0px;
    border-radius: 4px;
    min-width: 80px;
}

.btAlerta input:hover {
    background-color: rgb(80, 80, 80);
    cursor: pointer;
}


.ico_pdf {
    width: 36px;
    position: relative;
    top: 10px;
}

.apagaImg {
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    width: 100%;
    text-align: center;
    font-family: var(--txt3);
}

.apagaImg:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

#preview {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

#preview img {
    max-width: 84vw;
    max-height: 85vh;
    border: 6px solid var(--cor1);
    background-color: #000;
    padding: 2px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}