html, body, .viewcontainer  {
	
	width: 100%;
    height: 100vh;
	padding:0; 
	margin:0;
	/* display:flex; */
	/* flex-direction:column; */
	font-family: "Segoe UI", Helvetica, sans-serif;
	margin: 0;
}

.viewcontainer {
    display: grid;
    grid-template-columns: 25rem 1fr;
    grid-template-rows: 3.5rem 3.5rem 1fr 2rem;
    grid-template-areas:
        "header header"
		"filestatus filestatus"
        "sidebar content"
        "footer footer"
		;
}
.container-fluid {
	font-size:10pt;
	padding-left: 10px;
	overflow:auto;
	margin: 0;
}

	
/* https://stackoverflow.com/questions/47882924/preventing-double-borders-in-css-grid */
.grid-container, .grid-status ,.grid-label{
	display: grid;
	grid-template-columns: auto;
	padding-bottom: 10px;
	margin: 20px;
}
.grid-item {
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(0, 0, 0, 0.8);
	padding: 2px;
	font-size: 11px;
	margin:0 -1px -1px 0; 
	text-align: center;
}

.grid-header {
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.8);
	padding: 2px;
	font-size: 11px;
	margin:0 -1px -1px 0; 
	text-align: center;
}



ul, #basetable, #comptable, #difftable ,pre{
	padding: 10px;
	list-style-type: none;
		  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#viewdata {
	font-size 16pt;
	font-weight: bold;
}
li {
	margin-bottom: 0.5rem;
	font-size:14px;
}

/* #fileHeader, #cfileHeader, */

.cardheader{
	margin: 0;
	padding: 0px;
	font-weight: bold;
}

.box {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}

.box::before {
content: "\25B6"; /*"\2610";*/
color: black;
display: inline-block;
margin-right: 4px;
}

.check-box::before {
content: "\25BC"; 
/* color: dodgerblue; */
}

.nested {
display: none;
}

.active {
display: block;
}



/* Style the top navigation bar */
.navbar {
	grid-area: header;
	overflow: hidden;
	background-color: #333;
}

/* Style the navigation bar links */
.navbar  a {
	float: left;
	display: block;
	color: white;
	height: 3.5rem;
	text-align: center;
	padding: 14px 20px;
	text-decoration: none;
	font-size: 14pt;
	pointer: none;
}

.noHover {
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	font-size:16pt;
	/* pointer-events: none; */
	font-weight:bold;
}
.noHover:hover {
	background-color:green;
	
}
.noClick {
	visibility: hidden;
}

.noselect, .tabbutton{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.noselect.active { 
	background-color:#333;
	color: white;
	content: "showing diff";
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
/* ,.tablebutton a:hover */
.navbar a:hover {
	background-color: #f1f1f1;
	color: black;
}

/* Column container */
.row {  
	/* display: flex; */
	/* flex:1; */
    /* height: 100%; */
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
	grid-area: sidebar;
	/* position: fixed; */
	background-color: #f1f1f1;
	padding: 20px;
	/* width: 20rem;	 */
	/* height: 90%; */
	overflow:auto;/*added*/
	padding: 10px;
	padding-top:20px;

}

/* Main column */
.main {   
	grid-area: content;
	background-color: white;
	/* overflow:fixed; */
	/* overflow: auto; */
}

.filestatus {
  grid-area: filestatus;
  overflow: hidden;
  background-color:  #f1f1f1;
	border-bottom: 2px solid #333;
}

.filestatus  a,label {
	float: left;
	display: block;
	color: black;
	height: 3.5rem;
	text-align: center;
	padding: 14px 20px;
	text-decoration: none;
	font-size: 14pt;
}

.tablebutton {
	/* visibility:hidden; */
	display:none;
	overflow: hidden;
	background-color: 'white';
	margin-top: 20px;
	text-align: center;
}

.tablebutton a{
	background-color: #333;
	color: white; /* White text */
	padding: 10px 24px; /* Some padding */
	margin: 0px;
	width: 5rem;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-size: 14pt;
}



/* Create an active/current tablink class */
.tablebutton a.active {
	background-color: #f1f1f1; 
	color:black;
}


.card {
	display:none;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	/* transition: 0.3s; */
	width: 30%;
	padding-top: 16px;
	padding-left: 16px;
	margin:20px;
}

#basedata, #compdata, #diffdata {
	padding-bottom: 16px;
}


.footer {
	grid-area: footer;
	overflow: hidden;
	background-color: #333;
}

/* Style the navigation bar links */
.footer  a {
	float: right;
	display: block;
	color: darkgray;
	height: 2rem;
	text-align: center;
	padding: 5px 20px 5px 20px;
	text-decoration: none;
	font-size: 11pt;
}



/* Modal stuff below here */
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.HowTo {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 35rem;
	font-size: 24px;
    /* border-radius: 0.5rem; */
}

.close-button, .htclose-button{
	float: right;
	width: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	cursor: pointer;
	font-size: 28px;
	font-weight: bold;
	color: #aaaaaa;
}

.close-button:hover {
    color: #000;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}