.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

*{
	box-sizing:border-box;
	font-family: 'Roboto', sans-serif;
	font-family: "Open Sans", sans-serif;
}
html{
	height:100%;
}
body {
	font-size:16px;
	//background-image:url(tech-2.png);
	background-size:cover;
  background-color: #010205;
	height:100%;
	position:relative;
	margin:0;
	//filter:drop-shadow 14px 5px 5px rgba(0,0,0,.3));
	overflow-y:scroll;
	overflow-x:hidden;
}

form {
  position:relative;
  perspective:2000px;
  border-radius: 8px;
  position:relative;
  z-index:2;
  transform-style: preserve-3d;
  width:50%
}
form select{

/*! background:rgba(0, 123, 255, 0.1); */
color:#fff;
outline:0 !important;
border:0 !important;
background: #0052a9;
}

.content-wrap-inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 20px !important;
	display:flex;
	margin-top:30px;
	gap:20px !important;
}
form *{
	box-sizing: border-box;
}
body.flipped form .form-front{
	transform:rotateY(-180deg);
}
body.flipped form .form-back{
	transform:rotateY(0deg);
}

form .form-back{
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMTguMDFtbSIgaGVpZ2h0PSIyNzEuNzFtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjE4LjAxIDI3MS43MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIxNTIuMjIiIHgyPSIxNjkuMzUiIHkxPSIyMzMuODIiIHkyPSIyNTkuMzQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjOTk5IiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iLjQxNTE1Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzk5OSIgb2Zmc2V0PSIuNjU3NjMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0My41MjEgMjAuNTk4KSI+PHBhdGggZD0ibS00My41MjEtMjAuNTk4djI3MS43MWgxOTcuMTJjOC4yNzQxLTAuMDIxOSAxMS4wMzMtMC44NDg4NiAxNC4xMjItNy4wMjY0IDUuMDAzMyAwLjczNTc2IDYuNDU0NC0xLjM5ODggNi43NzMyLTQuMzQ1NXYtMjYwLjM0eiIgZmlsbD0iI2ZmZiIgc3R5bGU9InBhaW50LW9yZGVyOm1hcmtlcnMgc3Ryb2tlIGZpbGwiLz48cGF0aCBkPSJtMTcyLjU4IDI0My40OWMtM2UtMyAyZS0zIC03ZS0zIDRlLTMgLTAuMDEwOCA2ZS0zIC00ZS0zIDJlLTMgLTZlLTMgNWUtMyAtMC4wMSA3ZS0zem0tMC4wMjA3IDAuMDEzNGMtMC4wNzc4IDAuMDQ5NC0wLjE2NDQgMC4wOTIxLTAuMjQ4MDUgMC4xMzY5NS0wLjA1MDkgMC4wMjczLTAuMDk3NyAwLjA1NzctMC4xNTA4OSAwLjA4MzItMC4xMDMyNyAwLjA0OTYtMC4yMTU3NCAwLjA5MjEtMC4zMjc2MyAwLjEzNDg4LTAuMDQ1NSAwLjAxNzQtMC4wODY5IDAuMDM4LTAuMTMzODQgMC4wNTQzLTAuMTAxNjYgMC4wMzUyLTAuMjEyMjQgMC4wNjI5LTAuMzIwOTEgMC4wOTI1LTAuMDY2OCAwLjAxODItMC4xMjg5NiAwLjAzOTgtMC4xOTg0NCAwLjA1NTgtMC4xMzU2NSAwLjAzMTItMC4yODE2IDAuMDU0OC0wLjQyNzg4IDAuMDc3NS0wLjA0NiA3ZS0zIC0wLjA4NzMgMC4wMTgtMC4xMzQzNiAwLjAyNDMtMWUtMyAxLjVlLTQgLTJlLTMgMy44ZS00IC0zZS0zIDUuMmUtNCAtMC4wMTIzIDJlLTMgLTAuMDI2NCAyZS0zIC0wLjAzODggM2UtMyAtMC4zOTA2NSAwLjA0OTktMC44MTY0NyAwLjA3MTQtMS4yODQyIDAuMDU5NC0wLjQ4MTkzLTAuMDEyMy0xLjAwNTgtMC4wNTgyLTEuNTc2Ni0wLjE0MjExLTAuMzIwMzYgMC42NDA3NC0wLjYzNzI0IDEuMjIzNy0wLjk1NzA0IDEuNzU0NC02LjdlLTQgMWUtMyAtMWUtMyAzZS0zIC0yZS0zIDRlLTMgLTAuMzE5MDUgMC41MjkxNy0wLjY0MTA3IDEuMDA2My0wLjk3MjU1IDEuNDM2MS0zLjZlLTQgNC42ZS00IC02LjhlLTQgMWUtMyAtMWUtMyAyZS0zIC0wLjE0ODkxIDAuMTkyOTktMC4zMDkyIDAuMzQzNC0wLjQ2MjUxIDAuNTE3OC0wLjE5MDAyIDAuMjE2MTctMC4zNzQ4IDAuNDUxNi0wLjU3MzYxIDAuNjQwNzktNWUtNCA0LjhlLTQgLTFlLTMgMWUtMyAtMmUtMyAyZS0zIC0wLjA3MDYgMC4wNjcyLTAuMTQ1MSAwLjEyNTIxLTAuMjE3MDQgMC4xODkxMy0wLjEwOTIgMC4wOTctMC4yMTY2OCAwLjE5NzU1LTAuMzI5MTggMC4yODczMi0wLjExOTkyIDAuMDk1Ny0wLjI0NTQxIDAuMTgwOTctMC4zNjk0OCAwLjI2ODcyLTAuMDY5IDAuMDQ4OC0wLjEzNTI4IDAuMTAyOTEtMC4yMDU2OCAwLjE0OTM1em0tOC45MzY0IDUuODMwN2MtOC4zZS00IDUuNGUtNCAtMmUtMyAxZS0zIC0zZS0zIDJlLTMgLTJlLTMgMmUtMyAtNWUtMyA0ZS0zIC03ZS0zIDVlLTN6IiBmaWxsPSJ1cmwoI2EpIi8+PC9nPjwvc3ZnPg0K");
}
form .form-front{
	position: relative;
	backface-visibility: hidden;
	transition:.2s;
	transition-timing-function:ease-in-out;  
	background-position:right bottom;
	transform-style: preserve-3d;
	z-index:8;
	transition-timing-function:ease-in-out
}
form .form-back {
	position: absolute;
	backface-visibility: hidden;
	transition: .2s;
	transition-timing-function: ease-in-out;
	padding: 20px;
	background-image: url('corner.svg');
	background-position: right bottom;
	transform-style: preserve-3d;
	transform: rotateY(180deg);
	z-index: 9;
	min-width: 100%;

	max-height: 100%;
	left: 0;
	top: 0;
	min-height: 100%;
}
form img{
  display:block;
  margin:0 auto;
}
#date-wrap-one,
#date-wrap-two{
  margin-bottom:15px;
  display:flex;
  flex-wrap:wrap;
}
.first-day span,
.second-day span{
  display:flex;
  flex-wrap:wrap;
}
h3{
  font-size:16px;
  margin:0;
  margin-bottom:5px;
}
#date-wrap-two{
  justify-content: space-between
}
#date-wrap-one h2,
#date-wrap-two h2,
label {
  display: block;
  margin-bottom: 15px;
  font-weight: 600;
  font-size:inherit;
  width:100%;
  color:#0052a9;
}
#date-wrap-one h2,
#date-wrap-two h2{
  margin:0 0 5px 0;
}
label input,
label select {
  width: 100%;
  padding: 8px 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 14px;
  transition: border-color 0.2s;
}
label input[type="text"]{
  background:#bbb;
}
label > div{
  position:relative;
}
.required{
  font-size:400;
  color:red;
  font-size:12px;
  position: absolute;
  right:0;
  top:-10px;
  display:none;
}
label input:focus,
label select:focus {
  border-color: #007bff;
  outline: none;
}
.first-day span,
.second-day span{
  margin-bottom:5px;
  color:#bbb
}
button#submit,
button#saveBtn,
button#encodeBtn {
  display: flex;        
  //margin: 0 auto; 
  background-color: #0052a9;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative; 
  padding:15px 30px;
  align-items: center;
  width: 200px;
  height: 72px;
  justify-content: center;
}
button#saveBtn.in-use,
button#encodeBtn.in-use{
	pointer-events:none;
	filter:grayscale(1)brightness(.8);
}
button#saveBtn.in-use span,
button#encodeBtn.in-use span{
	display:none;
}

