/* CSS Document */

html {
    scroll-behavior: smooth;
}

/*:root{
    color-scheme: light dark;
}*/

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --general-button-bgcolor: white;
    --general-button-color: black;
    --general-button-bocolor: lightseagreen;
    --general-button-focolor: lightblue;
    --general-button-bgcolor-hover: #f0f8ff91;
    --general-button-color-hover: #006699;
    --general-button-bocolor-hover: deepskyblue;
    --general-button-bgcolor-inactive: #eeeeee;
    --general-button-bocolor-inactive: darkgrey;
    --general-button-color-inactive: grey;

    --special-button-bgcolor: white;
    --special-button-color: black;
    --special-button-bocolor: grey;

    --general-button-border-size: 1px;
}

* {
  scrollbar-color: grey lightgrey !important;
  scrollbar-width: thin !important;
}

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 0px;
}
::-webkit-scrollbar-track {
    background-color: lightgrey;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/OpenSans-Regular.ttf');

}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/OpenSans-Bold.ttf');
    font-weight: bold;
}

@media print {
  /*.print > div {page-break-inside: left;}*/
}

@media screen and (max-width: 1024px), print{
    body.vertical {
        display: flex;
        flex-flow: column;
    }

    main.dashboard{
        display: flex !important;
        flex-flow: column;
        justify-content: start;
    }

    body div.separadores.vertical{
        flex-flow: row wrap;
        margin-right: unset;
        /*margin-bottom: -2rem;*/
        border:none;
        border-bottom: 2px solid lightblue;
        /*width: auto;*/
        min-height: unset;
        width: 100%;
        & label{
            border: 1px solid lightblue;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            text-align: center;
            width: unset;
            padding-right: 1rem;
        }
        & input[type="radio"]:checked + label{
            background-image: linear-gradient(to bottom, aliceblue 20%, white);
            /* background-color: aliceblue; */
            color: black;
            /* border-bottom: 2px solid darkcyan; */
            border-color: lightblue;
            z-index: 10;
            right: -1rem;
            bottom: -0.126rem;
        }
    }

    body:not(.nogrid):not(.pesquisa) {
        grid-template-areas: "topo"
                            "title"
                            "form"
                            "actions"
                            "info"
                            "rodape";
        grid-template-rows: repeat(4,auto);
        grid-template-columns: 100%;
        gap: 2rem;
        /*justify-items:center;*/
    }
    body #info {width: auto;}
    body.nogrid {padding: 1rem;}
    body #topc img {width: auto;}
    body div:has(#info){
        width: 100%;
        order: 5;
    }
    body div .toggle-help:has(#toggle-help:checked) + #info{
        left:0;
        max-height: 2rem;
        width: auto;
    }

    body div:has(.toggle-help #toggle-help:checked){
        /*height: 2.4rem;*/
        width: 100%;
        /*left: -24rem*/
    }

    body .toggle-help label{
        rotate: 90deg;
    }
}

@media screen and (max-width: 810px){
    body.print div.forms{
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    body.print div.botoes{
        justify-content: center;
    }

    body.pesquisa{
        grid-template-areas: "topo"
                        "title"
                        "form"
                        "actions"
                        "info"
                        "rodape";
        grid-template-rows: repeat(4,auto);
        grid-template-columns: 100%;
        gap: 2rem;
        & .display-data{
            border-left: none;
        }
        & .acoes{
            flex-flow: row wrap;
            & .botao{
                padding-left: 1rem;
                justify-content: start;
                width: fit-content;
            }
        }
    }

    body form.simples{
        display: flex;
        flex-flow: column;
        margin: unset;
        width: 100%;
        align-items: flex-start;
        & input:not([type="button"]){
            align-self: flex-start !important;
            width: 100%;
            max-width: unset !important;
        }
    }
}

@media screen and (max-width:926px), print{
    body form .agregator input:not([type="submit"],[type="button"],[type="checkbox"],[type="radio"]),form .agregator select {
        width: 100% !important; 
        align-self: flex-start !important;
    }
    body form span.submit-button:not(.botoes .submit-button) {
        margin-inline: auto;
    }

    body .botoes{
        justify-content: center;
        & span{
            display: flex;
            flex-flow: column !important;
        }
    }
    body form:not(.admin form) input[type="submit"]{align-self: center;/* margin:  auto*/}
    body form:not(.simples), body form div.addplaces, body form div.agregator {display: flex; flex-flow: column;}
    body form label:not(input[type="radio"] + label) {align-self: flex-start !important;}
    body form label:has(span) {text-align: left;}
    body #topc {justify-content: center;}
    body #topc :is(div,h1) {justify-self: center;}
}

@media screen and (max-width:1280px), print{
    body #topc {place-items: center;}
}

body {
    font: normal 0.88rem 'OpenSans';
    font-variant: lining-nums;
    line-height: 1.4rem;
    display: grid;
    grid-template-areas:
        "topo topo"
        "title title"
        "info form"
        "actions actions"
        "rodape rodape";
    gap: 8px;
    /*grid-template-rows: auto 1fr 60px;*/
    grid-template-columns: auto 1fr;
    justify-items: stretch;
    padding:0 20px 0 20px;
    max-width: 1900px;
    /*height: 100%;*/
    margin: auto;
    font-variant: lining-nums;
}

.nogrid{
    /*font: normal 100% 'Dosis'; 
    line-height: 1.4em;*/
    display: flex;
    flex-flow:column;
    /*justify-content: space-between;/* center;*/
    padding:0 10vmin;
    align-items: center;
    gap: 2rem;
    /*min-height: 30rem;*/
}

form {
    grid-area:form;
    font-family: inherit;
    font-variant: inherit;
    font-size: inherit;
    align-content: baseline;

    display:grid;
    grid-template-areas: "labels inputs";
    grid-template-columns: 18rem 1fr; 
    grid-template-rows: max-content;
    gap:0.5em;
    overflow-x: auto;
    /*height: fit-content;*/
    padding-inline: 1rem;
    padding-block: 0 2rem;
}

form:not(.selection){
    order: 2;
}

.box > p {
    text-align:justify;
    margin: 0;
}

.box > h3 {
    margin: 0;
    padding-block: 0.5rem;
}

.botao {
    margin: auto;
    cursor: pointer; 
    min-width: 12rem;  /*16rem*/
    border: var(--general-button-border-size) solid var(--general-button-bocolor); 
    border-radius: 4px;
    color: var(--general-button-color);
    font-weight: 600;
    /*height:34px; */
    text-align:center; 
    /*padding-top:10px; */
    /*padding-block: 0.4rem;
    padding-inline: 1rem;*/
    height: 2.4rem;
    text-transform:uppercase;
    font-size: smaller;
    /*font-variant: all-small-caps;*/
    background-color: var(--general-button-bgcolor);
    transition:0.3s;
    box-shadow: 2px 2px 10px -4px grey;
    display: inline-flex;
    justify-content: center;
    align-items: center;

} /*3399CC*/

.titulo {font-size:160%; text-align:center;}

.botao:not([disabled]):hover {
    background-color: var(--general-button-bgcolor-hover);
    color: var(--general-button-color-hover);
    border-color: var(--general-button-bocolor-hover);
}

.simples .desc {
    /*display:none; 
    font-size:70%; 
    text-transform:none; 
    text-align:center; 
    font-weight:normal; 
    margin-top: 1rem;*/
    pointer-events: none;
    text-align: center;
    position: sticky;
    grid-column: 1 / -1;
    color: white;/*var(--general-button-bgcolor); ;*/
    bottom: 34%;
    max-width: 16rem;
    margin: auto;
    grid-column: 1 / span all;
    transition: bottom 0.3s;
}

/*.botao:hover .desc {display:block;}*/
a {
    text-decoration:none;
    font-style:normal;
    color:#074e8c;
    width: fit-content;
}

/*a:not(.normal):hover {
    text-decoration: underline;
}*/

h2 {
    margin-top: 0;
    color: darkcyan;
    padding: 0.6rem;
    position: relative;
    z-index: 10;
    font-variant: all-small-caps;
}

#descricao-campanha h2{
    background-color: aliceblue;
    border-bottom: 1px solid lightblue;
    color: black;
}

#info{
    padding: 12px 12px;
    width: 20rem; 
    height: fit-content;
    max-height: 100%;
    grid-area: info;
    transition: left 0.3s, max-height 0.3s;
    position: relative;
    left: 0;
    overflow: hidden;
    padding-top: 0;
}

div:has(#info){
    position: relative;
    left: 0;
    width: 20rem;
    overflow: hidden;
    transition: width 0.3s;
    order: 1;
    grid-area: info;
}

div:has(.toggle-help #toggle-help:checked){
    width: 2.8rem;
    /*left: -24rem*/
}

