*, div, span {
    transition: all .25s ease;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
 -o-transition: all .25s ease;
opacity: 1;

user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}



#loadImage{
display: none;
}
body{
padding: 0px;
height: 100vh;
background-color: #efefef;
margin: 0;
color: #323232;
font-family: Monospace;
font-size: 15px;
overscroll-behavior: none;
}

.circle{
border:1px solid #004d73;
border-radius:50%;
background:rgba(0, 0, 0, 0);
color:white;
width: 3em;
height: 3em;
z-index: 1;
/* visibility: Hidden; */
}

.notice_use {
position: fixed;
z-index: 2 !important;
width: 100%;
color: #fff;
padding: 30px 0px;
text-align: center;
top: -5px;
background: linear-gradient(0deg, transparent, black);
font-size: 0.85em;
}

.noticeicon {
max-width: 30px;
vertical-align: middle;
margin-left: 10px;
}


#launchBtn{
width: 100vw;
height: 100%;
position: absolute;
/*left: 50%;
bottom: 14%; */
/* z-Index: 1; */
display:flex;
flex-direction: column ;
justify-content: flex-end;
align-items: center;
background-image: linear-gradient(0deg, #00000059, transparent , transparent , transparent);
/* margin-left: -4.2em;
margin-bottom: -2.8em; */


}

#taskbar {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 1;
bottom: 0;
width: 100vw;
height: 60px;
background-color: #333;
padding: 0 20px;
box-sizing: border-box;
}

#innerSwiperCircle{

border: 1px dashed rgb(255 255 255);
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
margin-bottom: 25.5px;
background: rgba(0,0,0,0.2);
box-shadow: 0px 0px 20px #0000007d;
}
#assetsCircle{
border: 1px dashed rgb(255 255 255);
border-radius: 50%;
width: 69px;
height: 69px;

/* z-index: 999; */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 8vh;
background: radial-gradient(circle, rgba(255, 255, 255, 0.062) 60%, rgba(0, 0, 0, 0.011) 60%);
box-shadow: 0px 0px 20px #0000007d;
}
#groupButton, #groupButtonR{
position: absolute;
z-index: 999;
bottom: 119px;
height: 50px;
left: 0;
max-width: 50px;
}
#groupButtonR{
right: 50%;
z-index: 9;
margin-right: -26px;
left: auto;
margin-bottom: 5px;
}
.hiddeIcon {
opacity: 0;
}
.iconButton{
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
background-color: rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px #0000007d;
width: 3rem;
height: 3rem;
padding: 0 3px 0px 0px;
margin-left: -4px;
border: 0;
float: left;
z-index: 101;
}
.iconButton img{
opacity: 0.8;
max-width: 28px;
}

#groupButtonR .iconButton {
border-radius: 50%;
padding: 0px;
z-index: 101;
border: solid 1px #fff;
background-color: #ffffff1f;
}

.recorder-container {
position: fixed;

width: 50px !important;
height: 50px  !important;
max-width: 10em;
max-height: 10em;
bottom: 0vmin !important;
left: 50%;
transform: translateX(-50%);
z-index: 20;
transition: 0.5s opacity;
}
.bottom-bar {
display: flex;
align-items: center;
bottom: 0;
width: 100vw;
height: 60px;
margin: 0 0;
background-color: #333;
box-sizing: border-box;
}
#muteButton {
position: fixed;
top: 2vh;
z-index: 2;
left: 4vw;
background-color: rgba(255, 255, 255, 0.8);
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#shareButton{
position: fixed;
top: 2vh;
z-index: 2;
right: 4vw;
background-color: rgba(255, 255, 255, 0.8);
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
#actionButton {
margin-right: 1vh;
padding: 0.3em 0.5em 0.3em 0.5em;
user-select: none;
-webkit-user-select: none;
font-family: 'Nunito', sans-serif;
text-align: right;
color: black;
background-color: #ffffff;
border-radius: 0.5em;
font-size: 5vmin;
min-width: 3.25em;
}
#actionButtonImg{
filter: invert(100%);
-webkit-filter: invert(100%);
}
.landing8-attribution-logo{
visibility: Hidden;
}

.landing8-logo{
position: absolute;
margin-top: 4em;
}

.hidden {
display: none !important;
transition: all .25s ease;
}

#splashimage {
z-index: 998;
height: 100%;
position: relative;
background-color: #004C73;
}