button#saveBtn.in-use .egg-timer,
button#encodeBtn.in-use .egg-timer{
	display:block;
}
button#encodeBtn.disabled{
  pointer-events:none;
  filter:grayscale(1);
  cursor: not-allowed;
}
#encodeBtn img{
  margin:0;
  display:inline-block !important;;
  position: relative;
  width:60px;
}
button#encodeBtn span{

}
button#encodeBtn:hover {
  background-color: #0056b3;
}
#bb {
  display: none;
  margin-top: 15px;
}
form > label {
  margin-bottom: 10px;
}
#result{
  word-break:break-word
}
.date-wrap-two{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between
}
.date-wrap-two h2{
  display:block;
  width:100%;
}
.date-wrap-two > div > span{
  width:100%;
  display:block;
  margin-bottom:5px;
}
.header{
  display:flex;
  justify-content: left;
  /*! margin-bottom:20px; */
}
.header h1{
  font-size:18px;
  color:#5bc0de;
  color:#bbb;
}
.header img{
  display:block;
  width:100px;
  margin:0;
  margin-right:20px
}
#date-wrap-two > span{
  position:relative
}
#date-wrap-two > span:after{
  content:"";
  position: absolute;
  left:50%;
  top:20px;
  transform:translateX(-50%);
  font-weight:700;
  font-family:Ariel, sans-serif;
}
.green,
.green a{
  color:green;
}
.red{
  color:red;
}
label[for="checkbox"]{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:15px;
}
label[for="checkbox"] > div{
  width:100%;
  font-size:16px;
  font-weight:400;

}
label[for="checkbox"] > div #cbx-3{
  width:30px;
}
.loading {
  background: repeating-linear-gradient(-45deg,rgba(255,255,255, .1) 0 10px, rgba(255,255,255, 0)  0 25px) left/200% 100%;
  animation: l3 2s infinite linear forwards;
  display:none;
}
@keyframes l3 {
  from { background-position:0};
  to { background-position: -105px}
}
.corner{
  width:60px;
  height:60px;
  cursor:pointer;
  position:absolute;
  right:0;
  bottom:0;
}
#wasItMade *{
  font-size: 12px;
  margin:0 !important;;
  padding:0 !important;;
}