#info > p:first-child {    
    background-color: aliceblue;
    border: 1px solid aliceblue;
    padding: 4px 4px;
    margin-top: 0;
    /*color: #fff;*/
    /*text-align: center;*/
    border-radius: 4px;
    /*left: -12px;*/
    font-size: large;
    font-variant: all-small-caps;
    font-weight: 600;
    width: -webkit-fill-available;
    width: -moz-available;
} 

.toggle-help{
    background-color: aliceblue;
    /*color: white;*/
    top: 0;
    right: 0;
    position: absolute;
    border-radius: 4px;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    text-align: center;
    /*padding-block: 0.16rem;*/
    cursor: pointer;
    font-weight: 600;
    font-size: larger;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover{
        color: deepskyblue;
    }
    & label{
        cursor: pointer;
        flex: 1;
        padding: 4.3px 4px;
        font-family: monospace;
        border: 1px solid aliceblue;
        &::after{
            content: "<<";/*url(/images/double-arrow-left.png);*/
            transition: 0.3s;
        }
    }
    & input{
        display: none;
    }
}

.toggle-help:has(#toggle-help:checked) + #info{
    left: -26rem;
    /*height: 0px;*/
}

.toggle-help #toggle-help:checked + label::after{
    content: ">>";/*url(/images/double-arrow-right.png);*/
}

#info p.help-topic {
    font-weight: bold;
    background-color: #eeea;
    text-align: left;
    padding: 4px;
    border-radius: 4px;
    font-variant: all-small-caps;
    font-size: larger;
}

#info > ul {padding-left:0.4em; list-style: none;}
#info > ul > li {border-bottom: 1px dotted #999; padding: 4px;}

legend {
    background-color: aliceblue; 
    padding: 4px 4px; 
    border: 1px solid aliceblue; 
    /*color:#fff; */
    grid-column: 1/span all;
    align-self: baseline; 
    border-radius: 4px; 
    font-size: large;
    font-variant: all-small-caps;
    font-weight: 600;
    width:-webkit-fill-available;
    width: -moz-available;
}

#sug, #oas, #osp{max-width:95%;}

#items {float:left; padding-right:16px;}
#val {float: left; max-width:50px; text-align:center;}
#item1, #item2, #item3 {margin: 6px 6px;}
#itemdesc {background-color: #FDE8D9; padding:2px;}
ol {padding: 0 16px;}

#gs div {white-space:nowrap;}

fieldset {
    padding: 4px 8px;
    border: 1px solid #006699;
    border-radius: 4px;
    display:contents;
}

#nwrap{margin:auto; white-space:nowrap;}

input:focus, textarea:focus, select:focus {
    outline: dodgerblue solid 1px;
}

input:is([type="button"],[type="submit"], .botao):focus{
    outline: lightblue solid 1px;
}

input:is([type="radio"],[type="checkbox"]){
    outline:none;
}

input, textarea, select {
    font-family: inherit;
    font-variant: lining-nums;
    font-size: inherit; 
    border:1px solid lightblue; 
    border-radius: 4px;
}

/*input:hover, textarea:hover, select:hover {
border: 1px solid #006699;}*/

#topr p {text-align:center; font-size: 90%;}

#topc {
    grid-area:topo;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 48%));
    flex-flow: row;
    margin: 0;
    width: 100%;
}

#topc h1 {
    text-align: center; 
    font-weight: normal; 
    font-size: 1.5rem; 
    justify-self: right;
    /*max-width: 50%;*/
}

#topc div p {
    text-align: center;
}

#tabs {
    /*padding: 15px 0 0 0;*/
    /*line-height: 15px;
    grid-column: 1/span all;*/
    display: flex;
    position: relative;
    top: 8px;
    z-index: 10;
    font-variant: all-small-caps;
}

#tabs label{
    color:#006699; 
    font-weight:normal; 
    border-radius: 4px 4px 0px 0px;
    height: 2.2rem;
    width: 10rem;
    margin-right:2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid lightblue; 
    /*position:relative;*/
    font-size: larger;
    user-select: none;
}

#tabs input:checked + label{
    border:1px solid lightblue;
    border-bottom-color: white;
    /*z-index: 12;
    top: 0;*/
    font-weight: 600;
    cursor: default;
}

#tabs :not(input:checked) + label{
    background-color:#eeea;
    /*top: 3px;
    z-index: 5;*/
    font-weight: normal;
    cursor:pointer; 
}
/*
    &.off{
        background-color:#eeea;        
        top: 3px;
        z-index: 5;
        & label{
            font-weight: normal;
            cursor:pointer; 
        }
    }

    &.on{
        border:1px solid lightblue;
        border-bottom-color: white;
        z-index: 9;
        top: -1px;
        font-weight: 600;
        & label{
            cursor: default;
        }
    }*/

#tabs ~ div:not(.agregator){
    display:none;
}

#tabs:has(input#tab-capitais:checked) ~ div#capitais, #tabs:has(input#tab-animais:checked) ~ div#animais, #tabs:has(input#tab-alimentacao:checked) ~ div#alimentacao, #tabs:has(input#tab-areas:checked) ~ div#areas{
    display: block;
    margin-top:0; 
    border:1px solid lightblue;
    padding:20px; 
    /*position:relative; 
    z-index:8;*/
    border-radius: 0px 4px 4px 4px;
    background-color: white;
    overflow-x: auto;
}


form:not(.selection) label:not(.botao){
    font-weight: bold;
}

form label {grid-column:labels; justify-self:end;}

form label:has(span){
    text-align: right;
    & span{
        font-size: small;
    }
}

label:not(:has(+ textarea, + select[multiple])) {
    align-self:center;
}

form input:not([type="submit"]):not(.botoes input):not([type="radio"]):not([type="checkbox"]):not(.botao), form select:not([multiple]) {
    font-family: inherit;
    /*font-size: inherit;*/
    height:2.2rem; 
    /*font-size:100%; */
    grid-column:auto;     
    border-radius:4px;
    align-self:center;
}

/*input[type="date"], input[type="datetime-local"], input[type="number"] {width: min-content;}*/
form fieldset > :is(input:not([type="submit"]), select:not([multiple])), form > :is(input:not([type="submit"]), select:not([multiple])), form div.agregator :is(input:not([type="submit"]), select:not([multiple])){
/*form fieldset > input:not([type="submit"]), form fieldset > select:not([multiple]),form > input:not([type="submit"]), form > select:not([multiple]) {*/
    width:min-content;
}


form input[type="radio"]{
    height: auto;
    cursor: pointer;
/*	margin-bottom:8px;
	float:right;
	clear:both;*/
}

form input[type="radio"]

form textarea, form input.big{
	width:auto !important;
}

form div.show{
	display:flex;
	flex-flow:column;
	justify-content:space-between;	
    /*gap: 1em;*/
}

.noc {/*margin: auto !important;*/ flex-flow: column !important; align-items: center !important;}

.centrar {
    width: 100%;
    text-align: center;
    justify-content: center !important;
}
/*.centrar * {text-align:center;}*/

/*form input.areas, input.num{
	width:95%;
}

form input.valor{
	width:95%;
}*/

/*.note {font-size:16px;  text-align:center; background-color:#ccc; color:#000;}*/
.note{
    grid-column: 1/-1;
}

/*form input[type="button"]{width:180px;}*/
/*form input[type="button"], form input[type="submit"]{ }*/
form tr { vertical-align:top;}

form div.linha{
    display: flex;
    flex-flow: row wrap;
    border-bottom: 1px dotted #006699;
    padding: 20px;
    gap: 12px;
}

/*select { text-transform:uppercase;}*/
select:not([multiple]) { height: 30px;}

/*#anexos select {width: 24rem;}*/

form input[type="submit"], form + .botoes input, form .botoes input, #lines input {
    /*width:140px; */
    min-width: 12rem;
    border: var(--general-button-border-size) solid var(--general-button-bocolor); ; 
    border-radius: 4px; 
    height: 2.4rem; 
    text-align:center;
    font-weight: 600;
    text-transform:uppercase;
    /*font-variant: all-small-caps;*/
    font-size: small;
    background-color: var(--general-button-bgcolor); 
    color: var(--general-button-color); ; 
    justify-self: right; 
    grid-column: 1/span all;
    transition: 0.3s;
    box-shadow: 4px 4px 10px -4px grey;
    margin: 0.6rem;
    cursor:pointer;
}
/*#freguesias { height:300px;}*/
/*form .botao {width: 140px;}*/
form input[type="submit"]:hover, form .botoes input:hover, form + .botoes input:hover, #lines input:hover {
    background-color:var(--general-button-bgcolor-hover); 
    color: var(--general-button-color-hover);
    border-color: var(--general-button-bocolor-hover); ;
}
/*form input[required], select[required],textarea[required] {border-color:#FF0000;}*/

