@charset "UTF-8";

.ui-header{
	box-shadow: 0 0 7px 7px black;
	z-index: 999;
	height:100px;
}

.ui-panel{
	width:100%;
	top:0;
	left:0;
	position: absolute;
	display: block;
	min-height: 100%;
	max-height: 100%;

}

#mypanel > div > p:first-of-type{
	color:red;
	font-size: 2rem;
}

#closePanel{
	cursor: pointer;
	position: absolute;
	top:0;
	right:0;
	margin:1rem;
	color:white;
}

.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay{
	transform: translate3d(-100%,0,0);
}

.ui-footer{
	box-shadow: 0 0 7px 7px black;
	z-index: 999;
}

#toolbar{
	display:flex;
	justify-content: center;
	align-items: stretch;
	height:50px;
	padding: 0;
	border:none;
}

#toolbar button{
	width:100%;
	margin:0;
	font-size: 1.1rem;
	font-weight: lighter;
	padding:0;
	box-shadow: none;
	color: #c1c1c1;
	text-shadow: black;
}


.ui-page-theme-b .ui-btn.ui-btn-active{
	background-color: darkred;
	box-shadow: none;
	border-color:black;
	text-shadow: black;
}

.ui-btn-icon-right::after{
	top:0;
	width:100%;
	height:100%;
	padding: 0;
	margin:0;
	right:0;
}

.ui-footer .ui-btn-icon-right::after{
	right:0;
	border-radius:0;
}

#rgb-field label{
	margin-top: 0.5em;
	text-align: center;
}

#rgb-field input {
	text-align: center;
	font-weight: bold;
	color: #b8b8b8;
}

#opac{
	font-size: .95rem;
	font-weight: lighter;
}

#hex-field input {
	text-align: center;
	font-weight: bold;
	color: #b8b8b8;
}

#rgb-field .ui-focus{
	box-shadow: none;
}

#rgb-field.hide{
	display:none;
}


#page {
	position: absolute;
	top: 96px;
	width: 100vw;
	height: calc(100vh - 150px);
	display: grid;
	overflow: scroll;
	overflow-x: hidden;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(306, 1fr);
	background-color: #2d2d2d;
	z-index: 1;
}

@media screen and (min-width: 480px) {
	#page {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(255, 1fr);
	}
}

@media screen and (min-width: 640px) {
	#page {
		grid-template-columns: repeat(10, 1fr);
		grid-template-rows: repeat(153, 1fr);
	}
}

@media screen and (min-width: 960px) {
	#page {
		grid-template-columns: repeat(15, 1fr);
		grid-template-rows: repeat(102, 1fr);
	}
}

#page > div {
	cursor: pointer;
	padding-bottom: 100%;
	border: 1px solid #2d2d2d;
	background-color: #474747;
	transition: background-color .3s ease;
	user-select: none;
}


#page > div.onHover {
	z-index: 0;
}

#page > div.onHover:hover, #page > div.onHover:focus {
	border: none;
	animation-name: colorHover;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-duration: 0.4s;
	z-index: 1;
}

#page > div.copy {
	z-index: 1;
	animation-name: colorCopy;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-duration: 0.4s;
}


@keyframes colorHover {
	from {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(19, 19, 19, 0.88);
	}
	to {
		transform: scale(1.3);
		box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.84);
	}
}

@keyframes colorCopy {
	from {
		transform: scale(1.3);
		box-shadow: 0 0 0 0 rgba(19, 19, 19, 0.88);
	}
	30% {
		transform: scale(1.2);
		box-shadow: 0 0 3px 1px rgba(19, 19, 19, 0.88);
	}
	to {
		transform: scale(1.3);
		box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.84);
	}
}

#colorBox{
	color:black;
	font-weight: normal;
	font-size: 1.1rem;
}

#rgb{
	font-size: 1.1rem;
	font-weight: normal;
}

.hide{
	display:none;
}



#page > div.onHoverDark {
	z-index: 1;
}

#page > div.onHoverDark:hover, #page > div.onHoverDark:focus {
	border: none;
	animation-name: colorHoverDark;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-duration: 0.4s;
}

#page > div.copyDark {
	z-index: 1;
	animation-name: colorCopyDark;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	animation-duration: 0.4s;
}


@keyframes colorHoverDark {
	from {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.88);
	}
	to {
		transform: scale(1.3);
		box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.88);
	}
}

@keyframes colorCopyDark {
	from {
		transform: scale(1.3);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.88);
	}
	30% {
		transform: scale(1.2);
		box-shadow: 0 0 3px 1px rgba(42, 42, 42, 0.88);
	}
	to {
		transform: scale(1.3);
		box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.84);
	}
}

#opacity_box.hide{
	display:none;
}

#opacity{
	padding: 0.9rem;
	text-align: center;
}