#wasItMade p{
  margin:0;
  display:block;
  height:1.8em;
  line-height:2em !important;;
}
#wasItMade a{
	color:#5bc0de;
	display:inline-block;
	line-height:0 !important;
}
#wasItMade span{
  line-height:0 !important;
}

#wasItMade br{
  display:none;
}
#day,
#month{
	//margin-right:5px;
}
.qr-sortout{

  border-top:1px solid #ccc;

  border-bottom:1px solid #ccc;
  padding:30px 0;
  margin-bottom:15px;
}
.qr-sortout .both-toggles{
    display:flex;
  justify-content: space-between;
  color:#0052a9;
}
label[for="override"]{
display:none;
}
label[for="override"] > div{
display:flex;
  align-items: center;
  justify-content: center;
  gap:20px;
}

.checkbox-wrapper-3 input[type="checkbox"],
.checkbox-wrapper-4 input[type="checkbox"] {
	visibility: hidden;
	display: none;
}
.checkbox-wrapper-3 .toggle,
.checkbox-wrapper-4 .toggle {
	position: relative;
	display: block;
	width: 40px;
	height: 20px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-3 .toggle:before,
.checkbox-wrapper-4 .toggle:before {
	content: "";
	position: relative;
	top: 3px;
	left: 3px;
	width: 34px;
	height: 14px;
	display: block;
	background: #9A9999;
	border-radius: 8px;
	transition: background 0.2s ease;
}
.checkbox-wrapper-3 .toggle span ,
.checkbox-wrapper-4 .toggle span {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	display: block;
	background: white;
	border-radius: 10px;
	box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
	transition: all 0.2s ease;
}
.checkbox-wrapper-3 .toggle span:before,
.checkbox-wrapper-4 .toggle span:before {
	content: "";
	position: absolute;
	display: block;
	margin: -18px;
	width: 56px;
	height: 56px;
	background: rgba(0, 123, 255, 0.5);
	border-radius: 50%;
	transform: scale(0);
	opacity: 1;
	pointer-events: none;
}
.checkbox-wrapper-3 #cbx-3:checked + .toggle:before,
.checkbox-wrapper-4 #cbx-4:checked + .toggle:before {
	background: #007bff;
	opacity:.5;
}
.checkbox-wrapper-3 #cbx-3:checked + .toggle span,
.checkbox-wrapper-4 #cbx-4:checked + .toggle span {
	background: #007bff;;
	transform: translateX(20px);
	transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
	box-shadow: 0 3px 8px rgba(0, 123, 255, 0.2);
}
.checkbox-wrapper-3 #cbx-3:checked + .toggle span:before,
.checkbox-wrapper-4 #cbx-4:checked + .toggle span:before {
	transform: scale(1);
	opacity: 0;
	transition: all 0.4s ease;
}
.checkbox-wrapper-4{
display:none;
}
.top-bar{
	left:0;
	top:0;
	width:100%;
  	/*! background:rgba(0, 123, 255, 0.1); */
	//mix-blend-mode: multiply;
	background: #0052a9;
}

