@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');




:root {
    --light-color: 255, 255, 255;
    --light-color-hovered: 168, 168, 176;
    --dark-color: 41, 41, 41;
    --dark-color-hovered: 143, 143, 143;
    --pos-accent: 255, 212, 0;
    --neg-accent: 187, 12, 35;
    --font-family-heading: sans-serif;
    --font-family-regular: sans-serif;
    --border-rounded: 3px;
    --border-pill: 2em;
    --fs-1: 0.563rem;
    --fs-2: 0.75rem;
    --fs-3: 1rem;
    --fs-4: 1.333rem;
    --fs-4: 1.777rem;
    --fs-5: 2.369rem;
    --fs-6: 2.763rem;
    --fs-7: 3.157rem;
    --inline-page-padding: 0em 1em;
}
@media (max-width: 650px) {
    :root {
        --fs-1: 0.579rem;
        --fs-2: 0.833rem;
        --fs-3: 1rem;
        --fs-4: 1.2rem;
        --fs-5: 1.44rem;
        --fs-6: 1.728rem;
        --fs-7: 2.074rem;
        --border-pill: 1.5em;
    }
}

.light-theme {
    --primary: var(--light-color);
    --secondary: var(--dark-color);
    --primary-hovered: var(--light-color-hovered);
    --secondary-hovered: var(--dark-color-hovered);
}
.applicazione {
    background-color: #292929;
    margin: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color:white;
}

.white-theme {
    --primary: var(--light-color);
    --secondary: var(--light-color);
    --primary-hovered: var(--light-color-hovered);
    --secondary-hovered: var(--dark-color-hovered);
}

.dark-theme {
    --primary: var(--dark-color);
    --secondary: var(--light-color);
    --primary-hovered: var(--dark-color-hovered);
    --secondary-hovered: var(--light-color-hovered);
}
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

body:has(div.sticky-header) > div.sticky-header + div:not(.sticky-header) {
    margin-top: 62px;
}

html {
    font-size: 100%;
}

html:focus-within {
    scroll-behavior: smooth;
}

html, body {
   margin: 0;
   padding: 0;
   min-height: 100dvh;
   font-family: var(--font-family-regular);
   font-weight: 400;
   line-height: 1.3;
}

body {
   box-sizing: border-box;
   background-color: rgb(var(--primary));
   color: rgb(var(--secondary));
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(var(--primary));
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: lightgray;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: grey;
}

img, picture, svg {
    max-width: 100%;
    /* display: block; */
}

h1 {
    font-size: var(--fs-7);
}
h2 {
    font-size: var(--fs-6);
}
h3 {
    font-size: var(--fs-5);
}
h4 {
    font-size: var(--fs-4);
}
h5 {
    font-size: var(--fs-3);
}
p {
    font-size: var(--fs-2);
}

.button {
    padding: 0.75em 1.5em;
    background-color: rgba(var(--secondary), 1);
    color: rgb(var(--primary));
    border-width: 0;
    text-decoration: none;
    white-space: nowrap;
}
.button.small {
    padding: 0.25em 0.5em;
}
.button:hover {
    color: rgb(var(--primary));
}

a {
    font-weight: 600;
    color: rgb(var(--secondary));
}
.bg-secondary a {
    color: rgb(var(--primary));
}

a:hover {
    /* color: rgb(var(--secondary-hovered)); */
}

address {
    display: unset;
}

:root {
    --messages-padding: 0.7em;
}

.toast-messages-box {
    width: min(450px, 80dvw);
    max-width: 80dvw;
    position: fixed;
    bottom: 2em;
    right: 2em;
    background-color: rgba(var(--secondary), 1);
    color: rgba(var(--primary), 1);
    padding: 0.5em;
    border-radius: 0.5em;
    z-index: 100000000;
    box-shadow: 3px 3px 7px grey;
}

.toast-messages-box.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.25s, opacity 0.25s linear;
}
.toast-messages-box .btn-close {
    top: var(--messages-padding);
    right: 0.6em;
    color: rgba(var(--primary), 1);
}
.toast-messages-box .title {
    margin: 0;
    width: 100%;
    border-radius: 0.25em;
    background-color: rgba(var(--primary), 1);
    color: rgba(var(--secondary), 1);
    padding: var(--messages-padding);
    font-weight: 600;
}
.toast-messages-box:not(:has(.messages-box .single-message)) {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.25s, opacity 0.25s linear;
}
.toast-messages-box .messages-box p {
    padding: var(--messages-padding);
    border-radius: 0.25em;
    margin-top: 0.5em;
    margin-bottom: 0;
    overflow-wrap: break-word;
}

.toast-messages-box .messages-box .success {
    background-color: rgba(94, 116, 68, 1);
}
.toast-messages-box .messages-box .error {
    background-color: rgba(217, 30, 54, 1);
}
.toast-messages-box .messages-box .warning {
    background-color: rgba(var(--pos-accent), 1);
    color: rgba(var(--secondary), 1);
}
.toast-messages-box .messages-box :is(.success, .error) a {
    color: rgba(var(--primary), 1);
}
.toast-messages-box .messages-box .warning a {
    color: rgba(var(--secondary), 1);
}

.loading-spinner {
    height: 100%;
    width: 100%;
    z-index:10000;
    left: 0;
    top: 0;
    background-color: rgb(255, 255, 255); /* fallback color */
    background-color: rgba(255, 255, 255, 0.9); /* w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    position: fixed;
}
.loading-spinner img {
    position: relative;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
    animation-name: rotate;
    animation-duration: 2.0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.offcanvas {
    background-color: transparent;
    color: rgb(var(--primary));
}
.offcanvas-backdrop {}

.offcanvas-header {
    background-color: rgb(var(--secondary));
    height: var(--nav-height);
}
.offcanvas-body {
    background-color: rgb(var(--secondary));
}

.infinite-more-link {
    height: 0px;
    width: 0px;
    text-decoration: none;
}

.flag {
	position: absolute;
	margin-left:auto;
	top: 25px;
	left: -30px;
	background:orange;
	width:130px;
	height:20px;
	transform: rotate(-45deg);
	text-align:center;
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;


}
.flag-red {
	position: absolute;
	margin-left:auto;
	top: 25px;
	left: -30px;
	background:indianred;
	width:130px;
	height:25px;
	transform: rotate(-45deg);
	text-align:center;
	font-size:15px;
	text-transform:uppercase;
	font-weight:bold;
	color: #ffffff;
}