.sep { background-color:#999;}
form table {grid-column: 1/span all; align-self:flex-start; width: 100%;}
td.drapc { background-color: whitesmoke;}
tr.headerC td { text-align:center; padding:4px; background-color:#eee; height:30px; vertical-align:middle;}
tr.headerL td { text-align:left; padding:4px; background-color:#eee; vertical-align:middle; height:30px;}
tr.headerR td { text-align:right; padding:4px; background-color:#eee; vertical-align:middle; height:30px;}
td.sepL, th.sepL{border-bottom:1px dotted #999; height:20px; text-align:left;}
td.sepR, th.sepR {border-bottom:1px dotted #999; height:20px; text-align:right !important; padding-right: 4px !important;}
td.sepC, th.sepC {border-bottom:1px dotted #999; height:20px; text-align:center !important; padding-right: 4px !important}
/*th { text-align:left; background-color: #CCCCCC;}*/

/*h3 {background-color: #FFCC33; padding:2px 4px}*/
form p {
    grid-column: 1/span all;
}

form fieldset > span {
    display: inline-flex;
    flex-flow: row wrap;
    grid-column: 1/span all;
    align-items: baseline;
    gap: 1rem;
}

form .agregator > span:not(.popup):not(.multi-opt):not(.field-help){
    display: inline-flex;
    flex-flow: row wrap;
    grid-column: 1 / span all;
    align-items: baseline;
    gap: 1rem;
}

.copyr {
    text-align:center;
    font-size:80%;
    grid-area:rodape;
    /*margin-top: auto;*/
    /*grid-row: unset;*/
    order: 10;
    align-self: center;
}

/*#topc, #topc p {text-align:center;}*/
.small {font-size:80%; text-align:left;}

a.normal {
    color: #003399; 
    font-weight: normal;
    transition: font-weight 0.3s;
}

a.normal:hover {
    text-shadow: -.24px 0 0 currentColor, .24px 0 0 currentColor;
    /*font-weight: 600;*/
}

#sector {font-size:120%; color:#006699;}
/*a:has(p.botao) {text-align:center; width:100%;}*/
img#logotipo {max-width: 20rem; margin-top: 1rem;}

.main {
    display:flex;
    justify-content:center;
    grid-area: form;
    gap: 1rem;
    /*margin-top: 4rem;*/
    max-width: 64rem;
}

.flow-col{
    flex-flow: column !important;
    /*width: clamp(24rem, 14rem + 38vw, 50rem);*/
    width: 100%;
    /*border: 1px solid lightblue;
    border-radius: 4px;*/
}

.flow-col p{
    margin-top: 0;
    margin-inline: 1rem;
}

.flow-row{
    flex-flow: row wrap;
}

/*.large {height:90px; padding-top:50px; font-size:140%; border-radius: 8px;}*/
.botao.large {
    padding: 1.6em;
    font-size: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    width: 20rem;
    min-height: 8rem;
    background-color: white;
    border-color: steelblue;
}

.botao.large:hover{
    padding-top: 0;
    & + span.desc{
        bottom: 40%;
        color: black;
    }
}

#lines {display:flex; flex-flow:row;grid-column: 1/span all;}
#lines input {margin-right:12px; margin-top:12px;width:auto;}
#lines input[disabled]{background-color: #fff; border-color: #aaa; color:#999;}
/*#lines input:hover {font-weight:bold;}*/
.shrink {width:95%;}
#aniHead, #capHead, #anxHead, #funHead1, #funHead2, #expHead {visibility:hidden;}
form input[type="file"] {border:none;}
#pp {display:flex; flex-flow:column; align-items:center;}

#pp p:not(.copyr){
    margin:0; 
    max-width: 32em;
    text-align: justify;
}

.final {display:flex; flex-flow:column; grid-column:1/span all; align-items:center;}
.final * {text-align:center;}
.final span {display:inline-flex; flex-flow:row wrap; gap: 1rem; justify-content: center;}

/*.msg {
    color: darkred;
    text-align: center;
    font-weight: bold;
    font-size: smaller;
    grid-column: 1 / span all;
    margin: 0;
    padding: 4px 12px;
    position: relative;
    background-color: #fddbd3;
    border-radius: 4px;
}*/

.msg {
    position: fixed;
    text-align: center;
    font-size: initial;
    grid-column: 1 / span all;
    margin: 0;
    padding: 2rem 4rem;
    z-index: 100;
    min-width: 20rem;
    left: 50%;
    top: clamp(4rem, 4rem + 20vh, 8rem);
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 8px 8px 12px #666;
    border-radius: 4px;
    font-weight: normal;
    transition: top 0.6s;
}

.msg-sucess{
    border: 1px solid darkgreen;
    background-color: #eafadc;
}

.msg-error{
    border: 1px solid darkred;
    background-color: #ffd2d9;
}

form.smallForm {display:flex; flex-flow:column; align-items:center;}

.box {
    border:1px solid #ccc; 
    background-color:#eee4; 
    text-align:justify; 
    padding: 1rem; 
    border-radius: 4px; 
    /*position: relative;*/
}

mark {padding: 0 4px;}

h2.title{
    text-align: left;
    color: black;
    /*font-variant: all-small-caps;*/
    background-color: aliceblue;
    text-transform: uppercase;
    /*font-size: 1.2rem;*/
    margin-right: auto;
    margin-inline: unset;
    border: none;
}

.admin h2:not(:first-of-type){
    margin-top: 4rem;
}

.admin > div:not(.botoes):not(.small-section) {width: 100%;}

.admin table{
    width: 100%;
}

.admin table th{
    text-align: left;
    /*background-color: #eee;*/
    padding: 4px;
    /*text-transform: capitalize;*/
    font-size: medium;
}

.admin table tr.table-header{
    position: sticky;
    top: 0;
    z-index: 1;
}

/*.admin table tr:hover {
    background-color: #eee !important;
}*/

.admin table td {
    padding: 4px;
    border-block: 1px solid transparent;
}

/*.admin table tr:nth-child(odd):not(:first-child){
    background-color: aliceblue;
}*/

.admin form:not(.normal) input:not([type="date"]):not([type="datetime-local"]):not([type="number"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
    width: unset;
}

.admin form {
    border-radius: 4px;
    border: 1px dotted lightblue;
    padding: 20px;
    align-self: normal;
}

.botoes {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    gap: 12px;
    grid-column: 1 /-1;
    margin-top: 1rem;
}

.botoes:not(.addplaces .botoes){
    order:3;
}

form + .botoes{
    grid-area: actions;
    & span{
        display: flex;
        flex-flow: row;
    }
}

.admin form + .botoes {
    justify-content: center;
    gap: 1rem;
}

#sel {width: 24px;}

form.normal{
    display: flex;
    flex-flow: column;
    /*align-items: baseline;*/
    gap: 12px;
    border-radius: 4px;
    border: 1px dotted #006699;
    padding: 20px;
    /*width: fit-content;*/
}

form.normal label{
    /*align-self: unset !important;*/
    text-transform: capitalize;
}

form.normal div.campos {
    /*display: flex;
    flex-flow: row wrap;*/
    display: grid;
    grid-template-areas: "labels inputs";
    grid-template-columns: 20rem 1fr;/*repeat(2,auto);    */
    gap: 12px;
    align-items: center;
    width: -webkit-fill-available;
    width: -moz-available;
}

form.normal div.campos input:not([type="number"]) {
    width: 100%;
}

div#pp input[type="button"]{
    width:12rem; 
    border:1px solid #006699; 
    border-radius: 4px; 
    /*height:40px; */
    box-shadow: 4px 4px 6px 0px grey;
    padding-block: 0.6rem;
    text-align:center;  
    text-transform:uppercase; 
    background-color:#006699; 
    color:#fff; 
    justify-self:right; 
    grid-column: 1/span all;
    transition: 0.3s;
    cursor: pointer;
}

div#pp input[type="button"]:hover { background-color:#fff; color:#006699;}

input[disabled] {
    background-color: #eee !important;
    color: #666 !important;
    cursor: not-allowed !important;
}

div#pp div {padding: 12px; text-align: center;}
div#pp label {cursor: pointer;}

.print {
    padding: 1em;
    display: block;
    /*flex-flow: column;*/
}

p.cpyr{text-align: center;}

h4 {
    background-color: #eee;
    padding: 8px;
    text-transform: uppercase;
}

caption {text-align: left; text-transform: uppercase; font-weight: bold; border-bottom: 1px solid;}

.blind {
    /*display: none;*/
    position:absolute;
    left: -1000rem;
}

.print :is(h1, h2) {
    text-align: center; 
    margin: 0;
}

.print h2 {
    margin-top: 1rem; 
    justify-self: center;
    width: fit-content;
    background-color: unset;
    border: none;
    color: black;
    padding: 1rem;
    position: relative;
    z-index: 10;
    border-radius: 4px;
}

.tot {
    text-transform: uppercase;
    /*border-bottom: 1px dotted;
    border-top: 1px dotted;*/
    width: fit-content;
    /*padding: 8px;*/
    white-space: nowrap;
}

.print table {width: 100%; margin-top: 20px;}
.print td, .print th {width: fit-content; text-align: left; padding: 4px;}
.print th {
    background-color: #eee8;
}
.print td { padding: 8px 0; border-bottom: 1px dotted; vertical-align: top;}
.print > div:not(#topc):not(.forms):not(.scroll) {page-break-inside: avoid; /*margin-top: 60px;*/}
/*.print table {page-break-inside: avoid; margin-top: 60px;}*/
/*.print #logotipo {max-width: 200px;}*/
.print #topc {align-items: center; place-content: center;}
.print #topc h1:not(:first-of-type){
    grid-column: 1/span all;
}
.print .dir {text-align: right;}
.print thead {background-color: #eee;}

.popl label { color:  #003399; cursor: pointer;}
.popl label:hover {
    text-shadow: -.24px -.24px #003399, .24px .24px #003399;
    /*font-weight: 600;*/
}
.popl label + input:checked + .popw{ opacity: 1; z-index: 10;}
.popl input {display: none;}
/*.popl {
    position: relative;
}*/

.popw {
    position: absolute; 
    opacity: 0;
    background-color: #eee;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid #999;
    z-index: -1;
    /*top: -1000%;*/
    top: 10rem;
    width: 80%;
    box-shadow: 1px 1px 6px grey;
    left:  0;
    right:  0;
    margin:  auto;
}

label.close {
    float: right;
    border: 1px solid indianred;
    background-color: indianred;
    padding: 4px 8px; 
    color: white; 
    transition: background-color 0.3s; 
    border-radius: 4px; 
    cursor: pointer;
    font-size: 124%;
    font-weight: 600;
}

.msg label.close {
    /*margin-right: -2.6rem;*/
    position: absolute;
    right: 1rem;
    top: 1rem;
}

input#close-msg:checked + .msg {
    display: none;
    /*opacity: 0%;
    z-index: -10;*/
}

label.close:hover {
    background-color: darkred;
    color: white;
    border-color: darkred;
}

.centro {align-items: center !important; flex-flow: column !important; text-align: center;}
/*#info-cookies {
    width: -webkit-fill-available; 
    width: -moz-available;
    position: absolute; 
    bottom:0; 
    background-color: #ccc; 
    padding: 12px; 
    left: 0; 
    height: 2em; 
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

#cookies:checked + div {display: none;}*/

tr.toprow th {text-align: center;}
td.sepA, th.sepA {border-left: 1px solid; padding-left: 4px !important;}
.print textarea {width: 100%; border-color: inherit;}
.controlo th {background-color: #eee;}

.admin form select[multiple] {
    height: 12em;
    /*width: 22em;
    flex: 0 1 22em;*/
}

.admin a:not([href]) p.botao {background-color: #eee; color: grey; cursor: not-allowed;}
.admin a:not([href]):hover p.botao {background-color: #eee; color: grey; cursor: not-allowed;}
form.single {
    border: none;     
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    padding: 0;
}

form.single input:not([type="submit"]), form.single select {height: unset;}

#logotipo + p {
    text-transform: uppercase;
}

.print #fcontrolo {float: right;}

.reading h2 {
    text-align: left;
    font-size: medium;
    margin-top: 2rem;
    margin-inline: unset;
    background-color: unset;
    color: teal;
    font-variant: unset;
    padding-left: 0;
}

/*.reading #topc {
    justify-content: center;
}*/

table.choose { 
    grid-column: 1/span all;
    /*border-bottom: 1px solid #006699;*/
    padding: 0 1rem;
    /*border-top: 1px solid #006699;*/
}

table.choose caption {
    border: none; 
    text-transform: none; 
    padding: 8px 0;
    /*text-align: center;*/
    font-variant: all-small-caps;
}

table.choose td {
    padding: 0.2rem;
}
/*table.choose tr:nth-of-type(odd) {background-color: aliceblue;}*/
table.choose tr:hover {
    background-color: #eeea;
}

table.choose tr input[type="radio"] {
    position: relative;
}

table.choose tr:hover input[type="radio"]::before {
    content: "";
    border: 7px solid grey;
    border-radius: 24rem;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}
h2#intro {
    /*border-top: 1px dotted #006699;*/ 
    /*padding-top: 12px;*/
    /*text-align: left;*/
    /*font-weight: normal;*/
    font-size: 1.2rem;
    margin-inline: unset;
    background-color: unset;
    padding-left: 0;
}

ul#init {
    list-style: none;
    padding: 8px;
}

ul#init > li{
    border-bottom: 1px dotted #006699;
    padding: 4px;
    text-align: left;  
}

div.area {
    max-height: 14rem;
    overflow: auto;
    display: block;
    padding: 8px;
    columns: 4 12rem;
}

div.area ul{
    padding-left: 1rem;
    list-style-type: square;
}

form div {
    grid-column: 1/span all ;
}

form div.agregator{
    display: grid;
    position: relative;
    grid-template-columns: subgrid;
}

/*form div.cel {
    display: flex;
    flex-flow: column;
}
form div.cel label {
    align-self: flex-start !important;
}*/

div.scroll {overflow: auto; grid-column: 1/span all;}
form input[type="radio"] + label {
    grid-column: inputs;
    cursor: pointer;
}

fieldset.normal{
    display: block;
    grid-column: 1/span all;
    border: 1px dotted #006699;
    padding: 20px;
}

fieldset.normal legend{
    width: fit-content;
    background-color: unset;
    color: black;
    border: none;
    font-weight: bold;
    font-variant: all-small-caps;
    font-size: large;
}

/*label:has(+ p + input[type="file"]:focus){
    background-color: darkcyan;
} */

label:has(+ input[required]:not([type="radio"]):not([type="checkbox"]))::before,
/*label:has(+ span ~ input[required])::before,*/
label:has(+ span input[required])::before,
label:has(+ p.filename + input[required])::before, 
label:has(+ select[required])::before,
label:has(+ textarea[required])::before,
form p:has(+ span input[required])::before {
    content: "\25cf   ";
    color: crimson; 
}

.destaque{
    padding: 12px;
    border-radius: 4px;
    background-color: #eeea;
    margin-top: 8px;
    grid-column: 1 / -1;
    order: 9;
}

.ob{
    /*grid-column: 1/-1;*/
    grid-area: form;
    order: 4;
    margin-top: auto;
}

.ob::before{
    content: "\25cf   ";
    color: crimson;
    /*font-size: 120%;*/
}

div.addplaces{
    grid-column: 1/span all;
    justify-content: flex-end;
    display: grid;
    /*flex-flow: row;*/
    gap: 0.5em;
    grid-template-columns: 18rem 1fr 4em 1fr;
    min-height: 12rem;
    position: relative;
}

div.addplaces label {
    grid-column: 1;
}

form div.addplaces > div {
    grid-column: unset;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: unset;
    gap: 1rem;
}

form div.addplaces .arrow{
    width: -webkit-fill-available;
    width: -moz-available;
    max-width: 180px;
    min-width: 1rem;
    margin: 0;
    font-size: x-large;
    min-height: 2.8rem;
}

.admin form fieldset{
    grid-column: 2/span all;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    padding: 2em;
    gap: 1em;
}

.admin form legend{
    background-color: transparent;
    color: black;
    border: none;
    width: fit-content;
    font-weight: bold;
    grid-column: 1;
    padding: 1em;
}

.admin form #addleg{
    margin: unset;    
    height: 40px;
    padding: unset;
    /*min-width: 10em;*/
    display: flex;
    justify-content: center;
    padding-inline: 1rem;    
    font-size: 80%;
    align-self: flex-start;
} 

.admin form #legislacao div{
    width: -webkit-fill-available;
    width: -moz-available;
    display: flex;
    flex-flow: row wrap;
    /* justify-content: space-between; */
    /* align-items: flex-end; */
    gap: 1em;
}

.admin form #rmvleg{
    /*font-size: 120%;*/
    grid-column: 4;
    justify-self: end;
    padding: 0 0.8em;
    /* box-shadow: 4px 4px 10px rgb(0 0 0 / 30%); */
    margin: unset;
    margin-left: auto;
    width: min-content;
    min-width: unset;
    border: none;
}

.admin form #rmvleg:hover{
    background-color: darkred;
    color: white;
}

.admin form label.botao{
    /*font-size: 80%;*/
    cursor: pointer;
    /*min-width: 10em;*/
    border-radius: 4px;
    /*border: none;*/
    text-align: center;
    transition: 0.3s;
    text-decoration: none;
    margin: unset;
    /*height: auto;*/
    font-weight: normal;
    /*line-height: 2em;*/
    display: flex;
    justify-content: center;
    padding: 0.6rem 1rem;
    gap: 0.5rem;
    width: max-content;
}

.admin form #legislacao div span:first-of-type{
    min-width: 20vw;
}

.admin form #legislacao div span:not(:first-of-type){
    min-width: 24vw;
}

