/****************************************************************
 *
 *  File   : style.css
 *  Author : Risto Hietala <risto.hietala@centria.fi>
 *           Jan Ågren <jan.agren@centria.fi>
 *
 *  Copyright (C) 2024 Centria University of Applied Sciences.
 *  All rights reserved.
 *
 *  Unauthorized copying of this file, via any medium is strictly
 *  prohibited.
 *
 ****************************************************************/

*
{
	font-size: 1em;
}
#centerdivi
{
	position: fixed;
	  top: 50%;
	  left: 50%;
	  /* bring your own prefixes */
	  transform: translate(-49%, -48%);
}
.keskita
{
	text-align: center;
	padding-top: 15px;
}
.piilossa{
	display: none;
}

#nam,
#pw{
	width: 100%;
}


#vaste{
	height: 75px;
	width: 125px;
}

#centria{
	height: 75px;
	width: 150px;
}
#euro{
	height: 90px;
	width: 125px;
}
#vipu{
	height: 75px;
	width: 125px
}

#loginbutton
{
	margin-top: 1%;
	font-size:1.3em;
	background-color: #00b33c;
 	border-color: #00b33c;
	color: white
}
.map
{
    height: 100%;
    width: 100%;
}
#bottomimgdiv
{
	position: fixed;
	bottom: 2%;
	left:35%;
}
.smallimg
{
	width: 50px;
	margin-left: 20px;
}
#logoutdiv
{
	position:fixed;
	top:2%;
	right: 2%;
}
#logoutimg
{
	width:48px;
}
#plusimgdiv
{
	position:fixed;
	bottom: 2%;
	right:2%;
}
.showcursor
{
	cursor:pointer;
}
#deliverydiv
{
	position:fixed;
	left:2%;
	height:75%;
	width:20%;
	border: 1px solid black;
	top:10%;
}
#filterdiv
{
	position:fixed;
	left: 22.1%;
	height: 15%;
	width: 2%;

	top: 10%;
	text-align:center;
}
.hidden
{
	display: none;
}
.filterpartdiv
{
	border: 1px solid black;
	margin-top: 3%;
}
.filtr-container
{
	overflow: auto;
	text-align:center;
	position: relative;
	background-color: #fefefe;
	height:100% !important;
}
.filtr-item
{
	position:absolute;
	width:97%;
	height:15%;
	margin-top: 1%;
	border: 1px solid black;
	left:1.5%;
}
.oneofthree
{
	position:absolute;
	left: 2%;
	top:20%;

	max-width: 25%;
	float:left;
}
.twoofthree
{
	position:absolute;
	margin-left: 15px;
	left:30%;
	max-width:40%;
	top:20%;
	float:left;
}
.threeofthree
{
	position:absolute;
	margin-left:15px;
	float:left;
	max-height:100%;
	top:20%;
	right:2%;
}
.imgspan
{

	height: 3vh;
}
#addDeliveryFilter
{
	position:relative;
	top: 5%;
	left:2.5%;
	width: 95%;
}
#addPersonDeliveryDiv
{
	position:relative;
	top: 10%;
	left:2.5%;
	width: 95%;
	display: block;

}
#addPackageDeliveryDiv
{
	position:relative;
	top: 10%;
	left:2.5%;
	width: 95%;
	display: none;

}
#addMysteryDeliveryDiv
{
	position:relative;
	top: 10%;
	left:2.5%;
	width: 95%;
	display: none;

}
#addSmartBoxDiv
{
	position:relative;
	top: 10%;
	left:2.5%;
	width: 95%;
	display: none;

}
#addRouteDiv
{
	position:relative;
	top: 10%;
	left:2.5%;
	width: 95%;
	display: none;

}
.addfilterimg
{
	height: 20px;
	margin-left:3%;

}
.addPartDiv
{
	margin-top: 15px;
}
#deliveryAddDiv
{
	display: none;
	position:fixed;
	right:2%;
	bottom:2%;
	width:30%;
	height:60%;
	background-color:#fefefe;
	overflow:scroll;
}
#boksiEditModal
{
	display: none;
	position:fixed;
	right:2%;
	bottom:2%;
	width:30vw;
	height:25vh;
	background-color:#fefefe;
}

