/* Style the form */
#regForm {
  background-color: #f0f0f0;
  /* margin: 10px; */
  padding: 20px;
  /*width: 700px;*/
  width: 100%;
  min-width: 200px;
 /* min-height: 100%; */
}

/*html, body {
	background-color: #f0f0f0;
	text-align: left;
	min-height: 100%;
	display: inline-block;
	}
*/

/* Style the input fields */
input {
  width: 100%;
  font-size: 1rem;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
	display: none;
	font-family: Raleway;
	padding: 1rem;
}

.redButton {
	background-color: #e60000;
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	margin: 20px;
	font-size: 17px;
	font-family: Raleway;
	cursor: pointer;
}

i {
	color: #bbbbbb;
	line-height: 30%;
}

.main-header {
	font-size: 2rem;
    font-family: Raleway;
	display: inline-block;
}

.main-subheader {
	font-size: 1rem;
    font-family: Raleway;
	line-height: 0.1rem;
	text-indent: 2.5em;
}

.main-title {
	display: inline;
	text-indent: 50px;
	text-align: right;
}

.main-data {
	display: inline;
	text-indent: 20px;
}

.main-all {
	color: #333333;
	font-family: Raleway;
}

.main-all:hover {
	color: red;
}

.main-all:hover i {
	color: red;
}

.main-left {
	width: 33%;
	display: inline-block;
	text-align: right;
	vertical-align: middle;
	font-size: 0.9rem;
	line-height: 1.1rem;
	background-image: linear-gradient(to right,#f0f0f0, #cccccc);
}

.main-icon {
	width: 5%;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font-size: 1rem;
	line-height: 1rem;
	background-image: linear-gradient(to right,#cccccc 50%, #f0f0f0 50%);
}

.main-right {
	width: 62%;
	display: inline-block;
	text-align: left;
	font-size: 1rem;
	line-height: 1rem;
}

.circle-icon {
    background: #ffffff;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    text-align: center;
	font-size: 1rem;
	line-height: 1rem;
    vertical-align: middle;
    padding: 0px;
}

.main-dimension-button {
	text-align: center;
	display: none;
}

#main-dimension {
	display: inline-block;
	font-size: 40px;
    font-family: Teko;
}

#main-name {
	display: inline;
	font-size: 40px;
    font-family: Teko;
}

#main-colon {
	display: inline;
	color: red;
	font-size: 50px;
    font-family: Teko;
}

.row-width {
	/* display: flex; */
/* 	width: 400px;
 */	
	width: 400px;
	margin: auto;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.column-width {
	/* float: left; */
	display: flex;
	text-align: center;
/* 	align-items: center;
	justify-content: center; */
}

.left-width {
	width: 45%;
	display: inline-block;
}

.center-width {
	width: 10%;
	display: inline-block;
	vertical-align: middle;
}

.right-width {
	width: 45%;
	display: inline-block;
}

.main-list {
	width: 100%;
	height: 200px;
}

.list-buttons {
	text-align: center;
	align-items: center;
	justify-content: center;
}

.list-buttons i {
	color: red;
}

.row-playlist {
	/* display: flex; */
/* 	width: 400px;
 */	
	width: 420px;
	margin: auto;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.column-playlist {
	/* float: left; */
	display: flex;
	text-align: left;
/* 	align-items: center;
	justify-content: center; */
}

.left-playlist {
	width: 15%;
	display: inline-block;
	line-height: 0.5rem;
}

.right-playlist {
	width: 85%;
	display: inline-block;
	line-height: 0.5rem;
}

/* Center the loader */
#waiting-load {
	/*background-color: #04AA6D; */ /* Green background */
	border: none; /* Remove borders */
	color: red; /* Red text */
	font-family: Raleway;
	font-size: 2rem; /* Set a font size */
	/*display: inline-block;*/
	vertical-align: middle;
	margin: 10px;
	padding: 10px;
	width: 700px;
	min-width: 200px;
}

	#waiting-load i {
		color: red;
		font-size: 5rem;
		text-align: center;
		padding: 40px 200px 40px; /* Some padding */
	}