#cameraInst {
color: white;
background: #f5f5f578;
border-radius: 50px;
font-size: 10px;
text-align: center;
position: absolute;
width: 90px;
height: 17px;
bottom: 86%;
left: 50%;
transform: translateX(-50%);
max-width: 90px;
max-height: 17px;
}

#start {
z-index: 999;
background-color: #1ea9a1;
color: white;
padding: 0.7rem 1rem;
border-radius: 7px;
text-decoration: none;
display: inline-block  !important;
margin: 3px;
min-width: 190px;
font-size: 0.9em;
text-transform: uppercase;
font-family: system-ui;
}
h2 {
font-size: 1.3em;
text-align: center;
font-family: monospace;
}

#requestingCameraPermissions{
visibility: Hidden;
}
#requestingCameraIcon{
visibility: Hidden;
}
#loadBackground{
background-color: #004C73;
}

.prompt-box-8w{
background-color: #004C73 !important;
/* position: relative; */
overflow: visible  !important;
}
.prompt-button-8w{
background-color: #007bff00 !important;
overflow: hidden !important;
}

.prompt-button-8w:first-child:after {
content: '';
position: absolute;
height: 10px;
border-left: 3px solid #fff;
transform: rotate(45deg);
top:4%;
right: 3%;
}

.prompt-button-8w:first-child:before {
content: '';
height: 10px;
border-left: 3px solid #fff;
position: absolute;
transform: rotate(-45deg);
top:4%;
right: 3%;
}
.button-primary-8w{
position: absolute;
background-color: white !important; 
color: black;
right: 35%;
}

#userPromptError{
background-color: #004C73 !important;
}

#reloadButton {
background-color: white !important; 
color: black;
}

.recorder-container{
width: 125px;
height: 125px;
visibility: hidden;
/* left:50.15%; */

}
.poweredby-img{
visibility: hidden !important;
}

.logo-center {
position: absolute;
width: 100%;
top: 20%;
text-align: center;
}

.logo-center img {
text-align: center;
max-width: 200px;
vertical-align: middle;
}

.logo-center img.small {
max-width: 70px;
margin-top: 100px;
}

.logo-center a.btn {
background-color: #ddd;
color: #666;
padding: 0.7rem 1rem;
border-radius: 7px;
text-decoration: none;
display: inline-block  !important;
margin: 3px;
min-width: 190px;
font-size: 0.9em;
text-transform: uppercase;
font-family: system-ui;
}


.swiper {
width: 80px; /*MUST THE SAME THAT tap-place-assetS.js : ew Swiper(".mySwiper", {}) Witdh Params */
height: 125px;
/* position: absolute;
top: 16vw;
left: 25vw;*/
/* margin-bottom: 12px; */
overflow: visible;
}

.innerSlide{
height: 40px;
background-color: rgb(255, 241, 118);
z-index: 1;
border-radius:50%;
color:white;
left: 1.35em;
bottom: -28.5px;
}

.outerSlide{
border: 1px solid;
border-radius: 50%;

}


.swiper-slide {
text-align: center;
font-size: 1.1em;
border-radius:50%;
font-weight: bolder;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-slide img, .swiper-slide svg {
border-radius: 50%;
max-width: 68px;
position: absolute;
background: #0000002b;
padding: 3px;
}

.swiper-v {
bottom: 153px;
height: auto;
width: auto;
left: -4.5px;
position: absolute;
z-index: 99999 !important;
}

.swiper-slide {
opacity:0.5;
transform: scale(0.9) !important;
filter: saturate(0.3) blur(1px);
}

.swiper-slide-prev, .swiper-slide-next {
opacity:0.7;
transform: scale(0.95) !important;
filter: saturate(0.6) blur(0.5px);
}

.swiper-slide-active {
opacity:1;
transform: scale(1) !important;
filter: saturate(1.5) blur(0px);
}

.swiper-slide-prev img, .swiper-slide-next img, .swiper-slide img, .swiper-slide-active img {
transition: all .25s ease;
}

.swiper-slide-next img {
margin-left: 16px;
}

.swiper-slide-prev img {
margin-right: 16px;
}

.swiper-container {
width: 100%;
}
.swiper-wrapper {
width: 50%;
}
.swiper-slide {
text-align: center;
width: auto;
}
.slide-image {
height: 400px;
width: auto;
}
.mySwiper figure, .mySwiper1 figure, .mySwiper2 figure {
margin: 0px;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: -10px;
left: -10px;
width: 160%;
}

.swiper-pagination-bullet {
border-radius: 0px !important;
}

.swiper-pagination-bullet-active {
background: #fff;
}


#groupButton, #innerSwiperCirclenn #mySwiperMaster, #noticeUsen, #assetsCircle, #groupButtonR {
transition: all .25s ease;
}

