a {
	color: black;
}

:root {
    --pale-purple-pantone: #fce3f7ff;
    --black-coral: #576066ff;
    --gold-crayola: #f9c784ff;
    --violet-ryb: #7803a3ff;
    --thistle: #f1cdffff;

    --light-gray: #f2f2f2;
    --gray: #e0e0e0;
    --dark-gray: #7c7c7c;

    --black-bean: #280000;
    --cream: #FFFED7;
    --light-cyan: #D6FBFF;
    --celeste: #ABF4FC;
    --ivory: #FFFCEE;
    --alabaster: #EFEAC6;
    --button-orange: #ffe0ba;

    --pale-yellow: #FFF9D9;
    --medium-yellow: #FFF1A6;
    --strong-yellow: #FFEB80;

    --pale-orange: #FFE0CC;
    --medium-orange: #FFC099;
    --strong-orange: #FFA166;

    --pale-red: #FFD9CC;
    --medium-red: #FF9F80;

    --pale-green: #EAFFCC;
    --medium-green: #D5FF99;

    --pale-blue: #D6F3FF;
    --medium-blue: #ABE6FF;

    --pale-violet: #E7D9FF;
    --medium-violet: #D0B3FF;



    --width-animated-logo: 800px;
    --height-animated-logo: 210px;

    --orb1-diameter: 100px;
    --orb2-diameter: 90px;
    --orb3-diameter: 110px;
}

.nunito-regular {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

button {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

input {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; 
}

textarea {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* atoms */

/* buttons */

.button {
	border: 1px solid dimgray;
	box-shadow: 1px 1px 2px goldenrod;
	border-radius: 25px;
	transition: transform .2s;
	color: black;
	font-weight: bold;
	text-align: center;
}

.button:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.action-button {
	background-color: var(--button-orange);
	font-size: large;
	padding: 5px 15px;
}

.ai-action-button {
	background-color: #e8d4f8;
	box-shadow: 1px 1px 2px #b88dd9;
	font-size: large;
	padding: 5px 15px;
}

.ai-action-button:hover {
	background-color: #d4b8f0;
	box-shadow: 1px 1px 4px #a374d1;
}

.ai-action-button:disabled {
	background-color: #f0f0f0;
	box-shadow: 1px 1px 2px #cccccc;
	color: #999999;
	cursor: not-allowed;
	transform: none;
}

.technical-button {
	background-color: transparent;
	font-size: large;
	padding: 5px 15px;
  box-shadow: 1px 1px 2px dimgray;
  border-radius: 25px;
}

.form-submit-button {
	width: 100px;
	padding: 0;
  margin: 0 auto;
}

.homepage-button {
	font-size: x-large;
	padding: 5% 10% 5% 10%;
}

#submitButton {
	border: transparent;
	background: top;
	font-size: larger;
	font-weight: bold;
}

#submitButton:hover {
	cursor: pointer;
}

.register-button {
	margin-right: 3%;
	border: 1px solid #f37302;
	border-radius: 25px;
	padding: 3px 6px;
	font-size: medium;
	background-color: white;
	color: #f37302;
	transition: transform .2s;
}

.register-button a {
	text-decoration: none;
}

.register-button:hover {
	background-color: #f89842;
	border-color: #f89842;
	color: white;
	cursor: pointer;
	transform: scale(1.1);
}

.form-button {
  font-size: inherit;
  font-weight: normal;
  background: white;
  width: 90px;
}

.form-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
  transform: none;
}

.password-visibility-button {
	background-color: transparent;
	border: none;
	margin-left: 0%;
	font-size: large;
}


.round-button {
	background-color: var(--ivory);
	border: 0px solid rgba(0, 0, 0, 0.1);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 100%;
	transition: transform .2s;
	color: #222;
	font-size: medium;
  margin: 3px 10px;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
}

.round-button:hover {
	cursor: pointer;
	transform: scale(1.1);
}

.event-page-bottom-button {
	background-color: var(--ivory);
	border-radius: 25px;
	transition: transform .2s;
	border: 0px solid #fcb359;
	box-shadow: 2px 2px 4px #ec9b006b;
	padding: 10px;
	margin: 10px;
	font-size: large;
}

.event-page-bottom-button > img,
.event-page-bottom-button > span {
  vertical-align: middle;
}