.admin form #legislacao span{
    flex-flow: row;
    justify-content: flex-start;
    /*width: -webkit-fill-available;*/
    align-items: center;
    display: flex;
    gap: 1em;
}

/*.admin form #legislacao span input:not([type="button"]){
    width: 86%;
}*/

.admin form .filename {
    margin: 0;
    max-width: 10vw;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2;
    text-align: left;
    max-height: 1.6em;
}

:is(.form-table){
/*#capitais, #animais, #exploracoes, #anexos, #apiarios, #alimentacao, #investimentos,#fotos{*/
    overflow-x: auto;
}

/*#exploracoes, #anexos, #apiarios, #alimentacao{
    padding: 20px;
}*/

:is(.form-table) table{
/*:is(#capitais,#animais,#exploracoes,#anexos,#apiarios,#alimentacao,#investimentos,#fotos,#areas) table{*/
    width: clamp(36rem,28vw,100%);
    /*border-spacing: 8px 0;*/
    margin: 1rem;
    & tr{
        position: relative;
    }
}

:is(.form-table) div:not(.notify){
/*:is(#capitais,#animais,#exploracoes,#anexos,#apiarios,#alimentacao,#investimentos,#fotos,#areas) div{*/
    /*display: flex;*/
    /*flex-flow: row wrap;*/
    display: grid;
    grid-auto-flow: column;
    /*grid-auto-columns: 8rem;*/
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem;
    /*overflow-x: auto;*/
    padding: 4px 4px 4px 0;
    width: fit-content;
    position: relative;
}


