/* Styles for images. */
.img-tall {
  height: auto;
  width: auto;
  max-width: 600px;
  padding: 15px;
}

.img-wide {
  max-width:100%;
  height:auto;
  padding: 15px;
}

.img-middle {
  max-width:700px;
  height:auto;
  width:auto;
  padding:15px;
  margin-left:auto;
  margin-right:auto;
}

.img-screenshot {
  max-width:400px;
  height:auto;
  width:auto;
  padding:15px;
  margin-left:auto;
  margin-right:auto;
}


.img-logo {
  padding:15px;
  max-height:100px;
  max-width:300px;
}

.img-logo-large {
  padding:15px;
  max-height:150px;
  max-width:250px;
}

.img-person {
  padding:15px;
  height:200px;
}
.img-profile-pic {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 1em;
    border-radius: 50%;
	filter: drop-shadow(2px 2px 5px #00000066);
}

/*Class to restict height of in-line images*/
.img-in-line-short {
  height:28px;
}

/* Fix internet explorer card issue. */
.card-img-top {
    width: 100%;
}

div.bodyColumn {
  max-width:300px;
  margin: auto;
}

/* Ensure rows align left and do not exceed page width. */
div.row {
  max-width:1000px;
  margin: auto;
}

/* Set table settings. */
table {
  table-layout: fixed;
  width: 1000px;
  width: 100%;
}
/* Override default stripe style. */
.table tbody tr:nth-of-type(odd) {
	background-color: rgba(0,0,0,0);}
.table tbody tr:nth-of-type(even):hover {
	background-color: rgba(0,0,0,0);}

/* Make tables responsive by collapsing on small screens. */
@media screen and (max-width: 800px) {
  table {
    border: 0;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    display: block;
    margin-bottom: .625em;
	border-top: 2px solid #dee2e6;
  }
  
  table td {
    display: block;
    text-align: left;
	border-top: 0 !important;
  }
  
  table tr:last-child {
    border-bottom: 2px solid #dee2e6;
  }
}

/*. Make navigation bar responsive by scrolling on small screens. */
@media (max-width:991.98px){
	.navbar{
	overflow-y: auto;	
	max-height:100%;
	}
}

/* styling of tables as cards */

div.card-table + table tr {
    display: block;
    margin-bottom: 1rem;
    padding: 0.5rem;
	border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}


div.card-table + table thead {
    display: none;
}

div.card-table + table td {
    display: block;
    margin-bottom: 0.2rem;
    padding: 0.1rem;
    text-align: left;
}

div.card-table + table td:before {
    float: left;
    margin: -0.5rem 0.5rem -0.5rem -0.5rem;
    padding: 0.5rem 0.25rem 0.625rem 1rem;
    font-size: 1 em;
    color: #bbb;
}

div.card-table + table td:nth-child(1) {
    font-size: 1.2em;
}

div.card-table + table td:nth-child(2):before {
   font-family: "Font Awesome 6 Free";
   content: "\f073";
}

div.card-table + table td:nth-child(3):before {
   font-family: "Font Awesome 6 Free";
   content: "\f041";
}

div.card-table--online + table td:nth-child(3):before {
   font-family: "Font Awesome 6 Free";
   content: "\f08e";
}


/* Speech bubbles by https://codingislove.com/css-speech-bubbles/ */
.box {
  width: 300px;
  margin: 50px auto;
  background: #dcdcdc;
  padding: 20px;
  text-align: center;
}

.sb3:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid #dcdcdc;
  border-right: 10px solid transparent;
  border-top: 10px solid #dcdcdc;
  border-bottom: 10px solid transparent;
  left: 19px;
  bottom: -19px;
}

/* Styles for converting tables into divs. */
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

/* Add check mark style. */

ul.check {
    list-style: none;
    padding: 0;
}

ul.check li:before { 
  content:''; 
  display:inline-block; 
  height:1em; 
  width:1em; 
  background-image:url('https://stack-assessment.org/img/check.svg');
  background-size:20px; 
  background-repeat:no-repeat; 
  padding-left: 2em; 
}

/* Give buttons some margins. */
.btn{
  margin:10px;
}

a {
    color: #3574b7;
    background-color: transparent;
    font-weight: 600;
}

a: link {
    text-decoration: underline;
}
.btn-primary {
  color: #fff;
  background-color: #3574b7;
  border-color: #3574b7;
}

.page-link {
  line-height: 1.25;
  color: #3574b7;
}

/* Added Oct 2024 for quotes from commercial partners.  */
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  font-style: italic;
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

/* Trees: https://codepen.io/ross-angus/pen/jwxMjL
Copyright (c) 2022 by Ross Angus (https://codepen.io/ross-angus/pen/jwxMjL)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software
and associated documentation files (the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute,
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or
substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

/* It's supposed to look like a tree diagram. */
.tree,
.tree ul,
.tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree,
.tree ul {
    display: table;
}
.tree ul {
    width: 100%;
}
.tree li {
    display: table-cell;
    padding: .5em 0;
    vertical-align: top;
}
/* _________ */
.tree li:before {
    outline: solid 1px #666;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.tree li:first-child:before {
    left: 50%;
}
.tree li:last-child:before {
    right: 50%;
}
.tree span.atom,
.tree span.op,
.tree span.cell,
.tree code {
    border: solid .1em #666;
    border-radius: .2em;
    display: inline-block;
    margin: 0 .2em .5em;
    padding: .2em .5em;
    position: relative;
}
/* If the tree represents DOM structure. */
.tree span.atom {
    border-radius: .5em;
    color: DarkRed;
    background-color: LightCyan;
}
.tree code,
.tree span.op {
    border-radius: .2em;
    color: Red;
    background-color: LemonChiffon;
}
/* | */
.tree ul:before,
.tree span.atom:before,
.tree span.op:before,
.tree span.cell:before,
.tree code:before {
    outline: solid 1px #666;
    content: "";
    height: .5em;
    left: 50%;
    position: absolute;
}
.tree ul:before {
    top: -.5em;
}
.tree span.atom:before,
.tree span.op:before,
.tree span.cell:before,
.tree code:before {
    top: -.55em;
}
/* The root node doesn't connect upwards. */
.tree > li {
    margin-top: 0;
}
.tree > li:before,
.tree > li:after,
.tree > li > span.atom:before,
.tree > li > span.op:before,
.tree > li > span.cell:before,
.tree > li > code:before {
    outline: none;
}

.dropdown-item.open{
    background-color: #f8f9fa;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #3574b7;
}

footer {
  display: block;
}

.disclaimer{
  border: 7px outset silver;
  display: block;
  color: black;
  width: 104%; 
  margin: auto;
  padding-bottom: 10px;
  padding-top: 10px;
}

.disclaimer-left {
  padding-left: 20px;
  display: table-cell;
  width: 40%;
  margin: auto;
  vertical-align: middle;
}

.disclaimer-right {
  display: table-cell;
  text-align: right;
  padding-right: 30px;
  margin: auto;
  vertical-align: middle;
}