#questsim-login {
	width: 100%;
	align-content: center;
	margin-top: 10px;
  margin-bottom: 10px;
}

#login-header-box {
	justify-self: right;
}

#logout-header-box{
	justify-self: right;
}

#login-quest-box {
	width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

#login-quest-button {
	background-color: var(--wp--preset--color--primary-hover);
  border-radius: 100px;
  border-width: 0;
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--superbfont-small);
  font-weight: 600;
  line-height: inherit;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;
  align-content: center;
}

#login-quest-button:hover {
  background-color: #9147ff;
	color: var(--wp--preset--color--white);
}

#login-header-button {
	background-color: var(--wp--preset--color--primary-hover);
  border-radius: 100px;
  border-width: 0;
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--superbfont-small);
  font-weight: 600;
  line-height: inherit;
	padding: 15px 25px 15px 25px;
  text-decoration: none;
}

#login-header-button:hover {
  background-color: #9147ff;
	color: var(--wp--preset--color--white);
}

#logout-header-button {	
	margin-bottom: 10px;
	margin-top: 10px;
	background-color: #2c2d30;
	border-width: 0;
	color: var(--wp--preset--color--mono-1);
	padding: 15px 25px 15px 25px;
	border-radius: 50vh;
	text-decoration: none;
}

#logout-header-button:hover {
	background-color:#353639;
}	

#emote-picker {
	background-color: rgb(31, 31, 35);
	z-index: 100000;
}

#emote-picker-search-box{
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .5);
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 0px;
	padding-top: 10px;
}

#emote-picker-search-icon-box{
	display: inline-flex;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	fill: #adadb8;
	left: 20px;
}

#emote-picker-search-icon{
	height: 30px;
	width: 30px;
}

#emote-picker-search{
	vertical-align: middle;
	height: 56px;
	padding-left: 50px;
	width: calc(100% - 85px);
}

#emote-picker-close{
	background-color: transparent;
	border: none;
	border-radius: 4px;
	vertical-align: middle;
	margin-left: 10px;
	width: 56px;
	height: 56px;
}

#emote-picker-close-icon-box{
	display: flex;
	align-items: center;
	justify-content: center;
}

#emote-picker-close-icon{
	fill: #efeff1;
	width: 40px;
	height: 40px;
}

#emote-grid-box{}

.emote-grid{
	display: grid;
	place-items: center;
	gap: 10px;
}

ul.emote-grid {
	list-style-type: none;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(50px, 1fr));
}

.emote-grid li {
	text-align: center;
	padding: 0;
}

ul.emote-grid li label {
	max-width: 50px;
	max-height: 50px;
	display: inline-block;
}

ul.emote-grid li img {
	max-width: 50px;
	max-height: 50px;
	object-fit: contain;
	width: auto;
	height: auto;
	display: inline-block;
}

.emote-item{}

.emote-item input[type="radio"]:checked + img {
    border: 2px solid rgb(169, 112, 255);
    border-radius: 4px;
    padding: 1px;
}

.emote-item label {
	cursor: pointer;
}

.emote-name{}

.emote{}

@media screen and (max-width: 767.99px) {
	#emote-picker {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#emote-picker-search-box{}

	#emote-picker-search-icon-box{
		left: 20px;
	}

	#emote-picker-search-icon{
	}

	#emote-picker-search {
	}

	#emote-picker-close {
		width: 56px;
		height: 56px;
	}

	#emote-picker-close-icon-box{}

	#emote-picker-close-icon{
	}

	#emote-grid-box{
		height: calc(100% - 95px);
		overflow-y: scroll;
		margin: 10px;
	}

	.emote-grid {
		grid-template-columns: auto auto auto auto auto auto;
	}

	.emote-item{}

	.emote {
		max-width: 100%;
	}
}