#previewContainer {
background: #00000057;
}

.ads_message {
background: linear-gradient(0deg, transparent, transparent, #0000005c);
top: 45vh;
position: absolute;
text-align: center;
padding-top: 5rem;
letter-spacing: 1px;
font-size: 1.1em;
width: 100%;
border-top: dashed 1px #fff;
font-family: system-ui;
}

.overlayGradient {
background: green;
}

#microphonePermissionsErrorApple,
#cameraPermissionsErrorAndroid,
#microphonePermissionsErrorAndroid,
#cameraPermissionsErrorApple{
background-color: #004C73 !important;
}

/* STOPWATCH */
#wrapper {
z-index: 99999 !important;
width:260px;
margin:100px auto;
}

/* general item styles */
#wrapper .digit {
z-index: 99999 !important;
position:relative;
float:left;
width:30px;
height:40px;
box-shadow:0 0 4px rgba(0,0,0,.5);
margin:0 4px;
}
#wrapper .particle {
z-index: 99999 !important;

position:absolute;
background:#004C73;
box-shadow:0 0 5px #004C73;
}
#wrapper .separator {
z-index: 99999 !important;

position:relative;
float:left;
width:8px;
margin:0 4px;
}
#wrapper .dot {
z-index: 99999 !important;

width:8px;
height:8px;
background:#004C73;
box-shadow:0 0 5px #004C73;
border-radius:4px;
}
#wrapper input {
z-index: 99999 !important;

display:none;
}
#wrapper label, label:before, #fakeStop {
z-index: 99999 !important;
display:block;
position:absolute;
margin:3px 0 0 -50px;
padding:1px 3px;
background:#004C73;
border-radius:2px;
width:32px;
font-size:9px;
cursor:pointer;
}
#fakeStop {
z-index: 99999 !important;
cursor:default;
opacity:.4;
}
#wrapper label:before {
content:attr(data-title);
margin:-1px 0 0 -3px;
}
#wrapper label[for=button2], #fakeStop {
margin-top:24px;
}
#wrapper label[for=button2], #wrapperlabel:before,
#button1:checked ~ #fakeStop {
display:none;
}
#button2:checked ~ #wrapper label[for=button2] {
margin-top:3px;
}
#button1:checked ~  #wrapper label[for=button1]:before,
#button1:checked ~ #wrapper label[for=button2],
#button2:checked ~ #wrapper label[for=button2]:before,
#button1:checked ~ #button2:checked ~ #fakeStop {
display:block;
}

/* positioning & dimensions */
.top {
top:0;
}
.bottom {
bottom:0;
}
.left {
left:0;
}
.right {
right:0;
}
.middle {
top:17px;
}
.particle.top, .particle.middle, .particle.bottom {
width:14px;
height:5px;
margin:0 0 0 8px;
}
.particle.middle {
height:6px;
}
.particle.right, .particle.left {
width:5px;
height:8px;
margin:7px 0 0 0;
}
.particle.bottom.right, .particle.bottom.left {
margin:0 0 7px 0;
}
.dot.top {
margin-top:8px;
}
.dot.bottom {
margin-top:8px;
}

