html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  /*min-height: 100%;*/
}

body {
  margin-bottom: 60px;
}


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto; /* instead of 100% */
    overflow: auto !important; /* allow scrolling */
    font-family: sans-serif;
    overflow-x: hidden;
}


.dropdown {
    position: relative; /* make sure the menu is positioned relative to this */
}

.dropdown-menu {
    z-index: 1000; /* or larger if necessary */
}

.text-xs {
    font-size:smaller;
}
/***********************/

a.navbar-brand {
    white-space: nowrap!important;
}

    @media (max-width: 667px) {
        #pointer {
            font-size: 8vmin !important;
        }
        /*#nameList, #winnersList {
        max-height: 80px;
    }*/
    }

    @media (max-width: 999px) {
        #pointer {
            font-size: 8vmin !important;
        }

        /*#nameList, #winnersList {
        max-height: 100px;
    }*/
    }

#nameList, #nameList2, #winnersList {
    border: 1px solid #ccc;
    padding: 0.5em;
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

    #nameList li, #nameList2 li, #winnersList li {
        margin: 0.25em 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        #nameList li span.name {
            flex: 1;
            outline: none;
            text-align:left!important;
        }

        #nameList2 li span.name {
            flex: 1;
            outline: none;
            text-align: left !important;
        }

.deleteBtn {
    margin: 0 0.5em;
    cursor: pointer;
    color: red;
}

/*.colorBtn {
    margin: 0 0.6em;
    cursor: pointer;
}*/


/* Spinner styling, using aspect-ratio instead of hard-coding height */




#wheelContainer, #wheelContainer2 {
    position: relative;
    width: 70vmin;
    max-width: 100%;
    aspect-ratio: 1 / 1; /* force a 1:1 ratio */
    border-radius: 50%;
    overflow: visible !important;
    cursor: pointer;
    background: #fff;
    flex: none;
    align-self: center;
    border: 3px solid #ccc;
    margin: 0 auto;
}

#wheel, #wheel2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Fix: define both image and gradient layers in the same property */
    background-image: conic-gradient( #EEB211 0deg 60deg, #d50f25 60deg 120deg, #f18735 120deg 180deg, #009925 180deg 240deg, #3369e8 240deg 300deg, #b635b6 300deg 360deg );
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    transform: rotate(0deg);
    will-change: transform;
    transition: transform 7s cubic-bezier(0.1,0.7,0.1,1);
}


/*#wheel, #wheel2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: conic-gradient( #EEB211 0deg 60deg, #d50f25 60deg 120deg, #f18735 120deg 180deg, #009925 180deg 240deg, #3369e8 240deg 300deg, #b635b6 300deg 360deg );*/
    /* enable GPU acceleration */
    /*transform: rotate(0deg);
    will-change: transform;
    transition: transform 7s cubic-bezier(0.1,0.7,0.1,1);
   
}*/


/*#wheel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient( #EEB211 0deg 60deg, #d50f25 60deg 120deg, #f18735 120deg 180deg, #009925 180deg 240deg, #3369e8 240deg 300deg, #b635b6 300deg 360deg );*/
    /* enable GPU acceleration */
    /*transform: rotate(0deg);
    will-change: transform;
    transition: transform 7s cubic-bezier(0.1,0.7,0.1,1);
}*/


.slice {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;

   
}

#pointer, #pointer2 {
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5vmin;
    z-index: 100;
    pointer-events: none;
    color: #d4d3d3;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

@media (max-width: 997px) {
    #pointer {
        top: -8% !important;
    }
    #pointer2 {
        top: -8% !important;
    }
}





/* Dropdown styling */
.image-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 100;
}

.image-dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 0.5em 1em;
    cursor: pointer;
}

    .dropdown-menu li:hover {
        background: #f0f0f0;
    }

/* Image in list */
#nameList img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 0.5em;
}