.event-page-bottom-button:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.flash-message {
  border: 1px solid;
  border-radius: 8px;
  padding: 12px 20px;
  margin: 10px 0;
  width: 100%;
  box-sizing: border-box;
}

.flash-message-success {
  border-color: #4caf50;
  background-color: #e8f5e8;
  color: #2e7d32;
}

.flash-message-success a {
  color: #2e7d32;
}

.flash-message-success a:hover {
  color: #1b5e20;
}

.flash-message-warning {
  border-color: #ffd900;
  background-color: #fffce0;
  color: #e68a00;
}

.flash-message-warning a {
  color: #d4ad00;
}

.flash-message-warning a:hover {
  color: #c07d00;
}

.flash-message-error {
  border-color: #f44336;
  background-color: #ffebee;
  color: #c62828;
}

.flash-message-error a {
  color: #c62828;
}

.flash-message-error a:hover {
  color: #b71c1c;
}

.flash-message-info {
  border-color: #2196f3;
  background-color: #e3f2fd;
  color: #1565c0;
}

.flash-message-info a {
  color: #1565c0;
}

.flash-message-info a:hover {
  color: #0d47a1;
}

a:visited{
  color: black;
}
a:hover{
  color: #f37302;
}

.clickable {
	transition: transform .2s;
}
.clickable:hover {
	transform: scale(1.035);
	cursor: pointer;
}

.centered-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.centered-button-section {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 25px 0 50px 0;
}

.centered-button-section a {
	text-decoration: none;
}

.h2line {
	max-width: 90%;
	margin: 5% auto 2%;
	border-radius: 25px;
	border: 1px solid grey;
}

.container-shadow {
	border-radius: 25px;
	box-shadow: 1px 1px 10px lightgray;
}

.nav-el {
	font-size: medium;
	margin: 4px 6px 4px 6px;
	padding: 6px;
}

.nav-el:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.top-bar {
	display: flex;
	background-color: rgba(255,254,140, 0.3);
	box-shadow: 2px 2px 10px gray;
	position: sticky;
	top: 0;
	z-index: 50;
  backdrop-filter: blur(10px);
  margin-bottom: 40px;
}

/* poster grid */
#posterGrid {
	margin: auto;
	container-type: inline-size; /* Abilita container queries */
}

.grid {
	max-width: 90%;
	margin: auto;
}

.grid-item {
	width: 30%;
	margin-bottom: 2%;
}

.grid-gradient {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 10%;
	 z-index: 10;
	 background: linear-gradient(transparent, white);
}

.events-grid-table-container {
  max-width: 60%; 
  margin: auto;
}

/* 3 colonne di default (per contenitori stretti) */
.grid-sizer { width: 30%; }
.gutter-sizer { width: 2%; }

/* 4 colonne per contenitori medi (> 600px) */
@container (min-width: 600px) {
  .grid-sizer { width: 23%; }
  .grid-item { width: 23%; }
  .gutter-sizer { width: 2%; }
}

/* 6 colonne per contenitori larghi (> 1000px) */
@container (min-width: 1000px) {
  .grid-sizer { width: 15%; }
  .grid-item { width: 15%; }
  .gutter-sizer { width: 1.5%; }
}

/* stats section */
.stats-section-container {
    display: flex;
    /*border:1px solid black;*/
    width: 70%;
    height: 80%;
    /*font-family: sans-serif;*/
}

.stats-div {
    /*border:1px solid black;*/
    width: 50%;
    font-size: x-large;
}

.stats-div-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  margin: 5% 0;
}

.stats-div-bckg-1 {
  border-radius: 31% 20% 67% 33% / 30% 30% 70% 70%;
  background-color: var(--medium-orange);
}

.stats-div-bckg-2 {
  border-radius: 60% 47% 67% 36% / 50% 51% 70% 70%;
    background-color: var(--pale-red);
}

.stats-div-bckg-3 {
  border-radius: 89% 70% 51% 66% / 90% 83% 70% 70%;
  background-color: var(--alabaster);
}

.stats-div-inner-left {
  height: 33.3%;
}

.stats-div-inner-right {
  margin-left: auto;
  height: 140px;
}

.stats-number {
  font-size:xxx-large;
  text-align: center;
  font-weight: bold;
}

.stats-caption {
  text-align: center;
}

.stats-cta-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60%;
  margin: 20% auto;
  width: 60%;
  background-color: var(--medium-yellow);
  border-radius: 24% 35% 47% 67% / 36% 42% 70% 72%;
}