/*#capitais div:not(:first-child), #animais div:not(:first-child){
    border-top: 2px dotted darkcyan;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}*/

:is(.form-table) div > span{
/*:is(#capitais,#animais,#exploracoes,#anexos,#apiarios,#alimentacao,#investimentos,#fotos,#areas) div > span{*/
    display: flex;
    flex-flow: column;
    gap: 0.3em;
    align-items: flex-start;
}

/*#anexos div{
    display: flex;
    min-width: 42rem;
}*/

/*#anexos div > span:not(:first-of-type), #fotos div > span{
    flex-flow: row;
    align-items: center;
    gap: 1rem;

}*/

:is(.form-table) div span label{
/*:is(#capitais,#animais,#exploracoes,#anexos,#apiarios,#alimentacao,#investimentos,#fotos,#areas) div span label{*/
/*#capitais div span label, #animais div span label, #exploracoes div span label, #anexos div span label, #apiarios div span label, #alimentacao div span label{*/
    align-self: flex-start;
    white-space: nowrap;
}

.rm{
    margin: unset;
    width: fit-content !important;
    padding: 2px 14px;
    max-height: 2.2rem;
    font-size: medium;
    align-self: flex-end !important; 
    border: none;
    /*color: white;*/
    min-width: unset;
    /*background-color: grey;*/
    border: 1px solid lightblue;
}

/*#anexos div span label{
    align-self: unset;
}*/

.rm:not([disabled]):hover{
    background-color: darkred;
    border-color: darkred;
    color: white;
}

.print th a:hover{
    color:brown;
    /*&::before{
        content: attr(title);
        position: absolute;
        padding: 4px;
        background-color: wheat;
        color: black;
        font-size: small;
        font-weight: normal;
        top: -2rem;
        left: 2rem;
        border-radius: 1rem 1rem 1rem 0;
        box-shadow: 2px 2px 6px grey;
    }*/
}

/*.print th a:hover::before{
    content:attr(title);
    position: absolute;
    padding: 4px;
    background-color: wheat;
    color: black;
    font-size: small;
}*/

.add{
    margin-left: 0;
    padding: 2px 8px;
    height: 2.4rem !important;
    font-size: smaller;
    margin-top: 2rem;
    margin-bottom: 0.6rem;
}

input[type="number"], input.small-input{
    max-width: 7rem;
}

input.very-small-input{
    max-width: 3rem;
}

div input[type="text"]{
    width: 20rem;
}

#totais {
    margin-top: 0;
    color: green;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/*#capitais div::before{
    content: attr(data-item-id) "# ";
}*/

label[for="apoios2"], label[for="obs"]{
    grid-column: 1/span all;
    justify-self: flex-start;
}

#apoios2,#obs{
    grid-column: 1/span all;
}

.filename {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2;
    height: 1.4rem;
    width: 12rem;
    white-space: nowrap;
}

.botao:is(label,a){
    font-size: 100%;
    cursor: pointer;
    color: var(--special-button-color);
    background-color: var(--special-button-bgcolor);
    border: 1px solid var(--special-button-bocolor);
    width: min-content;
    min-width: 6.4rem;
    border-radius: 4px;
    /*border: none;*/
    text-align: center;
    font-variant: all-small-caps;
    transition: 0.3s;
    text-decoration: none;
    font-size: medium;
    /* margin: auto; */
    /*padding: 0.3em 0.8em;*/
    margin-left: 0;
    font-weight: 600;
}

textarea{
    padding: 4px;
    width: 100%;
}

.alert{
    background-color: #ffb6c1bf;
    /*border-color: darkred;*/
    padding-block: 0;
    border: none;
    padding-block: 0.5rem;
    /*font-weight: bold;*/
    /*width: fit-content;*/
    /*color: red;*/
}

.sucess{
    background-color: #c9f3a6bf;
    /*border-color: darkred;*/
    padding-block: 0;
    border: none;
    padding-block: 0.5rem;
    /*font-weight: bold;*/
    /*width: fit-content;*/
    /*color: red;*/
}

.admin form > span:not(.popup):not(.submit-button){
    display: flex;
    align-items: baseline;
    grid-column: 2/span all;
}
.camp{
    color: teal;
    font-weight: normal;
    font-variant: all-small-caps;
    font-size: large;
    /*text-transform: uppercase;*/
}

div.apoio{
    padding: 1rem;
    border: 1px dotted teal;
    border-radius: 1rem;
    background-color: white;
    width: fit-content;
    margin: 0 2rem;
}

form div.files{
    display: grid;
    grid-template-columns: 18rem 1fr;
    align-items: center;
    gap: 0.5rem;
}

form div.files span{
    justify-self: flex-end;
    font-weight: bold;
    grid-column: 1;
}

form div.files label, form div.files p{
    justify-self: flex-start;
    grid-column: 2;
}

.spinner {
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #eeea; 
    width: 100%;
    height: 100%;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;  
}

.spinner:after {
    content: " ";
    display: block;
    width: 164px;
    height: 164px;
    margin: 8px;
    border-radius: 50%;
    border: 12px solid #000a;
    border-color: #000a transparent #000a transparent;
    animation: spinner 1.2s linear infinite;
    position: absolute;
    /*top: 50%;
    margin-top: -82px;
    left: 50%;
    margin-left: -82px; */ 
}

.spinner p{
    font-size: 200%;
    margin: auto;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.listaNav {text-align:center; font-size:120%; font-weight:bold;}
.listaNav #b_forward {
  height: 0;
  width: 0;
  border-left: 12px solid black;
  border-right: 0px solid transparent;
  border-bottom: 12px solid transparent;
  border-top: 12px solid transparent;
  padding:0;
  cursor:pointer;
  background:transparent;
  /*filter: drop-shadow(1px 1px 2px #666);*/
  box-shadow: none;
}

.listaNav #b_backward {
  height: 0;
  width: 0;
  border-right: 12px solid black;
  border-left: 0px solid transparent;
  border-bottom: 12px solid transparent;
  border-top: 12px solid transparent;
  padding:0;
  cursor:pointer;
  background:transparent;
  /*filter: drop-shadow(-1px 1px 2px #666);*/
  box-shadow: none;
}

.listaNav #b_backward:hover {border-right-color:grey;}
.listaNav #b_backward:focus, .listaNav #b_forward:focus {outline:none;}
.listaNav #b_forward:hover {border-left-color:grey;}
.listaNav #pages {     
    padding: 8px 20px;
    border-radius: 8px;
    /*background-color: #eeea;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 18rem;
}
.listaNav form.nav {display:flex; flex-flow:row; align-items:center; justify-content:center; }

div.over{
    max-height: 60vh;
    overflow-y: auto;
}

form.simple{
    display: block;
}

div.forms{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-auto-flow: row; */
    /* justify-content: space-between; */
    flex-flow: row wrap;
    align-items: end;
    justify-items: baseline;
    padding-bottom: 1rem;
    /*border-radius: 12px;
    border: 1px solid darkcyan;*/
}

form input.medium-size{
    width: 30rem !important;
}

form input.small-size{
    width: 9rem !important;
}