/* corners */
.particle:before, .particle:after {
content:'';
position:absolute;
z-index:2;
display:block;
width: 0px;
height: 0px;
border-style: solid;
}
.particle.top:before {
margin:0 0 0 -5px;
border-width: 0 5px 5px 0;
border-color: transparent #004C73 transparent transparent;
}
.particle.top:after {
margin:0 0 0 14px;
border-width: 5px 5px 0 0;
border-color: #004C73 transparent transparent transparent;
}
.particle.top.right:before {
margin:-5px 0 0 0;
border-width: 0 0 5px 5px;
border-color: transparent transparent #004C73 transparent;
}
.particle.top.right:after {
margin:8px 0 0 0;
border-width: 0 5px 3px 0;
border-color: transparent #004C73 transparent transparent;
}
.particle.top.left:before {
margin:-5px 0 0 0;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #004C73;
}
.particle.top.left:after {
margin:8px 0 0 0;
border-width: 3px 5px 0 0;
border-color: #004C73 transparent transparent transparent;
}
.particle.middle:before {
margin:0 0 0 -5px;
border-width: 3px 5px 3px 0;
border-color: transparent #004C73 transparent transparent;
}
.particle.middle:after {
margin:0 0 0 14px;
border-width: 3px 0 3px 5px;
border-color: transparent transparent transparent #004C73;
}
.particle.bottom.right:before {
margin:-3px 0 0 0;
border-width: 0 0 3px 5px;
border-color: transparent transparent #004C73 transparent;
}
.particle.bottom.right:after {
margin:8px 0 0 0;
border-width: 0 5px 5px 0;
border-color: transparent #004C73 transparent transparent;
}
.particle.bottom.left:before {
margin:-3px 0 0 0;
border-width: 3px 0 0 5px;
border-color: transparent transparent transparent #004C73;
}
.particle.bottom.left:after {
margin:8px 0 0 0;
border-width: 5px 5px 0 0;
border-color: #004C73 transparent transparent transparent;
}
.particle.bottom:before {
margin:0 0 0 -5px;
border-width: 0 0 5px 5px;
border-color: transparent transparent #004C73 transparent;
}
.particle.bottom:after {
margin:0 0 0 14px;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #004C73;
}

/* animations */
@keyframes initial-visible {
0% {opacity:1;}
100% {opacity:1;}
}

@keyframes initial-hidden {
0% {opacity:.1;}
100% {opacity:.1;}
}

@keyframes flash {
0% {opacity:1;}
49.999% {opacity:1;}
50% {opacity:.1;}
100% {opacity:.1;}
}

