*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

.noSelect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

html {
    font-size: 62.5%; 
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body{
    font-family: 'Raleway', sans-serif;
	position: relative;
}

header{
	width: 100vw;
	height: 8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	background-color: #3f88c5;
	font-size: 6rem;
	font-weight: bold;
}

#directions{
	width: 100vw;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d72638;
	color: white;
	font-size: 2rem;
}

main{
	width: 100vw;
	display: flex;
	flex-direction: column;
	padding: 2rem 0;
	
}

#formSection{
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#dropdownWrapper{
	width: 30rem;
	height: 3rem;
	position: relative;
	margin-bottom: 2rem;
}

input[type=text]{	
	width: 30rem;
	font-size: 2rem;
	color:#333;
	border-width: 0px;
	border-bottom:1px solid #b7b7b7;
	background-color:rgba(0,0,0,0);
	padding: 0px;
	margin-bottom: 2rem;
}

.btn{
	width: 10rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	border-radius: 5px;
	background-color: #dde1e4;
	color: black;
}

.activeButton{
	width: 10rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
	background-color: #3f88c5;
	color: white;
}

.activeButton:hover{
    transform: translateY(-3px);
    box-shadow: 0 .75rem 2rem rgba(8, 7, 5, .15);
}

.activeButton:active{
    transform: translateY(-1px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,0.2);
}

#resultsSection{
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 2rem;
	opacity: 0;
}

#criteria{
	width: 100vw;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #d72638;
	font-size: 2rem;
	font-weight: bold;
	color: white;
}

#copyToClipboard{
	width: 100vw;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #3f88c5;
	font-size: 2rem;
	color: white;
}

#copyToClipboard span{
	font-weight: bold;
	color: black;
	cursor: pointer;
}

#results{
	width: 100vw;
	display: flex;
	flex-direction: column;
}

.result{
	width: 100vw;
	height: 2rem;
	display: flex;
}

.result:nth-child(even){
	background-color: #f2f2f2;
}

.headerItem{
	font-weight: bold;
}

.resultItem{
	font-size: 1.6rem;
	border-style: solid;
	border-color: black;
	border-width: 0 1px 0 0;
	display: block;
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.resultItem:last-of-type{
	border-width: 0px;
}

.id{
	width: 4%;
	text-align: center;
}

.categoryName{
	width: 26%;
	padding-left: 4px;
}

.code{
	width: 4%;
	text-align: center;
}

.shortCode{
	width: 33%;
	padding-left: 4px;
}

.longCode{
	width: 33%;
	padding-left: 4px;
	padding-right: 2rem;
}

.appear{
	animation: appear .3s linear forwards;
}

@keyframes appear{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

#backToTop{
	position: fixed;
	right:2rem;
	bottom:0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #3f88c5;
	z-index: 20;
	color:white;
	font-size: 1.8rem;
	width: 16rem;
	height: 0px;
	font-weight: bold;
	overflow: hidden;
	transition: all .25s;
    cursor: pointer;
}

#displayMessage{
	position: fixed;
	left:2rem;
	bottom:0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,.8);
	z-index: 20;
	color:white;
	font-size: 1.8rem;
	width: 34rem;
	height: 0px;
	font-weight: bold;
	overflow: hidden;
	transition: all .25s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clickable{
	cursor: pointer;
	color: #3f88c5;
	transition: all .2s;
}

.clickable:hover{
	color: #d72638;
}

.activeSort{
	color: #d72638;
}

.activeSort:hover{
	color: #3f88c5;
}