.admin form h3{
    grid-column: 1/span all;
    background-color: #87ceeb54;
    color: black;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    /*font-weight: normal;*/
    text-transform: uppercase;
    font-size: small;
}

.admin .valida p:not(.title){
    margin: 0;
    padding-left: 1rem;
}

.admin .valida p.title{
    width: fit-content;
    padding: 0.2rem 1rem;
    background-color: aliceblue;
}

.admin .valida th.top{
    text-align: center;
    background-color: whitesmoke;
}

span.space{
    width: 6rem;
}

.notify{
    background-color: #eee6;
    color: black;
    /*font-weight: bold;*/
    padding: 1rem !important;
    border-radius: 8px;
    text-align: center;
    max-width: 40rem;
    display: block !important;
    margin-bottom: 1rem;
    & ul{
        text-align: left;
    }
}

.simple-notify{
    background-color: #eee6;
    color: black;
    font-weight: bold;
    padding: 0 !important;
    border-radius: 8px;
    text-align: center;
    max-width: 40rem;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin-bottom: 1rem;
    /*& p{
        margin: 0;
    }*/
}

div.acoes{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 1rem;
    & .botao{
        margin: unset;
        width: auto;
        min-width: 12rem;
        /*font-variant: unicase;*/
        font-variant: unset;
        font-size: smaller;
    }
}

/*div.vertical{
    justify-content: end;
    align-items: start;
    flex-flow: column;
    & .botao{
        min-width: 16rem;
    }
}*/

form.selection{
    & label{
        grid-area: inputs;
    }
    & input{
        grid-area: labels;
    }
}

form.selection:has(:invalid) input[type="submit"]{
    pointer-events: none;
    cursor: not-allowed;
    /*& :hover{
       background-color: white;
        color: #006699;
    }*/
}

form.selection:not(:has(:invalid)) input[type="submit"]{
    pointer-events: all;
    cursor: pointer;
}

form.simples{
    grid-template-columns: max-content min-content;
    place-content: center;
    width: fit-content;
    margin: auto;
    padding: 1rem;
    border-radius: 4px;
    overflow: hidden;
    & input[type="submit"]{
        justify-self: center;
    }
}

p.info{
    /*max-width: 34rem;*/
    /*margin-inline: auto;*/
    /*text-align: center;*/
    padding: 0.4rem 1rem;
    /*background-color: #eee6;*/
    border-radius: 4px;
}

form input[type="checkbox"]{
    width: 1rem;
    /*height: 1.2rem;*/
}

span.submit-button{
    display: inline-flex;
    width: fit-content;
    height: fit-content;
    grid-column: 1/span all;
    /*justify-self: center;*/
    /*margin: 1rem;*/
    /*margin: 1rem 0.4rem 0.6rem 0;*/
    padding: 0;
    align-self: center;
    & input[type='submit']{
        margin: 0;
    }
}

form:has(:invalid) span.submit-button:hover, form:has(:invalid) + .botoes span.submit-button:hover{
    cursor: not-allowed;
    /*& input[type='submit']{
        background-color: white;
        color:#006699;
    }*/    
}

form:not(:has(:invalid)) span.submit-button:hover, form:not(:has(:invalid)) + .botoes span.submit-button:hover{
    /*cursor: not-allowed;*/
    & input[type='submit']{
        background-color: aliceblue;
        color:#006699;
    }    
}

form input:not([type="submit"]):not(.rm) {
    padding-left: 4px;
}

input[readonly] {
    background-color: #eee;
    cursor: default;
    outline: none;
}

/*form:has(input:invalid) input[type="submit"], form:has(select:invalid) input[type="submit"] {
    cursor: not-allowed;
    pointer-events: none;
    background-color: darkgrey;
}*/

form:has(:invalid) input[type="submit"], form:has(:invalid) + .botoes input[type="submit"]{
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--general-button-bgcolor-inactive);
    color: var(--general-button-color-inactive);
    border-color: var(--general-button-bocolor-inactive);
}

.center-align{
    justify-self: center;
}

.right-align{
    justify-self: right;
}

.blocked-input{
    pointer-events: none;
    user-select: none;
}

.button-ruler{
    display: flex;
    flex-flow: row;
    gap: 0.2rem;
    width: max-content;

    & a.botao{
        min-width: unset;
        width: 2.2rem;
        max-height: 1.8rem;
        display: flex;
        align-items: center;

        & img{
            /*filter: invert(1);*/
            width: 1.4rem;
            transition: scale 0.3s;
        }
        
        &:hover img{
            /*filter: none;*/
            scale: 1.1;
        }
    }
}

a.botao:not([href]){
    background-color: #eee;
    cursor: not-allowed;
    & img{
        filter: opacity(0.5);
    }
}

.admin div.small-section{
    width: fit-content;
    align-self: flex-start;
    min-width: 50%;
    margin-bottom: 1rem;
}

#main-admin{
    padding: 1rem;
    /*background-color: #eee4;*/
    border-radius: 8px;
}

#main-admin > div:not(.separadores,.botoes){
    display: none;
    position: relative;
    z-index: 1;
    background-color: white;
}

.admin table{
    background-color: white;
    border-spacing: 0;
    /*margin-top: -1px;*/
}

.separadores{
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 0.2rem;
    --section-selected: "none";

    & input[type="radio"]{
        display: none;
        &:checked + label{
            background-image: linear-gradient(to bottom, aliceblue 20%, white);
            /*background-color: aliceblue;*/
            color: black;
            /*border-bottom: 2px solid darkcyan;*/
            border-color: lightblue;
            z-index: 10;
            bottom: -0.062rem;
            user-select: none;
        }
    }

    & label{
        /*text-transform: uppercase;*/
        font-variant: all-small-caps;
        position: relative;
        bottom: -4px;
        z-index: 0;
        color: #666;
        padding: 1rem;
        /*background-color: #eee;*/
        font-weight: bold;
        border-radius: 8px 8px 0 0;
        /*border: 1px solid lightgrey;*/
        cursor: pointer;
        transition: 0.3s;
        border: 1px solid #ddd;
        border-bottom: none;
        font-size: larger;

        &:hover{
            color: black;
        }
    }
}

#main-admin:has(.separadores input#campanhas:checked) #lista-campanhas{
    display: block;
    min-height: 50vh;
}

#main-admin:has(.separadores input#tabelas:checked) #lista-tabelas{
    display: block;
    min-height: 50vh;
}

#main-admin:has(.separadores input#stats:checked) #show-stats{
    display: block;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 0 8px 8px;
}

.admin table:not(.valida table) tr th{
    /*background-color: aliceblue;*/
    background-image: linear-gradient(to bottom, white 10%, aliceblue 90%);
    font-variant: all-small-caps;
    border: 1px solid lightblue;
    color: black;

    /*&:not(:first-of-type){
        border-left: 1px dotted steelblue;
    }*/
}

.admin table:not(.valida table) tr:hover:not(thead tr) td {
    /*background-color: aliceblue !important;*/
    border-block: 1px solid lightblue;
}

.admin table:not(.valida table) tr:nth-child(even){
    background-color: #eee6;
}

.admin table:not(.valida table) thead{
    position: sticky;
    top: 0;
    z-index: 1;
}

div.html-error{
    display: flex;
    padding-top: 10vmin;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 2rem;
}

form :is(select,input,textarea):user-valid + span.popup {
    display: none !important;
    opacity: 0 !important;
    z-index: -1;
}

form :is(select,input,textarea):user-invalid + span.popup {
    display: block !important;
    opacity: 1 !important;
    z-index: 1;
}

form span:has(input[type="radio"]:user-valid) + span.popup {
    display: none !important;
    opacity: 0 !important;
    z-index: -1;
}

form span input[type="file"] + span.popup {
    top: 100%;
}

form input[type="file"] + span.popup {
    top: 100%;
}

form span:has(input[type="radio"]:user-invalid) + span.popup {
    display: block !important;
    opacity: 1 !important;
    z-index: 1;
}

form span:has(input[type="radio"]:valid) + span.popup{
    display: none !important;
    opacity: 0 !important;
    z-index: -1;
}

form :is(select,input,textarea):valid + span.popup{
    display: none !important;
    opacity: 0 !important;
    z-index: -1;
}

/*form :is(select,input,textarea):invalid + span.popup {
    display: block !important;
    opacity: 1;
}*/


/*form span.joiner{
    position: relative;
}*/

/*form label{
    anchor-name: --warning;
}*/

span.popup{
    /*position-anchor: --warning;
    position-area: x-end bottom;*/
    display: none;
    opacity: 0;
    transition: opacity .3s ease, display .3s ease allow-discrete;
    padding: 0.4rem;
    background-color: pink;
    font-size: small;
    border-radius: 4px;
    height: fit-content;
    width: fit-content;
    /*top: 4rem;
    left: 12rem;*/
    box-shadow: 2px 2px 6px 0px #333;
    /*right: 0;*/
    position: absolute;
    /*margin-top: 0.2rem;*/
    /*top: 100%;*/
    /*left: 0;*/
    z-index: -1;
    grid-column: 2;
    user-select: none;
    text-wrap: nowrap;
    /*max-width: 12rem;*/
}

