.bodymarkNum /* check this */
{
    overflow:hidden;
}

div
{
    padding:0px;
    margin:0px;
    
    font-family: 'Lato', sans-serif;
}

div#invisibleSide{
    display:none;
}

/*
// leftBottomButtons
*/
#leftBottomButtons{
    position:fixed;
    bottom: 5px;
    left: 5px;
}

#leftBottomButtons div{
    margin:15px;
}

.makephoto
{
    cursor: pointer;

    width:8vw;    
    height:8vw;
    max-width: 80px;
    max-height: 80px;
    
    background-image:url('/images/snap.png');
    background-repeat:no-repeat;
    background-size:contain;

    filter: drop-shadow(0 0 3px white) !important;
}

.gotome
{
    cursor:pointer;

    bottom:18vw;
    left:5%;
    
    width:8vw;    
    height:8vw;
    max-width: 80px;
    max-height: 80px;

    margin-bottom: 30px !important;

    background-image:url('/images/position.png');
    background-repeat:no-repeat;
    background-size:contain;

    filter: drop-shadow(0 0 2px white) !important;
}

.phinput
{
    width:100%;
    height:100%;
    margin:0px;
    background-color: rgba(0, 0, 0, 0.0);
    opacity:0;
    
    cursor:pointer;
}

#myAlert
{
    position:fixed;
    left:20%;
    top:20%;
    width:60%;
    height:60%;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    display:none;
    overflow:auto;
}

#forcelogin
{
    width:100%;
    height:100%;
}

#darkside
{
    display:none;
    position:fixed;
    margin:0px;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    background-color:rgba(0,0,0,0.6);
}

.darkform
{
    display:none;
    position:fixed;

    top:15%;
    left:10%;
    right:10%;
    
    margin-left:auto;
    margin-right:auto;
    
    max-width:300px;
    
    padding:4%;
    
    background-color:rgba(255,255,255,1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    text-align:center;
    font-size:18px;
}

input
{
    width:90%;
    
    font-size:20px;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    text-align:center;
    font-family: 'Lato', sans-serif;
    
    border: 1px solid black;
}

.input-top
{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.input-center
{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    
    border-top-style:none;
}
.input-bottom
{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    
    border-top-style:none;
}

/* Buttons */
button
{
    font-size:18px;
    font-family: 'Lato', sans-serif;
    padding:5px;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    
        border: 1px solid black;
}

.signupbtn
{
    background: #f85032; /* Old browsers */
    background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
}

.logigbtn
{
    background: #9dd53a; /* Old browsers */
    background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}

.error
{
    color:red;
    font-weight:bold;
}

#fastalert{
    background-color: rgba(0,0,0,0);
    max-width: 90%;
}

.onDesktop #fastalert{
    max-width: 40% !important;
}

#fastalert > div
{
    background-color:rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);

    font-size:24px;
    font-weight: bold;

    border-radius: 10px;
    padding:10px;

    width: 100%;
}

/*
    MapfLogo
*/
        
.mapflogo
{
    position:fixed;
    display:table;
    top:5px;
    right:20px;
    
    padding:5px;
    
    text-align:center;
    font-size:30px;
    
    vertical-align:middle;
    
    color:black;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;

    height: 10vw;
    max-height: 50px;

    backdrop-filter: blur(5px) brightness(1.15);
    border-radius: 10px;
}

.mapflogo.little{
    scale: 0.7;
    right: 0;
}

.mapflogo > div {
    display:table-cell;
    vertical-align: middle;
}

.mapflogoimg{
    /*box-shadow: 0px 0px 6px -1px #000000; todo: think about this */
}

.mapflogoimg img{
    width: 10vw;
    max-width: 50px;

    display: block;
    height: 100%;

    object-fit: cover;
}

.mapfLogoTitle {
    padding-right:10px;
    vertical-align: middle;
    font-size:30px;
    font-weight: bold;

    text-shadow: 0px 0px 2px #000000;

    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #ffffff;

    color: black;

    line-height: 60%;
}

.mapfLogoTitle > .titleDomain{
    font-size:20px;
    color: darkslategray;
}

.mapfLogoWritten{
    vertical-align: middle;
}

.mapfLogoWritten img{
    width: 10vh;
    filter: drop-shadow(0px 0px 3px gray) !important;
    margin-left: 5px;
}

/* 
//  THAT PIC! 
*/
.darkpic
{
    display:none;
    position:fixed;

    width:98%;
    height:98%;
    top:1%;
    left:1%;
    right:1%;
    bottom:1%;
    
    text-align:center;
    font-size:18px;
}

.thatpic
{
    position:fixed;
    
    /*width:100%;
    height:100%;*/

    top: 5%;
    bottom: 5%;
    right: 5%;
    left: 5%;
}

img.thatpicimg
{
    position:absolute;
    
    margin-left:auto;
    margin-right:auto;

    max-height:100%;
    max-width:100%;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    left:0%;
    right:0%;
    margin-left:auto;
    margin-right:auto;
    
    top:0px;
    bottom:0px;
    margin-top:auto;
    margin-bottom:auto;

    object-fit: contain;
}

.thatpicspeed
{
    position:absolute;
    
    width: auto;
    height: auto;
    
    max-height:96%;
    max-width:90%;
    
    top:5%;
    color:black;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-size:18px;  
    
    left:0%;
    right:0%;
    margin-left:auto;
    margin-right:auto;	
    
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;	
    
    padding-bottom:5%;
}

.thatpicbut
{
    position:absolute;
    
    width:60px;
}

.thatpicbut > div{
    position: relative;
    height: 100%;
}

