html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-wrapper-14 input[type=checkbox] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .checkbox-wrapper-14 input[type=checkbox]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .checkbox-wrapper-14 input[type=checkbox]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .checkbox-wrapper-14 input[type=checkbox]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .checkbox-wrapper-14 input[type=checkbox]:disabled + label {
    cursor: not-allowed;
  }
  .checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .checkbox-wrapper-14 input[type=checkbox]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
    width: 21px;
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
    --o: 1;
  }
  .checkbox-wrapper-14 {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  .checkbox-wrapper-14 input[type=checkbox] + label {
    display: inline-block;
    cursor: pointer;
    flex: 1;
    line-height: 1.4;
  }

  .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .checkbox-wrapper-14 input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }
  .checkbox-wrapper-14 input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  .checkbox-wrapper-14 input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  .checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
}

.checkbox-wrapper-14 * {
  box-sizing: inherit;
}
.checkbox-wrapper-14 *:before,
.checkbox-wrapper-14 *:after {
  box-sizing: inherit;
}
  
  #astral-toggle-btn {
   filter: invert(100%);
}

.chat_message pre {
  margin-right: 5%;
}

/* Profile audio/video volume control — floats as a glass pill over the
   hero (cover image / einzwei video, or the solid theme header when there is
   no cover). Colours are background-independent (light on a dark scrim) so it
   stays legible over arbitrary cover art and on every theme. */
#profile-player {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 12;
	box-sizing: border-box;
	width: 188px;
	height: 34px;
	padding: 0 14px 0 32px;
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	cursor: pointer;
	transition: width 0.24s ease, padding 0.24s ease, border-radius 0.24s ease;

	i {
		position: absolute;
		/* 13px (not the geometric ~10px) optically centres the glyph in the 34px
		   collapsed circle: the speaker cone is a solid heavy mass on the left
		   while the sound waves are thin/light on the right, so the eye anchors on
		   the speaker — verified by rendering the real FA5 fa-volume-up glyph. */
		left: 10px;
		top: 50%;
		margin-top: -7px;
		font-size: 13px;
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}
}

/* Collapsed: a small circle showing only the volume icon. The icon stays at
   left:11px and the pill grows/shrinks rightward, so it reads as centred when
   collapsed and left-aligned when open — no icon repositioning to animate. */
#profile-player.collapsed {
	width: 34px;
	padding: 0;
	border-radius: 50%;
}

#profile-player.collapsed #profile-volume {
	opacity: 0;
	pointer-events: none;
}

#profile-volume {
	position: relative;
	flex: 1;
	margin: 0;
	min-width: 0;
	height: 5px;
	background: rgba(255, 255, 255, 0.28) !important;
	border-radius: 15px;
	transition: opacity 0.18s ease;

	.ui-slider-range-min {
		height: 5px;
		position: absolute;
		background: rgba(255, 255, 255, 0.92) !important;
		border: none;
		border-radius: 10px;
		outline: none;
	}

	.ui-slider-handle {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #fff !important;
		position: absolute;
		margin-left: -7px;
		margin-top: -5px;
		cursor: pointer;
		outline: none;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	}
}

/* Guarantee the hero is tall enough to host the pill when the user has music
   but no cover/video (the avatar alone gives ~170px; this is just a floor). */
.my_profile_top.has-volume {
	min-height: 150px;
}

/* No cover/video: the avatar sits at the top-left, so shift the pill to the
   right of the avatar column so it never covers it. */
.my_profile_top:not(.has-bg) #profile-player {
	left: 160px;
}

/* einzwei profile video: cover the hero like the cover image does
   (background-size: cover). Without this, a <video> defaults to letterbox
   (object-fit: contain): on narrow/mobile viewports the landscape clip leaves
   black bars top & bottom, and the volume pill ends up sitting in the top bar
   so it reads as an extension of the header. cover fills the hero on every
   viewport, so the pill floats over the video the same as on desktop. */
#einzwei {
	object-fit: cover;
}


