/*@font-face{
	font-family: 'Dosis';
	src: url('../fonts/Dosis-Light.ttf');
}*/

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

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

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

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

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

:root{
    --action-color: gold;
    --action-color-hover: #ffea79;
    --background-box-color: #eee6;
    --shadow-color: darkgoldenrod;
    --message-color: #baddba;
    --link-color: light-dark(mediumblue,#19dddd);
    --link-active-color: light-dark(dodgerblue,turquoise);
    color-scheme: light dark;
}

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

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

::selection {
    color: black;
    background-color: gold;
}

html{
    height:100%;
    scroll-behavior: smooth;
}

body {
    font: normal 124% 'Dosis';
    line-height: 1.4em;
    margin: auto;
    display: grid;
    grid-template-rows: 4rem 1fr auto;
    gap: 0;
    min-height: 100%;
    max-width: 2400px;
    /*max-height: 1600px;*/
    background-color: black;
}

header:not(.datepicker__header) {
    /*height: 3rem;*/
    padding-inline: 1rem;
    width: -webkit-fill-available;
    width: -moz-available;
    /*width: 100%;*/
    background-color: white;
    color: black;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 150;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 12vw;
    /*border-bottom: 1px solid black;*/
    box-shadow: 0px 0px 7px grey;
}

/*header p{
    width: -webkit-fill-available;
}*/

#mobile-menu {
    display:none;
}

#mobile-menu:checked ~ div.pages {
    /*top: 4rem;
    height: auto;*/
    max-height: 12rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid darkgrey;
} 

/*#mobile-menu:checked ~ .menu-icon {
    position: fixed;
}*/

#mobile-menu:checked ~ .menu-icon .bar {
    background:transparent;
}

#mobile-menu:checked ~ .menu-icon .bar::before {
    transform: rotate(45deg); width:18px; left:3px;
}

#mobile-menu:checked ~ .menu-icon .bar::after {
    transform: rotate(-45deg); width:18px; left:3px;
}

.menu-icon {
    display: none;
    width: 40px;
    height: 40px;
    background: white;
    /*position: absolute;*/
    right: 14px;
    top: 0;
    cursor: pointer;
    z-index: 20;
	/*border:1px solid #ccc;*/
	position:absolute;
	/*box-shadow: 0px 1px 1px #999;*/
    color:transparent;
    background-color: transparent;
}

.bar {
    display: block;
    width: 20px;
    height: 3px;
    background-color: #333;
    position: absolute;
    left: 10px;
    top: 19px;
    transition: background-color 0.3s;
}

.bar::before {
    content: "";
    display: block;
    width: 20px;
    height: 3px;
    background-color: #333;
    position: absolute;
    left: 0;
    top: -6px;
    transform-origin: left top;
    transition: 0.3s;
}

.bar::after {
    content: "";
    display: block;
    width: 20px;
    height: 3px;
    background: #333;
    position: absolute;
    left: 0;
    top: 6px;
    transform-origin: left bottom;
    transition: 0.3s;
}

header div.menu{
    display: flex;
    /*width: fit-content;*/
    font-size: smaller;
    /*gap: 1rem;*/
    font-weight: bold;
    font-variant: all-small-caps;
    font-size: 120%;
}

header div.menu a{
    /*margin-right: 0;*/
    color: black;
    text-decoration: none;
    padding-inline: 1rem;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.3s, color 0.3s;
}


header div.pages a{
    height: 100%;
    padding: 2.2rem 1rem 0 1rem;
    border-radius: 0;
}

header div.menu:last-child a{
    padding-inline: 0.5rem;
    display: inline-flex;
}

header div.menu a:not(a[href]){
    color:grey;
    cursor: default;
}

header div.menu a[href]:hover{
    /*color:darkturquoise;*/
    background-color: var(--action-color);
}

header div.menu img#user-icon{
    max-width: 1.4rem;
    align-self: flex-end;
    filter: invert(0);
}

header div.menu a.sel-menu{
    background-color: var(--action-color);
    color: black;
}

header div.menu a.sel-menu img#user-icon {
    filter: invert(0);
}

header div.logo{
    margin-right: auto;
    position: relative;
}

header div.logo img{
    max-width: 12rem;
    transition: left 0.3s;
    position: absolute;
    top: -3.6rem;
    left: 0;
}

header div.logo img:hover{
    /*scale: 1.04;*/
    left: -2px;
}

main#home{
    margin: 0;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-rows: 30rem 1fr 20rem;  */
    /*position: relative;*/
    gap: 2rem;
    padding: 0;
    place-content: baseline;
    justify-content: stretch;
}

main{
    padding: 1rem;
    background-color: white;
    color: black;
    /*place-content: baseline;
    justify-content: stretch;*/
}

main#reserve{
    display: grid;
    grid-template-columns: 14rem 1fr;
    place-items: flex-start;
}

main#reserve .back-button{
    align-self: center;
}

main#cli-area table a.cancel{
    background-color: black;
    border-radius: 50%;
    text-decoration: none;
    /*padding: 0.2rem 0.5rem;*/
    /*padding-inline: 0.64rem;*/
    color: lightgrey;
    font-weight: bold;
    font-size: smaller;
    font-variant: normal;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* gap: 0; */
    width: 30px;
    height: 30px;
    margin-left: 1rem;
}


main#login{ /*, main#cli-area*/
    display: grid;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fit,minmax(calc(22vw + 14rem), 1fr));
    grid-template-rows: 4rem auto;
    place-content: baseline;
}

span#captcha{
    user-select: none;
    pointer-events: none;
    padding: 1rem;
    text-decoration: line-through;
    font-style: italic;
    font-size: x-large;
    border: 1px solid light-dark(black, white);
    background-color: light-dark(#333, #eee);
    color: light-dark(white, black);
    width: 5rem;
    border-radius: 0 !important;
}

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

img#renew-captcha{
    width: 1.4rem;
    cursor: pointer;
    filter: none;
}

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

main#cli-area table a.cancel:hover{
    background-color:darkred;
}

main#cli-area p.description{
    /*grid-column: 1/-1;*/
    /*justify-self: end;
    margin: 0;*/
    font-size: initial;
    font-weight: bold;
}

main#cli-area > div[id]{/*:not(.actions):not(.dashboard) {*/
    /*overflow-x: auto;
    overflow-y: visible;*/
    display: flex;
    flex-flow: column;
    /*align-items: center;*/
    position: relative;
    /*overflow: visible;*/
}

main#tours{
    padding: 1rem;
}

main#tours label.tabbed, main#admin label.tabbed{
    /*margin: 0.5rem;*/
    /*padding: 1em 0.2em 0.2em;*/
    border-bottom: 2px solid white;
    color: black;
    cursor: pointer;
    margin-right: 4px;
    /*text-transform: uppercase;*/
    font-variant: all-small-caps;
    font-weight: bolder;
    transition: 0.3s;
    padding: 0.4rem 0.6rem;
    border-radius: 4px 4px 0 0;
    text-align: center;
    min-width: 6rem;
    /*font-size: clamp(0.84rem,3vw,1rem);*/
    font-size: clamp(1.2rem,5vw,1.6rem);/*clamp(1.3rem,1.4vw,2rem);*/
    position: relative;
    top:0.75rem;
    left: 0.5rem;
    display: inline-flex;
    justify-content: center;
    margin-top: 4px;
}