.stats-cta-message {
  height: 50%;
  text-align: center;
  font-size: xx-large;
  margin: 5%;
}

/* animated logo */
.animated-logo {
	width: var(--width-animated-logo);
}

.animated-logo-container {
	width: var(--width-animated-logo);
  	height: var(--height-animated-logo);
}

.orbs-separator {
	width: 20%;
}

.orb-background {
  width: var(--width-animated-logo);
  height: var(--height-animated-logo);
  background-color: white;
  position: relative;
  display: flex;
}

.orb {
  border-radius: 50%;
  filter: blur(15px);
  animation-name: pulse;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
}

.refsys {
  /* orbit animation */
  /* safari */
  -webkit-animation-name:orbit;
  -webkit-animation-duration:8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  /* firefox */
  -moz-animation-name:orbit;
  -moz-animation-duration:8s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

.refsys1 {
  width: 40%;  /* same width as its orb */
  height: 45%;  /* height regulates the diameter of the orbit */
  margin: 20% 0 0 40%;  /* margins locate the center of the orbit */
  -webkit-animation-duration:7.5s;
  -moz-animation-duration:7.5s;
}
.orb1 {
  background: var(--pale-yellow);
  width: var(--orb1-diameter);
  height: var(--orb1-diameter);
  animation-name: colorChangeOrb, pulse;
  animation-duration: 30s, 4s;
}

.refsys2 {
  width: 40%;  /* same width as its orb */
  height: 65%;  /* height regulates the diameter of the orbit */
  margin: 10% 0 0 15%;  /* margins locate the center of the orbit */
}
.orb2 {
  background: var(--pale-orange);
  width: var(--orb2-diameter);
  height: var(--orb2-diameter);
  animation-name: colorChangeOrb, pulse;
  animation-duration: 35s, 3.5s;
}

.refsys3 {
  width: 40%;  /* same width as its orb */
  height: 35%;  /* height regulates the diameter of the orbit */
  margin: 15% 0 0 22%;  /* margins locate the center of the orbit */
  -webkit-animation-duration:8.5s;
  -moz-animation-duration:8.5s;
}
.orb3 {
  background: var(--medium-orange);
  width: var(--orb2-diameter);
  height: var(--orb2-diameter);
  animation-name: colorChangeOrb, pulse;
  animation-duration: 25s, 4.5s;
}

.refsys4 {
  width: 40%;  /* same width as its orb */
  height: 50%;  /* height regulates the diameter of the orbit */
  margin: 20% 0 0 40%;  /* margins locate the center of the orbit */
  -webkit-animation-duration:9.5s;
  -moz-animation-duration:9.5s;
}
.orb4 {
  background: var(--pale-violet);
  width: var(--orb2-diameter);
  height: var(--orb2-diameter);
  animation-name: colorChangeOrb, pulse;
  animation-duration: 45s, 5.5s;
}

.refsys5 {
  width: 40%;  /* same width as its orb */
  height: 20%;  /* height regulates the diameter of the orbit */
  margin: 20% 0 0 40%;  /* margins locate the center of the orbit */
  -webkit-animation-duration:12.5s;
  -moz-animation-duration:12.5s;
}
.orb5 {
  background: var(--pale-red);
  width: var(--orb2-diameter);
  height: var(--orb2-diameter);
  animation-name: colorChangeOrb, pulse;
  animation-duration: 40s, 5s;
}

/* color change animation */
@-moz-keyframes colorChangeOrb /* Firefox */ {
	0%  {background: var(--pale-green)}
    2%  {background: var(--pale-yellow)}
    4%  {background: var(--medium-yellow)}
    6%  {background: var(--strong-yellow)}
    8%  {background: var(--medium-yellow)}
    10% {background: var(--pale-yellow)}
    12% {background: var(--medium-yellow)}
    14% {background: var(--strong-yellow)}
    16% {background: var(--medium-yellow)}
    18% {background: var(--pale-yellow)}
    20% {background: var(--pale-violet)}
    22% {background: var(--medium-violet)}
    24% {background: var(--pale-violet)}
    26% {background: var(--pale-yellow)}
    28% {background: var(--medium-yellow)}
    30% {background: var(--strong-yellow)}
    32% {background: var(--medium-yellow)}
    34% {background: var(--pale-yellow)}
    36% {background: var(--pale-yellow)}
	38% {background: var(--medium-yellow)}
	40% {background: var(--strong-yellow)}
    42% {background: var(--medium-yellow)}
    44% {background: var(--pale-yellow)}
    46% {background: var(--pale-orange)}
    48% {background: var(--medium-orange)}
    50% {background: var(--pale-orange)}
    52% {background: var(--pale-yellow)}
    54% {background: var(--medium-yellow)}
    56% {background: var(--strong-yellow)}
    58% {background: var(--medium-yellow)}
    60% {background: var(--pale-yellow)}
    62% {background: var(--pale-yellow)}
    64% {background: var(--medium-yellow)}
    66% {background: var(--strong-yellow)}
    68% {background: var(--medium-yellow)}
    70% {background: var(--pale-yellow)}
    72% {background: var(--pale-blue)}
    74% {background: var(--medium-blue)}
    76% {background: var(--pale-blue)}
    78% {background: var(--pale-yellow)}
	80% {background: var(--medium-yellow)}
	82% {background: var(--strong-yellow)}
	84% {background: var(--medium-yellow)}
	86% {background: var(--pale-yellow)}
	88% {background: var(--pale-yellow)}
	90% {background: var(--medium-yellow)}
	92% {background: var(--strong-yellow)}
	94% {background: var(--medium-yellow)}
	96% {background: var(--pale-yellow)}
	98% {background: var(--pale-green)}
	100% {background: var(--medium-green)}
}

@-webkit-keyframes colorChangeOrb /* Safari and Chrome */ {
	0%  {background: var(--pale-green)}
    2%  {background: var(--pale-yellow)}
    4%  {background: var(--medium-yellow)}
    6%  {background: var(--strong-yellow)}
    8%  {background: var(--medium-yellow)}
    10% {background: var(--pale-yellow)}
    12% {background: var(--medium-yellow)}
    14% {background: var(--strong-yellow)}
    16% {background: var(--medium-yellow)}
    18% {background: var(--pale-yellow)}
    20% {background: var(--pale-violet)}
    22% {background: var(--medium-violet)}
    24% {background: var(--pale-violet)}
    26% {background: var(--pale-yellow)}
    28% {background: var(--medium-yellow)}
    30% {background: var(--strong-yellow)}
    32% {background: var(--medium-yellow)}
    34% {background: var(--pale-yellow)}
    36% {background: var(--pale-yellow)}
	38% {background: var(--medium-yellow)}
	40% {background: var(--strong-yellow)}
    42% {background: var(--medium-yellow)}
    44% {background: var(--pale-yellow)}
    46% {background: var(--pale-orange)}
    48% {background: var(--medium-orange)}
    50% {background: var(--pale-orange)}
    52% {background: var(--pale-yellow)}
    54% {background: var(--medium-yellow)}
    56% {background: var(--strong-yellow)}
    58% {background: var(--medium-yellow)}
    60% {background: var(--pale-yellow)}
    62% {background: var(--pale-yellow)}
    64% {background: var(--medium-yellow)}
    66% {background: var(--strong-yellow)}
    68% {background: var(--medium-yellow)}
    70% {background: var(--pale-yellow)}
    72% {background: var(--pale-blue)}
    74% {background: var(--medium-blue)}
    76% {background: var(--pale-blue)}
    78% {background: var(--pale-yellow)}
	80% {background: var(--medium-yellow)}
	82% {background: var(--strong-yellow)}
	84% {background: var(--medium-yellow)}
	86% {background: var(--pale-yellow)}
	88% {background: var(--pale-yellow)}
	90% {background: var(--medium-yellow)}
	92% {background: var(--strong-yellow)}
	94% {background: var(--medium-yellow)}
	96% {background: var(--pale-yellow)}
	98% {background: var(--pale-green)}
	100% {background: var(--medium-green)}
}

/* pulse animation */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  15% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  50% {
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  15% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  50% {
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

/* orbit animation */
@-webkit-keyframes orbit {
  from { -webkit-transform:rotate(0deg) }
  to { -webkit-transform:rotate(360deg) }
}
@-moz-keyframes orbit {
  from { -moz-transform:rotate(0deg) }
  to { -moz-transform:rotate(360deg) }
}

.body {
	max-width: 100%;
	background-color: white;
	margin: auto;
	overflow-x: hidden;
}

.content {
	display: block;
	max-width: 40%;
	margin: auto;
	min-height: 100vh;
}

/* Layout a due colonne */
.two-column-layout {
	display: flex;
	gap: 40px;
	max-width: 60%;
	margin: auto;
	min-height: 100vh;
}

.organization-main-column {
	flex: 2;
	min-width: 0;
}

.organization-sidebar {
	flex: 1;
	min-width: 0;
	position: sticky;
	top: 100px;
	height: fit-content;
}


.homepage-section {
	height: 70vh;
	background-color: white;
	display: flex;
	padding: 1%;
	position: relative;
}

.homepage-section-content {
	max-width: 50%;
	margin: auto;
}

.homepage-section-text-element {
	margin: 10% auto;
	text-align: center;
}

.homepage-section-action-element {
	margin: auto;
}

.alternate {
	background-color: white;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.action-element {
	text-align: center;
	display: grid;
	width: 200px;
	transition: transform .2s;
}

.action-element a {
	text-decoration: none;
	color: black;
}

.action-element:hover {
	transform: scale(1.1);
}

.action-icon {
	width: 50%;
	padding: 10% 10% 2% 10%;
}


.home-icon {
	width: 150px;
	transition: transform .2s;
}

.home-icon:hover {
	transform: scale(1.1);
}

.vertical-align {
	margin: 15vh 0 auto 0;
}

.aligned-inline {
	display: flex;
	align-items: baseline;
}

.aligned-spaced-inline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}


/* form stuff */
input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.required:after {
	content: " *";
  color: red;
}

#togglePassword:hover {
	cursor: pointer;
}

.form-container {
	padding: 10px 15px 10px 15px;
	border-radius: 25px;
	box-shadow: 1px 1px 10px lightgray;
}

.form-label {
	font-size: large;
	font-weight: bold;
}

.form-text-input,
.simple-captcha-text {
	width: 100%;
	border: 1px solid gray;
	border-radius: 25px;
	height: 30px;
	font-size: medium;
	padding: 0 0 0 15px;
}

.form-password-input {
	width: 87%;
}

.form-text-input:focus,
.simple-captcha-text:focus {
 	outline: none !important;
    border:1px solid #f89842;
    box-shadow: 0 0 10px #ffE1A2;
}

.form-textarea-input {
	padding-top: 10px;
	padding-right: 5px;
  resize: none;
  height: 200px;
}

.form-textarea-input:focus {
 	outline: none !important;
    border:1px solid #f89842;
    box-shadow: 0 0 10px #ffE1A2;
}

.form-select-input,
.form-number-input {
	width: 100%;
	border: 1px solid gray;
	border-radius: 25px;
	height: 30px;
	font-size: medium;
	background-color: white;
	padding: 0 0 0 15px;
}

.form-select-input:focus {
 	outline: none !important;
    border:1px solid #f89842;
    box-shadow: 0 0 10px #ffE1A2;
}

.form-date-input {
	width: 100%;
	border: 1px solid gray;
	border-radius: 25px;
	height: 30px;
	font-size: medium;
	background-color: white;
	text-transform: uppercase;
}

.form-date-input:focus {
 	outline: none !important;
  border:1px solid #f89842;
  box-shadow: 0 0 10px #ffE1A2;
}

.form-file-input {
  border: 1px solid gray;
	border-radius: 25px;
	height: 30px;
	font-size: medium;
	background-color: white;
	transition: transform .2s;
	padding: 1% 2% 0 2%;
	width: 90px;
	text-align: center;
}

.form-row {
	margin-bottom: 10px;
	margin-top: 20px;
}

.form-row-info {
  font-size: 14px;
  font-family: sans-serif;
  margin-bottom: 4%;
  margin-right: 5%;
  padding-left: 2%;
  border-left: 1px solid lightgray;
}

#posterInputButtonContainer {
	width: 75%;
}

.form-el-large {
	width: 100%;
	border-radius: 5px;
}

.form-el-small {
	border-radius: 5px;
}

.form-el-div {
	padding: 0% 0% 3% 0%;
}

.form-el-inline {
	padding: 0% 2% 0% 0%;
}

.startEndDateInputsEventForm {
	display: flex;
}

.startDatetimeInputBlock {
	width: 50%;
	display: block;
  padding: 0 20px 0 0;
}

.startDatetimeInput {
	width: 90%;
}

.endDatetimeInputBlock {
	width: 50%;
	display: block;
}

.publicationInfoInputsEventForm {
	display: flex;
  margin-bottom: 40px;
}

.publicationDateInputBlock {
	width: 50%;
	display: block;
  padding: 0 20px 0 0;
}

.publicationOrganizationSelectBlock {
	width: 50%;
	display: block;
}

/* events table stuff */
.events-table {
	/*font-family: sans-serif;*/
	padding: 25px 8px 10px 4px;
	border-radius: 25px;
	box-shadow: 1px 1px 10px lightgray;
	width: 100%;
  font-size: large;
}

.events-table a {
	color: black;
}

.events-table a:hover {
	color: #f89842;
}

.events-table-row {
	border-bottom: 1px solid gray;
}

.events-table-td {
	padding-bottom: 2%;
}

.events-table-td-status {
  width: 10%; 
  text-align: center; 
  vertical-align: middle;
}

.events-table-td-empty {
  width: 2%;
  text-align: center;
  vertical-align: middle;
}

.events-table-td-date {
  width: 20%; 
  text-align: center; 
  vertical-align: middle;
}

.events-table-td-info {
  width: 75%;
}

/* ORGANIZATION */

.organization-header {
  margin-bottom: 40px;
}

.organization-main {
  margin-bottom: 30px;
}

.organization-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}

