/* Interactive Course Map - style.css
 * Marco Tarini 2025 */

/* compatibility fixes start */
body {
    line-height: 1.19; /* Adjust as needed */
}
h1 {
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}
div {
    display: block;
    unicode-bidi: isolate;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
table {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
}
td {
    display: table-cell;
    vertical-align: inherit;
    unicode-bidi: isolate;
}
/* compatibility fixes end */

/* explicitly redefine defaults> BEGIN */
input[type="radio" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 3px 6px 0px 5px;
    padding: initial;
    border: initial;
}
/* explicitly redefine defaults: END */


/* used to make things instant */
[data-notransition="true"] {
  transition: none !important;
}


ul.music{
	margin: -5px 0 0 0;
}
ul.music li{
	margin-bottom: 6px;
}
ul.music li::marker {
	NOcontent: "\2022 ";
	margin: 20px;
	NOfont-size: 200%;
	color: black;
}


#searchBoxHolder{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width:200px;
	height:40px;
	overflow: hidden;
	
}

#searchBoxDiv{

	width: 178px;
	height: 20px;
	bottom: 0px;
	left: 0px;
	top: auto;
	
	top: auto;
	padding: 4px;	
	transition: bottom 0.3s;
	transition-delay: 0.0s;
}

@keyframes blinkTwice {
  0%, 100%   { background-color: white; }
  25%, 75%   { background-color: #eeeeff; } /* highlight color */
  50%        { background-color: white; }
}

#searchBox.blink {
  animation: blinkTwice 0.7s ease-in-out 1;
}


#searchBoxIcon{
	display: inline;
	width: 20px;
	height: 20px;
	cursor: pointer;
	/*border-right: 10px solid pink;*/
}
.searchBoxIcon{
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	background-image: url(./icon-magnifying_glass.png);
	background-size: 100%;
}
div.searchBoxIcon.withAbstract{
	background-image: url(./icon-magnifying_glass_abstract.png);
}
#contextMenu .searchBoxIcon{
	margin-bottom: -8px;
	margin-right: 5px;
}
#contextMenu.small{
	width:240px;
}

#searchBoxDiv.disabled{
	bottom:-50px;
}
#searchBox{
	position: absolute;

	width: 150px;
	height: 20px;
	bottom: 3px;
	left: 24px;
	margin: 2px;
	color: #AAA; 
	font-family:inherit; 
	background-color: #FFF;
	font-size:16px;
	border: 0;
}


#searchBox.noHit   { color: #F00; /*background-color: #FEE;*/ }
#searchBox.active  { color: #040; /*background-color: #EFE;*/ }
#searchBox.inactive{  }

#startPlanButton{
	position: fixed;
	right: 0;
	top: 0;
}

input[type="text"]:focus {
  outline: none;
  border: 0;
}


#mobileBlock{
	position: absolute;
    top: 0; 
	left: 0; 
	width: 100vw;  /* Full viewport width */
    height: 100vh; /* Full viewport height */    
	background: white;
    color: black;
    font-size: 24px;
    justify-content: center;
	text-align: center;
    z-index: 9999;
	padding: 50px 0;
	border: 0;
	margin: 0;
}

#warnings p:before{
	content : "⚠";
}

#warnings{
	
}
#warnings p{
	color: red;
	font-weight: bold;
	background-color: #FFA;
}
#warnings span{
	display:block;
	color: red;
	font-weight: normal;
	font-style:italic;
}

.info-panel{
	z-index: 99999;
	display: none;
	position: absolute;
	width: 700px;
	height: auto;
	margin: 0;
	background-color: white;
	padding:0px 15px;
	
}




span.icon {
    display: inline-block; 
    width: 24px; 
    height: 24px; 
	margin: 0 4px 0 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* Scales the image to fit within 20x20 */
    background-position: center;
}

.hexa > span.marks{
	height: 28px;
	position: absolute;
	
    left: 50%;           /* Move it horizontally to the center */

	//background-color: yellow;
	vertical-align: middle;
	text-align: center;
	display: inline-block;
	opacity: 0.6;
	transition: opacity 0.5s cubic-bezier(.59,.93,.69,1.95);
	z-index: 100000;
}

