*{margin: 0;padding: 0;box-sizing: border-box}
body,html
{
	height: 100%;
	font-family: Kanit, sans-serif;
    /*background-color: #FAF9FA;*/
	background-image: linear-gradient(to bottom right, #FAF9FA, #F4F2F7);
}

a.monospace
{
	font-family: monospace;
}
a:link {
  text-decoration: none;
}


a:visited {
  text-decoration: none;
}


a:hover {
  text-decoration: none;
}


a:active {
  text-decoration: none;
}



h1
{
	text-align: center;
}


td, th
{
  padding: 14px;
  border-top: 1.5px solid #E2DEE9;
}
th 
{
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #EEEAF4;
  color: #452A7A;
}

tr:hover {
  background-color: #FBF8FD;
}

table 
{
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  text-indent: initial;
  border-spacing: 2px;
  border-color: grey;
}

div.outer
{
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 40px;
  padding-left: 40px;
  min-width: 1080px;
}
.inner
{
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  border-radius: 25px;
  -moz-border-radius:25px;
  background-color: #FFFFFF;
}

.progress, progress-bar
{
	display: flex,
	overflow: hidden;
	border-radius: .25rem;
}
.progress
{
	height:4px;
	margin-top: .25rem;
	background-color: #CFCCCF;
}
.progress-bar
{
	transition: width .6s ease;
}
.bg-primary
{
	background-color: #34C1E1;
}

.tooltipContainer {
  position: relative;
  display: inline-block;
}

.tooltipText {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  opacity: 0;
  transition: opacity 0.3s;
  padding-right: 4px;
  padding-bottom: 1px;
  padding-left: 4px;
  padding-top: 1px;
}

.tooltipText::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltipContainer:hover .tooltipText {
  visibility: visible;
  opacity: 1;
}

.supply-section {
  width: 100%;
}
.supply-tooltip {
  text-align: left;
  width: 320px;
  margin-left: -160px;
  padding-right: 11px;
  padding-left: 11px;
  font-family: monospace;
}


.dynamic-row
{
  animation: slide-in 0.4s ease;
}

.warning
{
	opacity: 0.4;
    color: #FF5511;
}

.warning a
{
	color: #FF5511;
}

.warning-anim
{
	animation: bad-highlight 0.6s ease;
}

.gain-value
{
	color: #12C505;
}
.loss-value
{
	color: #C51005;
}

@media only screen and (max-device-width: 1280px) 
{
    body,html
    {
        font-size: 1.6vw;
    }
    
	div.outer
	{
	  padding-top: 0px;
	  padding-right: 0px;
	  padding-bottom: 0px;
	  padding-left: 0px;
	  width:100%;
	}
	.inner
	{
	  padding-top: 5px;
	  padding-right: 5px;
	  padding-bottom: 5px;
	  padding-left: 5px;
	  border-radius: 25px;
	  -moz-border-radius:25px;
	}
}

@keyframes bad-highlight {
    0% {
    }
	10% {
		opacity: 1.0;
		color: #FF1100;
    }
    100% {
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(-500px);
		background-color: #FFFF22;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}