/* Modal styling */
#modalOverlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    justify-content: center;
    align-items: center;
}

#modal {
    background: #fff;
    padding: 1em 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-align: center;
    width: 50vmin;
    max-width: 90%;
}

    #modal h2 {
        margin-top: 0;
        font-size: 2rem;
    }

#modalButtons {
    margin-top: 1em;
    display: flex;
    gap: 1em;
    justify-content: center;
}

.modalBtn {
    padding: 0.75em 1.5em;
    cursor: pointer;
    font-size: 1rem;
}

.keepBtn {
    background: #4CAF50;
    color: #fff;
    border: none;
}

.removeBtn {
    background: #f44336;
    color: #fff;
    border: none;
}

/* Curved “Click to Spin” prompt styling */
#clickText {
    position: absolute;
    top: 18%;
    left: 0;
    width: 100%;
    height: 70%;
    pointer-events: none;
    z-index: 5;
    font-family: cursive;
}

    #clickText svg {
        width: 100%;
        height: 100%;
    }

    #clickText path {
        fill: none;
    }

    #clickText text {
        fill: #fff;
        font-size: clamp(1vmin,1.5vw,2vmin);
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

@media (max-width:667px) {
    #clickText {
        top: 20%;
        height: 70%;
    }

        #clickText text {
            font-size: clamp(1.5vmin,6vw,5vmin);
        }
}

@media (min-width:668px) and (max-width:1024px) {
    #clickText {
        top: 18%;
        height: 70%;
    }

        #clickText text {
            font-size: clamp(1.5vmin,3vw,3vmin);
        }
}

@media (min-width:1025px) {
    #clickText {
        top: 16%;
        height: 70%;
    }

        #clickText text {
            font-size: clamp(0.5vmin,1vw,1.5vmin);
        }
}

/* slow spin idle */
@keyframes slowSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#wheel.initSpin {
    animation: slowSpin 50s linear infinite;
    transition: none;
}

/* Config modal */
#configOverlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* make this transparent instead of gray */
    background: transparent;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: auto;
}

#modal,
#configModal,
#shareModal {
    z-index: 1001;
    pointer-events: auto;
}

#configModal {
    background: #fff;
    padding: 1em 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 400px;
    text-align: left;
}

    #configModal h2 {
        margin-top: 0;
        font-size: 1.5rem;
    }

    #configModal .color-row {
        display: flex;
        align-items: center;
        margin: 0.5em 0;
    }

        #configModal .color-row label {
            flex: 1;
        }

        #configModal .color-row input {
            border: none;
            width: 2.5em;
            height: 2.5em;
            padding: 0;
            margin-left: 0.5em;
        }

#configButtons {
    text-align: right;
    margin-top: 1em;
}

    #configButtons button {
        margin-left: 0.5em;
    }


.figcaption {
    font-size:12px;
    font-style:italic;
}



.btnspinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: black;
    border-right-color: black;
    border-radius: 67%;
    display: inline-block;
    margin-right: 6px;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/*#configBtn:hover,
#resetBtn:hover,
#loadSettingsBtn:hover,
#saveSettingsBtn:hover,
#shareBtn:hover,
#galleryBtn:hover {
    color: #fff !important;
    background-color: #ff6600 !important;
    border-color: #ff6600 !important;
}*/


canvas.confetti-canvas {
    position: fixed !important;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}


/*****************************************/



/* Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) CUSTOM IMPLEMENTATION*/
.fa-linkedin {
    background-image: url(../fonts/icons/linkedin.svg)
}

.fa-pinterest {
    background-image: url(../fonts/icons/pinterest-square.svg)
}

.fa-instagram {
    background-image: url(../fonts/icons/instagram.jpg)
}

.fa-heart {
    background-image: url(../fonts/icons/fa-heart.jpg)
}

.fa-share-alt {
    background-image: url(../fonts/icons/share-alt.svg)
}