span.icon.white{
	margin: 4px 4px;
    width: 20px; 
    height: 20px; 
}
span.icon.small{
	width: 18px; 
    height: 18px; 
	margin: 0;
	vertical-align: -4px;
}

span.icon.affine {
	background-image:url(icon-affine_white.png);
}

span.icon.affine.black {
	background-image:url(icon-affine_black.png);
}

span.icon.borrowed {
	background-image:url(icon-borrowed_white.png);
}

span.icon.borrowed.black {
	background-image:url(icon-borrowed_black.png);
}

img.icon{
	height: 30px;
	margin: 0 8px 0 0;
	float: left;
}


.info-panel p{
	margin-top: 12px;
	margin-bottom: 12px;
}	


.info-panel .title.flagicon{
	font-size: 38px;
	color: #AAA;
}
.info-panel div{
	margin-top: 20px;
	margin-bottom: 20px;
}

.info-panel h3{
	font-size: 26px;
}
	
.info-panel .title{
	font-weight: bold;
	margin-top: 30px;
	font-size: 20px;
	color: #666;
}	

.info-panel .remark,
.dialog-panel .remark,
.outtro{
	color: #008; 
	font-style: italic;
}

.dialog-panel .remark a, .mylink{
	cursor: pointer;
	font-weight: bold;
}	

#panel-quarters {
	width: auto;	
}
#panel-plan{
	width: 1000px;	
}	
#panel-yearPlanner{
	width: 800px;	
}	
#panel-submit{
	width: 80%;	
	max-width: 1600px;	
}	


.dialog-panel{
	position: absolute;
	width: auto;
	height: auto;
	border: 1px solid gray;
	background-color: white;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
	padding: 0px 15px 30px 15px;
	z-index: 99999;
	display: none;
	border-radius: 10px;
	margin: 100px auto;
	right: 100px;
	max-width: 650px;
	width: 650px;
	pointer-events: all;
}
.dialog-panel .title {
	font-weight: 800;
	display: block;
	margin-top: 30px;
	font-size: 110%;
}

.dialog-panel .copyable{
	height: 36px;
	position: relative;
	margin: 5px 0;
}

.dialog-panel .copyable>input[type=text],
.dialog-panel .copyable>button{
	height: 100%;
	box-sizing: border-box; 
	//font-size: 16px; 
	margin: 0;
	
}

.dialog-panel .copyable>input[type=text]{
	background-color: #EEE;
	border: 1px solid #AAA;
	font-family: monospace;
	padding: 0 10px;
	width: 340px;
	border-radius: 18px 0 0 18px;
}



.dialog-panel .copyable>button{
	border-radius: 0 18px 18px 0;
	color: #AAA;
	padding: 5px 10px 5px 5px;
	border-left: 0;
}


#planCode{
	width: 250px;
}
#planLink{
	width: 450px;
}

#contextMenu.pinInfo{
	padding: 15px 10px;
}


#contextMenu.pinInfo .title{
	font-weight: 800;
	margin-right: 10px;	
}

#contextMenu.pinInfo { 
//line-height: 10px;
}

#contextMenu.pinInfo br{
	display: block;
	content: "";
	margin-bottom: 4px;
}

#contextMenu.pinInfo .intro, #contextMenu.pinInfo .outtro{
	display: block;
	margin: 15px 0 0 0;
	font-style: italic;
}
#contextMenu.pinInfo a , #contextMenu.pinInfo a.myLink{
	display: inline;
	border: 0;
	color: blue;
	width: auto;
	height: auto;
	padding: 0;
}



input[type="checkbox"]:checked {
	accent-color: #aaccaa; /* Color when checked */
}

#curtain{
	position: fixed;
	width: 100%;
	height: auto;
	min-height: 100vh;
	background-color: rgba(0,0,0,0.3);
	/*pointer-events: none;*/
	top:0;
	left:0;
	z-index: 1000;
	display: none;
}