#addDeliveryCloseDiv
{
	position:absolute;
	right:2%;
	top:1%;
}
input[type=text], input[type=number], input[type=email], input[type=password]
{
	width:20vw;
}
table
{
	width: 90%;
	 border-collapse:separate;
    border-spacing:0 5px;
}
.modiimg
{
	height:1.5vh;
	float:left;
}
.removeimg
{
	height:1.5vh;
	float:right;
}
#errordiv
{
	text-align:center;
	margin-top: 5%;
}
#adminbox
{
	height: 70%;
	width: 90%;
	border: 1px solid black;
	margin: auto;
	margin-top:5%;
}
#logiTable
{

	margin-left: 5%;
	margin-right: 5%;

}
#yritysTable
{

	margin-left: 5%;
	margin-right: 5%;

}
.addimg
{
	height: 2%;

}
#adminYritysAddDiv
{
	display: none;
	height: 40%;
	width: 40%;
	position: fixed;
	bottom: 1%;
	right:1%;
	border: 1px solid black;
	background-color: #fefefe;
}
#adminKuljettajaAddDiv
{
	display: none;
	height: 40%;
	width: 40%;
	position: fixed;
	bottom: 1%;
	right:1%;
	border: 1px solid black;
	background-color: #fefefe;
}
#adminVasteUserAddDiv
{
	display: none;
	height: 40%;
	width: 40%;
	position: fixed;
	bottom: 1%;
	right:1%;
	border: 1px solid black;
	background-color: #fefefe;
}
#adminVasteYritysAddDiv
{
	display: none;
	height: 40%;
	width: 40%;
	position: fixed;
	bottom: 1%;
	right:1%;
	border: 1px solid black;
	background-color: #fefefe;
}
#adminVasteYritysPropertyAddDiv
{
	display: none;
	height: 40%;
	width: 40%;
	position: fixed;
	bottom: 1%;
	right:1%;
	border: 1px solid black;
	background-color: #fefefe;
}
#adminTaxiButtonAddDiv
{
	display: none;
	height: 40%;
	width: 40%;
	position: fixed;
	bottom: 1%;
	right:1%;
	border: 1px solid black;
	background-color: #fefefe;
}
.adminShowImg
{
	height: 20px;
	margin-left: 15px;
}
.closeDiv
{
	position:absolute;
	right:2%;
	top:1%;
}
#loader {
	z-index: 9999;
    border: 1em solid #D9E021; /* yellow */
    border-top: 1em solid #008D0C; /* green */
    border-radius: 50%;
    width: 12vw;
    height: 12vw;
    animation: spin 1s linear infinite;
	position:fixed;
	top:35%;
	left:40%;
	display:none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#vastedbusers
{
	width:90% !important;
	margin-left: 5%;
}
#login_vaste
{

	width: 300px;
	height: 150px;
	margin-bottom: 10%;
}

#mainCol{
	text-align: center;
}

@media screen and (device-aspect-ratio: 16/9) {
	#vaste{
		height: 55px;
		width: 115px
	}
	#centria{
		height: 60px;
	}
	#euro{
		height: 70px
	}
	#vipu{
		height: 60px;
	}

}

@media screen and (device-aspect-ratio: 9/16) {

}

@media screen and (max-device-aspect-ratio: 3/4) and (max-width: 500px) {
  	#vaste{
		height: 55px;
		width: 60px
	}
	#centria{
		width: 70px;
		height: 60px;
	}
	#euro{
		width: 60px;
		height: 70px
	}
	#vipu{
		height: 60px;
		width: 70px;
		margin-right: 3vw;
	}
		#bottomimgdiv{
		left: 0%;
	}

	#login_vaste
  {
	 width: 150px;
	 height: 75px;
  }

	#centerdivi{
		top: 40%;
	}

}

@media screen and (max-device-aspect-ratio: 3/4) and (min-width: 500px) {
	#bottomimgdiv{
		left: 10%;
	}

	#vaste{
		height: 65px;
	}

	#nam,
	#pw{
		width: 100%;
	}
}

@media screen and (device-aspect-ratio: 4/3) and (max-width: 1100px){
	#bottomimgdiv{
		left: 25%;
	}

}

@media screen and (device-aspect-ratio: 4/3) and (min-width: 1110px){
  #bottomimgdiv{
		left: 25%;
	}
}

@media screen and (device-aspect-ratio: 1336/1024){
	#bottomimgdiv{
		left: 30%;
	}

}

@media screen and (device-aspect-ratio: 16/10) and (max-width: 1300px){
	#bottomimgdiv{
		left: 25%;
	}
}