/*VR 1.0.1 */
html, body {width: 100%;height: 100%;margin: 0;padding: 0}
body {user-select: none;background-color: #EAEDED;}
#overlay{
    z-index:10;
    position: relative;
    width:100%;
    height:auto;
    overflow-y: scroll;
    min-height: 100%;
    max-height: 100%;
    top:0;
    left:0;  
    background-color: #EAEDED;
    font: bold 13px Poppins, Tahoma, sans-serif;
    color: #17115b;
    letter-spacing: 1px;
    display: flex;
    justify-content: center}
.loading {
        position: absolute;
        width: 98%;
        height: 98%;
        top: 1%;
        left: 1%;
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 99;
        max-height: calc(754px - 4%)}
.inner-loading {
        min-width: calc(640px - 3%);
        max-height: calc(754px - 4%);
        height: 100%;
        background-color: rgba(100, 100, 100, 0.7);
        display: flex;
        justify-content: center;
        align-items: center}
.loader {
        border: 10px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #493889;
        width: 80px;
        height: 80px;
        -webkit-animation: spin 2s linear infinite;
        /* Safari */
        animation: spin 2s linear infinite}
    /* Safari */
@-webkit-keyframes spin {
        0% {-webkit-transform: rotate(0deg);}
        100% {-webkit-transform: rotate(360deg);}}
@keyframes spin {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}}
#loader{ 
    height:720px;
    background-image: linear-gradient(to bottom right, #5ff2e8, #D3DAFF);
    max-width: 640px;
    border-radius: 10px;
    -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.32);
    -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.32);
    box-shadow: 0 5px 15px 0 rgba(0,0,0,0.32)}
#loader, #loader section, #sub{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width:inherit}
#neterror{
    position: absolute;
    margin-top: 50%;
    height: 10vh;
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite}
#logo{
    width:64%;
    height: auto;
    margin: 0 auto;
    position: absolute;
    left:18%;
    top:45%;
    opacity: 0}
#loader section {margin-top: 220px; opacity: 0; height: 100%}
#loader {display:none}
#progress-bar{
    height:40px;
    min-height: 40px;
    width:80%;
    background-color: #F6F5F9;
    position: relative;
    border-radius: 20px;
    -moz-box-shadow: inset 1px 1px 5px #000000;
    -webkit-box-shadow: inset 1px 1px 5px #000000;
    box-shadow: inset 1px 1px 5px #000000}           
#progress-bar p{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 11;
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite}
#progress-bar b{
    position: absolute;
    width: 100%;
    z-index: 11;
    text-align: center;
    text-decoration: underline;
    color: blue;
    margin: 10px 0;
    left: 0;
    cursor:pointer}
@-webkit-keyframes opacity {0%, 100% {opacity:0}50% {opacity:1}}
@-o-keyframes opacity {0%, 100% {opacity:0}50% {opacity:1}}
@-moz-keyframes opacity {0%, 100% {opacity:0}50% {opacity:1}}
@keyframes opacity {0%, 100% {opacity:0}50% {opacity:1}}
#ebar{
    height:32px;
    top:3px;
    left: 4px;
    float: left;
    min-width:36px;
    background-image: linear-gradient(to bottom , #493889, #7963ba, #493889);
    position: relative;
    z-index: 12;
    border-radius: 20px;
    -moz-box-shadow: 1px 2px 2px #000000;
    -webkit-box-shadow: 1px 2px 2px #000000;
    box-shadow: 1px 2px 2px #000000;
    max-width: calc(100% - 8px)}
#ebar i{
    position: absolute;
    margin: 0;
    top: 1.5px;
    right: 1.5px}
.material-icons {color: #F6F5F9}
.material-icons.md-30 {font-size: 30px}
.material-icons.md-36{font-size: 36px}
.rotate90{
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)}
#circle-loader {
    border: 4px solid #F6F5F9;
    border-radius: 50%;
    border-top: 4px solid forestGreen;
    width: 19px;
    height: 19px;
    margin: 0;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    position: absolute;
    right: 2px;
    top: 3px}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg)}}
@keyframes spin {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}}
@-o-keyframes spin {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}}
@-moz-keyframes spin {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}}
#multi {
    display: none;
    justify-content: space-around;
    width: 65%}
#multi h3 {margin: 10px 0 0}
#buttons{
    width: 100%;
    height:80px;
    min-height:80px;
    margin:25px 0;
    display: flex;
    justify-content: center;
    position: relative;
    opacity:0;
    z-index:-10}