main#tours label.tabbed:hover, main#admin label.tabbed:hover{
    border-bottom: 2px solid lightgrey;
    /*background-color: lightgrey;*/
    /*color: black;*/
}

main#tours input.tab-choice, main#admin input.tab-choice{
    display: none;
}

main#tours > div:not(.tabs){
    display: none;
    margin-top: 0.74rem;
    /*border: 2px solid black;*/
    border-radius: 0.6rem;
    transition: grid-template-rows 0.5s;
    padding: 8px;
    max-width: calc(34vw + 28rem);
    /*max-width: 70vw;*/
}

main#admin > div[id]{/*:not(.tabs):not(.actions):not(.dashboard){*/
    display: none;
    margin-top: 0.74rem;
    /*border: 2px solid black;*/
    border-radius: 0.6rem;
    transition: grid-template-rows 0.5s;
    padding-top: 8px;
}

main#tours input:checked + label.tabbed, main#admin input:checked + label.tabbed{
    border-bottom: 2px solid gold;
    /*background-color: black;*/
    /*color: white;*/
}

#photoRoll {
    width: -webkit-fill-available;
    width: -moz-available;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-block: 2rem;
    overflow: hidden;
    position: relative;
}

p#idtour{
    display: grid;
    margin: 0.5rem 0 0 1rem;
    font-variant: all-small-caps;
    font-size: 120%;
    border: 2px solid darkturquoise;
    padding-inline: 1rem;
    border-radius: 4px;
    max-width: fit-content;
}

p#idtour span:last-child{
    position: relative;
}

span.nvagas{
    transition: all 0.5s;
    padding-inline: 8px;
    display: inline-flex;
    border-radius: 50%;
}

span:has(span.nvagas), td:has(span.nvagas){
    position: relative;
}

a:not([href]):hover{
    box-shadow: none;
}

input.action-button[disabled] {
    background-color: lightgrey;
    box-shadow: none;
    cursor: not-allowed;
    color:grey;
}

div#company{
    margin-left: 15%;
}

div#company img{
    /*max-width: 14rem;*/
    z-index: 20;
    filter: invert(1) drop-shadow(2px 4px 6px black);
    /*width: clamp(6rem,14vw,14rem);*/
    width: clamp(22rem,28vw,32rem);
    animation: slideTop 500ms linear;
    position: relative;
}

@keyframes slideTop {
    from {top: -200px; opacity: 0;}
    to {top: 0; opacity: 1;}
}

#photoRoll div[id*="img"] {
    width:100%;
    position:absolute;
    /*left:0;*/
    /*top:0;*/
    /*opacity: 0;*/
    padding-block: 10rem;
    background-size: cover;
    background-position: center 82%;
    max-width: 2400px;
    background-color: transparent;
    /*animation-name: rollimages;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;*/
    background-repeat: no-repeat;
}

/*#photoRoll > div:not(#company){
    opacity: 0;
}*/

/*#photoRoll #img1  {animation-delay: 0s;}
#photoRoll #img2  {animation-delay: 10s;}
#photoRoll #img3  {animation-delay: 20s;}
#photoRoll #img5  {animation-delay: 30s;}

@keyframes rollimages {
    0% {opacity: 0;}
    4% {opacity: 1;}
    25% {opacity: 1;}
    27% {opacity: 0;}
    100% {opacity:0;}
}*/

h1 {
    font-variant: small-caps;
    grid-column: 1/-1;
}

h2 {
    margin-left: 1rem;
}

p.message{
    font-size: smaller;
    margin: 0;
    /*margin-left: 1rem;    */
    display: inline-block;
    padding: 4px 1rem;
    border-radius: 4px;
    grid-column: 1 / -1;
}

p.form-message{
    grid-column: 1 / -1;
    font-size: smaller;
    margin-top: 0;
    /*background-color: var(--message-color);*/
    padding-inline: 4px;
    border-radius: 4px;
    /*border: 1px solid gainsboro;*/
    /*color: black;*/
}

#warnings:not(:empty){
    opacity: 1;
    grid-column: 2;
}

#warnings:empty{
    opacity: 0;
    grid-column: 2;
}

.error{
    color: darkred;
    /*font-weight: bold;
    font-variant: all-small-caps;*/
    font-size: smaller;
    background-color: pink;
    display: inline-block;
    padding-inline: 1rem;
    padding-block: 0.2rem;
    border-radius: 2px;
    margin-left: 1rem;
    margin-block: 0;
    width: fit-content;
    }

.noerror{
    color: black;
    /*font-weight: bold;
    font-variant: all-small-caps;*/
    font-size: smaller;
    background-color: darkseagreen;
    display: inline-block;
    padding-inline: 1rem;
    padding-block: 0.2rem;
    border-radius: 2px;
    margin-left: 1rem;
    margin-block: 0;
    width: fit-content;
}

p.subtitle{
    font-size: 75%;
    margin-top: -1.4rem;
    margin-left: 1rem;
    text-align: left;
}

main#admin p:is(.noerror,.error), main#cli-area p:is(.noerror,.error){
    position: fixed;
    margin-left: -1rem;
    bottom: 0;
    z-index: 90;
    width: -webkit-fill-available;
    width: -moz-available;
    border-radius: 0;
}

p.blind{
    display: none;
}

main#home h1{
    justify-self: center;
    /*/margin-top: 6rem;*/
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: normal;
    /*font-variant: normal;*/
    /*color: darkcyan;*/
    text-align: center;
    /*max-width: 80vw;*/
    margin-inline: 1rem;
    /*font-family: Macondo;*/
    font-weight: normal;
    margin-bottom: 0;
    text-wrap: balance;
}

main#home h1 span{
    font-weight: bold;
    color: black;
}

main#tours[lang="pt"] input.action-button:checked + label::before{
    content: "Menos";
}

main#tours[lang="pt"] input.action-button:not(:checked) + label::before{
    content: "Mais";
}

main#tours[lang="en"] input.action-button:checked + label::before{
    content: "Hide";
}

main#tours[lang="en"] input.action-button:not(:checked) + label::before{
    content: "See";
}

div.tour-resume:has(input.action-button:checked) + div.details{
    /*max-height: 1000rem;*/
    /*transition: max-height 0.2s cubic-bezier(1,0,1,0);*/
    grid-template-rows: 1fr;
}

/*main#tours a{
    color: #017878;
    text-decoration: none;
}

main#tours a:hover{
    color:lightseagreen;
}*/

main#cli-area > div .back-button{
    align-self: flex-end;
}

div.box {
    padding: 2rem;
    transition: background-size 0.6s, background-color 0.3s;
    display: flex;
    flex-flow: column;
    color: white;
    background-size: 100%;
    background-position: center;
    text-align: center;
    /*padding-block: 5rem;*/
    flex: 1 0 22rem;
    overflow: hidden;
    cursor: default;
    min-height: 22rem;
}

div.box h2{
    color: white;
    text-align: center;
    text-shadow: 1px 1px black;
    /*font-weight: normal;*/
    font-variant: all-small-caps;
    padding-block: 0.2rem;
    border-radius: 4px;
    margin-top: 0;
    margin-left: 0;
    font-size: 2rem;
}

div.box p{
    /*align-self: center;*/
    text-shadow: 1px 1px black;
    /*background-color: hsl(0deg 0% 0% / 39%);*/
    padding: 0.5rem 1rem;
    
    font-size: 1.2rem;
}

