@charset "UTF-8";

body {
	margin: 0; padding: 0;
	width: 1920px;
	height: 1080px;
	Overflow: hidden
	user-select: none;
}

.control #setlist-input {
	width: 100%;
	height: 100px;
	resize: none;
}

.control #setlist-log {
	width: 100%;
	height: 200px;
	resize: none;
}

#setlist-img, #now-singing-img {
	top: 0; left: 0;
	width: 300px;
	height: 300px;
	display: inline-block;
	overflow: hidden;
	position: absolute;
	color: white;
}

.decoration {
	top: 0; left: 0;
	width: 100px;
	height: 100px;
	display: inline-block;
	overflow: hidden;
	position: absolute;
	color: white;
}

#setlist-img-pre, #now-singing-img-pre, .img-pre {
	width: 50px;
	height: 50px;
	display: inline-block;
    object-fit: contain;
}

#setlist-img-pre:not([src]), #now-singing-img-pre:not([src]), .img-pre:not([src]){
	display: none;
}

#now-singing {
	display: inline-block;
	width: 100px;
	height: 25px;
	overflow: hidden;
	user-select: none;
	color: white;
	position: absolute;
	white-space:nowrap;
}

#setlist {
	display: inline-block;
	width: 100px;
	height: 300px;
	overflow: hidden;
	user-select: none;
	color: white;
	position: absolute;
	white-space:nowrap;
}

#setlist-img img, #now-singing-img img, .decoration img{
	top: 0; left: 0;
	position: absolute;
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.control {
	width:  400px; height: 1060px;
	padding: 20px 40px 0;
	position: absolute; top: 0; right: 0;
	background: #000;
	font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
	overflow: hidden;
	user-select: none;
}

.control ul, ol{
	padding: 0;
}

.control ul ol li{
	padding-bottom: 10px;
}

.control h2 {
	margin: 0 0 10px;
	color: white;
	font-size: 16px;
	border-bottom: 1px solid white;
}

.control p {
	margin: 0 0 8px;
	color: white;
	font-size: 11px;
	display: flex;
}

.control input[type="range"] {
	width: 100%;
	margin: 0 auto 16px;
}

.control .tab_class {
	width: calc(100%/5);
	height: 50px;
	background-color: darkgrey;
	line-height: 50px;
	font-size: 15px;
	text-align: center;
	display: block;
	float: left;
	order:-1;
}

.control input[name="tab_name"] {
	display: none;
}

.control input:checked + .tab_class {
	background-color: cadetblue;
	color: aliceblue;
}

.control .content_class {
	padding: 10px;
	display: none;
	width: 100%;
	height: 100%;
}

.control input:checked + .tab_class + .content_class {
	display: block;
}


.control button {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
  vertical-align: top;
  font-size: 16px;
}

.control button:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}

.control .img-up-lbl {
  vertical-align: top;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.control .img-up-lbl:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
}

.control input[type="file"] {
    display: none;
}

.control input[type="checkbox"] { display: none; }

.control input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  height: 20px;
}

.control input[type="checkbox"] + label:last-child { margin-bottom: 0; }

.control input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 4px solid white;
  position: absolute;
  left: 0;
  top: 3px;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.control input[type="checkbox"]:checked + label:before {
  width: 10px;
  top:  -2px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border: 4px solid #6cc0e5;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.edit_mode{
	background-color: black;
	opacity: 0.7;
}

.edit_mode_img{
	background-color: red;
	opacity: 0.7;
}

.edit_mode_decoration{
	background-color: blue;
	opacity: 0.7;
}

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

#font-list, #font-name, #font-family {
	width: 100%;
	font-size: 20px;
}

.out {
	animation: out 1s linear;
	animation-fill-mode: forwards;
}
@keyframes out {
	  0% { opacity: 1; }
	 70% { opacity: 1; }
	100% { opacity: 0; }
}

.pop { animation: pop 0.5s linear; }
@keyframes pop {
	  0% { opacity: 0; }
	 70% { opacity: 1; }
	100% { opacity: 1; }
}

#stamp div {
	width: 400px; height: 100px;
	display: block;
	background: #ffc0cb;
	border-radius: 20px;
	border: solid;
	border-width: 10px;
	font-weight:bold;
	font-size: 70px;
	text-align:center;
	vertical-align:middle;
	color: #ff1493;
}
#stamp {
	position: absolute;
	display: none;
}
.finish {
	display: block !important;
}