#buttons button{
    position: absolute;
    width:50%;
    height:40px;
    display: none;
    padding: 6px 20px;
    margin:0;
    cursor: pointer;
    border: 1px solid #bbb;
    font: 22px arial, helvetica, sans-serif;
    color: #F6F5F9;
    text-decoration: none;
    white-space: nowrap;
    background-image: linear-gradient(to bottom , #493889, #7963ba, #493889);
    border-color: rgb(76,57,143);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 20px;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
    text-shadow: 0 1px 0 rgba(255,255,255, .9)}
#buttons button:hover{
    background-image: linear-gradient(to bottom , #fbbb02, #ffed4e, #fbbb02);
    cursor: pointer;
    color: #493889}
#hint {
    color: #493889;
    width: 75%;
    background: #feeebf;
    padding: 5px;
    border-radius: 15px;
    text-align: center;
    -moz-box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2);
    box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2);
    font-size: 11px}
#hint h4 {margin: 0 0 10px}
#sub , #vrChange {display: none}
#overlay-permission i {
    background: red;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    margin: 5px 15px 0;
    display: none;
    justify-content: center;
    align-items: center;
    cursor:pointer}
#overlay-permission{
    line-height: 0;
    display: flex;
    justify-content: center;
    margin: 10px auto 0}
#advice{text-align: center;flex: 1;margin: 0; color:#008e86}
#buttonError {
    display: none;
    align-self: end;
    margin: 0;
    text-decoration: underline;
    cursor:pointer}
#buttonError:hover {transform: scale(1.1)}
#warnings{
    color: #493889;
    width: 90%;
    padding: 5px;
    margin-top: 5px;
    position: absolute;
    bottom: 5px;
    opacity: 1;
    font-size: 11px}
#warnings h4 {margin: 5px}
#warnings p {margin: 0px 10px; line-height: 20px}
.rs-base {z-index: 9}         
#overlay-menu{
    display: none;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right:10px;
    top:0;
    bottom:0;
    margin:auto;
    z-index:10;
    height:315px}
#playmsg {
    color: #D0D0D0;
    position: absolute;
    left: -160px;
    top:-8px;
    font-size: 20px;
    font: bold 16px Poppins;
    letter-spacing: 2px;
    -webkit-text-stroke: 0.05px #343434} 
#turn-btn, #camera-btn{
    top: 50px;
    left: calc((100% - 176px)/2);
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9}
#camera-btn {left: 10px}
#zoom-btn i, #turn-btn i, #camera-btn i, #overlay-menu i, #toggle-btn i {
    background-color: #343434;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    margin: 0 0 15px; 
    display: flex;
    justify-content: center;
    align-items: center;
    color:#D0D0D0;
    cursor:pointer;
    border: 2px solid white;
    box-shadow: 0 0 10px 2px #fff}
#zoom-btn {
    z-index:9;
    position: absolute;
    right: 176px;
    padding-right: 10px;
    bottom:0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 160px;
    display:none}
.a-orientation-modal {display:none}
.white_logo{filter: brightness(0.4) invert(1)}
#oo{
    font: bold 13px Poppins, Tahoma, sans-serif;
    font-style: normal;
    letter-spacing: 0.5px}
#geo{ display: none }
#debugdiv{
    position: absolute;
    top: 0;
    z-index:10;
    left:10px;
    padding: 10px;
    background-color: aqua}
#debugdiv p{
    font-size: 10px;
    margin: 0;
    padding: 0}
@media (prefers-color-scheme: dark) {
    #loader{ background-image: linear-gradient(to bottom right,#393939, #121212)}
    #overlay, #rota, #hint , #warnings, #av-pick p{color: #F6F5F9}
    #hint, #av-type .av-active, #av-pick button  {background-color: #008e86}
    #advice{color:#ffed4e}}
@media screen and ( min-height: 721px ) {
    #overlay{ align-items: center}
}
        
/*group 1.0.1 */    
#av-pick {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font: bold 13px Poppins, Tahoma, sans-serif;
    font-style: normal;
    letter-spacing: 0.5px;
    display:none}
#av-pick p {
    margin:10px 10px 5px;
    color:#343434}
#av-pick section {
    width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center}