div#boxes{
    /*position: absolute;*/
    /*top: 50%;
    z-index: 20;*/
    display: flex;
    /*gap: 2rem;*/
    width: -webkit-fill-available;
    width: -moz-available;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 5rem;
    /*margin-inline: 1rem;*/
}

div.box:hover, div.box:focus {
    /*scale: 102%;*/
    /*background-position: center;*/
    background-size: 120%;
    background-color: transparent;
}

div#box1{
    /*background-image: linear-gradient(to bottom, white, transparent 10% 90%, white), url(../images/walk/IMG_04_small.jpg);*/
    background-image: url(../images/walk/IMG_04_small.jpg);
}

div#box2{
    /*background-image: linear-gradient(to bottom, white, transparent 10% 90%, white), url(../images/caves/cave_IMG_03_small.jpg);*/
    background-image: url(../images/cave/cave_IMG_03_small.jpg);
}

div#box3{
    /*background-image: linear-gradient(to bottom, white, transparent 10% 90%, white), url(../images/sail/sail_IMG_01_small.jpg);*/
    background-image: url(../images/sail/sail_IMG_01_small.jpg);
}

div#box4{
    /*background-image: linear-gradient(to bottom, white, transparent 10% 90%, white), url(../images/geo/geo_IMG_01_small.jpg);*/
    background-image: url(../images/geo/geo_IMG_01_small.jpg);
}

div.box a.button{
    padding: 1rem 2rem;
    align-self: center;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--action-color-hover);
    /*box-shadow: 2px 2px 8px 0px black;*/
    color: black;
    margin-top: auto;
    transition: background-color 0.3s, min-width 0.8s;
    font-variant: all-small-caps;
    min-width: 12rem;
    font-weight: bold;
}

div.box a.button:hover{
    background-color: var(--action-color);
    /*min-width: 152%;*/
}


#context {
    /*z-index: 20;*/
    padding: 1rem;
    margin-bottom: 1rem;
    max-width: 90vw;
    margin-inline: auto;
    /*font-family: 'Macondo';*/
    /*font-size: 1.2rem;*/
    grid-row: 3;
}

form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    max-width: 50rem;
    margin: 0.5rem 1rem;
    /*border-radius: 4px;*/
    background-color: var(--background-box-color);
    padding: 1.4rem;
    align-items: flex-end;
    box-shadow: 0px 0px 2px darkgrey;
    position: relative;
}