.agregator span.popup{
    top: 100%;
}

span.popup::before{
    content: " ";
    background-color: pink;
    rotate: 45deg;
    left: 0.6rem;
    position: absolute;
    /* display: block; */
    height: 1rem;
    width: 1rem;
    top: -0.4rem;
}

@starting-style {
    form :is(select,input,textarea):user-invalid + span.popup {
      opacity: 0;
    }
}

@starting-style {
    form :is(select,input,textarea):user-valid + span.popup, form :is(select,input,textarea):valid + span.popup{
      opacity: 1;
    }
}

/*span:has(input[id^="gps"]){
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}*/
.coords{
    /*display: inline-flex;
    align-items: center;
    gap: 0.2rem;*/
    white-space: nowrap;
}

.coords span:not(.popup){
    position: relative;
    display: inline-block;
    & img{ /*strong*/
        /*white-space: pre-wrap;*/
        /*margin-right: 0.4rem;*/
        max-width: 1.6rem;
    }
    & input{
        /*font-size: smaller;*/
        width: 16rem;
    }
}

sup.inner{
    font-size: 1.3rem;
    font-weight: bold;
    position: relative;
    top: 0.1rem;
    left: -0.7rem;
}

.labels{
    text-align: left;
    white-space: nowrap;
}

.labels th[data-req]::before{
    content: "\25cf   ";
    color: crimson;
}

table.simple-table {
    width: auto;
    padding: 0.4rem;
    /*border: 4px solid lightblue;*/
    margin: 0;
    text-transform: none;
    font-size: inherit;
    width: clamp(20rem, 100%, 32rem);
    background-color: #Eee8;
    border-radius: 4px;
}

table.simple-table td:last-of-type:not(td[colspan]) {
    text-align: right;
}

table.simple-table td:first-of-type {
    font-weight: bold;
}

table.simple-table td.no-border {
    border: none;
}

table.simple-table td {
    padding: 0.2rem;
}

div.forms form:last-of-type{
    grid-column: 3;
    grid-row: 1;
    place-self: end;
}

div.forms form:first-of-type{
    display: flex;
}

div.forms form:first-of-type select{
    height: 1.8rem;
}

/*table.simple-table span.camp{
    font-size: smaller;
}*/

.print .glue-tag{
    position: absolute;
}

form td select {
    max-width: 20rem;
}

.ordered-column{
    color: brown;
}

.separadores input:checked{
    --section-selected: attr(data-section);
}

.separadores:has(input#entidade:checked) + form fieldset >  div[id="dados-entidade"]{
    display: grid;
}

.separadores:has(input#servidor:checked) + form fieldset >  div[id="dados-servidor"]{
    display: grid;
}

.separadores:has(input#mail:checked) + form fieldset >  div[id="dados-mail"]{
    display: grid;
}

.separadores:has(input#users:checked) + form fieldset >  div[id="dados-users"]{
    display: grid;
}

.separadores:has(input#autarquias:checked) + form fieldset >  div[id="dados-autarquias"]{
    display: grid;
}

.separadores:has(input#params:checked) + form fieldset >  div[id="dados-params"]{
    display: grid;
}

.separadores:has(input#id:checked) + form fieldset >  div[id="camp-id"]{
    display: grid;
}

.separadores:has(input#area:checked) + form fieldset >  div[id="camp-area"]{
    display: grid;
}

.separadores:has(input#mods:checked) + form fieldset >  div[id="camp-mods"]{
    display: grid;
}

.separadores:has(input#docs:checked) + form fieldset >  div[id="camp-docs"]{
    display: grid;
}

.separadores:has(input#prej:checked) + form fieldset >  div[id="camp-prej"]{
    display: grid;
}

.separadores:has(input#reg:checked) + form fieldset >  div[id="camp-reg"]{
    display: grid;
}

.separadores + form fieldset > div:not(.botoes){
    display: none;
    /*display: grid;*/
    grid-template-columns: subgrid;
    gap: 0.4rem;
}

body.vertical{
    grid-template-rows: repeat(4,auto);
}

.vertical h2.title{
    text-align: center;
    grid-column: 1/-1;
    /*grid-row: 1;*/
    margin: auto;
    width: fit-content;
    background-color: unset;
    padding: 1rem;
    position: relative;
    z-index: 10;
    /*border-radius: 4px;*/
    border: none;
}

.separadores.vertical{
    flex-flow: column;
    width: 10rem;
    border-right: 2px solid lightblue;
    padding-top: 1rem;
    min-height: 26rem;
    /*margin-right: -6rem;*/
    /*& input:checked + label{*/
    & input[type="radio"]:checked + label{
        background-image: linear-gradient(to right, aliceblue 20%, white);
        /* background-color: aliceblue; */
        color: black;
        /* border-bottom: 2px solid darkcyan; */
        border-color: lightblue;
        z-index: 10;
        right: -1.08rem;
        bottom: 0;
    }
}

.separadores.vertical label{
    position: relative;
    right: -1rem;
    bottom: 0;
    z-index: 0;
    width: 8rem;
    text-align: right;
    border: 1px solid lightblue;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding-right: 8px;
    /*font-size: small;*/
    user-select: none;
    cursor: pointer;
}

form .sub-form-description{
    font-variant: all-small-caps;
    border: 1px solid lightblue;
    font-weight: 600;
    font-size: larger;
    margin-top: 0;
    background-color: #f0f8ff61;
    color: black;
    padding: 2px 8px;
    border-radius: 4px;
    & span{
        font-variant: normal;
        /*color: aliceblue;*/
        display: block;
        font-size: small;
        /*background-color: aliceblue;*/
        font-weight: normal;
        border-radius: 4px;
    }
}

.vertical form div.agregator input[type="text"]{
    /*:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"])*/
    width: 30rem;   
}

.vertical form div.agregator select:not([multiple]), .vertical form select:not([multiple]){
    width: 10rem
}

select[multiple]{
    max-width: 90vw;
}

.vertical form div.agregator label:not(:first-of-type){
    grid-column: inputs;
}

.vertical form div.agregator :is(input[type="password"], input[type="date"],input[type="datetime-local"]), .vertical form :is(input[type="password"], input[type="date"],input[type="datetime-local"]){
    width: 10rem;
}

form div.agregator span.multi-opt{
    padding: unset !important;
}

.vertical form div.agregator span:not(.popup){
    grid-column: inputs;
    width: max-content;
    /*align-items: center;*/
    padding: 0 0 0.4rem 0;
}

/*.vertical form div.agregator span:not(:has([type="radio"])){
    align-items: center;
}*/

.vertical form div.block-section{
    display: block;
    grid-column: inputs;
    border: 1px dotted steelblue;
    border-radius: 4px;
    padding: 1rem;
    & > p:first-of-type{
        font-weight: bold;
        text-transform: uppercase;
        font-size: smaller;
    }
    & div{
        display: flex;
        /*grid-auto-flow: column;*/
        justify-content: flex-start;
        align-items: flex-end;
        gap: 1rem;
        padding: 4px 4px 4px 0;
        width: fit-content;
        position: relative;

        & label{
            justify-self: flex-start;
        }
    }
}

.vertical form div div span:not(.multi-opt){
    display: flex;
    flex-flow: column;
    gap: 0.3em;
    align-items: flex-start;
    & label{
        align-self: unset;
    }
}

.vertical form textarea{
    min-width: 24rem;
}

.vertical form div div span:is(:not(:first-of-type),:has(input[type="file"])){
    flex-flow: row;
    gap: 1rem;
    align-items: center;
}

form span:has(input[type="file"]){
    display: flex;
    flex-flow: row;
    gap: 1rem;
    align-items: center !important;
}

form label:has(+ div.block-section){
    align-self: unset;
}

.vertical form table{
    width: fit-content;
}

.vertical form table tr{
    position: relative;
}

form table td{
    padding-right: 0.6vw;
}

form p.topic-title{
    margin-top: 0;
    padding: 4px;
    text-transform: uppercase;
    color: darkred;
    font-weight: bold;
}

hr{
    grid-column: 1 / -1;
    width: 100%;
}