.top-bar-inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	z-index:20;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar-inner,
.content-wrap-inner{
  padding:20px;
}
.top-bar-inner #search-icon svg{
	width:100%;
	height:100%;
	display:block;
}
.top-bar-inner #search-icon svg path{
	fill:#fff;
}
input{
border-radius:0;
}
.top-bar-inner #search-icon{
	width:32px;
	height:32px;
	min-width:34px;
	min-height:34px;
	max-width:34px;
	max-height:34px;
	padding:6px;
	//background:#007bff;
	display:block;
	cursor:pointer;
}
.top-bar-inner .search-bit{
  display:flex;
  justify-content:left;
  align-items: center;

}

.top-bar a {
  color:#bbb;
  display:block;
  margin-left:20px;
}
.top-bar-inner input{
	width:400px;
	outline:0;
	border:0;
	box-shadow:inset 0px 0px 0px 2px #bbb;
	padding:8px;
	-webkit-appearance: none;
	font-size:16px;
	background:#bbb;
}
.top-bar-inner input:focus{
  box-shadow:inset 0px 0px 0px 2px #007bff;
}

.modal,
.image-modal,
.edit-modal{
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:99;
	background:rgba(26,29,38,.8);
	transition:.2s;
	opacity:0;
	pointer-events:none;
}
.modal.open,
.image-modal.open,
.edit-modal.open{
	opacity:1;
	pointer-events:unset;
}
.edit-modal{
	background:rgba(0, 123, 255, 0.7);
}
.edit-modal #data2{
  width:100%;
  max-width:600px !important;
}
.edit-modal .edit-h1{
 margin:0;
  font-size:18px;
  color:rgba(0, 123, 255, 1);
  margin-bottom:20px;
}
.edit-modal label{
  color:rgba(0, 123, 255, 1);
}
.edit-modal .closer{
 position: absolute;
  right:0;
  top:0;
}
.edit-modal .entry-content{
  background:#fff;
  position: relative;
}
.image-modal{
  z-index:100;
}
.modal-inner{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%; 
	display:flex;
	justify-content: center;
	align-items: center;
	padding:20px;
	background:0;
}
.modal-inner #data{
  width:100%;
  max-width:1200px;
  background:#fff;
}
.image-modal .modal-inner #data{
  background:#fff;
  width:unset;
}
.entry{
  display:flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;
  padding:0 0 20px 0;
  margin-bottom:20px;
  align-content:flex-start
}
.modal .entry-content .entry > div > div > span{
  color: #5bc0de;
  display:block;
}
.entry > div{
  display:flex;
  width:100%;
  justify-content: space-between;
}
.entry-content{
  max-height:calc(100vh - 50px)
}
.image-modal .entry-content img:not(.thumb){
  display:block;
  width:100%;
max-width:596px;
}

