body{
	font-family: "Raleway", monospace, "Lucida Console", sans-serif;
	font-weight: normal;
	
	background-color: lightseagreen;
	background: url('../assets/images/pawel-malinowski-UwfHpAg_A6w-unsplash.png');
	background-position-y: center;
	overflow-x: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed!important;
}

* {font-family: var(--default-font);}

:root{
	--default-font: "Raleway", sans-serif;

	--huge-font: 13vw;
	--verybig-font: 5vw;
	--big-font: 3.5vw;
	--medium-font: 36px;
	--small-font: 20px;
	--mini-font: 13px;

	--block-padding: 18px;
	--small-padding: 10px;

	--medium-margin: 25px;
	--big-margin: 40px;

	--accent-color-hex: #ffaa33;
	--accent-color: orange;
	--text-color: white;
	--label-color: rgb(235,235,235);
	--not-veryfied-text-color: rgb(200,200,200);
	--placeholder-color: rgb(255,255,255,0.8);
	--block-color: rgb(0,0,10,0.70);
	--block-color2: rgb(0,0,10,0.35);
	--active-color: rgba(255,170,30,0.8);

	--lab4: #ff9999;
	--lab3: #ffcccc;
	--lab2: #ffffcc;
	--lab1: #ccffcc;
	--lab0: #99ff99;	
}

a, a:hover{ 
	text-decoration: none!important;
	color: inherit!important;
}

.material-symbols-rounded {
	cursor: pointer;
	font-variation-settings:
	  'FILL' 3,
	  'wght' 200,
	  'GRAD' 0,
	  'opsz' 24,
}

.material-symbols-rounded{
	vertical-align: center!important;
	font-size: 20px!important;
	color: inherit!important;
	background-color: transparent!important;
}

#main-header{
	font-size: var(--big-font);
	font-weight: bold;
	font-family: var(--default-font);
	color: var(--text-color)!important;
	margin: 0;
}

*::selection{
	color: var(--accent-color);
	background-color: rgba(0,0,0,0.4);
}

#search-btn, #search-btn:focus{
	position: relative;
	user-select: all;
	width: 12vh;
	height: 12vh;
	padding: var(--small-padding);
	font-size: 5vh;
	background-color: transparent;
	border-radius: 0 var(--small-padding) var(--small-padding) 0;
	border: 5px solid var(--block-color2);
	border-left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--block-color);
	outline: none;
}

#search-btn span{
	outline: none;
	user-select: none;
	filter: grayscale();
	transition: 300ms filter ease;
}

#search-btn span:hover{
	filter: none;
}

#container{
	min-height: 100vh;
}

.block, .upper-block{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: var(--block-padding);
	background-color: var(--block-color);
	flex-wrap: wrap;
}
.block:first-of-type{
	border-top: solid 1px var(--accent-color);
}
.upper-block{margin-bottom: -20px;}
.centerer{justify-content: center}
.trs{background-color: transparent;}

.button, .button-active{
	font-size: var(--small-font);
	font-family: var(--default-font);
	font-weight: bold;
	margin-left: var(--medium-margin);
	text-decoration: none;
	background-color: var(--block-color);
	border-radius: 10px;
	border: 2px solid black;
	color: white;
	padding: var(--block-padding);
	margin-top: var(--medium-margin);
	letter-spacing: 2px;
}

form{
	display: flex;
	justify-content: center;
	align-items: center;
}

.button:hover{
	background-color: black;
	transition: 1000ms background-color ease;
}

.button-active{
	background-color: var(--active-color);
	color: black;
	border-color: var(--accent-color);
}

.button-active:hover{
	background-color: var(--accent-color);
	transition: 1000ms background-color ease;
}

.action-block{
	background: rgba(21,21,21, 0.21);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: var(--block-padding);
	font-size: var(--small-font);
	color: var(--text-color);
	margin-left: var(--small-padding);
	border-radius: var(--small-padding);
	user-select: none;
	font-weight: bold;
	letter-spacing: 5px;
}

.action-block:hover{
	background-color: var(--block-color);
	color: var(--accent-color);
	transition: 300ms background-color ease, 300ms color ease;
}

#shareBtnCon{
	display: none; 
}
#shareBtn{
	color: black;
	padding: 3px 10px;
	border: 2px solid black;
	background-color: var(--accent-color);
	margin-top: 0.5vw;
	font-size: var(--mini-font);
	font-weight: bolder;
	letter-spacing: 1px;
	user-select: none;
}
#shareBtn:hover{
	cursor: pointer;
	border: 2px solid white;
}