form::after{
    background: linear-gradient(to right,red 8%, black 4%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    grid-column: 1/-1;
    /*position: absolute;*/
    /*left: 2%;*/
    font-size: smaller;
    justify-self: left;
}

form[lang="pt"]::after{
    content: "\25cf  - campos obrigatórios";
}

form[lang="en"]::after{
    content: "\25cf  - mandatory fields";
}


form label{
    grid-column: 1;
    /*text-transform: uppercase;*/
    font-size: 1rem;
    text-align: right;
    align-self: center;
}

form label.top-align{
    align-self: flex-start;
}

.datepicker{
    display: block !important;
    width: fit-content;
    z-index: 100;
}

form > span{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;
    font-size: 1rem;
    width: 100%;
}

form > span span{
    font-size: 1rem;
    padding-block: 0 !important;
    margin-left: 0 !important;
    border-radius: 2rem 4px 4px 2rem !important;
}

form label:has(+ textarea), form label:has(+ span){
    align-self: flex-start;
}

a{
    text-decoration: none;
    color: var(--link-color);
}

a:is(:not(header a):not(#boxes a):not(.navigation a):not([class])):hover{
    text-decoration: underline;
    color: var(--link-active-color);
}

form a:not([aria-role="button"]){
    /*text-decoration: none;*/
    grid-column: 1/-1;
    font-size: smaller;
    /*color: royalblue;*/
    justify-self: end;
}

/*form button.route {
    display: inline;
    background-color: transparent;
    border: none;
    grid-column: 1/-1;
    font-size: smaller;
    color: royalblue;
    justify-self: end;
    font-family: 'Dosis';
    cursor: pointer;
}

form button.route:hover {
    text-decoration: underline;
}*/

/*form a:hover{
    text-decoration: underline;
}*/

form input:not([type="submit"]):not([type="button"]):not([type="file"]), form select{
    /*grid-area: inputs;*/
    grid-column: 2;
    border-radius: 2px;
    border: none;
    font-family: 'Dosis';
    /*font-size: 0.9rem;*/
    font-size: 1rem;
    height: 1.8rem;
    background-color: gainsboro;
    /*color: black;*/
}

form input[type="file"]{
    height: 0;
    width: 0;
}

form label.file-label{
    background-color: darkgrey;
    color: black;
    grid-column: 2;
    justify-self: flex-start;
    box-shadow: 2px 2px 4px dimgrey;
    font-size: large;
}

form label.file-label:hover{
    background-color: lightgrey;
    /*scale: 1.01;*/
    color: black;
    box-shadow: 0px 0px 8px 2px grey;
}

form textarea{
    grid-column: 2;
    border-radius: 2px;
    border: none;
    font-family: 'Dosis';
    font-size: smaller;
    background-color: gainsboro;
    width: 100%;
    color: black;
}

form input[type="submit"]{
    grid-column: 1/-1;
    justify-self: center;
    margin-top: 2rem;
}

form input, form select{
    width: fit-content;
    color: black;
}

form input:is([type="text"]:not(#nif), [type="email"], [type="url"]){ /*:not(:disabled)*/
    width: 100%;
}

form input[type="number"]{
    width: 4rem;
}

form label:has(+ div input[required], + input[required]:not([type="radio"]), + select[required], + span input[required], + label.file-label + input[required]):not(.file-label)::before{
	content: "\25cf   ";
	color: crimson;	
}

form :where(input:not(.route):not([type="file"]):not([type="submit"]):not([type="radio"]):not([type="checkbox"]), select, textarea):is(:focus,:focus-visible){
    outline: solid 1px light-dark(black, white);
}

form input:is(:focus-visible){ /*form :where(input[type="radio"], input[type="checkbox"]):is(:focus-visible){*/
    outline: 1px solid light-dark(black,white);
}

form :is(input:not(.route):not([type="file"]):not([type="submit"]), select, textarea):user-valid{ /*:focus*/
    /*box-shadow: 0px 0px 2px 2px lightseagreen; /*6 2*/
    filter: drop-shadow(0px 0px 2px lightseagreen);
    border: 1px solid lightseagreen;
}

form :is(input, select, textarea):user-invalid{
    /*box-shadow: 0px 0px 6px 2px red;*/
    filter: drop-shadow(0px 0px 2px red);
    border: 1px solid red;
}

/*form fieldset{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    border-radius: 4px;
    border: 1px solid lightgrey;
    padding: 1.4rem;
}

form legend{
    font-variant: all-small-caps;
    font-weight: bold;
}*/

form input.hide{
    position: absolute;
    left: -20000px;
    top: -1000px;
}

.action-button{
    padding: 0.6rem 1rem;
    border-radius: 2px;
    /*border-radius: 24px;*/
    border: none;
    font-size: 100%;
    background-color: var(--action-color);
    color: black;
    font-variant: all-small-caps;
    /*box-shadow: 2px 2px 4px var(--shadow-color);*/
    min-width: 12rem;
    cursor: pointer;
    transition: box-shadow 0.3s, background-color 0.3s;
    line-height: inherit;
    font-family: 'Dosis';
    font-weight: bold;
    text-decoration: none;
    border: 1px solid light-dark(#ccc,white);
}

.reserve-button{
    padding: 0.4rem 1rem;
    border-radius: 4px;
    border: none;
    font-size: 100%;
    background-color: #fff8d3;
    color: black;
    font-variant: all-small-caps;
    /*box-shadow: 2px 2px 4px var(--shadow-color);*/
    /*min-width: 12rem;*/
    cursor: pointer;
    transition: box-shadow 0.3s, background-color 0.3s;
    line-height: inherit;
    font-family: 'Dosis';
    font-weight: bold;
    text-decoration: none;
    border: 1px solid light-dark(#ccc,white);
}

.no-action{
    background-color: lightgrey;
    cursor: not-allowed;
    color: grey;
}

span.arrow-up{
    position: absolute;
    z-index: 90;
    bottom: 0;
    transition: opacity 1.5s, bottom 1.5s;
    opacity: 1;
    margin-left: 30px;
    color: light-dark(green,lightgreen);
}

span.arrow-down{
    position: absolute;
    z-index: 90;
    top: -3px;/*16%;*/
    opacity: 1;
    transition: opacity 1.5s, top 1.5s;
    margin-left: 30px;
    color: light-dark(darkred,red);
}


.nome-mes{
    /*padding: 0 1rem;*/
    grid-column: 1/-1;
    margin-inline: 1rem;
    background-color: gainsboro;
    width: -webkit-fill-available;
    width: -moz-available;
    margin-left: 1rem;
    border-radius: 4px;
    border: none;
    color: black;
    font-variant: all-small-caps;
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

.action-button:hover, .reserve-button:not(.no-action):hover{
    background-color: var(--action-color-hover);
    /*scale: 1.01;*/
    /*box-shadow: 0px 0px 8px 2px var(--shadow-color);*/
    /*box-shadow: 0 0 0 0.1em light-dark(white, #333), 0 0 0 0.2em light-dark(darksalmon, lightsalmon);*/
}

.back-button, .file-label{
    padding: 0.6rem 1rem;
    border-radius: 2px;
    border: none;
    /*font-size: 90%;*/
    background-color: var(--action-color);
    color: black;
    font-variant: all-small-caps;
    /*box-shadow: 2px 2px 4px var(--shadow-color);*/
    min-width: 12rem;
    cursor: pointer;
    transition: box-shadow 0.3s, background-color 0.3s;
    line-height: inherit;
    font-family: 'Dosis';
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    border: 1px solid light-dark(#ccc,white);
  }

.back-button:hover{
    background-color: var(--action-color-hover);
    /*scale: 1.01;*/
    /*box-shadow: 0px 0px 8px 2px var(--shadow-color);*/
    /*box-shadow: 0 0 0 0.1em light-dark(white, #333), 0 0 0 0.2em goldenrod;*/
}

div.tabs{
    display: grid;
    grid-template-columns: repeat(4, auto);
    place-items: center;
    gap: 0.2rem;
    flex-flow: row wrap;
    max-width: clamp(18rem, 8rem + 48vw, 28rem);
    /*flex-flow: row wrap;
    width: 100%;*/
    /*border-bottom: 2px solid steelblue;*/
}

/*input#wtour:checked ~ div#wtour_details {*/
div.tabs:has(input#wtour:checked) ~ div#wtour_details {
    display: grid;
    /*grid-template-columns: repeat(auto-fit,minmax(calc(48% + 0.8vw),1fr));*/
    grid-template-columns: 28rem auto;
    /*grid-template-rows: auto 0fr;*/
    gap: 0rem;
}

/*input#ctour:checked ~ div#ctour_details {*/
div.tabs:has(input#ctour:checked) ~ div#ctour_details {
    display: grid;
    /*grid-template-columns: repeat(auto-fit,minmax(calc(48% + 0.8vw),1fr));*/
    grid-template-columns: 28rem auto;
    gap: 0rem;
}

/*input#stour:checked ~ div#stour_details {*/
div.tabs:has(input#stour:checked) ~ div#stour_details {
    display: grid;
    /*grid-template-columns: repeat(auto-fit,minmax(calc(48% + 0.8vw),1fr));*/
    grid-template-columns: 28rem auto;
    gap: 0rem;
}

/*input#gtour:checked ~ div#gtour_details {*/
div.tabs:has(input#gtour:checked) ~ div#gtour_details {
    display: grid;
    /*grid-template-columns: repeat(auto-fit,minmax(calc(48% + 0.8vw),1fr));*/
    grid-template-columns: 28rem auto;
    gap: 0rem;
}


:is(main#admin, main#cli-area) .dashboard .data-panel div[id]{
    display: none;
    min-height: 20rem;
    flex-flow: column;
}

main#admin h2{
    margin-block: 0 1rem;
    font-size: larger;
    font-variant: small-caps;
}

main#cli-area h2 {
    margin-left: 1rem;
    margin-top: 0;
    font-size: larger;
}

/*.navigation div.actions{
    margin: 0;
    margin-top: auto;
    justify-content: flex-end;
}*/

/*.navigation div.actions .back-button{
    min-width: unset;
    box-shadow: none;
    border-radius: 4px 0 0 4px;
    width: 100%;
    display: none;
}*/

div.actions.logout{
    justify-content: flex-start;
    margin-bottom: 1rem;
    margin-top: -1rem;
    grid-column: 1 / -1;
    & .back-button{
        padding-block: 0 0.2rem;
        border-radius: 24px;
        border: none;
        background-color: #eee;
        /*min-width: fit-content;*/
        &:hover{
            background-color: gold;
            /*box-shadow: light-dark(white, rgb(51, 51, 51)) 0px 0px 0px 0.1em, teal 0px 0px 0px 0.2em;*/
        }
    }
}

/*.navigation div.actions .logout{
    display: flex;
}*/
/*main#admin .mobile-admin{
    display: none;
}*/

/*main#admin .mobile-admin .actions a{
    display: none;
    margin-top: 1rem;
}*/

main#admin .navigation:has(input#reservas:checked) + .data-panel div#admin_reservas{
    display: flex;
}

/*main#admin .navigation:has(input#reservas:checked) div a#hist-reservas {
    display: flex;
}*/

main#admin .navigation:has(input#tours:checked) + .data-panel div#admin_tours {
    display: flex;
}

main#admin .navigation:has(input#datas:checked) + .data-panel div#admin_datas {
    display: flex;
}

/*main#admin .navigation:has(input#datas:checked) div a#add-dates {
    display: flex;
}*/

main#admin .navigation:has(input#fotos:checked) + .data-panel div#admin_fotos {
    display: flex;
}

/*main#admin .navigation:has(input#fotos:checked) div a#add-fotos {
    display: flex;
}*/

main#admin .navigation:has(input#site:checked) + .data-panel div#admin_site {
    display: flex;
}



main#cli-area .navigation:has(input#reservas:checked) + .data-panel div#your_reservations {
    display: flex;
}

main#cli-area .navigation:has(input#perfil:checked) + .data-panel div#your_data {
    display: flex;
}

main#cli-area .navigation:has(input#exper:checked) + .data-panel div#your_experience {
    display: flex;
}

main#cli-area .navigation:has(input#aval:checked) + .data-panel div#your_evaluations {
    display: flex;
}




div.tabs:has(input#reservas:checked) ~ div#admin_reservas {
    display: block;
}

