/* Kleuren */
:root
{
    --bordkleurdonker: #A98412;
	--bordkleurmiddeldonker: #FBC51B;
	--bordkleurmiddellicht: #FDDE81;
	--bordkleurlicht: #FDF0C4;
	--bordkleurwit: #FFFFFF;

    --bordkleurdonkerrgba: rgba(169, 132, 18, 0.75);
}

/* Bord */
.bord
{
	background-color: var(--bordkleurmiddeldonker);
}


/* Nonogramtabel en zo */
.nonogramtabel
{
	border-collapse: collapse;	
	margin: 0 auto;
}

.nonogramrij
{

}

.nonogramcel
{
    color: var(--bordkleurdonker);
	border: 0.1vmin solid var(--bordkleurdonker);
	text-align: center;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.nonogrambord
{
    background-color: var(--bordkleurwit);
	cursor: pointer;
}

.nonogramhint
{
    background-color: var(--bordkleurmiddellicht);
	border: 0.1vmin solid var(--bordkleurdonker);
	color: var(--bordkleurdonker);
	cursor: pointer;
}

.nonogramdummyhint
{
    background-color: var(--bordkleurmiddellicht);
	border: 0.1vmin solid var(--bordkleurdonker);
	color: var(--bordkleurdonker);
}

.nonogramdummy
{
    background-color: var(--bordkleurmiddeldonker);
	border: 0px solid var(--bordkleurmiddeldonker);
}

.nonogrambordertopdik
{
	border-top: 0.3vmin solid var(--bordkleurdonker);
}

.nonogramborderlinksdik
{
	border-left: 0.3vmin solid var(--bordkleurdonker);
}

.nonogramborderrechtsdik
{
	border-right: 0.3vmin solid var(--bordkleurdonker);
}

.nonogramborderbottomdik
{
	border-bottom: 0.3vmin solid var(--bordkleurdonker);
}

.nonogramcelgeselecteerd
{
	background: url(../images/1.png) no-repeat center;
	background-size: cover;
}

.nonogramcelgeblokkeerd
{
	background: url(../images/3.png) no-repeat center;
	background-size: cover;
}

.nonogramcelfout.nonogramcelgeblokkeerd
{
	background: url(../images/4.png) no-repeat center;
	background-size: cover;
}

.nonogramcelfout
{
	background: url(../images/2.png) no-repeat center;
	background-size: cover;
}

.nonogramcelhighlight.nonogramcelgeselecteerd
{
    background-color: var(--bordkleurlicht);
}

.nonogramcelhighlight
{
    background-color: var(--bordkleurlicht);
}

.nonogramcelhinthighlight
{
    background-color: var(--bordkleurdonkerrgba);
	color: var(--bordkleurmiddellicht);
}

.nonogramhintgeblokkeerd
{
	background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), var(--bordkleurdonker), transparent calc(50% + 1px)), linear-gradient(to right top,  transparent calc(50% - 1px), var(--bordkleurdonker), transparent calc(50% + 1px)); 
}