.loader3,
.loader2,
.loader {
	position: absolute;
	margin-left: -45vw;
    display: none;
    width: 25px;
    height: 25px;
    border: 3px solid var(--accent-color);
    border-bottom-color: black;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader2{margin-left: 0px;}
.loader3{
	margin-left: 0px;
	display: block;
	border: 1vw solid var(--accent-color);
	border-bottom-color: black;
	width: 10vw;
	height: 10vw;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

#loadingPopup{
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background-color: var(--block-color);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	font-size: var(--medium-font);
	font-weight: bold;
	letter-spacing: 1px;
	color: var(--text-color);
}

.myTextInput, .myTextInput:focus{
	text-transform: uppercase;
	width: 50vw;
	height: 12vh;
	font-size: var(--medium-font);
	font-family: var(--default-font);
	font-weight: bold;
	background-color: var(--block-color);
	color: white;
	letter-spacing: 5px;
	text-shadow: 0px;
	outline: none;
	border-radius: var(--small-padding) 0 0 var(--small-padding);
	border: 5px solid var(--block-color2);
	border-right: 5px solid var(--block-color2);
	padding: var(--small-padding);
	text-align: center;
}

.myTextInput::selection{
	color: var(--accent-color);
	background-color: transparent;
}

.myTextInput::placeholder{
	color: var(--placeholder-color);
	text-transform: capitalize;
}

#mti1, #mti2 {
	width: 35vw;
}

#mti1{
	border-right-width: 0px;
}

#mti2{
	border-radius: 0px;
}

#simsug, #nobleName{
	display: none;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}

#simsug{
	border: 1px solid white;
	border-width: 1px 0px;
}

#simsug div, #simsugLabel{
	padding: 3px 10px;
	color: var(--text-color);
	border: rgba(255,255,255,0.2) 1px solid;
	margin-top: 0.5vw;
	margin-left: 0.5vw;
	font-size: var(--mini-font);
	font-weight: bold;
	letter-spacing: 2px;
}

#nobleName{
	color: black;
	font-size: var(--mini-font);
	font-weight: bold;
	letter-spacing: 1px;
	text-indent: 20px;
	background-color: rgba(255,170,30,0.6);
}

#simsugLabel{
	border: white 0px solid!important;
}

#suggestions div:hover{
	color: var(--accent-color);
}

#estimateNote{
	display: none;
	width: 100vw;
	height: auto;
	font-size: var(--small-font);
	font-weight: bold;
	align-items: center;
	justify-content: left;
	padding: var(--block-padding);
	background-color: var(--block-color);
	border-bottom: 1px solid white;
	border-top: 1px solid white;
	letter-spacing: 1px;
}

.outputContainer{
	margin-top: 10vh;
	padding: 0px;
	min-height: 50vh;
	color: white;
	border-bottom: 1px solid var(--accent-color);
}

#mainNumber{
	font-size: var(--huge-font);
	letter-spacing: 5px;
	display: none;
	background: var(--block-color);
	user-select: none;
	padding: var(--big-margin) 0px;
}

.stats{
	min-width: 100vw;
	font-weight: bold;
	font-size: var(--big-font);
	display: flex;
	justify-content: center;
	flex-direction: row;
}

.statsItem,.itemLegend{
	min-width: 25vw;
	height: 20vh;
	letter-spacing: 2px;
	background: var(--block-color);
	border-top: 1px solid white;
	border-left: 1px solid white;
	display: none;
	justify-content: center;
	align-items: center;
}
.statsItem:first-child, .itemLegend:first-of-type{
	border-left: 0px;
}
.itemLegend{
	color: var(--label-color);
}

#trendCon{
	display: none;
	flex-direction: column;
	align-items: flex-start;
	background-color: transparent;
	min-width: 40vw;
	min-height: 30vw;
	max-height: 30vw;
	border-right: 1px solid white;
	height: auto;
}

