.root {
	display: flex;
	place-content: center;
	margin-top: 3rem;
}

.container {
	background: rgba(13, 14, 27, 0.7);
	width: 320px;
	height: 199px;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
}

.input {
	display: flex;
	margin-top: 10px;
	color: white;
	place-content: stretch;
}

.input2 {
	bottom: 0px;
}

.input input {
	flex: auto;
}

.err {
	position: absolute;
	top: 40px;
	left: 10px;
	color: red;
}

.option {
	position: absolute;
	top: 4px;
	right: 10px;
	display: flex;
	place-content: center;
	font-size: 12px;
}

.btn-default {
	background-color: transparent;
	border: 1px solid white;
	color: white;
	box-shadow: none;
}

.glyphicons {
	color: blue ;
	font-size: 18px ;
}

.option span {
	color: white ;
}

@media (max-width: 720px) {
	.container {
		width: 90vw;
		height: 52.7vw;
	}
}

.input {
	position: relative;
	z-index: 10;
}

.gridContainer {
	display: grid ;
	grid-template-columns: repeat(3, 1fr) ;
	gap: 10px ;
}

.container {
height: 200px;
}

.custom-btn {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
}

.glyphicons {
	padding: 0;
	margin: 0;
	font-size: 16px;
}

.play-btn .glyphicons {
	color: green;
}
.pause-btn .glyphicons {
	color: red;
}
.destroy-btn .glyphicons {
	color: #5bc0de;
}

.glyphicons {
	padding: 0;
	margin: 0;
	font-size: 16px;
}

.btn.btn-default:focus,
.btn.btn-default:hover {
	outline: none;
	box-shadow: none;
}

.glyphicons {
	padding: 0;
	margin: 0;
}