.topdatecontainer {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: end;
	margin-bottom: 20px;
}

.topdatecontainer label {
	font-size: 14px;
}

.calInput {
	position: relative;
}

.calInput input[type="text"] {
	position: relative;
	padding: 0px 12px;
	border: 1px solid #cdcccc;
	border-radius: 2px;
	height: 35px;
	width: 100%;
}

.calInput input[type="text"]:focus {
	outline: none;
	box-shadow: none;
}

.calInput img {
	position: absolute;
	width: 33px;
	top: 1px;
	right: 1px;
	background: #f5f5f5;
	padding: 6px;
}

.topBox {
	border: 1px solid #cdcccc;
}

.boxe-d-flex {
	display: flex;
	gap: 15px;
	align-items: center;
	height: 100%;
	margin-bottom: 20px;
}

.topBox {
	position: relative;
	padding: 20px 110px 20px 20px;
	height: 130px;
	text-align: left;
}

.topBox h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.topBox h2 {
	font-size: 30px;
	font-weight: 800;
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.topBox img {
	position: absolute;
	top: 25px;
	right: 20px;
	width: 42px;
	opacity: 0.5;
}

.whitefullwidth {
	margin: 20px 0px;
	padding: 10px;
	border: 1px solid #8080804a;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	background: white;
	flex-direction: column;
}

.vto-statics-top {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 20px;
}

.vto-statics-top .selectdata {
	width: auto;
	margin-top: 20px;
}

.topheadingselect {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.topheadingselect h5 {
	width: 100%;
}

.selectdata {
	width: 100%;
	text-align: right;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: end;
}

.selectdata label {
	font-size: 14px;
}

.selectdata select {
	padding: 6px 8px;
	border-radius: 7px;
}


.boxesoneline {
	display: flex;
	gap: 20px;
	justify-content: center;
	height: 100%;
}

.bigBoxLeft {
    margin: 20px 0px;
    padding: 10px;
    border: 1px solid #8080804a;
    border-radius: 10px;
    background: white;
    height: 100%;
    width: 60%;
}

.smallBoxRight {
	margin: 20px 0px;
	padding: 10px;
	border: 1px solid #8080804a;
	border-radius: 10px;
	background: white;
	width: 40%;
	height: 100%;
}

.vto-staticsBox {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.vto-staticsBox img{
	width: 100%;
	height: 100%;
}

.top5vtoBox{
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;	
}

@media (max-width: 600px) {
	.topBox {
		width: 100%;
		margin-bottom: 10px;
		height: 100%;
	}

	.boxesoneline {
		display: block;
	}

	.bigBoxLeft img,
	.smallBoxRight {
		width: 100%;
		height: 100%;
	}

	.dashboard {
		grid-template-columns: repeat(1, 1fr);
	}

	.topBox h2 {
		position: inherit;
		bottom: 0;
		left: 0;
	}
	.vto-staticsBox {
	    grid-template-columns: repeat(2, 1fr);
	    gap: 20px;
	}
	.bigBoxLeft{
		width: 100%;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	.bigBoxLeft img,
	.smallBoxRight img {
		width: 100%;
		height: 100%;
	}

	.dashboard {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.topBox {
		padding: 20px;
		height: auto;
	}

	.topBox h2 {
		position: inherit;
		bottom: 0;
		left: 0;
	}
}