div.tabs:has(input#tours:checked) ~ div#admin_tours {
    display: block;
}

div.tabs:has(input#datas:checked) ~ div#admin_datas {
    display: block;
}

div.tabs:has(input#fotos:checked) ~ div#admin_fotos {
    display: block;
}

div.tabs:has(input#site:checked) ~ div#admin_site {
    display: block;
}


/*div.showcase{
    position: relative;
    min-height: 20rem;
    max-width: 28rem;
    overflow: hidden;
}

div.showcase img{
    position: absolute;
    top: 0;
    right: -200%;
    width: clamp(20rem,88vw,28rem);
    height: 20rem;
    aspect-ratio: 1/1;
    border-radius: 4px;
    animation-name: slideImages;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    object-fit: cover;
    object-position: center;
}

div.showcase img:nth-of-type(1)  {animation-delay: 0s;}
div.showcase img:nth-of-type(2)  {animation-delay: 6s;}
div.showcase img:nth-of-type(3)  {animation-delay: 12s;}
div.showcase img:nth-of-type(4)  {animation-delay: 18s;}

@keyframes slideImages {
    0% {right: -100%;}
    1%,25% {right:0;}
    26%, 100% {right: 100%;}
}*/

div.tour-resume{
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem;
}

input.action-button + label{
    /*align-self: flex-start;*/
    text-align: center;
}

/*#wtour_details:has(#more:checked){
    /*grid-template-rows: auto 1fr !important;
    max-height: 100%;
}*/


div.details{
    grid-column: 1/-1;
    overflow: hidden;
    /*max-height: 0;*/
    transition: grid-template-rows 0.4s;
    /*padding: 1rem;*/
    display: grid;
    /*flex-flow: column;*/
    grid-template-rows: 0fr;
}

div.details > div{
    display: grid;
    overflow: hidden;
}

div.details > div > input.action-button{
    align-self: center;
    margin-top: auto;
    margin-bottom: 1rem;
    margin-inline: auto;
    justify-self: center;
}

div.details section.tour-description{
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px 4px 0 0;
    background-color: var(--background-box-color);
    margin-bottom: 0;
}

div.details section.tour-data{
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--background-box-color);
    /*display: flex;*/
    border-radius: 0 0 4px 4px;
    margin-top: 0;
    min-height: 12rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

/*div.details section#tour-data ul{
    font-size: 80%;
}*/

div.details :where(.tour-price, .tour-time, .tour-type, .tour-parts, .tour-directions){
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.6rem;
    margin: 0;
}

section.tour-data div.detail-items{
    display: flex;
    /*flex-flow: column;*/
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px dotted;
    align-items: flex-start;
    max-width: 30rem;
}

div.details section.tour-data div.detail-items > :last-child{ 
    text-transform: initial;
    font-weight: normal;
    font-variant: lining-nums;
    font-size: smaller;
    margin: 0;
    margin-left: 1.8rem;
    margin-bottom: 0.4rem;
}

div.details p:is(.tour-price,.tour-time, .tour-type, .tour-parts, .tour-directions)::before{
    display: inline-block;
    background-size: 18px;
    background-repeat: no-repeat;
    width: 26px;
    height: 18px;
    content: "";
    margin-right: -0.4rem;
    filter: contrast(0.2);
}

div.details section.tour-data > p:last-of-type{
    margin-top: 2rem;
}

div.details p.tour-price::before{
    background-image: url(../images/icons/price-icon.png);
}

div.details p.tour-time::before{
    background-image: url(../images/icons/time-icon.png);
}

div.details p.tour-directions::before{
    background-image: url(../images/icons/directions-icon.png);
}

div.details p.tour-type::before{
    background-image: url(../images/icons/type-icon.png);
}

div.details p.tour-parts::before{
    background-image: url(../images/icons/people-icon.png);
}

div#guide{
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}

div#guide p{
    flex: 1 0 20rem;
    max-width: 40rem;
}

img.photo_of_me{
    border-radius:4px;
    max-width: 20rem;
}

/*div.foto-list{
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
}

input.toggle + label + div{
    display: grid;
    transition: grid-template-rows 0.5s;
    grid-template-rows: 0fr;
    overflow: hidden;
}*/

main#gallery div.foto-list{
    display: flow;
    columns: 12 clamp(12rem, 14rem + 2vmax, 16rem);
    column-gap: 0;
}

main#gallery div.foto-list a:hover div.description-panel, main#gallery div.foto-list a.mobile-img-hover{
    bottom: 0;
}

main#gallery div.foto-list div.description-panel{
    padding: 0.4rem;
    border-radius: 0 0 4px 4px;
    background-color: #33333396;
    color: white;
    position: absolute;
    text-align: left;
    cursor: auto;
    width: -webkit-fill-available;
    width: -moz-available;
    z-index: 20;
    font-size: small;
    transition: bottom 0.5s ease-in-out;
    bottom: -10rem;
    line-height: normal;
}

main#gallery div.foto-list img{
    width: 100%;
    height: unset;
    border-radius: 0.4rem;
}

main#gallery div.foto-list a{
    margin: 6px 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    width: fit-content;
}

input.toggle{
    display: none;
}

input.toggle:checked + label + div{
    grid-template-rows: 1fr;
}

input.toggle + label{
    /*color: gold;*/
    font-weight: bold;
    font-variant: all-small-caps;
    font-size: 140%;
    /*padding: 1rem;*/
    cursor: pointer;
    display: block;
    border-bottom: 1px solid;
    margin-left: 1rem;

}

fieldset#pay-methods{
    display: flex;
    border-radius: 4px;
    grid-column: 2;
    justify-content: flex-end;
    gap: 0.4rem;
    border: 1px solid gainsboro;

    & legend{
        font-size: initial;
        &::before{
            content: "\25cf  ";
            color: red;
        }
    }

    & img{
        cursor: pointer;
        max-width: 3rem;
        background-color: light-dark(transparent, white);
        border-radius: 4px;
        padding: 0.2rem;
    }
}

main#admin fieldset#pay-methods{

    border-radius: 0.5rem;
    grid-column: 1/-1;
    font-size: initial;

    & legend{
        font-size: initial;
        &::before{
            content: "\25cf  ";
            color: red;
        }
    }

    & table{
        table-layout: fixed;
        
        & td {
            word-wrap: break-word;
        }

        & tr:last-of-type td:last-child{
            text-align: left;
        }
    }

    /*& table tr:last-of-type td:last-child{
        text-align: left;
    }*/

    & input{
        height: fit-content;
        font-size: large;
    }

    & img{
        cursor: default;
        background-color: light-dark(transparent, white);
        border-radius: 4px;
        width: fit-content;
        filter: none;
    }

}

table:not(.datepicker table) {
    margin: 0.5rem 1rem;
    /*border-radius: 4px;*/
    background-color: var(--background-box-color);
    padding: 1.4rem;
    width: -webkit-fill-available;
    width: -moz-available;
    box-shadow: 0px 0px 2px darkgrey;
}

table th:not(.datepicker table th), table td:not(.datepicker table td){
    padding-block: 0.4rem;
    border-bottom: 1px solid darkgrey;
    text-align: center;
}

table th:not(.datepicker table th):empty{
    background-color: unset;
}

table th:not(.datepicker table th){
    background-color: gainsboro;
    color: black;
    text-transform: uppercase;
    font-size: smaller;
    border-radius: 0.4ch;
    border-bottom: none;
    padding-block: 0.1rem;
}