.vpn_zone p {
  padding-top: 10px;
}

.vpn_zone img {
  max-width: 300px;
}

.vpn_zone .img {
  text-align: center;
}

.tab_menu ul li {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700
}


#astral_container {
  /* display: flex; */
  width: 100%;
  position: relative;
  overflow: auto;

  border: 1px solid lightgray;
}
@media only screen and (min-width: 768px) {
  #astral_container {
    /* height: 30%; */
  }
}

.brelative { position:relative; }
.record-circle {
    color:#ff0000!important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.counter_text {
/*    left: 14px;
    top: 6px;*/
    font-size:10px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
}

#astral_icon {
   width: 24px;
   padding-top: 8px;
}
.ranking_lm {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 17px;
}

.ulist_item {
    width: 100%;
    height: auto;
    table-layout: fixed;
    display: table;
    padding: 5px;
}

.score_lm {
    display: table-cell;
    vertical-align: middle;
    width: 70px;
    text-align: right;
    font-weight: bold;
    padding: 0 5px;
}

.th{
  /* Transparent text, should work on any background colour */
  color: rgba(0,0,0,0); 
  font-size: 0;
}

/* Profile "About me" — an editorial pull-quote instead of a labelled field
   row. No label at all: an oversized serif quote glyph bleeds off the top
   corner as a watermark so the user's words read as a personal statement.
   Theme-agnostic by design: the tint, accent bar and quote glyph all derive
   from neutral rgba / currentColor, so it adapts to all 15 themes (light &
   dark) with no per-theme overrides. */
.profile_about_card {
  position: relative;
  margin: 2px 0 16px;
  padding: 13px 16px 15px 18px;
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.09);
  border-left: 3px solid rgba(128, 128, 128, 0.4);
  overflow: hidden;
  animation: about-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Oversized opening quote as a watermark; clipped by the card's overflow so it
   bleeds off the top-right edge. currentColor keeps it tinted to each theme. */
