.container
{
	width: 292px;
	display: grid;
	grid-gap: 2px;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 24px);
    grid-template-areas:

        "t t t t t t t t t t t t"
        "t t t t t t t t t t t t"
        "t t t t t t t t t t t t"
        "p p p p p p c c c c c c"
        "r r r r r r r r r r r r"
        "b b b b b b b s s s s s"
        "b b b b b b b s s s s s"
        "b b b b b b b a a a a a"
        "b b b b b b b a a a a a"
        "b b b b b b b a a a a a"
        "f f f f f f f f f f f f";
}

.container div
{
	background-color: lavender;
	overflow: auto;
}

.instrDiv
{
    font-size: 10px;
	padding-right: 12px;
	display: flex;
	justify-content: flex-end;				/*horizontal*/
}
.textboxDiv
{
	grid-area: t;
	display: flex;
	flex-direction: column;
	justify-content: center;				/*vertical -- it's column direction*/
}
.phraseDiv
{
	grid-area: p;
	display: flex;
	justify-content: flex-start;			/*horizontal*/
	align-items: center;					/*vertical*/
}
.caseDiv
{
	grid-area: c;
	display: flex;
	justify-content: flex-start;			/*horizontal*/
	align-items: center;					/*vertical*/
}
.proximityDiv
{
	grid-area: r;
	display: flex;
	justify-content: flex-start;			/*horizontal*/
	align-items: center;					/*vertical*/
}

.bibliaDiv
{
	grid-area: b;
	display: flex;
	justify-content: flex-start;			/*horizontal*/
	align-items: center;					/*vertical*/
}

.articoleDiv
{
	grid-area: a;
	display: flex;
	justify-content: flex-start;			/*horizontal*/
	align-items: center;					/*vertical*/
}

.startDiv
{
	grid-area: s;
	display: flex;
	justify-content: center;				/*horizontal*/
	align-items: center;					/*vertical*/
}

.feedbackDiv
{
	grid-area: f;
	display: flex;
	justify-content: center;				/*horizontal*/
	align-items: center;					/*vertical*/
}

input:disabled + label
{
	color: gray;
}

#txtTerms
{
	font-family: verdana,sans-serif;
	font-size:18px;
	color: darkblue;
	display: block;
}

#ulProximity
{
	margin-left: 15px;
	display: inline-block;
}
#ulProximity li
{
	display: inline;
}
#ulProximity li label, #ulBiblia li label, #ulArticole li label
{
	position: relative;
	top: -0.2em;
}

.phraseDiv label, .caseDiv label, .proximityDiv label, #ulBiblia li label, #ulArticole li label
{
	font-family: verdana,sans-serif;
	font-size: 11px;
	cursor: pointer;
}

#ulBiblia, #ulArticole, #ulProximity
{
	list-style-type: none;
}

#lblFB
{
	font-family: verdana,sans-serif;
	font-size: 10px;
	text-align: center;
	color: black;
}

.animate{}

.animate::after
{
	content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";		/* \00a0 is hex code for a non-breaking space */
	animation-name: ellipsis;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

@keyframes ellipsis
{
    0%
	{
        content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    }
    15%
	{
        content: " .\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    }
    30%
	{
        content: " . .\00a0\00a0\00a0\00a0\00a0\00a0";
    }
    45%
	{
        content: " . . .\00a0\00a0\00a0\00a0";
    }
    60%
	{
        content: " . . . .\00a0\00a0";
    }
    75%
	{
        content: " . . . . .";
    }
}