.organization-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--ivory);
  border-radius: 50%;
  border: 2px solid var(--button-orange);
  flex-shrink: 0;
}

.organization-title h1 {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.organization-description {
  line-height: 1.6;
}

.organization-info-box {
  background-color: var(--ivory);
  border-radius: 15px;
  box-shadow: 1px 1px 10px lightgray;
  overflow: hidden;
}

.organization-map-container {
  width: 100%;
}

.organization-details {
  padding: 20px;
}

.organization-detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.organization-detail-item i {
  color: #fcb359;
  margin-top: 3px;
  min-width: 16px;
  flex-shrink: 0;
}

.organization-detail-item a {
  color: black;
  text-decoration: none;
}

.organization-detail-item a:hover {
  color: #fcb359;
}

.organization-seat-info {
  flex: 1;
  min-width: 0;
}

.organization-address {
  color: var(--dark-gray);
  font-size: 0.9em;
  margin-top: 5px;
}

.organization-telegram-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.organization-members-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.telegram-manage-link {
  text-decoration: none;
}

.members-manage-link {
  text-decoration: none;
}

.small-button {
  background-color: var(--button-orange);
  border: 1px solid dimgray;
  box-shadow: 1px 1px 2px goldenrod;
  border-radius: 25px;
  transition: transform .2s;
  color: black;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
  font-size: 0.8em;
  padding: 2px 6px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 24px;
  height: 24px;
}

.small-button:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.organization-actions {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--gray);
  text-align: center;
}