table thead:not(.datepicker table thead){
    position: sticky;
    top: -1px;
    z-index: 1;
}

main#reserve-dates .dashboard div.data-panel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
    place-content: baseline;
}

main#reserve-dates .dashboard div.data-panel table tr{
    position: relative;
}

main#reserve-dates .dashboard .reserve-lists{
    display: flex;
    grid-column: 1/-1;
    align-items: baseline;
}

.dashboard{
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 10rem 1fr;
}

.dashboard .error{
    position: absolute;
    text-align: right;
    top: 0;
    z-index: 40;
    font-size: 80%;
}

.navigation{
    border-right: 1px solid light-dark(gainsboro, darkgrey);
    display: flex;
    flex-flow: column;
    min-height: 20rem;
}

.navigation input{
    display: none;   
}

div.account-mobile-navigation{
    display: none;
    position: fixed;
    bottom: 0;
    width: -webkit-fill-available;
    width: -moz-available;
    border-top: 1px solid #336268;
    left: 0;
    z-index: 101;
}

div.account-mobile-navigation a[href]:hover, div.account-mobile-navigation button:hover{
    background-color: #025050;
}

div.account-mobile-navigation a:not([href]){
    cursor:none;
    & img{
        filter: brightness(0.6);
    }
}

div.account-mobile-navigation button, div.account-mobile-navigation a{
    width: 50%;
    height: 4rem;
    border: none;
    cursor: pointer;
    align-self: baseline;
    background-color: #333;
    color: white;
    font-variant: all-small-caps;
    font-size: inherit;
    font-family: inherit;
    color: gold;
    text-decoration: none;
    text-align: center;
    align-self: center;
    font-weight: bold;
    line-height: 4rem;
    transition: background-color 0.3s;
}

div.account-mobile-navigation :is(button,a:not(:last-of-type)) {
    border-right: 1px solid #336268;
}

div.account-mobile-navigation img{
    max-width: 1rem;
    /*filter: invert(1);*/
}

div.mobile-navigation{
    position: relative;
    grid-column: 1/-1;
    display: flex;
}

div.mobile-navigation > div{
    display: flex;
    flex-flow: column;
}

p#pop-menu{
    display: none;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    border: none;
    padding: 0;
    text-align: center;
    margin: 0;
    user-select: none;
}

p#tour-name{
    display: none;
    text-transform: uppercase;
    font-weight: bold;
    background-color: gold;
    color: black;
    border-radius: 24px;
    border: none;
    padding: 0.4rem;
    text-align: center;
    margin-inline: 2rem;
    margin-block: 0;
    user-select: none;
    pointer-events: none;
    position: relative;
}

p#tour-name + #list-tours:popover-open, button.mobile-menu ~ #popmenuitens:popover-open {
    display: flex;
    box-shadow: 0px 0px 6px 4px #333;
}

p#tour-name + #list-tours::backdrop, button.mobile-menu ~ #popmenuitens::backdrop{
    background-color: #333a;
}

button.mobile-menu ~ #popmenuitens li{
    border-radius: 4px;
    color: black;
    text-decoration: none;
    font-variant: all-small-caps;
    font-size: 140%;
    display: flex;
    &:hover,&:active,&:focus{
        background-color: gold;
        color: black;
   }
}

button.mobile-menu ~ #popmenuitens li label{
    min-width: 12rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0.4rem 2rem;
    text-align: center;
    user-select: none;
}

button.mobile-menu ~ #popmenuitens{
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff6c7;
    list-style: none;
    padding: 2rem 0;
    border-radius: 4px;
    z-index: 100;
    top: 1.2rem;
    width: -webkit-fill-available;
    width: -moz-available;
    margin-inline: 2.8rem;
    border: none;
    & li a {
        padding: 0.4rem 2rem;
        border-radius: 4px;
        /*color: white;*/
        text-decoration: none;
        font-variant: all-small-caps;
        font-size: 140%;
        width: 100%;
        display: flex;
        /*&:hover{
            background-color: gold;
            color: black;
       }*/
    }
}

p#tour-name + #list-tours{
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff6c7;
    list-style: none;
    padding: 2rem 0;
    border-radius: 4px;
    z-index: 100;
    top: 1.2rem;
    width: -webkit-fill-available;
    width: -moz-available;
    margin-inline: 2.8rem;
    border: none;
    & li a {
        padding: 0.4rem 2rem;
        border-radius: 4px;
        color: black; 
        text-decoration: none;
        font-variant: all-small-caps;
        font-size: 140%;
        width: 100%;
        display: flex;
        &:hover{
            background-color: gold;
       }
    }
}

input#ano{
    margin-top: 1rem;
    margin-inline: 2rem;
    align-self: flex-start;
    width: 4rem;
}

datalist#years{
    display: inline-flex;
    gap: 1rem;
    font-size: smaller;
    margin-left: 1.4rem;
}

p#pop-menu button{
    font-size: 120%;
    font-weight: bold;
    color: black;
    cursor: pointer;
    border: 2px solid grey;
    border-radius: 12px;
    background-color: #eeea;
    transition: border 0.3s;
    display: flex;
    align-items: flex-end;
    height: 1.4rem;
    width: 3rem;
    justify-content: center;
    &:hover{
        border: 2px solid teal;
    }
}

p#tour-name button{
    position: absolute;
    right: 0;
    font-size: 120%;
    top: 0;
    padding-inline: 0.8rem;
    padding-block: 0.1rem 0.6rem;
    background-color: inherit;
    border-radius: 0 24px 24px 0;
    font-weight: bold;
    pointer-events: all;
    color: inherit;
    cursor: pointer;
    border: none;
    display: flex;
}

.previous-item.no-left{
    color: lightgrey;
    pointer-events: none;
    cursor: none;
}

.next-item.no-right{
    color: lightgrey;
    pointer-events: none;
    cursor: none;
}

p#month-name, p#tour-id{
    text-transform: uppercase;
    font-weight: bold;
    background-color: #eee;
    /* color: white; */
    border-radius: 24px;
    border: none;
    padding: 0.4rem;
    text-align: center;
    margin-inline: 2rem;
    margin-block: 0.6rem;
    position: relative;
    color: black;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    min-width: 12rem;
    width: fit-content;
}

.previous-item{
    cursor: pointer;
    font-size: 2.4rem;
    width: 3rem;
    justify-content: center;
    padding-block: 4px 10px;
    display: flex;
    transition: color 0.3s;
    border-radius: 24px 0 0 24px;
}

.previous-item:hover, .next-item:hover{
    color: darkcyan;
}

.next-item{
    cursor: pointer;
    font-size: 2.4rem;
    width: 3rem;
    justify-content: center;
    padding-block: 4px 10px;
    display: flex;
    transition: color 0.3s;
    border-radius: 0 24px 24px 0;
}

.navigation ul{
    list-style: none;
    text-align: right;
    padding: 0;
    height: unset;
}

.navigation ul li{
    border-radius: 2rem 0 0 2rem;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-block: 0.2rem;
    user-select: none;
}

.navigation ul li label{
    padding: 0.4rem;
    cursor: pointer;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
    font-size: initial;
}

.navigation ul li:has(input:checked){
    color: black;
    background-color: gold;
    font-weight: 600;
}

.navigation a{
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    padding: 0.4rem;
    text-transform: uppercase;
    font-size: initial;
}

