/* deptlist is used for the backend lists */

table.deptlist {
	border-collapse: collapse;
}

table.deptlist td{
		border: 1px solid black; 
}

table.deptlist td.link {
		padding: 5px;
}

table.deptlist td.name{
		width: 250px;
		padding: 5px;
}

table.deptlist .row p {
		width: 300px;
		margin: 0px;
		padding: 5px;
}


.listing {
        border: 1px solid black;
		background-color: #ccccff;
		padding: 5px;
		margin-bottom: 15px;
}

.listing h2 {
		color: #202784;
		margin-top: auto;
}

.listing .info {
        margin-right: 10px;
        margin-bottom: 10px;
}


.listing .info p {
        text-align:right;
        margin: 0;
        padding: 0;
}


/* The output columns are usually flex, unless the screen is too narrow. */
div.deptcolumn {
	display: flex;
	column-gap: 2%;
	justify-content: space-between;
	width: 90%;
}

@media (max-width: 800px) {
div.deptcolumn {
    display: block;
	width: 100%;
  }
}

div.deptcolumn div.innercolumn {
	flex: 1;
}

/* Specific Styles for the data inside the three column format */
div.deptcolumn div.innercolumn h3 {
	margin-bottom: 3px;
	margin-top: 9px;

}

div.deptcolumn div.innercolumn li {
	padding: 0;
}


div.deptcolumn div.innercolumn fieldset label {
	font-size: 100%;
	margin-left: 0;
	margin-bottom: 3px;
}


/* Tooltips from w3schools, the modified */

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
	border-color: rgb(244, 121, 32);
	background-color: #fefefe;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    border-radius: 6px;
 
    /* This creates a new box (of fixed width), relative to the left edge of the containing element.
	In this case, we want it above the element, and left-aligned with the label
	In this case, 250px will spill over to the right, so make sure that the container's container is okay with it going past the right edge */
    width: 250px;
    bottom: 100%;
	left: 0px;
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 5%;  /* At the left edge of the tootip */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(244, 121, 32) transparent transparent transparent;
}