#yearPlannerBox{
	bottom: 0;
	right: 0;
	top: auto;
	left:auto;
	position: absolute;
	padding: 0;
	overflow: hidden;
	display: inline-block;
	width: fit-content;
	height: fit-content;
	transition: 0.75s right;
}
#yearPlannerBox.disabled{
	right: -800px;
}
/* Year planner */ 
#yearPlanner{
	//position: absolute;
	display: table;
	margin: 0;
	border-spacing: 0px;
	border-collapse: collapse;
	
	width: auto; /* Do not stretch */
	table-layout: auto; 
}
#yearPlanner tr td.title{
	border: 0;
}
#yearPlanner tr td.quarter{
	font-size: 130%;
	width: 20px;
	min-height: 500px;
	text-align: center;
	font-weight: 800;
	color: #AAA;
	//white-space: nowrap;
	padding:  0px    0px    0px    0px;
}
#yearPlanner tr td.year{
	text-align:center;
	writing-mode: vertical-lr;
	color: #AAF;
	width: 10px;
	font-weight: 800;
	//font-size: 100%;
	padding: 3px;
}
#yearPlanner tr td.excess{
	border: 0;
}
#yearPlanner tr.firstInYear td{
	border-top-color: #888;
}
#yearPlanner tr.lastInYear td {
	border-bottom-color: #888;
}
#yearPlanner tr td.year{
	border-bottom: 0;
}

#yearPlanner tr td.content {
	overflow: hidden;
	//white-space: nowrap;
	white-space: normal;
	font-size: 79%;
	width: 110px;
	padding: 0 3px;
	overflow: hidden;          /* Hide overflow */
	text-overflow: ellipsis;   /* Show ellipsis when text overflows */
	//height: 100%;              /* Ensure it fills the parent td height */
	max-height: inherit;       /* Don't go beyond the inherited height */ 
}

#yearPlanner tr.excess td.quarter::after{
	//content: "\atoo\00a0many?";
	content: "TOO\a\00a0MANY?\00a0";
	font-size: 10px;
	color: red;
	font-weight: 800;
	display: inline-block;
}

#yearPlanner tr td.content.empty {
	text-align: center;
	background-color: #EDFFED;
	border-left:0;
}

#yearPlanner tr td.content.notLast {
	border-right:0;
}

#yearPlanner tr td.content.course {
	cursor: pointer;
	text-align: center;
	background-color: #EDEDFF; /* light blue */
}
#yearPlanner tr td.locked::after {
	/*background-image: c;*/
	content: " 🔒";
	color: rgba(0,0,0,0.5);
	cursor: pointer;
	/*text-align: right;*/
	/*position: absolute;*/
	/*right:0;*/
	/*display: inline-block;*/
}
#yearPlanner tr td.course:hover {
	color: white;
	background-color: #888;
}

#yearPlanner tr.excess td.content.course {
	background-color: #FFDDDD;
	color: #C00;
}
#yearPlanner tr.excess td.course:hover {
	color: white;
	background-color: #C00;
}


#yearPlanner tr td {
	border: 1px solid #AAA;
	margin: 0;
	padding: 0;
}

#yearPlanner tr td.course ,#yearPlanner tr td.quarter  {
	height: 10px;
}

#yearPlanner tr td.title{
	
	font-weight: 800;
	text-align: center;
	padding:2px;

}

#yearPlanner tr td.content.thesis{
	background-color: #EAEAEA;
	border: 0;
	//background: linear-gradient(45deg, #CCC 25%, #FFF 25%) 0 0,
    //        linear-gradient(45deg, #CCF 25%, #F00 25%) 0 0;
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}
#yearPlanner tr:last-child td.content.thesis:last-child { 
	text-align : "right";
	color: #888;
}
#yearPlanner tr:last-child td.content.thesis:last-child::before { 
	content : "\00a0\00a0\00a0[ thesis ]";
	text-align : "right";
	font-size: 125%;
	//color: #888;
	width: 10px;
	font-weight: 800;
	font-size: 120%;
}


/* remove outer border */ 
#yearPlanner tr:first-child td { border-top: none; }
#yearPlanner tr:last-child td { border-bottom: none; }
#yearPlanner tr td:first-child { border-left: none; }
#yearPlanner tr td:last-child { border-right: none; }

/* CONTEXT MENU */

