#album {
  position: relative;
  top: 0;
  left: 0;
}

#album-image {
  width: 100%;
  height: auto;
}

#album-cards {
  height: 100%;
  max-height: 100%;
  position: absolute;
  width: 100%;
}

#album-cards:after {
  content: "";
  display: table;
  clear: both;
}

.album-content {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  width: 1140px;
  overflow-x: scroll;
}
.album-content::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

.table-row {
  display: table-row;
}

.arrows {
  z-index: 100;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
  display: none;
}

.page-arrows {
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
  height: 50px;
}

.album-name {
  line-height: 50px;
  font-size: 30px;
}

.left-arrow {
  float: left;
  transition: 0.3s;
}

.left-arrow:hover {
  color: rgb(31 223 239)!important;
}

.left-page-arrow {
  float: left;
  transition: 0.3s;
}

.left-page-arrow:hover {
  color: rgb(31 223 239)!important;
}

.right-arrow {
  float: right;
  transition: 0.3s;
}

.right-arrow:hover {
  color: rgb(31 223 239)!important;
}

.right-page-arrow {
  float: right;
  transition: 0.3s;
}

.right-page-arrow:hover {
  color: rgb(31 223 239)!important;
}


.album-card {
  z-index: 10;
  position: relative;
  float: left;
  height: auto;
}

.code-input {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 7px;
	display: inline-block;
	background-color: #00171f;
	text-transform: uppercase;
	color: #fff;
	border-width: 2px;
	border-color: #000000;
	font-size: 14px!important;
	font-weight: 600;
  display: none;
}

.card-image {
  width: 100%;
}

.drag-button {
  background-color:rgb(31, 223, 239);
  color:black;
  width: 100%;
	padding: 16px;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 10px;
	border-width: 2px;
	border-color: #000000;
	font-size: 24px!important;
	font-weight: 600;
  margin-bottom: 10px;
  transition: 0.3s;
}

.drag-button:hover {
  background-color: rgb(8 78 84)!important;
  color: white;
}

.edit-button {
  background-color:rgb(31, 223, 239);
  color:black;
  width: 100%;
	padding: 16px;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 10px;
	border-width: 2px;
	border-color: #000000;
	font-size: 24px!important;
	font-weight: 600;
  margin-bottom: 10px;
  transition: 0.3s;
}

.edit-button:hover {
  background-color: rgb(8 78 84);
  color: white;
}

.save-button {
  background-color:rgb(31, 223, 239);
  color:black;
  width: 100%;
	padding: 16px;
	display: inline-block;
	text-transform: uppercase;
	border-radius: 10px;
	border-width: 2px;
	border-color: #000000;
	font-size: 24px!important;
	font-weight: 600;
  display: none;
  transition: 0.3s;
}

.save-button:hover {
  background-color: rgb(8 78 84);
  color: white;
}