.navigation ul li:hover{
    background-color: #eee;
    color: black;
}

.navigation ul li.active{
    color: black;
    background-color: gold;
    font-weight: 600;
}

main#reserve-dates table tr:hover{
    background-color: light-dark(#eee, #333);
}

table a:not(.reserve-code){
    font-variant: all-small-caps;
    font-size: larger;
}

table a:not([class]):hover{
    text-decoration: underline;
}

table img:not(.foto){
    width: 1.4rem;
    filter: invert(0);
    cursor: pointer;
}

table img.foto{
    width: 4rem;
}

main#fotos{
    display: grid;
    flex-flow: column;
    gap: 1rem;
    align-items: flex-start;
}

main#fotos > div{
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}

main#fotos .back-button{
    justify-self: flex-end;
}

table img:not(.foto):hover{
    /*filter: contrast(0.1);*/
    filter: invert(1);
    background-color: orange;
    border-radius: 50%;
}

div.popup{
    display: none;
    padding: 1rem;
    border-radius: 4px;
    background-color: #eee;
    color: black;
    position: absolute;
    text-align: left;
    cursor: auto;
    min-width: 10rem;
    z-index: 20;
    right: 6vw;
    font-size: smaller;
}

div.popup::before{
    content: "";
    width: 1rem;
    height: 1rem;
    rotate: 45deg;
    background-color: #eee;
    right: 3.4rem;
    top: -8px;
    position: absolute;
}

.msgpopup{
    padding: 2rem;
    border-radius: 4px;
    position: absolute;
    text-align: center;
    cursor: auto;
    min-width: 20rem;
    z-index: 200;
    font-size: smaller;
    left: 50%;
    translate: -50% -50%;
    top: 50%;
    box-shadow: 4px 4px 16px black;
}

.msgpopup input.close{
    display: none;
}

.msgpopup:has(input.close:checked){
    display: none;
}

.msgpopup label[for="close-msg"]{
    color: black;
    top: 8px;
    right: 8px;
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    padding-inline: 0.6rem;
    text-align: center;
}

.msgpopup label[for="close-msg"]:hover{
    color: white;
    background-color: black;
}

table td{
    vertical-align: top;
}

table td.feedback:not(:empty){
    cursor: pointer;
}

table td.feedback:not(:empty):hover div.popup{
    display: block;
}

div.actions {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: flex-end;
    /*margin-top: 2rem;*/
    margin: 0 1rem 1rem 0;
}

main#admin div.actions{
    justify-content: flex-start;
    align-items: baseline;
    & p{
        margin-inline: 0;
    }
    & div{
        display: flex;
        flex-flow: column;
    }
}

div.more-actions {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: flex-start;
    /*margin-top: 2rem;
    margin: 1rem;*/
    margin-top: auto;
    padding: 2rem 1rem 0 1rem;
    grid-column: 1/-1;
    align-items: baseline;
}

form div.more-actions{
    justify-content: center;
}

table td.feedback span{
    padding: 0.2rem 0.7rem;
    border-radius: 50%;
    font-weight: bold;
    color: black;
    font-variant: lining-nums;
}

table td.status-alert{
    color: red;
}

footer {
    /*height: 10rem;*/
    width: -webkit-fill-available;
    width: -moz-available;
    width: 100%;
    background-color: #333;
    color: white;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-inline: 1rem;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

footer div{
    font-size: 1rem;
    line-height: 2.4ch;
}

footer div.logo img{
    max-width: 10rem;
    filter: invert(1);
}

footer a{
    color: darkturquoise;
    text-decoration: none;
    display: inline-flex;
}

footer a:hover{
    color:cyan !important;
}

div.social-media{
    display: flex;
    /*justify-content: flex-end;*/
    align-items: flex-end;
    gap: 1rem;
    flex-flow: column;
}

div.social-media div{
    display: flex;
    gap:1rem;
    align-items:center;
}

div.social-media img{
    max-width: 2rem;
    transition: filter 0.3s;
    filter: grayscale(1);
}

div.social-media img#logo-rotas{
    max-width: 6rem;
}

div.social-media img:hover{
    filter: brightness(1.2);
}

div.info{
    border-radius: 4px;
    padding: 0.2rem 1rem;
    font-variant: lining-nums;
    /*position: relative;*/
    text-align: center;
}

div.info p:first-child{
    font-weight: bold;
    font-variant: all-small-caps;
    color: var(--action-color);
    font-size: 1.4rem;
    /*position: absolute;
    top: -1.4rem;
    background-color: #333;
    padding-inline: 1rem;*/
}

p.form-notes{
    background-color: lightgrey;
    color: black;
    padding: 1rem;
    border-radius: 4px;
    max-width: 50rem;
    margin-left: 1rem;
    font-size: smaller;
}

p.form-notes::first-line{
    font-weight: bold;
}

table.big{
    position: relative;
}

div.big-wrap table{
    margin: 0;
}

div.big-wrap{
    overflow-y: auto;
    max-height: 30rem;
    margin-inline: 1rem;
    box-shadow: 0px 0px 2px darkgrey;
}

div.showcase {
    /*height: 350px;*/
    min-height:20rem;
    /*width: 600px;*/
    width:clamp(18rem, 84vw, 28rem);
    padding: 0;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none !important;
    /*--slide-count: 10;*/
    position: relative;
}

div.showcase ul.carousel {
    /*width: calc(101% * var(--slide-count));*/
    display: flex;
    list-style: none;
    height: 20rem;
    margin: 0;
    padding: 0;
    cursor: grab;
    /*aspect-ratio:1;*/
}

div.showcase li.slide{
    scroll-snap-align: start;
    width: 100%;
    position: relative;
    content-visibility: auto;
}

div.showcase li.slide > img {
    width: 100%;
    object-fit: cover;
    /*display:block; */
    height:20rem;
    border: 1px solid black;
}

div.showcase .counter {
    position: absolute;
    bottom: 4%;
    left: 50%;
    translate: -50%;
    background-color: #80808063;
    padding-inline: 0.4rem;
    color: white;
    border-radius: 4px;
    font-size: small;
}

/* =======================================================================*/
/*  Media Queries
/* =======================================================================*/

@media screen and (max-width: 480px){
    body header:not(.datepicker__header) {
        /*flex-flow: column;*/
        justify-content: flex-start;
        gap: 0;
    }

    /*.navigation:not(main#admin .navigation){
        display: none;
    }*/

    /*#mobile-navigation{
        display: block;
    }*/

    .dashboard{
        grid-template-columns: auto
    }

    main#reserve-dates .dashboard div.data-panel {
        grid-template-columns: auto;
        place-content: normal;
    }

    main#admin h2, main#cli-area h2 {
        /*margin-block: 1rem;*/
        margin-inline: 0;
        text-align: center;
    }

    div.box{
        flex-basis: 80%;
    }
    footer{
        justify-content: center;
    }

    div#company{
        margin:auto;
    }

    main#tours label.tabbed, main#admin label.tabbed{
        min-width: unset;
        /*font-size: 86%;*/
    }

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

    fieldset{
        width: 100%;
    }

    form label{
        align-self: flex-start;
    }

    form input:not([type="submit"]):not([type="button"]):not([type="file"]), form select{
        width: 100%;
    }

    body main#tours section.tour-data div.detail-items{
        flex-flow: column;
    }

    /* big tables */
    
    table.big thead {
        display: none;
    }
    
    table.big tr {
        border-bottom: 4px solid gold;
        display: grid;
        margin-bottom: .625em;
    }
    
    table.big td {
        text-align: right !important;
    }
    
    table.big td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    table.big td:last-child {
        border-bottom: 0;
    }

    div.actions{
        justify-content: center;
        margin: 0;
    }
}

