* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
body {
	margin: 0;
	padding: 0;
}

h2 {
    font-size: 1rem;
    display:block;
    text-decoration: none;
    padding-top: 0.5rem;
	padding-left: 1rem;
	margin: 0;
	text-align: left;
}
h2.indent {
	padding-left: 2rem;
}

/***********************/
/* CSS-Grid            */
/***********************/
#content {
    display: grid;
	padding-top: 1rem;
    grid-template-columns: 5fr auto;
    grid-gap: 0;
    margin: 0 auto;
	width: 96%;
    grid-template-areas:
		"leftSection rightSection";
}

section#leftSection {
	grid-area: leftSection;
	background: lightblue;
	width: 100%;
}
section#rightSection {
	grid-area: rightSection;
	background: white;
	width: 100%;
}

/***********************/
/* Nested CSS-Grid    */
/***********************/
.nested_leftSection {
	display: grid;
	padding-top: 0;
	padding-bottom: 0;
	grid-template-columns: 4fr auto;
	grid-gap: 0;
	margin: 0 auto;
    grid-template-areas:
                "description concept"
                "description1 answer1"
                "description2 answer2"
                "description3 answer3"
                "description4 answer4"
                "description5 answer5"
                "description6 answer6"
                "description7 answer7"
                "description8 answer8"
                "description9 answer9"
                "description10 answer10"
                "description11 answer11"
                "description12 answer12"
                "description13 answer13"
                "description14 answer14"
                "description15 answer15";
}
.nested_rightSection {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0;
	margin: 0 auto;
    grid-template-areas:
                "concept1"
                "concept2"
                "concept3"
                "concept4"
                "concept5"
                "concept6"
                "concept7"
                "concept8"
                "concept9"
                "concept10"
                "concept11"
                "concept12"
                "concept13"
                "concept14"
                "concept15";
}

article.description1 { grid-area: description1; }
article.description2 { grid-area: description2; }
article.description3 { grid-area: description3; }
article.description4 { grid-area: description4; }
article.description5 { grid-area: description5; }
article.description6 { grid-area: description6; }
article.description7 { grid-area: description7; }
article.description8 { grid-area: description8; }
article.description9 { grid-area: description9; }
article.description10 { grid-area: description10; }
article.description11 { grid-area: description11; }
article.description12 { grid-area: description12; }
article.description13 { grid-area: description13; }
article.description14 { grid-area: description14; }
article.description15 { grid-area: description15; }

article.answer1 { grid-area: answer1; }
article.answer2 { grid-area: answer2; }
article.answer3 { grid-area: answer3; }
article.answer4 { grid-area: answer4; }
article.answer5 { grid-area: answer5; }
article.answer6 { grid-area: answer6; }
article.answer7 { grid-area: answer7; }
article.answer8 { grid-area: answer8; }
article.answer9 { grid-area: answer9; }
article.answer10 { grid-area: answer10; }
article.answer11 { grid-area: answer11; }
article.answer12 { grid-area: answer12; }
article.answer13 { grid-area: answer13; }
article.answer14 { grid-area: answer14; }
article.answer15 { grid-area: answer15; }

article.concept1 { grid-area: concept1; }
article.concept2 { grid-area: concept2; }
article.concept3 { grid-area: concept3; }
article.concept4 { grid-area: concept4; }
article.concept5 { grid-area: concept5; }
article.concept6 { grid-area: concept6; }
article.concept7 { grid-area: concept7; }
article.concept8 { grid-area: concept8; }
article.concept9 { grid-area: concept9; }
article.concept10 { grid-area: concept10; }
article.concept11 { grid-area: concept11; }
article.concept12 { grid-area: concept12; }
article.concept13 { grid-area: concept13; }
article.concept14 { grid-area: concept14; }
article.concept15 { grid-area: concept15; }

article p {
	color: #444;
	text-align: left;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	background-color: white;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.0rem;
}
p.description-col, p.disabled {
	margin-left: 1rem;
	margin-right: 0;
}
p.answer-col, p.deselected {
	margin-left: 0;
	margin-right: 1rem;
	border-left: 1px solid black;
	font-family: consolas;
}
p.concept-col, p.outlined {
	margin-left: 1rem;
	margin-right: 1rem;
	border: 1px solid black;
	font-family: consolas;
}

p.description-col:hover,  p.concept-col:hover, p.answer-col:hover {
	color: white;
	background-color: #777;
	cursor: pointer;
}
p.selected, p.selected:hover {
	color: white;
	background-color: black;
	cursor: pointer;
}
p.skyblue {
	background-color: lightblue;
}
p.endcolor {
	background-color: #fdfdfd;
}

p.white {
	background-color: white;
}
p.bold {
	font-weight: bold;
}
p.noborder {
	border: 0;
}
p.dragging {
	color: white;
	background-color: #777;
}


article.concept {
	grid-area: concept;
}
article.description {
	grid-area: description;
}

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) 
{
  #content {
    display: grid;
	padding-top: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    margin: 0 auto;
	width: 96%;
    grid-template-areas:
		"leftSection rightSection";
  } 
  article p {
	font-size:0.7rem;
  }
  
}
/* Small devices (tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) and (max-width: 991px)
{
  #content {
    display: grid;
	padding-top: 1rem;
    grid-template-columns: 2fr 1fr;
    grid-gap: 0;
    margin: 0 auto;
	width: 96%;
    grid-template-areas:
		"leftSection rightSection";
  }
  article p {
	font-size:0.8rem;
  }
  
}
@media screen and (max-width: 991px)
{
    /***********************/
    /* Nested CSS-Grid    */
    /***********************/
    .nested_leftSection {
        display: grid;
        padding-top: 0;
        padding-bottom: 0;
        grid-template-columns: auto;
        grid-gap: 0;
        margin: 0 auto;
        grid-template-areas:
                    "description" 
                    "concept"
                    "description1" 
                    "answer1"
                    "description2" 
                    "answer2"
                    "description3" 
                    "answer3"
                    "description4" 
                    "answer4"
                    "description5" 
                    "answer5"
                    "description6" 
                    "answer6"
                    "description7" 
                    "answer7"
                    "description8" 
                    "answer8"
                    "description9" 
                    "answer9"
                    "description10" 
                    "answer10"
                    "description11" 
                    "answer11"
                    "description12" 
                    "answer12"
                    "description13" 
                    "answer13"
                    "description14" 
                    "answer14"
                    "description15" 
                    "answer15";
    }
    .nested_rightSection {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
        margin: 0 auto;
        grid-template-areas:
                    "concept1"
                    "concept2"
                    "concept3"
                    "concept4"
                    "concept5"
                    "concept6"
                    "concept7"
                    "concept8"
                    "concept9"
                    "concept10"
                    "concept11"
                    "concept12"
                    "concept13"
                    "concept14"
                    "concept15";
    }
    article.description{ display: none; }
    article.answer{ display: none; }
  
  p.description-col, p.disabled {
	margin-left: 1rem;
	margin-right: 1rem;
    margin-bottom: 0;
  }
  p.answer-col, p.deselected {
    padding-top: 0;
	margin-top: 0;
	margin-right: 1rem;
    margin-left: 1rem;
	border-top: 1px solid black;
	border-left: 0;
	font-family: consolas;
  }
}

/* feature query */
@supports not (display: grid) {
	#content {
		width: 50%;
	}
}