* {
	margin: 0px;
	padding: 0px;
	background-color: rgb(255, 235, 211, 0);
	font-family: Verdana, sans-serif;
	box-sizing: border-box;
}

.container {
	overflow: auto;
	height: auto;
}

.mySlides {
	display: none;
}

.head {
	margin-top: 20px;
	margin-right: 20vw;
	margin-left: 20vw;
	text-align: center;
	font-size: 30px;
	padding: 2px 20px;
	background-image: linear-gradient(to bottom right, rgb(250, 18, 192), rgb(104, 104, 239));
	color: white;
	border-radius: 19px;
	font-weight: bolder;
}

.data-container {
	justify-content: center;
	width: 100%;
	height: auto;
}

.bar {
	justify-content: center;
	display: inline-block;
	padding: 10px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 800;
	position: relative;
	background-color: rgb(0, 183, 255);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
}

.bar__id {
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 10px;
	padding: 10px;
	background-color: rgb(0, 183, 255);
	;
}

.buttons {

	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
}


.btn1 {
	margin: 10px;
	padding: 12px;
	font-weight: bolder;
	background-color: #d1549ced;
	border-radius: 10px;
	color: white;
	font-size: 16px;
	border: white;
	cursor: pointer;
	/* box-shadow: 5px 10px 2px #888888; */
}

.btn1:hover {
	box-shadow: rgba(242, 244, 245, 0.35) 0 -25px 18px -14px inset, rgba(241, 245, 242, 0.25) 0 1px 2px, rgba(235, 238, 236, 0.25) 0 2px 4px, rgba(72, 73, 73, 0.25) 0 4px 8px, rgba(68, 69, 68, 0.25) 0 8px 16px, rgba(80, 83, 81, 0.25) 0 16px 32px;
	transform: scale(1.05) rotate(0deg);
}


.btn2 {
	margin: 10px;
	padding: 12px;
	font-weight: bolder;
	background-color: #30c56ced;
	border-radius: 10px;
	color: white;
	font-size: 16px;
	border: white;
	cursor: pointer;
}

.btn2:hover {
	box-shadow: rgba(242, 244, 245, 0.35) 0 -25px 18px -14px inset, rgba(241, 245, 242, 0.25) 0 1px 2px, rgba(235, 238, 236, 0.25) 0 2px 4px, rgba(72, 73, 73, 0.25) 0 4px 8px, rgba(68, 69, 68, 0.25) 0 8px 16px, rgba(80, 83, 81, 0.25) 0 16px 32px;
	transform: scale(1.05) rotate(0deg);
}

.header {
	font-size: 20px;
	text-align: center;
}

.block {
	width: 28px;
	background-color: #d1549ced;
	position: absolute;
	bottom: 0px;
	transition: 0.2s all ease;
}

.block_id {
	position: absolute;
	color: black;
	margin-top: -20px;
	width: 100%;
	text-align: center;
}

.inputValue {
	margin: 20px;
}

#inputBox {
	width: 90%;
	height: 50px;
	border: 2px solid black;
	border-radius: 10px;
}

.labelValue {
	font-size: larger;
}

.DATA {
	white-space: wrap;
	width: 100%;
	overflow: auto;
	text-overflow: clip;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.column {
	flex: 50%;
	padding: 20px;
}

@media screen and (max-width: 992px) {
	.column {
		flex: 50%;
	}
}

@media screen and (max-width: 600px) {
	.row {
		flex-direction: column;
	}
}

.speedc {
	height: 60px;
	width: 120px;
	cursor: pointer;
	border: 2px solid black;
	border-radius: 20px;
	grid-auto-rows: 0%;
	background-color: mintcream;
}

.speedc:hover {
	box-shadow: rgba(242, 244, 245, 0.35) 0 -25px 18px -14px inset, rgba(241, 245, 242, 0.25) 0 1px 2px, rgba(235, 238, 236, 0.25) 0 2px 4px, rgba(72, 73, 73, 0.25) 0 4px 8px, rgba(68, 69, 68, 0.25) 0 8px 16px, rgba(80, 83, 81, 0.25) 0 16px 32px;
	transform: scale(0.9) rotate(0deg);
	background-color: rgb(241, 174, 183);
}

#forLoop {
	font-style: italic;
	margin-top: 10px;
}

.SwapAndCom {
	background-color: lightgreen;
	font-size: medium;
	margin-top: 10px;
}