#av-type {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px}
#av-type p{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    border: solid 2px #343434;
    border-radius: 5px;
    margin: 0;
    cursor: pointer}
#av-color {
    display: flex;
    justify-content: space-around;
    width: 240px;
    height: 50px;
    align-self: center;
    align-items: center;
    margin-bottom: 10px}
#av-color p {
    width: 30px;
    height: 30px; 
    border: solid 2px #343434;
    border-radius: 5px;
    margin: 0;
    cursor: pointer}
#av-color p:nth-child(1){background-color: #492816}
#av-color p:nth-child(2){background-color: #9F7967}
#av-color p:nth-child(3){background-color: #E8BEAC}
#av-color p:nth-child(4){background-color: #F2EFEE}
#av-color .av-active {
    width: 42px;
    height: 42px}
#av-type .av-active {
    background-color: #493889;
    border: solid 2px transparent;
    color:#F6F5F9}
#av-pick input {
    border: solid 2px #343434;
    border-radius: 5px;
    width: 215px;
    height: 30px;
    margin-left: 8px}
#av-pick button {
    margin: 20px 8px;
    border-radius: 5px;
    height: 35px;
    background-color: #493889;
    border: solid 2px transparent;
    color: #F6F5F9;
    cursor: pointer}
#master-control {
    display: none;
    position: absolute;
    left:20px;
    top:0;
    z-index:10;
    width: auto;
    list-style:none;
    padding:10px;
    margin:0;
    background-color: #343434;
    color: #F6F5F9;
    border-radius: 0px 0px 10px 10px}
#master-control li{
    display: flex;
    margin: 10px 0} 
#master-control input {margin-left: 10px}
#prevmedia{
    height:144px;
    width:90%;
    z-index: 11}
        
/*AR 1.0.1 */ 
ar {
    color: #D0D0D0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    display: none}
ar p { margin: 0}
ul {list-style-type: none;margin:0; padding: 0;display: none}            
ar header {
    background-color: #343434;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 9;
    position: absolute;
    top:0px}
ar header span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px}
.material-icons-outlined.md-22{font-size: 22px}
.material-icons-outlined.md-16{font-size: 16px}
.material-icons.md-15{font-size: 15px}
ar header span i {margin:0 5px}
ar #playProg{
    height: 22px;
    width: 82px;
    position: absolute;
    top:9px;
    right: 36px;
    cursor:pointer}
ar #return {
    position: absolute;
    left: 10px;
    top: 9px;
    cursor:pointer}
#ar_oorbit {
    position: absolute;
    z-index: 10;
    left: 10px;
    bottom: 10px;
    width: 75px;
    display: none}
#ar_client {
    position: absolute;
    z-index: 10;
    height: 22.73px;
    width: 78px;
    right: calc(50% - 78px/2);
    margin-top: 9px;
    top:0px;
    display: none}
#ar_slider{
    position:absolute;
    width: 24px;
    height: 7px;
    right: 198px;
    top: 18px}
#ar_slider p {
    position: absolute; 
    top:-6px;
    cursor: pointer;
    color: #9C9C9C;
    font-weight: 400;
    font-size: 12px}
#ar_slider p:first-child {right: 27px}
#ar_slider p:last-child {right: -20px}
#ar_slider input,.ar_slider input {
    opacity: 0;
    width: 0;
    height: 0}
.ar_slider  {
    margin-top:30px;
    position:relative;
    height: 5px}
.ar_slider:first-of-type{margin-top:25px}
.ar_slider label {
    position:absolute;
    width: 24px;
    height: 7px;
    left: 40%}
.ar_slider p {
    position: absolute; 
    top:-6px;
    color: #9C9C9C;
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    width: 40px}
.ar_slider p:first-child {
    left: 5px;
    text-align: end}
.ar_slider p:last-child {right: 4px}    
.toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #C4C4C4;
    border-radius: 5px;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2px}
.toggle:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 0px;
    top: -4px;
    background-color: #00B6A0;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid #343434}
input:checked + .toggle:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px)}
.toggle.round {border-radius: 22px}
.toggle.round:before {border-radius: 50%}
ar main {
    z-index:8;
    background-color: #3A3A3A;
    position: absolute;
    right: 0;
    bottom:0;
    top:40px;
    width: 176px;
    display: flex;
    flex-direction: column}
.scroller{
    overflow-y: scroll; 
    display: none;
    margin:40px 0 16px 0}