.context-menu {
    position: absolute;
    user-select: text;
	
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 0px;
    width: 380px;
    z-index: 999999;
    font-size: 14px;
    color: #333;
    opacity: 0;
	visibility: hidden; 
	overflow: hidden;
    transition: opacity 0.10s ease-in; /* Delay visibility change */
}
.context-menu .course-abstract,
.context-menu .course-title ,
.context-menu .course-time ,
{
	pointer-events: none;
}

.context-menu .course-warning{
	color: #888;
}

.context-menu.fade-in {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.10s ease-in;
}

.context-menu .course-title{
	font-weight: 800;
	padding: 10px 15px 0px 15px;
	margin: 0;
}

.context-menu .course-time{
	font-weight: 400;
	padding: 2px 15px 10px 15px;
	margin: 0;
}

.context-menu .course-abstract{
	font-weight: normal;
	font-style: italic;
	padding: 0px 15px 10px 15px;
	margin: 0;
}

.context-menu a{
	user-select: none;
	display: inline-block;
	width: 100%;
	border-top:1px solid #BBB;
	
	color: #3377BF;
	padding: 10px 0px;
	text-align: center;
	margin: 0;
	text-decoration: none;
	cursor: pointer;
	
}

button:enabled{
	cursor: pointer;
}

.context-menu a:hover , button:hover:enabled{
    background-color: #999999;
    color: white;
}
#submitPlanButton:enabled::before {
  content: "✔ "; 
  color: green;
  font-size: 16px;
  margin-right: 5px;
}



/* basic style */
   
body{
  display: flex;
  margin: 0;
  padding: 0;
  font-family:'Montserrat', sans-serif; 
  height: 100vh;
  position:relative;
  overflow: hidden scroll;
}

span, div{
	user-select: none; /* Prevent text selection */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

/* MainMap styles */
.mainMap {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    padding: 0px; /* Per creare un po' di spazio intorno alla mappa */
    border: 0;
    margin: 0 auto;
    //background-color: #fff; /* Colore di sfondo per distinguere */
	position: relative;
	max-width: 1250px;
}

.mainMap > .hexa {
    position: absolute;
    width: 115.57px;
    height: 100px; 
	background: none;
	//justify-content: center;
    //align-items: center;
	text-align: center;
	pointer-events: none; 
}


/* outer hexagon */
.mainMap .hexa > .hexaborder {
    position: absolute;
    width: 100%;
    height: 100%; 
    //background-color: #ffb;
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); 
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0; 
	transition: background-color 1.5s;
	//transition-delay: 0.3s;
	cursor: pointer;
	pointer-events: all; 
}

.shown.hexa > span.marks{
	opacity: 0;
}
.hexa > span.marks > span{
	margin-left: -100%;   /* Moves it back half to truly center */
}

/* Hexas shape modifiers to keep line with const */
.mainMap .hexa.cornerUpLeft > .hexaborder, 
.mainMap .hexa.cornerUpLeft > .hexaborder > .inner{
	clip-path: polygon(0% 50%, 27.5% /* <= this */ 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); 
}
.mainMap .hexa.cornerUpRight > .hexaborder, 
.mainMap .hexa.cornerUpRight > .hexaborder > .inner
{
	clip-path: polygon(0% 50%, 25% 0%, 72.5% /* <= this */ 0%, 100% 50%, 75% 100%, 25% 100%); 
}
.mainMap .hexa.cornerUpLeft.cornerUpRight > .hexaborder,
.mainMap .hexa.cornerUpLeft.cornerUpRight > .hexaborder > .inner
{
	clip-path: polygon(0% 50%, 27.5% /* <= this */ 0%, 72.5% /* <= this */ 0%, 100% 50%, 75% 100%, 25% 100%); 
}
.mainMap .hexa.cornerLowLeft > .hexaborder, 
.mainMap .hexa.cornerLowLeft > .hexaborder > .inner
{
	clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 27.5% /* <= this */ 100%); 
}
.mainMap .hexa.cornerLowRight > .hexaborder ,
.mainMap .hexa.cornerLowRight > .hexaborder > .inner
{
	clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 72.5% /* <= this */ 100%, 25% 100%); 
}
.mainMap .hexa.cornerLowLeft.cornerLowRight > .hexaborder,
.mainMap .hexa.cornerLowLeft.cornerLowRight > .hexaborder > .inner
{
	clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 72.5% /* <= this */ 100%, 27.5% /* <= this */ 100%); 
}