#trend{
	min-width: 40vw;
	height: 20vw;
	font-size: var(--verybig-font);
	background: var(--block-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

.trendLegend{
	min-height: 10vw;
	border-bottom: 1px solid white;
	letter-spacing: 5px;
	background: var(--block-color);
	padding: var(--block-padding);
	min-width: 40vw;
	display: inherit;
	font-size: var(--medium-font);
	justify-content: center;
	align-items: center;
	color: var(--label-color);
}

.itemLegend{
	height: auto;
	margin: 0px;
	padding: 10px 0px;
	font-size: var(--small-font);
}

.article{
	border-top: 1px solid var(--accent-color);
	margin-top: 0vh;
	padding: 10vh 50vw 10vh 10vw;
	min-height: 70vh;
	background-color: var(--block-color);
	font-weight: bold;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}

.articleHeader{
	font-size: var(--medium-font);
	color: var(--text-color);
}

.articleItem{
	color: var(--not-veryfied-text-color);
	font-size: var(--small-font);
}

span{
	color: var(--accent-color);
}
.sp1, .sp2, .sp3{
	color: var(--not-veryfied-text-color)!important;
}

.pageType{
	color: var(--not-veryfied-text-color);	
}

.dataUpdate{
	margin: 0;
	display: flex;
	justify-content: center;
	letter-spacing: 1px;
	padding: 3.5vh 1px;
	background-color: black;
	color: var(--text-color);
	font-size: var(--small-font);
	font-weight: bold;
	border-top: 1px solid var(--not-veryfied-text-color);
	overflow-wrap: break-word;
	flex-wrap: wrap;
}

.disclaimer{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: var(--text-color);
	padding: 7vh 0px;
	padding-right: 5vw;
	background-color: black;
	opacity: 0.8;
	font-size: var(--small-font);
	border-top: 1px solid var(--not-veryfied-text-color);
}
.disclaimer > p{
	max-width: 90vw;
}
.disclaimer > p::first-line{
	font-weight: bold;
}

.dataUpdate a,span{
	color: var(--accent-color)!important;
}

table{
  background-color: var(--block-color);
  border: 0;
  border-top: 1px solid white;
  border-right: 1px solid white;
  width: 100vw;
}

.tbl-header{
  background-color: var(--block-color);
 }

.tbl-content{
  width: 100%;
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}

td, th{
	font-size: var(--mini-font);
	font-weight: bold;
	letter-spacing: 2px;
	color: var(--text-color);
  	padding: 15px;
  	text-align: center;
  	justify-content: space-between;
  	vertical-align: middle;
  	border-bottom: solid 1px rgba(255,255,255,0.1);
}

.selectedRow, .selectedRow td{
	color: var(--accent-color);
	background-color: rgba(0,0,0,0.3);
}

#chartCon{
	width: 60vw;
	min-height: 30vw;
	max-height: 30vw;
	display: none;
	color: white;
	border-top: 1px solid white!important;
	background-color: var(--block-color);
	padding: var(--block-padding)!important;
}

#chart{
	color: white!important;
	opacity: 1.0;
	background-color: transparent;
	display: none;
	transform: scale(0.9, 0.9);
	font-weight: bold;
	font-size: var(--mini-font);
}

@media screen and (min-width: 769px) and (max-width: 1024px) { 
  :root{
  	--medium-font: 28px;
  	--small-font: 18px;
  	--mini-font: 11px;

  	--block-padding: 15px; 
	--small-padding: 13px;

	--medium-margin: 20px;
	--big-margin: 30px;
  }
  .myTextInput{width: 70vw;}
  .loader, .loader2{margin-left: -65vw;}
  .mySubmitBtn{width: 20vw;}
  .article{padding: 10vh 10vw 10vh 10vw;}
}


@media screen and (min-width: 481px) and (max-width: 768px) {
  :root{
  	--medium-font: 22px;
  	--small-font: 16px;
  	--mini-font: 9px;

  	--block-padding: 13px; 
	--small-padding: 11px;

	--medium-margin: 16px;
	--big-margin: 24px;
  }
  .myTextInput{width: 80vw;}
  .loader, .loader2{margin-left: -65vw;}
  .mySubmitBtn{width: 20vw;}
  .article{padding: 10vh 20vw 10vh 10vw;}
}

@media screen and (max-width: 480px) {
  :root{
  	--medium-font: 16px;
  	--small-font: 13px;
  	--mini-font: 7px;

  	--block-padding: 10px; 
	--small-padding: 9px;

	--medium-margin: 12px;
	--big-margin: 18px;
  }
  .myTextInput, .myTextInput:focus{width: 80vw; height: 7vh; letter-spacing: 2px;}
  .loader, .loader2{margin-left: -65vw;}
  #search-btn, #search-btn:focus{height: 7vh; width: 7vh; font-size: 2.5vh}
  .action-block{letter-spacing: 1px;}
  .mySubmitBtn{width: 20vw;}
  .article{padding: 10vh 5vw 10vh 5vw;}
  td,th{letter-spacing: 0px;}
  #simsug div, #simsugLabel{letter-spacing: 1px; padding: 3px 6px;}
  .trendLegend{letter-spacing: 0px;}
  .button, .button-active{letter-spacing: 0px;}
  .statsItem{height: 10vh;}
  .itemLegend{letter-spacing: 0px;}
  #nobleName{text-indent: 0px; letter-spacing: 0px;}
  .dataUpdate{letter-spacing: 0px;}
  /*.inDevelopment{font-size: var(--huge-font);}*/
}