@media screen and (min-width: 768px) {
	#emote-picker{
		position: absolute;
		border-radius: 6px;
		box-shadow:rgba(0, 0, 0, 0.4) 0px 4px 8px 0px, rgba(0, 0, 0, 0.4) 0px 0px 4px 0px;
	}

	#emote-picker-search-box{}

	#emote-picker-search-icon-box{}

	#emote-picker-search-icon{}

	#emote-picker-search {}

	#emote-picker-close{
		padding: 0;
	}

	#emote-picker-close-icon-box{}

	#emote-picker-close-icon{
	}

	#emote-grid-box{
		height: 400px;
		overflow-y: scroll;
	}

	.emote-grid{
		grid-template-columns: 56px 56px 56px 56px 56px 56px;
		margin: 10px;
	}
	
	.emote-item {
		width:56px;
		height:56px;
	}
	
	.emote{
		max-width: 56px;
		max-height: 56px;
	}
}



#quest-euro {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: fit-content;
	font-size:  var(--wp--preset--font-size--superbfont-medium);
}

.grayed-out {
    opacity: 0.2;
	filter: grayscale(75%);
}

.grayed-out label {
    cursor: not-allowed !important;
}

.grayed-out input {
    pointer-events: none;
}

.quantity {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

#quest-reward {
  width: 100px;
	height:56px;
  float: left;
}

#questsim-reward {
	padding-right: 1em;
}

#questsim-paypal,
#questsim-paypal-text,
#questsim-paypal-map {
	filter: saturate(2) hue-rotate(54deg) brightness(.92) opacity(.95);
	width:100%;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 100%;
}

.quantity-button {
  position: relative;
  cursor: pointer;
		  border: 0;
  text-align: center;
  color: #efeff1;
	  width: 21px;
  font-size: 13px;
  padding: 0;
	margin-top:1px;
	margin-bottom:1px;
  background: rgba(83, 83, 95, 0.38);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button:hover {
  background: rgba(83, 83, 95, 0.48);
}

.quantity-button:active {
  background: #9147ff;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 4px 0 0;
  line-height: 1.6
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: 0;
  height: 50%;
  border-radius: 0 0 4px 0;
}

body{
	color:gray;
	line-height: 100%;
}


.questsim-row{
	display: flex;
	margin-bottom:1em;
}

#selected-emote, /* Keep for potential other uses or backward compatibility if any */
#selected-emote-text,
#selected-emote-map {
	width:56px;
	height:56px;
	padding-right:1em;
    /* Ensure cursor pointer is set for these images as they are part of the clickable area */
    cursor: pointer;
}

#questsim-title{
	width: 100%;
}

#quest-title {
	height:56px;
}

#questsim-text{
	width:100%;
}

#quest-text {
	height:100%;
}

#selected-emote-img{
	max-width:50px;
	max-height:50px;
}
	
#emote-picker-search-box {
	position: relative;
}

#emote-picker-search-box .questsim-data {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
}

#emote-picker-search-box .questsim-data svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

#emote-picker-close:hover {
	background-color:rgba(83, 83, 95, 0.48);
}

#questsim-icon-search {
	color: #adadb8;
}

#badge-box{
	position: relative;
}

#questsim-badge-buttom {
	position:absolute;
	left: 5px;
	top: -55px;
	width: 50px;
	height: 50px;
}

#questsim-badge-top {
	height: 25px;
	width: 25px;
}

.questsim-input {
	height: 100%;
	width: 100%;
	background-color: rgb(24, 24, 27);
	border-radius: 4px;
	border: solid 0px transparent;
	box-shadow: rgba(222, 222, 227, 0.4) 0px 0px 0px 1px inset;
	outline: 0px;
	color:rgb(239, 239, 241) !important;
	resize: none;
	box-sizing:border-box;
	font-size: var(--wp--preset--font-size--superbfont-medium);
	padding: .5em .5em .5em .5em;
}

.questsim-input::placeholder {
	color:#adadb8;
}

.questsim-input:hover {
	box-shadow:rgba(222, 222, 227, 0.4) 0px 0px 0px 2px inset;
	outline: 0px;
    color: #efeff1;
}