@media screen and (max-width: 568px){

    main#reserve{
        /*grid-template-columns: 1fr;
        place-items: stretch;*/
        display: flex;
        flex-flow: column;
        align-items: center;

        & h1, p#idtour{
            align-self: flex-start;
        }
    }

    p#idtour{
        max-width: none;
        width: -webkit-fill-available;
        width: -moz-available;
        margin-inline: 1rem;
    }
  
    footer div.social-media{
        align-items: center;
        width: 100%;
    }

    footer p.copyright{
        text-align: center;
    }
    
    div.box {
        max-height: 6rem;
        /*padding: 4rem;*/
        transition: background-size 1.2s, background-color 0.8s, max-height 0.8s;
        background-blend-mode: unset;
        min-height: unset;
    }
    div.box:hover, div.box:focus{
        max-height: 20rem;
        /*background-position: center;*/
        background-size: 120%;
    }

    main#admin div.actions{
        justify-content: center;
        flex-flow: column;
        align-items: center;
        gap: 0;
    }
    main#admin div.actions p{
        margin-block: 2px;
    }
}

@media screen and (max-width: 650px){

    body header div.pages{
        background-color: white;
        flex-flow: column;
        position: absolute;
        left: 0;
        top: 4rem; /*-10rem*/
        /*z-index: -1;*/
        align-items: center;
        transition: 0.3s ease-in-out;
        width: 100%;
        /*padding-block: 0.5rem;
        border-bottom: 1px solid grey;*/
        border-radius: 0;
        overflow: hidden;
        padding: 0;
        border: none;
        max-height: 0;
        display: flex;
        gap: 0.4rem;
    }

    body header div.pages a{
        border-radius: 4px;
        padding-block: 0.5rem;
        width: 8rem;
        text-align: center;
    }

    body header .menu-icon {
        display:block;
    }
    
    .navigation{
        display: none;
    }

    div.actions.logout{
        display: none;
    }

    div.more-actions:not(form div.more-actions) {
        display: none;
    }

    div.account-mobile-navigation{
        display: flex;
    }

    p.subtitle{
        text-align: center;
    }

    .mobile-navigation:not(main#admin .mobile-navigation){
        flex-flow: column;
        background-color: var(--background-box-color);
        box-shadow: 0px 0px 2px darkgrey;
        margin-inline: 1rem;
        padding-top: 1rem;
    }

    p#tour-name,p#pop-menu{
        display: block;
    }

    p#month-name{
        width: unset;
    }

    div.more-actions{
        justify-content: center;
    }

    input#ano{
        align-self: center;
    }

    datalist#years{
        margin:auto;
        min-width: none;
        max-width: none;
    }

    .navigation ul{
        /*display: none;*/
        /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
        user-select: none;
        -webkit-touch-callout: none; /*only to disable context menu on long press*/
        height: 2.8rem;
        text-align: center;
        overflow: hidden;
        align-self: center;
        width: 20rem;
        position: relative;
        transition: height 0.3s;
        display: flex;
        flex-flow: column;
    }

    main#reserve-dates .dashboard div.data-panel {
        grid-template-columns: 1fr;
    }

   .navigation ul:hover{
        height: 14.6rem;
    }

    .navigation ul::after{
        content: "\005E";
        position: absolute;
        right: 1rem;
        rotate: 180deg;
        top: 0;
        z-index: 100;
        color: black;
        font-size: 200%;
        cursor: pointer;
    }
    
    /*.navigation ul li.active{
        order: -1 !important;
    }*/

    /*.navigation ul li:has(input:checked){
        order: -1 !important;
    }*/

    /*main#admin .navigation ul li:has(input:checked){
        background-color: gainsboro;
    }

    .navigation ul li{
        border-radius: 4px;
    }*/

    /*.navigation div.actions .back-button {
        border-radius: 4px;
        min-width: 12rem;
        padding-block: 0.6rem;
    }*/
    /*main#admin .mobile-admin{
        display: block;
    }*/
    
    /*main#admin #mobile-navigation{
        display: block;
        margin-top: 1rem;
        background-color: gainsboro;
    }*/

    .dashboard{
        grid-template-columns: auto
    }

    main#admin h2 {
        margin-block: 1rem;
    }
}

@media screen and (max-width: 768px){
    #photoRoll div[id*="img"] {
        padding-block: 12rem;
    }
/*    div.box {
        max-height: 4rem;
        padding: 4rem;
        transition: background-size 1.2s, background-color 0.8s, max-height 0.8s;
        background-blend-mode: unset;
    }
    div.box:hover, div.box:focus{
        max-height: 20rem;
        background-size: 120%;
    }*/

    /*input#wtour:checked ~ div#wtour_details {*/
    div.tabs:has(input#wtour:checked) ~ div#wtour_details {
            display: grid;
            grid-template-columns: auto;
            /*grid-template-rows: auto auto 1fr;*/
    }
    
    /*input#ctour:checked ~ div#ctour_details {*/
    div.tabs:has(input#ctour:checked) ~ div#ctour_details {
            display: grid;
            grid-template-columns: auto;
    }    

    /*input#stour:checked ~ div#stour_details {*/
    div.tabs:has(input#stour:checked) ~ div#stour_details {
            display: grid;
            grid-template-columns: auto;
    }   

    /*input#gtour:checked ~ div#gtour_details {*/
    div.tabs:has(input#gtour:checked) ~ div#gtour_details {
            display: grid;
            grid-template-columns: auto;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root{
        --background-box-color: #6666;
        /*--shadow-color: black;*/
    }
    
    main {
      background-color: black;
      color: lightgrey;
    }

    header:not(.datepicker__header) {
      background-color: black;
      color: white;
    }

    header div.logo img{
        filter: invert(1);
    }

    header div.menu a{
        color: lightgrey;
    }
    header div.menu a:hover{
        color: black;
    }

    div.details p:is(.tour-price,.tour-time,.tour-type,.tour-parts,.tour-directions)::before{
        filter: invert(1);
    }

    main#tours label.tabbed, main#admin label.tabbed{
        color: lightgrey;
        border-bottom: 2px solid black;
    }
    
    body header div.pages{
        background-color: black;
    }

    .menu-icon .bar, .bar::after, .bar::before{
        background-color: lightgrey;
    }

    main#tours input:checked + label.tabbed, main#admin input:checked + label.tabbed{
        border-bottom: 2px solid gold;
        /*background-color: white;*/
        /*color:black;*/
    }
    
    header div.menu a img#user-icon{
        filter: invert(1);
    }

    header div.menu a:hover img#user-icon{
        filter: invert(0);
    }

    /*body main table a{
        color: turquoise;
    }*/

    form::after{      
        background: linear-gradient(to right,red 8%, white 4%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    body main table img:not(.foto){
        filter: invert(1);
    }

    body main form a, body main form button.route{
        color: darkturquoise;
    }

    body main#home h1 span{
        color: white;
    }

    img#renew-captcha{
        filter: invert(1);
    }
}

@media (hover: none){
    main#gallery div.foto-list div.description-panel{
        bottom: 0;
    }
}