.thatpicclose
{
    position:absolute;
    
    cursor:pointer;
    
    right:0px;
    
    width:30px;
    height:30px;
    
    background-image:url('/images/close.png');
    background-repeat:no-repeat;
    background-size:contain;
}

.thatpiclove
{
    position:absolute;
    
    cursor:pointer;
    
    top:40px;
    left:0px;
    
    width:40px;
    height:40px;
    
    background-image:url('/images/friend.png');
    background-repeat:no-repeat;
    background-size:contain;
    
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:13px;
    padding-top:10px;
}

.thatpictrash
{
    position:absolute;
    
    cursor:pointer;
    
    bottom: 0;
    left:0px;
    
    width:40px;
    height:40px;
    
    background-image:url('/images/trash.png');
    background-repeat:no-repeat;
    background-size:contain;
}

.thatpicleft
{
    cursor:pointer;

    position:absolute;
    left:5px;
    width:15%;
    height:15%;
    max-width:100px;
    
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
    
    background-image:url('/images/left.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center; 
}

.thatpicright
{
    cursor:pointer;
    
    position:absolute;
    right:5px;
    width:15%;
    height:15%;
    max-width:100px;
    
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
    
    background-image:url('/images/right.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center; 
}


/* Thatpic infos */
.ttpicinfo
{ 
    position:absolute;
    display:table;
    
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    
    width:300px;
    bottom:20px;
    
    font-size:14px;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    
    vertical-align:middle;
}

.inforow
{
    display:table-row;
    vertical-align:middle;
}

.infocell
{
    display:table-cell;
    vertical-align:middle;
}

/* Compass */
.compass
{
    position:relative;
    
    width:64px;
    height:64px;
    
    background-image:url('/images/compass/logo.png');
    background-repeat:no-repeat;
    background-size:contain;
}

#compassOpenPic{
    left:20px;
    top:20px;
}

.compassdir
{
    position:absolute;
    left:0px;
    top:0px;
    
    width:64px;
    height:64px;
    
    background-image:url('/images/compass/dir.png');
    background-repeat:no-repeat;
    background-size:contain;
}

/* The rest */
.tpuser
{
    position:absolute;
    left:30%;
    right:30%;
    bottom:0px;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    text-align:center;
    color:black;
    background-color:rgba(255,255,255,0.75);
}

.realtime
{
    position:absolute;
    top:10%;
    left:10%;
    right:10%;
    
    text-align:center;
    font-size:12px;
}

/* Search */
.search
{
    position:absolute;
    top:1%;
    left:1%;
    right:1%;
    text-align:center;
}

#txtsearch
{
    font-size:15px;
    width:200px;
}

/* MENU */
.menuitem
{
    position:absolute;
    
    width:100%;
    
    color:white;
    font-size:16px;
    text-align:center;
    
    cursor:pointer;
}

.usertext
{
    cursor:pointer;
}

#myuser
{
    position:fixed;
    left:20%;
    right:20%;
    bottom:0px;
    
    margin-left:auto;
    margin-right:auto;
    max-width:200px;
    font-size:16px;
    
    background-color:rgba(0,0,0,0.7);
    
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    
    color:white;
    font-size:16px;
    
    text-align:center;
    padding:2px;
    
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/*
// #myCamera
*/

#myCamera{
    text-align: center;
}

#myCamera table {
    height: 100vh;
    width: 100vw;
}

#myCamera td{
    vertical-align: middle;
}

#myCamera #shotControls{
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
}

#myCamera #shotButton{
    margin-left: auto;
    margin-right: auto;
}

#myCamera #shotButton img{
    max-height: 75px;
    max-width: 75px;
}

.cameraVideo{
    border-radius: 5px;
    max-width: 95vw;
}

#afterShotButtons{
    display: none; 
    margin-left: auto;
    margin-right: auto;   
}

#afterShotButtons img{
    display: inline;
    padding: 5px;

    max-height:75px;
    max-width: 75px;
}

/*
    Marker notify
*/

.markerPopup{
    position:relative;
    cursor:pointer;
    opacity: 0.9;    
}

.markerPopup .markerNotify{
    position: absolute;
    top: 5px;
    left: 5px;

    font-family: 'Daughter of Fortune'; font-weight: normal; font-style: normal;

    background-image: url('/images/new-moon.png');
    background-size: cover;

    background-size: 32px;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    font-size: 23px;
    padding-top: 3px;

    text-align: center;

    opacity: 0.8;

    text-shadow: 0px 0px 3px #FFFFFF;
}

/*
    Warners (bros)
*/

#warner {
    display:none;

    position:fixed;
    left:10%;
    right:10%;
    bottom: 20%;

    text-align:center;
}

#warner .content{
    border-radius: 5px;
    backdrop-filter: blur(5px);
    background-color: rgba(255,255,255,0.3);
    padding: 5px;
}

/* Ad hoc */
#warnerUpload{
    font-weight: bold;
    font-size: 20px;
}

@keyframes dropShadowHueAnimation {
    from {
        filter: drop-shadow(0px 0px 10px orange) hue-rotate(0deg);
    }
  
    to {
        filter: drop-shadow(0px 0px 10px orange) hue-rotate(360deg);
    }
}

#warnerUpload img{
    /*filter: drop-shadow(0px 0px 10px orange);*/

    animation-duration: 20s;
    animation-name: dropShadowHueAnimation;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/*
    Search (cities)
*/

#searchResults{
    display:none;

    text-align: center;
    backdrop-filter: blur(5px );
    background-color: rgba(255,255,255,0.4);
    width: 400px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

#searchResults table{
    width: 400px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

#searchResults table tr:hover{
    background-color: rgba(255,255,255,0.4);
    cursor: pointer;
}

#searchResults table td:first-child{
    text-align:left;
    font-weight: bold;
}