.mainMap > .hexa > span > .infoSpan {
	/* tooltip on "borrowed" "affine" marks */
	pointer-events: all;
}

.mainMap > .hexa.clickable{
  transition: left 0.3s, top 0.3s, background-color 0.5s;
  pointer-events: all;
}


/* Inner hexagon */
.mainMap > div.hexa > div.hexaborder > div.inner {
    position: absolute;
	transition: width 0.3s, height 0.3s;
    width: 80%;  /* Make the inner hexagon smaller than the outer one */
    height: 98%;  /* Same for height */
    background-color: #00f;  /* Inner hexagon color (blue) */
    clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); 
	
	// transition: background-color 1.5s;
}
	

/* Add a border color change on hover */
.mainMap .hexa > .hexaborder:hover {
    background-color: #ff0; 
}

a.myLink{
	cursor: pointer;
	margin: 0 4px;
	font-weight: 400;
}
	
.mainMap .hexa > div.hexaborder > div.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: white;
  font-family: 'Montserrat', sans-serif; 
  //font-size: 13px;
  //font-family:'Arial', sans-serif; 
  font-size: 13.5px;            
  font-weight: normal;        
  text-align: center;         
  padding: 0 10px;      
  //white-space: nowrap; // new lines will be explicitly added by javscript
}


.mainMap div.pillarTitle{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: 800;
  color: white;
  font-family: 'Montserrat', sans-serif;
  //text-transform: capitalize;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  //background-color : pink;
  //opacity: 0.5;
}

.areaTitle{
  position: absolute;
  display: inline;
  justify-content: center;
  font-size: 24px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-weight: 800;
  text-transform: lowercase;
  pointer-events: none;
}
.areaTitle.draggable{
	background-color: rgba(255,255,0,0.5);
	pointer-events: auto;
}

.info-button,
.close-button {
  

  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.info-button{
	width: 18px;
	height: 18px;
	background-color: #AAE;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	position: relative;
	display: inline-block;
	text-align: center;
	margin: 0 4px;
}
.info-button:hover{
	background-color: #BBF;
}
.info-button::before{
	content: "i";
	color: white;
	font-size:16px;
}

.close-button {
	width: 20px;
	height: 20px;
	background-color: #999;
	position: absolute;
	display: flex;
}

.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: white;
  display: auto;
  transition: display 0.5s;
}

.close-button::before {
  transform: rotate(45deg);
}

.close-button::after {
  transform: rotate(-45deg);
}

#pageTitle {
	position: absolute;
	text-align: center;
	width: 450px;
	height: 240px;
	padding:0; margin:0;
	//background-color: rgba(255,255,0,0.4);
	color: #CCC;
	display: block;
	transition: color 0.5s;
}
#pageTitle h1,#pageTitle h2{
	margin: 10px; padding:0;
	width: 100%;
	display: block;
	position: relative;
	
}

.pillarTitle span{
	width: 100%;
	position: absolute;
    top: 50%;                 /* Move it to the vertical middle */
    left: 50%;                /* Move it to the horizontal middle */
    transform: translate(-50%, -50%);  /* Center it perfectly */
}
.pillarTitle span span{
	top:0; left: 0; 
	position: relative;
	transform: none;
}

.mainMap .disabled > div {
	//width: 4%;  
    //height: 20%; 
}

.title {
  transition: opacity 0.5s;
}

.disabled div .title {
    opacity: 0.15;
}
	

.mainMap .pillarTitle,
.mainMap .hexa > div.inner {
  //pointer-events: none; 
}


.empty {
  z-index: 0;
}
.mainMap div:not(.empty) {
  //z-index: 2; 
}

.flag {
  width: 25px;
  height: 25px;
  vertical-align: bottom;
  margin-left: 0px;
}

}


label{margin-right:10px;margin-left:10px;}