.fa-edit {
    background-image: url(../fonts/icons/fa-edit.jpg)
}

.fa-exclamation-circle {
    background-image: url(../fonts/icons/fa-exclamation-circle.jpg)
}

.fa-facebook-square {
    background-image: url(../fonts/icons/facebook-square.svg)
}

.fa-twitter-square {
    background-image: url(../fonts/icons/fa-twitter-square.jpg)
}

.fa-lock {
    background-image: url(../fonts/icons/fa-lock.jpg)
}

.fa-user-circle {
    background-image: url(../fonts/icons/fa-user-circle.jpg)
}

.fa-user-circle-s {
    background-image: url(../fonts/icons/user-circle.svg)
}

.fa-adchoices {
    background-image: url(../fonts/icons/youradchoices.jpg)
}

.fa-align-justify {
    background-image: url(../fonts/icons/align-justify.jpg)
}


.fa-wrench {
    background-image: url(../fonts/icons/wrench.svg)
}

.fa-clipboard {
    background-image: url(../fonts/icons/clipboard-list.svg)
}


.fa-facebook-f {
    background-image: url(../fonts/icons/facebook-f.svg)
}

.fa-twitter {
    background-image: url(../fonts/icons/twitter.svg)
}

.fa-code {
    background-image: url(../fonts/icons/code.svg)
}

.fa-times-circle {
    background-image: url(../fonts/icons/times-circle.svg)
}

.fa-wifi {
    background-image: url(../fonts/icons/wifi.svg)
}

.fa-users {
    background-image: url(../fonts/icons/users.svg)
}



.fa-location-circle {
    background-image: url(../fonts/icons/location-circle.svg)
}

.fa-globe {
    background-image: url(../fonts/icons/globe.svg)
}



.fa-chart-bar {
    background-image: url(../fonts/icons/chart-bar.svg)
}


.fa-upload {
    background-image: url(../fonts/icons/upload.svg)
}

.fa-undo-alt {
    background-image: url(../fonts/icons/undo-alt.svg)
}


.fa-file-pdf {
    background-image: url(../fonts/icons/file-pdf.svg)
}

.fa-language {
    background-image: url(../fonts/icons/language.svg)
}

.fa-1x {
    font-size: 1em;
}

.fa-2x {
    font-size: 2em;
}

.fa-3x {
    font-size: 3em;
}

.fa-4x {
    font-size: 3em;
}

.fa-5x {
    font-size: 5em;
}








/*flags*/
.flag-icon-background {
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: contain;
    background-size: contain
}

.flag-icon {
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: contain;
    background-size: contain
}

    .flag-icon:before {
        content: "\00a0"
    }

.dropdown-menu .flag-icon {
    margin-right: 5px
}

.flag-icon-fun {
    background-image: url(../fonts/flags/fun.jpg)
}

.flag-icon-de {
    background-image: url(../fonts/flags/de.svg)
}

.flag-icon-es {
    background-image: url(../fonts/flags/es.jpg)
}

.flag-icon-fr {
    background-image: url(../fonts/flags/fr.svg)
}

.flag-icon-nl {
    background-image: url(../fonts/flags/nl.svg)
}

.flag-icon-se {
    background-image: url(../fonts/flags/se.svg)
}

.flag-icon-dk {
    background-image: url(../fonts/flags/dk.svg)
}

.flag-icon-gr {
    background-image: url(../fonts/flags/gr.svg)
}

.flag-icon-pt {
    background-image: url(../fonts/flags/pt.svg)
}

.flag-icon-fi {
    background-image: url(../fonts/flags/fi.svg)
}

.flag-icon-it {
    background-image: url(../fonts/flags/it.svg)
}

.flag-icon-ca {
    background-image: url(../fonts/flags/ca.svg)
}

.flag-icon-us {
    background-image: url(../fonts/flags/us.svg)
}

.flag-icon-un {
    background-image: url(../fonts/flags/un.jpg)
}