body 
{
    background-color: #606C38;
    color: #FEFAE0;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

#title 
{
    font-size: 3vw;
    width: 100%;
    text-align: center;
    color: #FEFAE0;
}

#loginDiv {
    font-size: 2.5vw;
    width: 70%;
    margin: 0 auto;
    padding: 25px;
    background-color: #BC6C25;
    text-align: center;
}

#registerDiv {
    font-size: 2.5vw;
    width: 70%;
    margin: 0 auto;
    padding: 25px;
    background-color: #BC6C25;
    text-align: center;
}

#loggedInDiv
{
    font-size: 2.5vw;
    width: 70%;
    margin: 0 auto;      /* ← THIS */
    padding: 25px;
    background-color: #BC6C25;
    text-align: center; /* optional but recommended */
}


#accessUIDiv
{
    font-size: 2.5vw;
    width: 70%;
    margin: 0 auto;      /* ← THIS */
    padding: 25px;
    background-color: #BC6C25;
    text-align: center; /* optional but recommended */
}

#contactFieldsBox {
	position: fixed;
	font-size: 2vw;
    padding: 2vw;
    background-color: #283618;
    text-align: center; /* optional but recommended */
	top: 5vw;
	bottom: 5vw;
	left: 5vw;
	right: 5vw;
	align-self: center;
}

.adjacentBox {
	display: flex;
}
.adjacentBox > div {
	width: 2vw;
}

#searchDiv {
    display: flex;
	width: 100%;
}

#searchDiv * {
	align-self: center;
	margin: 0;
}


table {
	font-size: 1.5vw;
	width: 100%;
	background-color: white;
	color: black;
}
th{
	color: white;
	background-color: DarkSlateGray;
}
tr:nth-child(odd) {
	background-color: Gainsboro;
}


.buttons {
    font-weight: 500;
    font-size: 2.5vw;
    border-radius: 50px;
    width: 50%;
    background-color: #606C38;
    color: #FEFAE0;
    border: 0.2vw solid black;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.iconButtons {
	/* don't delete me! I'll be needed later */
}
.iconButtons > img{
	width: 2vw;
}


.buttons:hover{
    background-color: #00d5124f;
    color: #306e2b;
    opacity: 50%;
}

#loginName
{
	font-size: 2.5vw;
}
#loginPassword
{
	font-size: 2.5vw;
}
#searchText
{
	font-size: 2.5vw;
}
.textField
{
	font-size: 2.5vw;
}

::placeholder { /* text field hints */
	color: LightGray;
}

input[type="text"],input[type="password"],input[type="tel"]
{
    border-radius: 7.5vw;
    text-align: center;
    width: 80%;
    margin-bottom: 2%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.inner-title {
    display: block;
    text-align: center;
    font-size: 0.8em;
    margin-bottom: 2%;
    color: #FEFAE0;
}


#loginResult{
    display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-bottom: 2%;
    color: #95060a;
}

#userName{
    display: inline-block;
    width: 80%;
    text-align: center;
}

#logoutButton{
    width: 20%;
}

select{
    width: 30%;
    margin-top: 2%;
    font-size: 0.75em;
}

#contactSearchResult{
    display: none;
}

#contactAddResult{
    display: inline-block;
    font-size: 0.8em;
    width: 90%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 1%;
    color: #95060a;
}


.invalidField
{
	background-color: LightPink;
	border-color: red;
}
.validField
{
	border-color: green;
}