.pin, div.hexa > div.pin{
	transform: rotate(0deg); 
	display: inline-block;
	position:relative;
	width: 50px; height: 50px;
	margin: -8.5px;
	//box-shadow: 1px 1px 4px #444;
	//clip-path: polygon(0 0, 100% 21%, 100% 41%, 19% 61%, 19% 100%, 0 100%, 0 80%, 0 43%);
	//background-color: #F00;
	background-image: url("./flag.png");
	background-size: cover; 
	
	z-index: 6;
	color: red;
	z-index: 10000;
	opacity: 1.0;
	transition: opacity 0.25s, transform 1.0s, top 1s, left 1s;
	
}

.pin.affine, div.hexa > div.pin.affine{
	//background-color: #FF0;
	background-image: url("./flag_affine.png");
}
.pin.free-choice, div.hexa > div.pin.free-choice{
	//background-color: #0F0;
	background-image: url("./flag_freechoice.png");
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5.5deg);
  }
  50% {
    transform: rotate(+4.5deg);
  }
  75% {
    transform: rotate(-2.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.wiggle {
  //display: inline-block; /* or block */
  transform-origin: 20% 90%; 
  animation: wiggle 0.6s ease-in-out 0s 1;
}

@keyframes sloworbit {
  0%   { transform: translate(3px, 0); }
  6.25%  { transform: translate(2.8px, 1.1px); }
  12.5%  { transform: translate(2.1px, 2.1px); }
  18.75% { transform: translate(1.1px, 2.8px); }
  25%  { transform: translate(0, 3px); }
  31.25% { transform: translate(-1.1px, 2.8px); }
  37.5% { transform: translate(-2.1px, 2.1px); }
  43.75% { transform: translate(-2.8px, 1.1px); }
  50%  { transform: translate(-3px, 0); }
  56.25% { transform: translate(-2.8px, -1.1px); }
  62.5% { transform: translate(-2.1px, -2.1px); }
  68.75% { transform: translate(-1.1px, -2.8px); }
  75%  { transform: translate(0, -3px); }
  81.25% { transform: translate(1.1px, -2.8px); }
  87.5% { transform: translate(2.1px, -2.1px); }
  93.75% { transform: translate(2.8px, -1.1px); }
  100%  { transform: translate(3px, 0); }
}

.sloworbit {
  //display: inline-block; /* or block */
  animation: sloworbit 0.8s linear 0s infinite;
  z-index: 10001;
}


/*
@keyframes wiggleALot {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15.0deg);
  }
  50% {
    transform: rotate(+0.0deg);
  }
  75% {
    transform: rotate(+15.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}*/

@keyframes spinAround {
  0% { transform: scaleX(+1); }
  50% { transform: scaleX(-1); }
  100% { transform: scaleX(+1); }
}

@keyframes shake{
   0%  { transform: translate(4px,-1.5px);   }
  20%  { transform: translate(-3px,+2px);    }
  40%  { transform: translate(0px,-1.5px);   }
  60%  { transform: translate(-3px,2px);     }
  80%  { transform: translate(3.4px,+1.2px); }
  100% { transform: translate(0px,0px);      }
}	
@keyframes shakeinside{
/*   0%  { padding:3.4px +1.2px -3.4px -1.2px; }
  20%  { padding: +4px -1.5px   -4px +1.5px; }
  80%  { padding: -3px   +2px   +3px   -2px; }
  40%  { padding:  0px -1.5px    0px +1.5px; }
  60%  { padding: -3px    2px   +3px   -2px; }
  100% { padding:  0px    0px    0px    0px; }*/
   0%  { padding: 0px 6px 0px    0px ; }
  20%  { padding: 0px 2px 0px    4px ; }
  80%  { padding: 0px 5px 0px    1px ; }
  40%  { padding: 0px 0px 0px    6px ; }
  60%  { padding: 0px 4px 0px    2px ; }
  100% { padding: 0px 1px 0px    5px ; }
}

.spinAround {
	transform-origin: 20% 90%; 
	animation: spinAround 0.5s /*ease-in-out*/ cubic-bezier(.25, 0.075, 0.75, 0.925) 0s 2;
}

.shake{
	animation: shake 0.3s;
}
.shakeinside{
	transition: padding;
	animation: shakeinside 0.3s;
}

#planBox{
	width: 190px;
	position:absolute;
	
}

.buttonGrid{
	%background-color: yellow;
	%position:absolute;
	bottom:0;
	width: 206px;
	left:0;
	margin:0 -8px -13px -8px;
}
.buttonGrid>button{
	width:100%;
	border-radius:0;
	border-top: 1px solid #ccc;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	box-shadow: none;
	margin: 0px;
	height: 38px;
	padding:0;
}
.buttonGrid>button.halfSize{
	width:50%;
	border-right: 1px solid #ccc;
}
.buttonGrid>button.halfSize.rightMost{
	border-right: 0;
}
.buttonGrid>button.bottomOne{
	border-radius:0 0 10px 10px;
}
.legal{
	font-size:90%;
	color: #888;
	font-style: italic;
	margin-top: 10px;
}




#pinBox{
	position:relative;
	background-color: #F4F4F4;
	//background-color: #F00;
	height: 100px;
	width: 180px;
	margin: 5px auto;
	padding: 8px 0px;
	text-align: center;
	font-size: 0; /* Prevents whitespace rendering */
	white-space: nowrap;
	align-items: center;
}