body{
  overflow-x:hidden;
}
.entry > div > div{
  padding:20px;
  border-right:1px solid #d5d5d5;
}
.entry > div > div:last-of-type{
  border-right:none !important;;
}
.entry:last-of-type{
  border-bottom: unset;
  margin-bottom:0;
  padding-bottom:0;
}
.thumb{
	display:block;
	height:100px;
	filter:drop-shadow(0px 0px 1px rgba(0,0,0,1));
}


.modal-inner .heading-and-close{
  position:absolute;
  left:20px;
  top:0;
  width:calc(100% - 30px);
  display:flex;
  align-items: center;
  justify-content: space-between;
}
.modal-inner h2{
  color:#007bff;
  display:block;
}
#data{
  position: relative;
}
.modal .modal-inner .entry-content{
  overflow-y:scroll;
  padding:20px;
  margin-top:60px; 
  max-height:calc(100vh - 100px)
}
.image-modal .modal-inner .entry-content{
	overflow-y:hidden;
}
.modal .entry-content img{
	cursor:pointer;
}

.closer{
	width:30px;
	height:30px;
	cursor:pointer;
}
.closer{
  width:30px;
  height:30px;
  cursor:pointer;
}
.closer img{
  display:block;
  width:100%;
  height:100%;
}
.image-modal .closer{
  position: absolute;
  right:0px;
  top:20px;
}
.heading-and-close h2 span:nth-of-type(2){
  font-style:italic !important;
}
#suggestions-containery,
#suggestions-container-two{
  position: relative;
  z-index:8;
}
#suggestions-containery ul,
#suggestions-container-two ul{
	position: absolute;
	list-style: none;
	padding:0 0 0 10px;
	font-weight:400;
	font-size:14px;
	background:#fff;
	border:1px solid #ccc;
	box-shadow:0px 20px 20px 2px rgba(0,0,0,.4);
}
#suggestions-containery ul li,
#suggestions-container-two ul li{
padding:3px 0;
cursor:pointer;
}
.ui-helper-hidden-accessible{
  display:none;
}
select{
  -webkit-appearance: none;
  border:0;
  padding:8px 18px;
  cursor:pointer;
}
#date-wrap-one select:nth-of-type(2),
#date-wrap-one select:nth-of-type(3),
.first-day select:nth-of-type(2),
.first-day select:nth-of-type(3),
.second-day select:nth-of-type(2),
.second-day select:nth-of-type(3){
    //margin-left: -9px !important;
}


#date-wrap-one select:first-of-type,
#date-wrap-one select:nth-of-type(2),
.first-day select:first-of-type,
.first-day select:nth-of-type(2),
.second-day select:first-of-type,
.second-day select:nth-of-type(2){
  border-right:1px solid #ccc;
}
#date-wrap-one select,
.first-day select,
.second-day select{
    text-align:center;
}
.first-day select:first-of-type,
.second-day select:first-of-type{
  margin-left:0px !important;
  
}
label select{
  margin-left:0px !important;
  display:block;
}
#date-wrap-one select:first-of-type,
.first-day select:first-of-type,
.second-day select:first-of-type{
  z-index:3;
  position: relative
}
#date-wrap-one select:nth-of-type(2),
.first-day select:nth-of-type(2),

