*
{
	font-family: 'Winky Script', 'Poppins', sans-serif;
	font-size: 14px;
}

:root
{
	--black:  #000000;
	--silver:  #c0c0c0;
	--gray:  #808080;
	--white:  #ffffff;
	--maroon:  #800000;
	--red:      #ee0000;
	--purple:  #800080;
	--pink:  #ff00ff;
	--green:  #008000;
	--lime:  #00dd00;
	--olive:  #808000;
	--yellow:  #ffff00;
	--navy:  #000080;
	--blue:  #0000ee;
	--teal:  #008080;
	--cyan:  #1E90FF;
	--orange:  #FFA500;
}

input:focus,
select:focus,
textarea:focus,
button:focus
{
	outline: none;
}

body
{
	margin: 0;
	padding: 0 20px;
}

.left{float: left;}
.clear{clear: left;}

/*MENU*/
#menu
{
}

#menu ul
{
	padding: 0;
}

#menu ul li
{
	list-style-type: none;
	padding: 5px;
	display: inline-block;
}

#menu input,
#menu select,
#menu button,
#menu div
{
	border: none;
	color: var(--black);
	padding: 5px;
	border-radius: 5px;
	border: 2px solid var(--white);
	background: none;
}

#menu a
{
	text-decoration: none;
	border-radius: 5px;
	padding: 5px;
	font-weight: bold;
}

.active
{
	color: var(--white) !important;   
	/*text-shadow: 1px 1px 0 #000; */
}

.active #whm
{
	background: var(--pink);	
}

.active #san
{
	background: var(--cyan);	
}

.active #diy
{
	background: var(--orange);	
}

#whm,
#san,
#diy
{
background: var(--white);
}

#whm
{
	color: var(--pink);
	border: 2px solid var(--pink);
}

#whm:hover
{
	background: var(--pink);
	color: var(--white);
}

#san
{
	color: var(--cyan);
	border: 2px solid var(--cyan);
}

#san:hover
{
	background: var(--cyan);
	color: var(--white);
}

#diy
{
	color: var(--orange);
	border: 2px solid var(--orange);
}

#diy:hover
{
	background: var(--orange);
	color: var(--white);
}

#todayDate,
#userName,
#classSelect
{
	border: 2px solid #ddd !important;
	color: var(--black) !important;
	background: var(--white) !important;
}

#classSelect
{
	width: 110px;
}

#userName
{
	width: 250px;
}

#clearuser
{
	border: 2px solid var(--red) !important;
	background: var(--white) !important;
}

#clearuser:hover
{
	color: var(--white) !important;
	background: var(--red) !important;
}

#saveButton
{
	border: 2px solid var(--lime) !important;
	background: var(--white) !important;
}

#saveButton:hover
{
	background: var(--lime) !important;
	color: var(--white);
}


#uploadIconButton
{
	border: 2px solid var(--orange) !important;
	background: var(--white) !important;
}

#menu #uploadIconButton:hover
{
	background: var(--orange) !important;
	color: var(--white);
}

/*INFO*/

#info
{
	color: var(--black);
	border: 2px solid var(--blue);
	display: block;
	text-align: center;
	font-weight: normal !important;
	background: var(--white) !important;
}

#info:hover
{
	background: var(--blue) !important;
	color: var(--white);
}
	
/*COLOUR*/
.color-picker {
	display: flex;
	gap: 10px;
}

.color-square {
	width: 70px;
	height: 70px;
	border-radius: 5px;
	cursor: pointer;
	border: 2px solid var(--silver);
}

/* CONTENT - ICONS */
.whm {
	background: var(--pink);
	border: 2px solid var(--pink);
}

.san {
	background: var(--cyan);
	border: 2px solid var(--cyan);
}

#iconContainer
{
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.icon
{
	width: 70px;
	height: 70px;
	margin: 5px;
	background-color: var(--white);
	align-items: center;
	justify-content: center;
	cursor: move;
	border-radius: 8px;
	flex-direction: column;
	padding: 10px;
	/*box-shadow: 0px 2px rgba(0, 0, 0, 0.3);*/
	transition: transform 0.2s ease; /* Optional hover effect */
	}

.icon:hover
{
	transform: scale(1.1); /* Makes the square grow a bit on hover */
	}

.icon span
{
	display: none;
}

/* CONTENT - COLUMNS */
.columns
{
	display: flex;
	justify-content: space-around;
	height: calc(100% - ( (60px + 16px) * ceil(10 / 5) ) - 60px );
	gap: 10px;
}

.column
{
	width: 30%;
	border-radius: 15px;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	overflow-y: auto;
	background: var(--white);
	box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.05);
	padding: 10px;
}

.yes-column
{
	border: 3px solid var(--lime);
	color: var(--lime);
}

.yes-column:hover
{
	background: var(--lime);
	color: var(--white);
}
	
.maybe-column
{
	border: 3px solid var(--orange);
	color: var(--orange);
}

.maybe-column:hover
{
	background: var(--orange);
	color: var(--white);
}

.no-column
{
	border: 3px solid var(--red);
	color: var(--red);
}

.no-column:hover
{
	background: var(--red);
	color: var(--white);
}

.column h2
{
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon img
{
	pointer-events: none;
}

/*CONTENT - CANVAS*/

#howto
{
	width: 30%;
	border: 2px solid var(--red);
	border-radius: 10px;
	float: left;
}

#howto ol li
{
margin-left: -20px;
}

#canvas{
	margin-left: 30%;
	width: 500px;
}

#canvas #drawButton,
#canvas #saveButton
{
background: none;
color: var(--black);
width: 49%;
display: inline-block !important;
}


#canvas #drawButton
{
border: 2px solid var(--blue);
}


#canvas #drawButton:hover
{
background: var(--blue);
color: var(--white);
}

#canvas #saveButton:hover
{
background: var(--lime);
color: var(--white);
}

#canvasContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--white);
	padding: 10px;
	background: var(--orange);
	border-radius: 10px;
}

#iconCanvas {
	height: 100px;
	background: var(--white);
	border: 2px solid var(--orange);
	border-radius: 10px;
}

.controlPanel {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	gap: 10px;
	flex-wrap: wrap;
}

.controlPanel button,
.controlPanel input,
.controlPanel select {
	padding: 8px;
	font-size: 16px;
	color: var(--black);
	border-radius: 5px;
	cursor: pointer;
	display: block;
	width: 100%;
}

.controlPanel input
{

border: 2px solid var(--silver);
}

/*HELP*/
#helpMessage
{
	display: none;
	padding: 20px;
	background: var(--white);
	border: 1px solid #ccc;
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	border: 2px solid var(--black);
	border-radius: 5px;
	box-shadow: 0px 5px rgba(0, 0, 0, 0.4);

}

#messageText
{
}

#closeHelp,
#email
{
	padding: 5px 10px;
	border-radius: 5px;
	background: none;
	font-weight: bold;
	color: var(--black);
	display: inline-block;
	}


#closeHelp
{
	border: 2px solid var(--red);
	background: var(--red);
	color: var(--white);
	float: right;
}

#email
{
	border: 2px solid var(--lime);
	margin-left: 10px;
}

#closeHelp:hover,
#email:hover
{
color: var(--white);
}

#closeHelp:hover
{
background: var(--white);
color:: var(--black);

	cursor: pointer;

}

#email:hover
{
background: var(--lime);
}