.organization-events {
  margin-top: 30px;
}

.organization-events h2 {
  margin-bottom: 20px;
}

/* TELEGRAM CHAT MANAGEMENT */

.telegram-chat-management {
  max-width: 800px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-subtitle {
  color: #666;
  font-size: 1.1em;
  margin-top: 0.5rem;
}

.status-connected {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 8px;
  color: #155724;
}

.status-disconnected {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  color: #721c24;
}

.info-box {
  display: flex;
  align-items: flex-start;
  padding: 2rem 0;
}

.instructions-box {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.instructions-list {
  margin: 0;
  padding-left: 1.5rem;
}

.instructions-list li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.command-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
}

.command-box code {
  flex: 1;
  background: none;
  padding: 0;
  font-size: 0.9em;
  color: #495057;
}

.copy-button {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.copy-button:hover {
  background: #5a6268;
}

.disconnect-box {
  text-align: center;
  padding: 2rem 0;
}

.danger-button {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.danger-button:hover {
  background-color: #c82333;
}

#posterUploadArea {
  position: relative;
}

/* responsive website stuff */
@media screen and (max-width: 1200px) {
	.two-column-layout {
		max-width: 70%;
		gap: 30px;
	}
}

@media screen and (max-width: 800px) {
  /* event submit form */
  #posterUploadArea {
      max-width: 100% !important;
  }

  /* Rimuovi il contenitore del form su mobile per più spazio */
  .form-container {
      padding: 0 10px 0 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
  }
  /* Aumenta la larghezza dei campi del form su mobile */
  .form-text-input,
  .form-select-input,
  .form-date-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  .form-textarea-input {
      width: 100% !important;
      box-sizing: border-box !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
  }

  .form-row-info {
      margin-right: 0 !important;
      padding-left: 3% !important;
  }
	/* Aumenta lo spazio disponibile su mobile */
  .content {
    max-width: 90% !important;
  }

  /* Gestisci meglio gli input nelle strutture inline */
  .aligned-spaced-inline {
      width: 100% !important;
  }

  /* Rimuovi padding extra dai form-row */
  .form-row {
      margin-left: 0;
      margin-right: 0;
  }

  /* Gestisci meglio gli input di password */
  .form-password-input {
      width: 90% !important;
  }

	/* Gestisci i container inline per le date */
  #posterInputButtonContainer {
      width: 100% !important;
  }

  /* Linea separatrice su mobile */
  hr {
    margin-left: 0;
    margin-right: 0;
  }

  /* Submit button centrato su mobile */
  .form-submit-button {
    margin: 0 auto !important;
  }

	.two-column-layout {
		display: block;
		max-width: 80%;
		gap: 0;
	}
	
	.organization-main-column {
		flex: none;
	}
	
	.organization-sidebar {
		flex: none;
		position: static;
		margin-top: 30px;
	}

	.homepage-section {
		max-width: 100%;
	}

	.top-bar {
		position: sticky;
    position: -webkit-sticky;
		top: 0;
		overflow: visible;
	}

	.homepage-section-action-element {
		flex-direction: column;
	}

	.action-element {
		width: 120px;
	}

	.action-icon {
		padding-top: 15%;
	}

	.form-el-div {
		padding: 0% 0% 5% 0%;
	}

	.startEndDateInputsEventForm {
		display: block;
	}

	.startDatetimeInputBlock {
		width: 100%;
	}

	.startDatetimeInput {
		width: 100%;
	}

	.endDatetimeInputBlock {
		width: 100%;
    margin-top: 20px;
	}


  .publicationInfoInputsEventForm {
    display: block;
  }

  .publicationDateInputBlock {
    width: 100%;
    display: block;
  }

  .publicationOrganizationSelectBlock {
    width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .stats-section-container {
      display: block;
  }
  .stats-div {
      width: 100%;
  }
  .stats-cta-container {
      width: 100%;
      height: 170px;
  }

	:root{
		--width-animated-logo: 300px;
		--height-animated-logo: 12%;

		--orb1-diameter: 60px;
		--orb2-diameter: 50px;
		--orb3-diameter: 70px;
	}

  .animated-logo-container {
    margin: auto;
  }
  .stats-div {
    font-size: large;
  }
  .stats-number {
    font-size: xx-large;
  }
  .stats-cta-message {
    font-size: x-large;
  }
  .events-table {
    font-size: inherit;
  }
  .events-table-td-date {
    width: 34%;
  }
  .events-grid-table-container {
    max-width: 90%;
  }
  .organization-title {
      gap: 10px;
  }
  
  .organization-logo-placeholder {
      width: 50px;
      height: 50px;
  }
  
  .organization-title h1 {
      font-size: 1.5em;
  }
  
  .organization-details {
      padding: 15px;
  }
  
  .organization-detail-item {
      margin-bottom: 12px;
  }
  .events-table-td-status {
    width: 15%; 
  }
}

#menu__toggle {
  opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  right: 0 !important;
}
.menu__btn {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}
.menu__box {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: var(--ivory);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
}
.menu__item {
  display: block;
  padding: 12px 24px;
  color: black;
  /*font-family: 'Roboto', sans-serif;*/
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  text-align: right;
  transition-duration: .25s;
}
.menu__item:hover {
  background-color: var(--alabaster);
}

/* Dropdown styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dropdown-toggle i {
  font-size: 12px;
  transition: transform 0.2s;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--ivory);
  min-width: 200px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  border-radius: 8px;
  z-index: 2000;
  margin-top: 5px;
  border: 1px solid var(--gray);
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: "Nunito", sans-serif;
  font-weight: 500;
  transition: background-color 0.2s;
  border-radius: 8px;
  margin: 2px;
}

.dropdown-item:hover {
  background-color: var(--alabaster);
  text-decoration: none;
}

.dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

/* Responsive dropdown */
@media screen and (max-width: 800px) {
  .dropdown-menu {
    min-width: 180px;
    right: -50px;
    z-index: 2000;
    position: fixed;
    top: 60px;
    right: 10px;
  }
  
  .dropdown {
    position: static;
  }
}