.second-day select:nth-of-type(2){
  z-index:2;
  position: relative
}
#date-wrap-one select:nth-of-type(3),
.first-day select:nth-of-type(3),
.second-day select:nth-of-type(3){
  z-index:1;
  position: relative
}

#date-wrap-one select:first-of-type{
  display:block;
}

#wasItMade img{
  margin-top:20px !important;
  width:100%;
  display:block;
  max-width:400px;
}
.highlightsearch{
  display:inline-block !important;
  color:#000 !important;
  position: relative;
}
.highlightsearch:before{
  content:"";
  position: absolute;
  left:-3px;
  top:0;
  width:calc(100% + 6px);
  height:100%;
  background:#e3ff3a;
  mix-blend-mode: multiply;
  border-radius:8px;
}
.dataname{
  white-space:nowrap !important;

}
.firstname,
.lastname{
  color:#000 !important;
  white-space:nowrap !important;
}

.datacompanyname span{
  display:inline-block !important;
}

#locationlabel{
  position: relative;
}
#locationlabel .bin{
  content:"";
  background:url(bin.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right:10px;
  top:14px;
  bottom:6px;
  width:19px;
  height:20px;
  display:block;
  cursor:pointer;
  image-rendering:pixelated
}
.code-wrap{
position: relative;
  width:100%;
}
.code-wrap:after{
	content:"";
	background-image:url(code-tick.svg);
	width:25px;
	height:23px;
	position: absolute;
	right:4px;
	bottom:5px;
	opacity:0
}
.code-wrap.show-tick:after{
	opacity:1;
}
.make-a-code{
  white-space: nowrap;
  background:#007bff;
  color:#fff;
  padding:4px 8px;
  border-radius:4px;
  font-weight:300;
}
#override{
margin:0
}
label[for="override"] > div{
  margin-top:5px;
}
.code-wrap .required{
  top:-15px;
  display:none;
}
.codearea.required{
display:none;

}
.orange{
  color:#ff6600;
}
.row .dustbin{
	width:19px !important;
	padding:0 20px;
	display:flex;
	align-items: center;
	justify-content: center;
}
.row .dustbin img{
  width:19px !important;;
  display:block !important;
}
.copy{
	display:flex;
	align-items: center;
	justify-content: center;
	width:unset;
}

.copy > span{
	background:rgba(0, 123, 255, 1);
	background:#0052a9;
	padding:8px 12px;;
	border-radius:8px;
	text-align: center;
	color:#fff !important;;
	font-size:12px;
	cursor:pointer;
  	display:flex !important;;
  align-items: center;
	justify-content: center;
}
.copy span img{
	width:16px;
	display:inline-block;
	margin-left:5px;
}
.edit-modal form{
  width:100%;
  padding:20px;
}
.row-number{
  width:0;
  height:0;
 overflow:hidden;
}
.copy-and-bin{
  display:flex;
  align-items: top;
  padding:0 !important;;
  justify-content: center;
  align-items: stretch;
}
.copy-and-bin .copy{
  margin-right:20px;
  border-right:1px solid #ccc;
}
.copy-and-bin .copy,
.copy-and-bin .dustbin{
  padding:20px;  align-items:flex-start;
}

