:root {

    --bg-color: #fae420
}

#cameraCapture {
    background: #dddd;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    font-weight: bolder;
    padding: 10px;
}

#cameraCapture img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 25%;
    /*position: absolute;*/

    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
}

#cameraRotate,
#cameraGallary {
    background: #fff;
    width: 80px;
    height: 80px;
    margin: 5px;
    padding: 10px;
    border-radius: 100%;

    font-weight: bolder;


}

#cameraRotate:hover,
#cameraGallary:hover,
#cameraCapture:hover {

}

.no-right-click {
    /*pointer-events: none;*/
}

#cameraRotate img,
#cameraGallary img {
    max-width: 60px;
    max-height: 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /*position: absolute;*/

    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
}

.my-camera {
    display: block;
    /*background: #fff;*/
    background: var(--bg-color);

    width: 100%;
    padding: 0px;
    margin: 0px;
    height: auto;
    border: none black 4px;
}

.camera-btn-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: var(--bg-color);
    padding: 2em;
    /*padding: 0px;*/
    margin: 0px;
}

#video {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
    -moz-transform: rotateY(180deg); /* Firefox */
}

#video,
inset-shadow-video {

    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
}

body {
    padding: 0px;
    margin: 0px;
    background: var(--bg-color);
}


/* Disable blue highlight on button click */
button {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* You can do the same for links */
a {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.inset-shadow-button {
    background-color: #4CAF50; /* Green */
    color: #111;
    -webkit-tap-highlight-color: transparent;

    border: 1px solid black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3); /* Inset shadow */
    transition: box-shadow 0.3s ease; /* Smooth transition */
}

.inset-shadow-button:hover {
    box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.4); /* Darker inset shadow on hover */
    box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.4);
}

.multiple-inset-shadow-button {
    background-color: #4CAF50; /* Green */
    color: white;
    border: 1px solid black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3), /* First inset shadow */ inset 0 8px 12px rgba(0, 0, 0, 0.4), /* Second inset shadow */ inset 0 12px 118px rgba(0, 0, 0, 0.24); /* Third inset shadow */
    transition: box-shadow 0.3s ease; /* Smooth transition */
}

.multiple-inset-shadow-button:hover {
    box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.4), /* Darker first shadow on hover */ inset 0 10px 16px rgba(0, 0, 0, 0.5), /* Darker second shadow on hover */ inset 0 14px 22px rgba(0, 0, 0, 0.6); /* Darker third shadow on hover */
}

.globe-button {
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50%; /* Circular shape */
    position: relative; /* Positioning for the shadow */
    overflow: hidden; /* Clip shadows */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Subtle first inset shadow */ inset 0 4px 8px rgba(0, 0, 0, 0.15); /* Subtle second inset shadow */
    transition: box-shadow 0.3s ease, /* Smooth shadow transition */ transform 0.4s ease; /* Smooth transform transition */
    transform: perspective(600px) rotateX(0) rotateY(0); /* Initial rotation */
}

.globe-button:hover {
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.3), /* Slightly deeper shadows on hover */ inset 0 6px 10px rgba(0, 0, 0, 0.2); /* Slightly deeper second shadow on hover */
    transform: perspective(600px) rotateX(10deg) rotateY(10deg); /* Rotate to create a globe effect */
}


.cam-nav {
    font-family: 'Comic Sans MS', sans-serif; /* Comic Sans font */
    font-size: 14px; /* Small font size */
    color: #333; /* Clean text color */
    background-color: #fff0; /* Light background */
    padding: 10px 20px; /* Padding around the nav */
    text-align: center; /* Center the text */
    margin: 2px auto; /* Center the nav itself */
    /*border-radius: 5px;  Slightly rounded corners */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); Subtle shadow for depth */
}

.cam-nav a {
    color: #4CAF50; /* Green link color */
    text-decoration: none; /* Remove underline */
    margin: 0 10px; /* Space between links */
    padding: 5px 10px; /* Padding inside links */
    border-radius: 4px; /* Rounded link corners */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.cam-nav a:hover {
    background-color: #4CAF50; /* Green background on hover */
    color: white; /* White text on hover */
}


/*GALLARY*/

#gal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #0000;
    padding: 0.5em;
    /*margin: 0.5em;*/
}

.hidden {
    display: none;
}

#selected_img {
    max-width: 800px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

#selected_img img {
    width: 100%;
    height: auto;
}

#gal_img_list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    width: 95%;
    height: auto;
    /*scrol: 50px;*/
    margin: 0.5em;
}

#gal_img_list li {
    width: 90px;
    display: inline-block;
    max-height: 250px;
    margin-left: 0.5em;

}

#gal_img_list li img {
    width: 80px;
    height: auto;
}

#gal-tools {
    display: flex;
    /*flex-direction: row;*/
    justify-content: space-evenly;
    align-items: center;
}

#gal-tools > button {

    width: 40%;
    /*margin: 5%;*/
    font-weight: bolder;
    background: #333;
    color: #ddd;
    padding: 5px;
    border-radius: 3px;
    font-size: larger;
    padding-top: 16px;
    padding-bottom: 16px;
    margin: 0.5em;


}


/* Map styles */
#map {
    height: 100%;
    width: 100%;
    position: fixed;

}

#map-container {
    display: none;
    width: 100%;
}

.hidden {
    display: none;
}

.leaflet-center {
    left: 50%;
    transform: translate(-50%, 0%);
}

.leaflet-middle {
    top: 50%;
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    transform: translate(0%, -50%);

}

.leaflet-center.leaflet-middle {
    transform: translate(-50%, -50%);
}

#gal-uploads > li {
    border: solid 1px #333;
    padding: 0.25em;
    margin: 0.25em;
}

.dance-marker {
    width: 256px;
    height: 256px;
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    /*-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);*/

    /* Use mix-blend-mode to remove the white background */
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: cover;
    -webkit-mask-size: cover;
    background: url('../img/dance.gif') no-repeat center center;
    background-size: cover;
}


.leaflet-control-compass {
    background: url('../../img/rose.svg') no-repeat center;
    background-size: contain;
    width: 96px;
    height: 96px;
    cursor: pointer;
}