.profile_about_card::before {
  content: "\201C";
  position: absolute;
  top: -34px;
  right: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 120px;
  line-height: 1;
  color: currentColor;
  opacity: 0.08;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.profile_about_body {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@keyframes about-rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rainbow {
  100% { filter: hue-rotate(360deg); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100%   { transform: rotate(360deg); }
}

@keyframes grow {
  0%   { font-size: none; }
  100%   { font-size: 80pt; }
}

@keyframes growback {
  0%   { font-size: none; }
  50%   { font-size: 30pt; }
  100%   { font-size: none; }
}

@keyframes blur {
  0%   { filter: blur(5px); }
  50%   { filter: blur(0px); }
  100%   { filter: blur(5px); }
}

@keyframes scale {
  0%   { transform: scale(1); }
  50%   { transform: scale(3); }
  100%   { transform: scale(1); }
}


@keyframes scale2x {
  0%   { transform: scale(1); }
  50%   { transform: scale(2); }
  100%   { transform: scale(1); }
}

/* spin & scale */
@keyframes spinscale {
  0%   { transform: rotate(0deg) scale(1); }
  50%   { transform: rotate(180deg) scale(3); }
  100%   { transform: rotate(360deg) scale(1); }
}

/* rainbow & blur */ 
@keyframes rainblur {
  0%   { filter: blur(0px); }
  50%   { filter: blur(5px); }
  100%   { filter: blur(0px) hue-rotate(360deg); }
}

@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.expand-button {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    background-size: contain;

    display: inline-block;
    margin-right: 6px;
    vertical-align: top !important;
    padding: 0px;
    cursor: pointer;
}

.expand-button.expanded {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxjaXJjbGUgY3g9IjExLjUiIGN5PSIxMS41IiByPSIxMS41IiBmaWxsPSJyZ2IoMjA0LCAyMDQsIDIwMSkiIC8+Cgk8ZwoJCXN0cm9rZT0id2hpdGUiCgkJc3Ryb2tlLXdpZHRoPSIzLjI1IgoJCXN0cm9rZS1saW5lY2FwPSJyb3VuZCIKCT4KCQk8bGluZSB4MT0iNy41IiB5MT0iNy41IiB4Mj0iMTUuNSIgeTI9IjE1LjUiIC8+CgkJPGxpbmUgeDE9IjE1LjUiIHkxPSI3LjUiIHgyPSI3LjUiIHkyPSIxNS41IiAvPgoJPC9nPgo8L3N2Zz4=);
}

.expand-button.expanded:hover {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxjaXJjbGUgY3g9IjExLjUiIGN5PSIxMS41IiByPSIxMS41IiBmaWxsPSJyZ2IoNzAsIDEwMSwgMTUzKSIgLz4KCTxnCgkJc3Ryb2tlPSJ3aGl0ZSIKCQlzdHJva2Utd2lkdGg9IjMuMjUiCgkJc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgoJPgoJCTxsaW5lIHgxPSI3LjUiIHkxPSI3LjUiIHgyPSIxNS41IiB5Mj0iMTUuNSIgLz4KCQk8bGluZSB4MT0iMTUuNSIgeTE9IjcuNSIgeDI9IjcuNSIgeTI9IjE1LjUiIC8+Cgk8L2c+Cjwvc3ZnPg==);
}


.expand-button.collapsed {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgcnk9IjIuNSIgZmlsbD0icmdiKDIwNCwgMjA0LCAyMDEpIiAvPgoJPGcgZmlsbD0id2hpdGUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CgkJPHBhdGgKCQkJZD0iCgkJCQlNNCw1IGwxLC0uNSBoMiBsMSwuNSBoMSBsMSwtMSBoMyBsMiwyIGgyCgkJCQl2OCBoLTEzegoJCQkJTTUsNiBoMiB2MSBoLTIgdi0xegoJCQkJTSAxMS41IDkuNSBtIC0zLjUsIDAgYSAzLjUsMy41IDAgMSwwIDcsMCBhIDMuNSwzLjUgMCAxLDAgLTcsMAoJCQkJTSAxMS41IDkuNSBtIC0yLjUsIDAgYSAyLjUsMi41IDAgMSwwIDUsMCBhIDIuNSwyLjUgMCAxLDAgLTUsMAoJCQkiCgkJLz4KCTwvZz4KCTxnIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiPgoJCTxsaW5lIHgxPSIxOC43NSIgeTE9IjE2LjUiIHgyPSIxOC43NSIgeTI9IjIxIiAvPgoJCTxsaW5lIHgxPSIxNi41IiB5MT0iMTguNzUiIHgyPSIyMSIgeTI9IjE4Ljc1IiAvPgoJPC9nPgo8L3N2Zz4=);
}

.expand-button.collapsed:hover {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgcnk9IjIuNSIgZmlsbD0icmdiKDcwLCAxMDEsIDE1MykiIC8+Cgk8ZyBmaWxsPSJ3aGl0ZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KCQk8cGF0aAoJCQlkPSIKCQkJCU00LDUgbDEsLS41IGgyIGwxLC41IGgxIGwxLC0xIGgzIGwyLDIgaDIKCQkJCXY4IGgtMTN6CgkJCQlNNSw2IGgyIHYxIGgtMiB2LTF6CgkJCQlNIDExLjUgOS41IG0gLTMuNSwgMCBhIDMuNSwzLjUgMCAxLDAgNywwIGEgMy41LDMuNSAwIDEsMCAtNywwCgkJCQlNIDExLjUgOS41IG0gLTIuNSwgMCBhIDIuNSwyLjUgMCAxLDAgNSwwIGEgMi41LDIuNSAwIDEsMCAtNSwwCgkJCSIKCQkvPgoJPC9nPgoJPGcgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CgkJPGxpbmUgeDE9IjE4Ljc1IiB5MT0iMTYuNSIgeDI9IjE4Ljc1IiB5Mj0iMjEiIC8+CgkJPGxpbmUgeDE9IjE2LjUiIHkxPSIxOC43NSIgeDI9IjIxIiB5Mj0iMTguNzUiIC8+Cgk8L2c+Cjwvc3ZnPg==);

}