.saved-item{
  background:#007bff;
  position: absolute;
  left:0;
  top:50%;
  padding:30px 50px 30px 100px;
  color:#fff;
  filter:drop-shadow(10px 10px 10px rgba(0,0,0,.4));
  transform: translate(-110%, -50%) ;
  transition:.5s;
  z-index:9999;
}
.saved-item.open{
  animation:saveanim 4s linear forwards
}
@keyframes saveanim {
	0%{ transform: translate(-110%, -50%) ;}
	15%{transform: translate(-24%, -50%); }
	75%{transform: translate(-24%, -50%); }
	100%{ transform: translate(-110%, -50%) ;}
}
#edit-form input{
background:#f7f7f7
}
.egg-timer{
  width:30px;
  display:flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  display:none;
}
.egg-timer-inner{
  width:100%;
  animation: spin 3s infinite linear forwards;
}
.egg-timer path{
  fill:#fff;
}
.svg-container{
  position: relative;
}
.svg-container .rod{
  position: absolute;
  content:"";
  background:#fff;
  left:50%;
  top:-19%;
  height:88%;
  width:2px;
  border-radius:1px;
}
.svg-container:first-of-type{

}
.svg-container:last-of-type{
margin-top:-1px
}

.svg-container .rod{
  animation:rodmove 3s infinite linear forwards;
  transform:translateX(-50%);
}
.svg-container:last-of-type .rod{
  animation-delay:1.5s;
  
}
@keyframes spin{
	0%{transform:rotate(0deg)}
	40%{transform:rotate(0deg)}
	50%{transform:rotate(180deg)}
	90%{transform:rotate(180deg)}
	100%{transform:rotate(360deg)}
}

.egg-timer-inner #part-one,
.egg-timer-inner #part-two{
  width:100%;
  display:block;
}
.egg-timer-inner .svg-container:first-of-type{
  transform:rotate(180deg);
}
.egg-timer-inner #part-one clipPath#a{
  animation: move-mask 3s infinite linear forwards;
}
.egg-timer-inner #part-two clipPath#b{
  animation: move-mask 3s infinite linear forwards;
     animation-delay:-1.6s !important;
}

.egg-timer-inner #part-one #sand-1{
  animation: move-sand 3s infinite linear forwards;
}
.egg-timer-inner #part-two #sand-2{
  animation: move-sand 3s infinite linear forwards;
  animation-delay:-1.6s !important;
}


@keyframes move-sand{
  0%{transform:translateY(0%)}
  41.99%{transform:translateY(0%)}
  42%{transform:translateY(80%)}
  90%{transform:translateY(0%)}
}

@keyframes move-mask{
	0%{transform:translateY(0%)}
	41.99%{transform:translateY(-60%)}
	42%{transform:translateY(-80%)}
	90%{transform:translateY(0%)}
}
@keyframes rodmove{
	0%{opacity:0;}
 49.999% {opacity:0;}
50%{opacity:1;}
}

@keyframes rodmove{
	0%{opacity:0;}
 49.999% {opacity:0;}
50%{opacity:1;}
  89.999%{opacity:1;}
  90%{opacity:0;}
}
#main-form{
padding-bottom:50px;
//margin-bottom:50px;
overflow-x:hidden;

}
#edit-form input{
background:#f7f7f7
}
#edit-form select option{
background:#0052a9;
  color:#fff;
}
.info-panel{
 /*! background: rgba(0, 123, 255, 0.1); */
  width:50%;
  padding:20px;
 background: rgba(255,255,255, .02);
}
.info-panel *{
 font-size:14px;
}
option{
  color:#000;
}
#datetime{
  color:#bbb;
  margin-bottom:20px;
}
@media (max-width: 600px) {
	form {
		//padding: 15px;
	}
}
@media (max-width: 720px) {
	.top-bar-inner {
		display:block;;
	}
}
@media (max-width: 900px) {
	form{
		width:100%;
	}
	.top-bar a{
		display:none;
	}
	#main-form{
		min-width:100%;
	}
}
@media screen and (max-width:1024px){
	.entry > div{
		display:block;
	}
	.entry > div div{
		padding:0 20px;
		margin-bottom:5px;
		border-right:0;
		font-size:14px;
	}
	.heading-and-close h2{
		font-size:16px;
	}
	.content-wrap{
		display:block;}
	}
	.content-wrap-inner{
	gap:0;
	}
.copy-and-bin{
  justify-content: left
}
}