#pinBox.empty::before{
	content: "[empty]";
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	margin: 40px 66px;
	display: flex;
	
	color: #aaa;
}

#pinBox.shake.empty::before{
	color: #a55;
}

.box .info{
	font-weight: 100;
	font-style: italic;
	margin: 25px 0 3px 0;
	font-size: 90%;
}


.box #pinErrorMsg, #yearPlannerBox #yearErrorMsg{
	color: white;
	background-color: #F66;
	text-align: center;
	opacity: 1;
	transition: 0.15s opacity;
	border-radius: 0;
	font-weight: normal;
	//visibility: hidden;
	font-size: 90%;
}

#yearPlannerBox #yearErrorMsg{
	width: 100%;
	height: 15px;
	position: absolute;
	z-index: 10;
	top: 0;
	margin: -2px 0;
	pointer-events: none;
}

#yearPlannerBox{
	position: fixed;
}
#optionBox{
	position: fixed;
}
#planBox{
	position: fixed;
}	

.box #pinErrorMsg{
	height: 40px;
	padding: 3px;
	margin: 2px 0 25px 0;
	width: auto;
}

.box #pinErrorMsg.disabled, #yearPlannerBox #yearErrorMsg.disabled{
	opacity: 0;
	transition: 1.0s opacity;
}
	
body button{
	height: 30px;
	border-radius: 10px;
	background-color: #FFF;
	font-family: inherit; 
	font-size: 16px;
	margin: 5px;
	border: 1px solid #888;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.box .close-button, .dialog-panel .close-button{
	right:0;
	top:0;
	border-radius: 0 50% 0 50%;
	max-width: 20px;
	max-height: 20px;
	width: 20px;
	height: 20px;
	padding: 0;

}


.dialog-panel button{
	box-shadow: none;
	border: 1px solid #ccc;
	margin: 2px;
}


/* Stile per optionBox */
.box{
	position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #555;
    border-radius: 11px;
    padding: 2px 8px 8px 8px;
    margin: 8px;
    background-color: #fff;
    align-self: flex-start; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	transition: left 0.3s, right 0.3s;
	width: 170px;
	top:0px;
	z-index:10;
	
}
.buttonHolder{
	position: absolute;
	overflow: hidden;
	width:100%; 
	height: 100%;
}
.box.left{
	left: 0px;
	transition-delay: 0.5s;
}
.box.right{
	right: 0px;
}
.box.left.disabled{
	left: -200px;
}
.box.right.disabled{
	right: -220px;
}



.box > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 5px 0;
}

.box > div + div {
  border-top: 1px solid #ddd; /* piccola linea */
  margin-top: 10px;
}

.box label {
  display: flex;
  align-items: center;
  margin-top: 5px;
}


/* option titles */
.box span.boxtitle {
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 5px;
  //margin-right: 60px;
  //background-color: yellow;
  //width:100%;
}