.questsim-input:focus {
	box-shadow: rgb(169, 112, 255) 0px 0px 0px 2px, rgb(169, 112, 255) 0px 0px 0px 2px inset;
	outline: 0px;
    color: #efeff1;
	border-color: rgb(169, 112, 255);
}

input[type="radio"] {
	display: none;
}

li:has(input[type="radio"]:checked) img {
	border: 2px solid red;
	background-color: blue;
}

#quest-submit {
	background: #ffc439;
	text-align: center;	
	height: 35px;
	width: 200px;
	border-radius: 4px;
	border: none;
	padding: unset;
}

#quest-submit:hover {
	box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.05);
}

.paypal-button-logo {
	height: 17px;
	max-height: 21px;
	min-height: 14px;
	vertical-align:middle;
}

.wpcf7-spinner {
	display:none !important;
}

.wpcf7-form-control-wrap{
	width:100%;
}

.questsim-data {
	fill:#efeff1;
	display: inline-flex;
	align-items: center;
}

#questsim-followed_at {
	display: inline;
	justify-content: center;
	margin: 0;
	font-size: 1rem;
}

#questsim-created_at {
	display: inline;
	justify-content: center;
	margin: 0;
	font-size: 1rem;
}

#questsim-followers {
	display: inline;
	justify-content: center;
	margin: 0;
	font-size: 1rem;
}

#quest-avatar {
	border-radius: 100px;
}

#quest-username {
    max-width: 230px;
    text-align: center;
	font-size: 30px;
	overflow: hidden;
	white-space: nowrap;
}

[type=number]::-webkit-textfield-decoration-container {
	flex-direction: row-reverse;
}

#quest-reward-euro {
	font-size: 30px;
	margin: 0;
	color:#fff;
}

#questsim-button-accept {
	width: 150px;
	background: #5B9B31;
    color: #FFFFFF!important;
	border: 1px solid rgba(0,0,0,.08);
    border-bottom-color: rgba(0,0,0,.1);
    text-shadow: 0 1px 0 rgba(0,0,1,.1);
    box-shadow: 0 1px 3px rgba(0,0,1,.25), inset 0 1px 0 0 rgba(255,255,255,.15);
	padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

#questsim-button-decline {
	width: 150px;
	background: #B21F1F;
    color: #FFFFFF!important;
	border: 1px solid rgba(0,0,0,.08);
    border-bottom-color: rgba(0,0,0,.1);
    text-shadow: 0 1px 0 rgba(0,0,1,.1);
    box-shadow: 0 1px 3px rgba(0,0,1,.25), inset 0 1px 0 0 rgba(255,255,255,.15);
	padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

.questsim {
	display: flex;
	width: 800px;
	background-color:#18181b;
	border-radius:	0.6rem;
	color:#efeff1;
	font-family: "Roobert", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.heateor_sl_login_container{
 	display: flex;
}

#questsim-row1 {
	height: 50px;
}

#questsim-row2 {
	height: 200px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#questsim-row3 {
	height: 50px;
}

#questsim-row4 {
	display: flex;
	overflow: hidden;
	max-width: 260px;
    align-items: center;
}

#questsim-row5 {
}

#questsim-row6 {
}

.questsim-col {
}

#questsim-col1 {
	width:100%;
	margin:10px;
	padding:10px;
}

#questsim-col2 {
	display:flex;
	width: 400px;
	flex-direction: column;
	align-items: center;
	margin-left:0px;
	padding:10px;
	background-color:#1f1f23;
	border-radius: 0 0.6rem 0.6rem 0;
}

#questsim-col3 {
	display: flex;
	box-sizing: unset;
	flex: none;
	width: 50px;
	padding-right:10px;
}

#questsim-col4 {
	width: 100%;
}

#questsim-col5 {
	width: 100px;
}

#questsim-col7 {
	text-align:center;
	align-content: center;
	width: 100%;
}

#questsim-col8 {
	text-align:center;
}

/* Styles for disabled PayPal button container */
.paypal-disabled-container {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed; /* Give a visual cue over the container itself */
}