* {
  box-sizing: border-box;
}

body	{
overflow-x: hidden;
}
html,
body {
  padding: 0;
  margin: 0;
  color: #343336;
  font-family: Helvetica, Arial, sans-serif;
  font-size:18px;
  background-color:#8b9fb8;
}

td 	{
font-family: Helvetica, Arial, sans-serif;
font-size:18px;
background-color:#B0C4DE;
color:#2F4F4F;
}

select {
  width:300px;
}

A:link 	{
font-size:18px;
color:#2F4F4F;
text-decoration: none;
}

A:active	{
font-size:18px;
color:#2F4F4F;
text-decoration: none;
}

A:visited	{
font-size:18px;
color:#2F4F4F;
text-decoration: none;
}

A:hover	{
font-size:18px;
background:#2F4F4F;
color:#B0C4DE;
text-decoration: none;
}

A.small	{
font-size:10px;
text-decoration: none;
}

A.small:hover	{
font-size:10px;
background:#2F4F4F;
color:#B0C4DE;
text-decoration: none;
}

A.cell {
    display: block;
    width: 100%;
}

A.huge {
	font-size:24px;
	text-decoration: none;
    background:#778899;
    color:#2F4F4F;
}

A.huge:hover {
	font-size:24px;
	text-decoration: none;
    background:#2F4F4F;
    color:#778899;
}



h2 		{
font-weight: bolder;
}

hr {
    border: 0;
    height: 3px;
    border-color: #2F4F4F;
    background: #2F4F4F;
}

.Back {
position: absolute;
top: 40;
left: 10;
height:100;
z-index: 999;
align-items: center;
justify-content: center;
}

.Source {
position: absolute;
top: 40;
Right: 10;
height:100;
z-index: 999;
align-items: center;
justify-content: center;
}

/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
.Top {
    padding: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #97abc4;
    font-size: 3rem;
    position: relative;
    z-index: 10;
    height: 100px;
}

/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
.Container {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -100px;
    padding-top: 100px;
    padding-bottom: 0px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}
/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
*/
.Left,
.Middle,
.Right {
    overflow: auto;
    height: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
    display: none;
}
/*  Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
.Left {
    width: 20rem;
    background-color: #a4b7d1;
    color: #343336;
}

.Middle {
    flex: 1;
    background-color: #B0C4DE;
}

.Right {
    width: 12.5rem;
    background-color: violet;
}

.layout		{
padding: 0 0 0 0;
background: #B0C4DE;
}

.layout2		{
padding: 0 0 0 0;
border: thin solid #2F4F4F;
border-color: #2F4F4F;
background: #B0C4DE;
}

.bottom {
position: absolute;
padding-top: 5;
bottom: 0;
width: 100%;
height:50;
background-color: #8b9fb8;
}

.unselectable {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

.position-trbl-0 {
    top: 25;
    bottom: 200;
    left: 0;
    right: 0;
}


.overflow-hidden {
   overflow: hidden;
}

.row {
  display: flex;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.col {
  height: 100%;
  padding: 0 20px;
  overflow: hidden;
}

.col-inner {
  height: 100%;
  width: 100%;
  padding: 0 30px;
  overflow-y: scroll;
  box-sizing: content-box;
}

.overflow-auto {
    overflow: auto;
  }

.w-100 {
  width: 97% !important;
}

.position-fixed {
  position: fixed !important;
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.position-relative {
  position: relative !important;
}

.h-90 {
  height: 100% !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.smallText {
  fint-size: 12;
}