img {
    image-orientation: from-image;
}

.bustate {
    font-size: 12px;
    height: 20px;
}
.bellips {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.rcorners {
    border-radius: 10px;
    border: 1px solid;
    padding: 5px;
}

.mafia_btn {
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 95px; 
  white-space: nowrap;
  border: 1px solid grey;
}

.akinator_btn {
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 95px; 
  white-space: nowrap;
  border: 1px solid grey;
}

.mafia-username { 
  border-bottom: 1px dotted; 
  /*text-decoration: none; */
  cursor: pointer; 
}

.astral-join { 
  border-bottom: 1px dotted; 
  /*text-decoration: none; */
  cursor: pointer; 
}

.testing123 {

  text-shadow: 0 0 10px #ffffff,
             0 0 20px  #ffffff,
             0 0 30px  #ffffff,
             0 0 40px  #228DFF,
             0 0 70px  #228DFF,
             0 0 80px  #228DFF,
             0 0 100px #228DFF,
             0 0 150px #228DFF;

             
}

.tribute-container {
  position: absolute;
  max-height: 300px;
  max-width: 500px;
  overflow: auto;
  display: block;
  z-index: 999999; 
}

.tribute-container ul {
  margin: 0;
  margin-top: 2px;
  padding: 0;
  list-style: none;
  background: #efefef; 
}

.tribute-container li {
  padding: 10px 10px;
  cursor: pointer; 
}
.tribute-container li.highlight, .tribute-container li:hover {
    background: #ddd; 
}
.tribute-container li span {
    font-weight: bold; 
}
.tribute-container li.no-match {
    cursor: default; 
}
.tribute-container .menu-highlighted {
  font-weight: bold; 
}


.product{display:flex;flex-flow:column wrap;padding:.2rem}
.text_title{display:flex;justify-content:space-between;padding:.1rem;align-items:center}
.sub_text{padding:.5rem}
.bought{font-size:.85rem;color:#096}
hr{border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(224,224,224,.1)}
.gradient-text { -webkit-background-clip: text !important;-webkit-text-fill-color: transparent !important;  } 
.user_lm_data .gradient-text { display: inline !important; }

.lightrope{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;margin:-20px 0;padding:0;pointer-events:none;width:100%;top:0;left:0;right:0}
.lightrope li{position:relative;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;list-style:none;padding:0;width:12px;height:28px;border-radius:50%;margin:20px;display:inline-block;background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s}
.lightrope li:after,.lightrope li:before{content:"";position:absolute}
.lightrope li:nth-child(2n+1){background:#0ff;box-shadow:0 4.67px 24px 3px rgba(0,255,255,.5);-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}
.lightrope li:nth-child(4n+2){background:#f70094;box-shadow:0 4.67px 24px 3px #f70094;-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}
.lightrope li:nth-child(odd){-webkit-animation-duration:1.8s;animation-duration:1.8s}
.lightrope li:nth-child(3n+1){-webkit-animation-duration:1.4s;animation-duration:1.4s}
.lightrope li:before{background:#222;width:10px;height:9.33px;border-radius:3px;top:-4.67px;left:1px}
.lightrope li:after{top:-14px;left:9px;width:52px;height:18.67px;border-bottom:solid #222 2px;border-radius:50%}
.lightrope li:last-child:after{content:none}
.lightrope li:first-child{margin-left:-40px}
@-webkit-keyframes flash-1{0%,100%{background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5}50%{background:rgba(0,247,165,.4);box-shadow:0 4.67px 24px 3px rgba(0,247,165,.2)}}
@keyframes flash-1{0%,100%{background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5}50%{background:rgba(0,247,165,.4);box-shadow:0 4.67px 24px 3px rgba(0,247,165,.2)}}
@-webkit-keyframes flash-2{0%,100%{background:#0ff;box-shadow:0 4.67px 24px 3px #0ff}50%{background:rgba(0,255,255,.4);box-shadow:0 4.67px 24px 3px rgba(0,255,255,.2)}}
@keyframes flash-2{0%,100%{background:#0ff;box-shadow:0 4.67px 24px 3px #0ff}50%{background:rgba(0,255,255,.4);box-shadow:0 4.67px 24px 3px rgba(0,255,255,.2)}}
@-webkit-keyframes flash-3{0%,100%{background:#f70094;box-shadow:0 4.67px 24px 3px #f70094}50%{background:rgba(247,0,148,.4);box-shadow:0 4.67px 24px 3px rgba(247,0,148,.2)}}
@keyframes flash-3{0%,100%{background:#f70094;box-shadow:0 4.67px 24px 3px #f70094}50%{background:rgba(247,0,148,.4);box-shadow:0 4.67px 24px 3px rgba(247,0,148,.2)}}


.giftbox,.viewbox,.sendbox {
    width: 100%;
    /*display: inline-block;*/
    justify-content: center;
    text-align: center;
}
.giftbox-gift,.viewbox-gift {
    width: 100px;
    text-align: center;
    padding: 20px 0;
    vertical-align: top;
    margin: 0 5px 10px 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    display: inline-block;
}

.giftbox-gift-img,.viewbox-gift-img {
    max-width: 96px;
    min-width: 48px;
    height: 96px;
    display: inline-block;
    line-height: 10px;
    white-space: nowrap;
    overflow: hidden;
    color: #b3b3b3;
    font-size: 0;
    background: none;

}

.sendbox-gift {
    width: 256px;
    text-align: center;
    padding: 20px 0;
    vertical-align: top;
    margin: 0 5px 10px 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    display: inline-block;
    border-radius: 4px;
}

.timer {
    border-radius: 15px;
    color: white;
    background-color: black;
    width: 150px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 3em;
}

#lotto_rules li, #parrot_settings li {
  padding: .5em;
}
#lotto_rules li .sub {
  padding-left: 2em;
}
#lotto_geeks li .sub {
  padding-top: .2em;
  padding-left: 2em;
}
.lotto_input {
  padding: 2px;
  width: 14%;
  display: inline-block;
  font-size: 1.6em;
  font-weight: bold;
  border: 1px solid;
  border-radius: 3px;

  margin-right: 4px;
  /*margin-top: 2px;*/
}
.ticket {
  padding-top: 4px;
  padding-bottom: 10px;
}
.center {
  text-align: center;
}

.lotto_ticket_number {
  display: inline-block;
  font-weight: bold;
  width: 22%;
}

.bold {
  font-weight: bold;
}

.lotto_winning_number {
  color: red;
}


/*BLACKJACK*/

.trow { display:table-row; }
.tcell { vertical-align:middle; display: table-cell;  padding-top: 4px; }

.suit {
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}


#bj_header, #bj_table {
    width: 100%;
    height: 210px;
    position: relative;
    display: table;
    table-layout: fixed;
    z-index: 99;

    /*border-bottom: 1px solid #ededed; */
}

#bj_header_content {
    display: table-row;
    text-align: center;
    width: 100%;
    height: 100%;
}

.bj_card_block {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.bj_control_element {
  padding-bottom: 2px;
  padding-top: 2px;
  width: 100%;
}

.bj_btn {
  width: 100%;
}

#bj_game_controls, #spinner, #bj_insurance_block, #bj_result_box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 120px;
}

#bj_start_controls {
    text-align: center;
    padding-top: 40px;
    display: inline-block;
    width: 200px;
}

.bj_block_text {
    padding-top: 10px;
}

.spinner_text {
    font-weight: bold;
}

.score {
    font-size: 1.0em;
}

#spectator_action {
  display: none;
  position: relative;
  top: 12px;
  height: 36px;
  font-size: 1.2em;
  font-weight: bold;
  /*color: green;*/
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 32px;
}
.lds-ellipsis div {
  position: absolute;
  top: 12px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D3D3D3;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}