.pesquisa{
    display: grid;
    grid-template-columns: 12rem 1fr;
    grid-template-rows: auto 6rem 1fr auto;
    gap: 0 1rem;
    & .display-data div[id]{
        display: none;
        padding: 1rem;
        border-top: 1px solid lightblue;
        position: relative;
        background-color: white;
    }
    & form{
        grid-area: unset;
        grid-column: 1/-1;
        border: 1px solid lightblue;
        grid-template-columns: auto 1fr;
        & input[type="text"]{
            width: 100%;
        }
        & .botoes{
            justify-content: center;
            align-items: center;
        }
    }
    & h2{
        grid-column: 1/-1;
        align-self: baseline;
    }
    & .acoes{
        flex-flow: column;
        gap: 0;
        & .botao{
            background-color: unset;
            color: midnightblue;
            justify-content: end;
            box-shadow: none;
            /*border-top: 1px solid steelblue;*/
            border-radius: 4px;
            border: 1px solid transparent;
            padding-right: 1rem;
            &:hover{
                background-color: aliceblue;
                border-color: lightblue;
                color: black;
            }
            /*&:last-of-type{
                border-bottom: 1px solid steelblue;
            }*/
        }
    }
    & .separadores{
        /*border-bottom: 1px solid lightblue;*/
        user-select: none;
        & label{
            /*background-color: unset;*/
            text-transform: none;
            font-variant: all-small-caps;
            /*border:none;*/
            /*border-bottom: 2px solid transparent;*/
            color: #999;
            /*padding-block: 0 0.4rem;*/
            /*bottom: 0;*/
            &:hover{
                color: black;
            }
        }
        & input[type="radio"] {
            &:checked + label{
                background-color: white;
                /*border-bottom: 2px solid deepskyblue;*/
                top: 1px;
                color: midnightblue;
                border: 1px solid lightblue;
                border-bottom: none;
            }
        }
    }
}

.pesquisa .separadores:has(input#anex:checked) ~ div[id="prod-anex"]{
    display: block;
}

.pesquisa .separadores:has(input#id:checked) ~ div[id="prod-id"]{
    display: block;
}

.display-data{
    border-left: 2px solid lightblue;
    padding-left: 0.6rem;
}

#descricao-campanha{
    width: clamp(24rem, 8rem + 64vw, 84rem);
    background-color: #eee4;
    & ol{
        margin-left: 2rem;
    }
}

span:has(input[type="radio"]) {
    gap: 0 !important;
}

.fit-wide{
    grid-column: 1/-1;
}

div.assinatura{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 2rem;
    & p{
        margin-top: 0.2rem;
    }
}

table.fit-size{
    width: fit-content;
}

table.fit-size tr td {
    border-top: 1px dotted gainsboro;
}

form.simples:has(.large){
    margin: unset;
    padding: 0;
}

form .agregator > span.field-help{
    grid-column: 2;
    font-size: small;
}

form[data-edit][id$='identificacao'] :is(input:not([type="button"]):not([type="submit"]),select,textarea){
    pointer-events: none;
    user-select: none;
    background-color: #eeea;
}

form[data-edit] table tr:has(input[id^='id-record']) td :is(input:not([type="button"]):not([type="submit"]),select,textarea,input.rm){
    pointer-events: none;
    user-select: none;
    background-color: #eeea;
}

.form-msg{
    font-size: small;
    background-color: #9acd3263;
    padding: 0 1rem;
    margin-bottom: 0.1rem;
    height: 0;
    transition: height 0.5s;
    overflow: hidden;
}

form :is(input,textarea,select):user-invalid{
    border-color: red;
}

#user-control{
    padding: 1rem;
    min-width: fit-content;
    & div:not(.separadores,.botoes){
        border: 1px solid lightblue;
        border-radius: 0 4px 4px;
        position: relative;
        z-index: 1;
        background-color: white;
        & p:first-child{
            margin: 0;
            font-size: medium;
            background-image: linear-gradient(to top, aliceblue 20%, white);
            text-align: center;
            font-variant: all-small-caps;
            font-weight: bold;
            padding: 0.2rem;
            border-radius: 0 4px 0 0;
        }
        & p:not(:first-child){
            margin-top: 1rem;
            font-size: small;
            text-align: center;
        }
    }
    & .separadores ~ div{
        display: none;
    }
}

main:has(#user-control){
    max-width: 28rem;
    /*border: none;*/
    margin: auto;
    & form{
        padding-block: 1rem;
    }
    & h1 {
        font-size: large;
        text-align: center;
        font-weight: normal;
    }
    /*& h2{
        text-transform: none;
        background-color: unset;
        font-variant: unset;
        font-size: initial;
    }*/
}

#user-control:has(.separadores input#login:checked) #login-user{
    display: block;
}

#user-control:has(.separadores input#registo:checked) #registo-user{
    display: block;
}

input#captcha-text{
    max-width: 5rem;
}

img#renew-captcha{
    width: 1.4rem;
    cursor: pointer;
    filter: none;
    margin: 4px;
    transition: rotate 0.3s;
}

img#renew-captcha:hover{
    rotate: 30deg;
}

img#img-captcha{
    border-radius: 4px;
    border: 1px solid lightblue;
}

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

div.card{
    min-width: 10rem;
    min-height: 8rem;
    background-color: #eee;
    padding: 0.6rem;
    border-radius: 4px;
    & h2{
        border: none;
        background-color: unset;
        padding: unset;
    }
}

main.dashboard{
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    width: 100%;
    & .separadores ~ div:not(.botoes){
        display: none;
        place-content: start;
    }

    & h2{
        background-color: unset;
        padding: 0;
        border: none;
        margin: 0;
    }
    & h2 + p{
        margin-top: 0;
        font-weight: bold;
        font-size: small;
    }
    & table{
        & th{
            text-align: left;
            background-color: #eee;
        }
        & tbody th{
            width: 6rem;
            background-color: unset;
        }
        & tr:nth-child(even){
            background-color: #eee6;
        }
    }
}

body.dashboard{
    gap: 1rem;
    & h2{
        background-color: unset;
        padding: 0;
        border: none;
        /*margin: 0;*/
    }
}

.separadores:has(input#identificacao:checked) ~ div[id="identificacao-sec"]{
    display: grid;
    grid-template-columns: 1fr;
}

.separadores:has(input#exploracoes:checked) ~ div[id="exploracoes-sec"]{
    display: grid;
    grid-template-columns: 1fr;
}

.separadores:has(input#declaracoes:checked) ~ div[id="declaracoes-sec"]{
    display: grid;
    grid-template-columns: 1fr;
}

.info-msg {
    align-self: start;
    flex: 0 1 26rem;
    padding: 0 0.8rem;
    border-radius: 8px;
    border: 1px solid lightgrey;
    background-color: #eee6;
}

/*.info-msg p:first-of-type {
    font-weight: 600;
}*/

main.dashboard table tr{
    vertical-align: top;
}

div.saudacao{
    /*margin: 0 auto 0 0;*/
    display: flex;
    /*width: 100%;*/
    flex-flow: row wrap;
    padding: 0.4rem;
    border-radius: 4px;
    align-self: baseline;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    & div > p:first-of-type{
        font-weight: bold;
    }
}

div.listagens{
    grid-column: 1/-1;
    & ul{
        display: flex;
        flex-flow: row wrap;
        gap: 1rem;
        list-style: none;
        padding: 1rem;
        & li{
            border: 1px solid deepskyblue;
            border-radius: 4px;
            display: flex;
            width: 14rem;
            justify-content: center;
            align-items: center;
            & a{
                padding: 2rem;
                text-align: center;
                width: 100%;
                height: 100%;
                font-variant: all-small-caps;
                font-size: large;
            }
            &:hover{
                background-color: aliceblue;
            }
        }
    }
}

div.oneline{
    margin: 1rem;
}

div.valida {
    display: contents;
}

form#assina_op:not(:has(input:checked)) + .botoes .submit-button{
    cursor: not-allowed;
}

/*form#assina_op:valid + .botoes .submit-button{
    cursor: pointer;
}*/

form#assina_op:not(:has(input:checked)) + .botoes input[type="submit"] {
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--general-button-bgcolor-inactive);
    color: var(--general-button-color-inactive);
    border-color: var(--general-button-bocolor-inactive);
}

/*form#assina_op:valid + .botoes input[type="submit"] {
    cursor: pointer;
    pointer-events: all;
    background-color: var(--general-button-bgcolor);
    color: var(--general-button-color);
    border-color: var(--general-button-bocolor);
}*/

.admin #lista-op{
    & form{
        border:none;
    }

    & h2{
        font-variant: normal;
        font-size: medium;
        margin: 0;
    }
}

.print.controlo h3 {
    margin: 2rem 0 1rem 0;
    background-color: #ccca;
    padding-block: 0.2rem;
    padding-inline: 0.4rem;
    border-radius: 4px;
}

.break{
    word-break: break-all;
}

.footer{
    margin-top: auto;
    & p{
        margin: 0;
    }
}

.print #logotipo{
    filter: grayscale();
}

.print td.table-topic{
    text-transform: uppercase;
    font-weight: bold;
}

.print tr.toprow th:last-of-type{
    min-width: 14rem;
}

.print #sign-visitation{
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}

.print table :is(th#nome,td[headers='nom']){
    max-width: 20rem;
}