@keyframes top-10 {
0% {opacity:1;}
9.999% {opacity:1;}
10% {opacity:.1;}
19.999% {opacity:.1;}
20% {opacity:1;}
30% {opacity:1;}
39.999% {opacity:1;}
40% {opacity:.1;}
49.999% {opacity:.1;}
50% {opacity:1;}
60% {opacity:1;}
70% {opacity:1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes top-right-10 {
0% {opacity:1;}
10% {opacity:1;}
20% {opacity:1;}
30% {opacity:1;}
40% {opacity:1;}
49.999% {opacity:1;}
50% {opacity:.1;}
60% {opacity:.1;}
69.999% {opacity:.1;}
70% {opacity:1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes top-left-10 {
0% {opacity:1;}
9.999% {opacity:1;}
10% {opacity:.1;}
20% {opacity:.1;}
30% {opacity:.1;}
39.999% {opacity:.1;}
40% {opacity:1;}
50% {opacity:1;}
60% {opacity:1;}
69.999% {opacity:1;}
70% {opacity:.1;}
79.999% {opacity:.1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes middle-10 {
0% {opacity:.1;}
10% {opacity:.1;}
19.999% {opacity:.1;}
20% {opacity:1;}
30% {opacity:1;}
40% {opacity:1;}
50% {opacity:1;}
60% {opacity:1;}
69.999% {opacity:1;}
70% {opacity:.1;}
79.999% {opacity:.1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes bottom-right-10 {
0% {opacity:1;}
10% {opacity:1;}
19.999% {opacity:1;}
20% {opacity:.1;}
29.999% {opacity:.1;}
30% {opacity:1;}
40% {opacity:1;}
50% {opacity:1;}
60% {opacity:1;}
70% {opacity:1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes bottom-left-10 {
0% {opacity:1;}
9.999% {opacity:1;}
10% {opacity:.1;}
19.999% {opacity:.1;}
20% {opacity:1;}
29.999% {opacity:1;}
30% {opacity:.1;}
40% {opacity:.1;}
50% {opacity:.1;}
59.999% {opacity:.1;}
60% {opacity:1;}
69.999% {opacity:1;}
70% {opacity:.1;}
79.999% {opacity:.1;}
80% {opacity:1;}
89.999% {opacity:1;}
90% {opacity:.1;}
100% {opacity:.1;}
}
@keyframes bottom-10 {
0% {opacity:1;}
9.999% {opacity:1;}
10% {opacity:.1;}
19.999% {opacity:.1;}
20% {opacity:1;}
30% {opacity:1;}
39.999% {opacity:1;}
40% {opacity:.1;}
49.999% {opacity:.1;}
50% {opacity:1;}
60% {opacity:1;}
69.999% {opacity:1;}
70% {opacity:.1;}
79.999% {opacity:.1;}
80% {opacity:1;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes top-6 {
0% {opacity:1;}
16.665% {opacity:1;}
16.666% {opacity:.1;}
33.332% {opacity:.1;}
33.333% {opacity:1;}
50% {opacity:1;}
66.665% {opacity:1;}
66.666% {opacity:.1;}
83.332% {opacity:.1;}
83.333% {opacity:1;}
100% {opacity:1;}
}
@keyframes top-right-6 {
0% {opacity:1;}
16.666% {opacity:1;}
33.333% {opacity:1;}
50% {opacity:1;}
66.666% {opacity:1;}
83.332% {opacity:1;}
83.333% {opacity:.1;}
100% {opacity:.1;}
}
@keyframes top-left-6 {
0% {opacity:1;}
16.665% {opacity:1;}
16.666% {opacity:.1;}
33.333% {opacity:.1;}
50% {opacity:.1;}
66.665% {opacity:.1;}
66.666% {opacity:1;}
83.333% {opacity:1;}
100% {opacity:1;}
}
@keyframes middle-6 {
0% {opacity:.1;}
16.666% {opacity:.1;}
33.332% {opacity:.1;}
33.333% {opacity:1;}
50% {opacity:1;}
66.666% {opacity:1;}
83.333% {opacity:1;}
100% {opacity:1;}
}
@keyframes bottom-right-6 {
0% {opacity:1;}
16.666% {opacity:1;}
33.332% {opacity:1;}
33.333% {opacity:.1;}
49.999% {opacity:.1;}
50% {opacity:1;}
66.666% {opacity:1;}
83.333% {opacity:1;}
100% {opacity:1;}
}
@keyframes bottom-left-6 {
0% {opacity:1;}
16.665% {opacity:1;}
16.666% {opacity:.1;}
33.332% {opacity:.1;}
33.333% {opacity:1;}
49.999% {opacity:1;}
50% {opacity:.1;}
66.666% {opacity:.1;}
83.333% {opacity:.1;}
100% {opacity:.1;}
}
@keyframes bottom-6 {
0% {opacity:1;}
16.665% {opacity:1;}
16.666% {opacity:.1;}
33.332% {opacity:.1;}
33.333% {opacity:1;}
50% {opacity:1;}
66.665% {opacity:1;}
66.666% {opacity:.1;}
83.332% {opacity:.1;}
83.333% {opacity:1;}
100% {opacity:1;}
}

.particle, .separator {
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;
}
.particle.top { animation-name: top-10; }
.particle.top.right { animation-name: top-right-10; }
.particle.top.left { animation-name: top-left-10; }
.particle.middle { animation-name: middle-10; }
.particle.bottom.right { animation-name: bottom-right-10; }
.particle.bottom.left { animation-name: bottom-left-10; }
.particle.bottom { animation-name: bottom-10; }

.d6 .particle.top { animation-name: top-6; }
.d6 .particle.top.right { animation-name: top-right-6; }
.d6 .particle.top.left { animation-name: top-left-6; }
.d6 .particle.middle { animation-name: middle-6; }
.d6 .particle.bottom.right { animation-name: bottom-right-6; }
.d6 .particle.bottom.left { animation-name: bottom-left-6; }
.d6 .particle.bottom { animation-name: bottom-6; }

.dp1 .particle { animation-duration: .1s; }
.dp10 .particle { animation-duration: 1s; }
.dp100 .particle { animation-duration: 10s; }
.dp1000 .particle { animation-duration: 60s; }
.dp10000 .particle { animation-duration: 600s; }
.dp100000 .particle { animation-duration: 3600s; }

.separator {
animation-name: flash;
animation-duration: 1s;
}

#button1:checked ~ .digit .particle,
#button1:checked ~ .separator {
animation-play-state: running;
}
#button2:checked ~ .digit .particle,
#button2:checked ~ .separator {
animation-name: initial-visible;
}
#button2:checked ~ .digit .particle.middle {
animation-name: initial-hidden;
}
/* EndSTOPWATCH */