.scroller::-webkit-scrollbar {width: 8px}
.scroller::-webkit-scrollbar-track {display: none}
.scroller::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 4px;
    width: 8px}
ar main row {
    display: flex;
    flex-direction: row;
    padding: 0 23px;
    justify-content: space-between;
    border-bottom: 1px solid #585858;
    height: 38px;
    min-height: 38px;
    width: 130px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #9C9C9C;
    position: fixed;
    background-color: #3A3A3A;
    z-index: 9}
ar main row p {
    padding-top: 11px;
    cursor: pointer}
.active {color:white !important}
.notactive{color:#9C9C9C !important}
ar main section {
    margin: 25px 17px 10px 25px;
    padding-bottom: 10px;
    font-size: 12px;
    position: relative;
    z-index: 8}
ar main section h4{
    font-weight: 500;
    margin:0 0 21px}          
ar main section spans {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-row-gap: 16px;
    grid-column-gap: 30px;
    padding-left: 5px}
ar main section span {
    height: 40px;
    width: 22px; 
    text-align: center}
ar main section span span{
    height: 22px;
    width: 22px; 
    background: #C4C4C4;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer}
ar main section span span span{
    width: 12px;
    height: 12px;
    background: #5C5C5C;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer}
ar main section span span span:active, ar main section span span:active span {background: black}
ar main section span p {
    margin-top: 5px;
    font-weight: 400;
    color: #9C9C9C}
ar main section:last-of-type{margin-bottom: 30px}  
.slidecontainer {font-weight: 400}
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 128px;
    height: 7px;
    background: #C4C4C4;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top: 37px;
    cursor: pointer}
.ar_part .slider {width: 140px}
.slidecontainer b {
    position: absolute; 
    bottom: -8px;
    width: 128px;
    text-align: center;
    left:0}
.ar_part .slidecontainer b {width: 140px}
.slider:hover, .ar_submit:hover {opacity: 1}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00B6A0;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border: 1px solid #343434}
.slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00B6A0;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border: 1px solid #343434}       
ar footer{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 176px;
    font-size: 10px;
    text-align: center;
    background-color: #343434;
    margin-top: auto}
.ar_check label {float: left}
.ar_check label input{display: none}
.ar_check label div{
    width: 16px;
    height: 16px;
    display: block;
    background-color: #C4C4C4;
    border-radius: 2px;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
    cursor: pointer} 
.ar_check label div b{
    position: absolute;
    padding-left: 2px;
    font-size: 15px;
    top: -3px}
.ar_check label input:checked + div  {
    background-color: #00B6A0;
    color: white }
.ar_check span h5{
    font-weight: 500;
    line-height: 18px;
    margin-top: 0px;
    padding-left: 25px;
    color: white;
    text-align: left;
    font-size: 12px;
    cursor: pointer}
.ar_part .slidecontainer p:last-child {right: 2px !important}
ar ul {
    list-style-type: none;
    margin:20px 8px 20px 2px;
    padding: 0;
    display: none}
ar ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 0}
ar ul li span.md-20 {
    margin-right: 10px;
    font-size: 20px;
    cursor:pointer}
ar ul li h5 {
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    min-width: 37px}
ar ul li select{
    height: 22px;
    min-width: 69px;
    font-size: 12px;
    border-radius: 3px;
    margin-left: 10px;
    background-color: #535353;
    border: none;
    color: white;
    text-align: center;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1))}
ar ul li section {
    margin:  0 0 15px !important;
    display: block;
    width: 100%}
.ar_check {
    margin-left: 30px;
    margin-bottom: 30px}
.ar_part {margin-left: 12px}
article.ar_part:first-child{padding-top: 25px}
#ar_loading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index:10}
.waviy {
    position: relative;
    font-size: 16px;
    color: #3A3A3A}
.waviy span {
    position: relative;
    display: inline-block;
    animation: waviy 2s infinite;
    animation-delay: calc(.1s * var(--i))}
@keyframes waviy {
    0%,40%,100% {transform: translateY(0)}
    20% {transform: translateY(-20px)}}
.mindar-ui-overlay {
    display:none;
    right: 176px;
    top: 40px}
.mirrorcam {
    /*transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); 
    -moz-transform:rotateY(180deg); */
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1)}
#toggle-btn{
    top: 50px;
    right: 176px;
    padding-right: 5px;
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 9}
.rot0 {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg)}
.rot180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg)}