:root {
    --bgStripes-size: 110px;
}

*, ::after, ::before {
    /*box-sizing:initial;*/
}

html, body {
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
}



body {
    margin: 0 auto;
    max-width: 50em;
    font-family: Tahoma, Verdana, Segoe UI, sans-serif;
}

.mid-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 14pt;
    background-color: white
}

@media (max-aspect-ratio: 8.4/10) { /* (orientation: portrait) */
    .polaroidTimes {
        box-shadow: -7px 7px 15px 0px rgba(50, 50, 50, 0.5);
        border: 0.6em solid white;
        box-sizing: border-box;
    }

    .mid-col {
        width: 100%;
    }
}

@media (min-aspect-ratio: 8.4/10) { /* (orientation: landscape) */

    body {
        width: 90%;
    }

    .polaroidTimes {
        box-shadow: -7px 7px 15px 0px rgba(50, 50, 50, 0.5);
        border: 0.8em solid white;
        box-sizing: border-box;
    }

    .mid-col {
        width: 70%;
    }
}

path {
    color:rgba(0,0,0,0.35);
}

.logoShadow {
    filter: drop-shadow(0px 0px 10px #000000);
}

.logoTextShadow {
    filter: drop-shadow(0px 0px 5px #000000) drop-shadow(0px 0px 5px #000000);
}

.bgStripesParent {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.75;
    background-color: blue;
}

.bgStripesChild {
    position: absolute;
    z-index: -1;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    /* width: 100%; */
    width: calc(100% + var(--bgStripes-size));
    background: repeating-linear-gradient( -45deg, rgb(163,194,255) 25%, rgb(163,194,255) 50%, rgb(176,203,255) 50%, rgb(176,203,255) 75% );
    background-size: var(--bgStripes-size) var(--bgStripes-size);
    animation: animateBgStripes 3s linear infinite;
}

a {
    text-decoration: none;
}

@keyframes animateBgStripes {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-110px);
    }
}

/* General button styles */
.btn {
    display: inline-block; /* Makes the link behave like a button */
    font-weight: 400; /* Adjusts font weight */
    text-align: center; /* Centers text */
    white-space: nowrap; /* Prevents text wrapping */
    vertical-align: middle; /* Aligns text properly */
    user-select: none; /* Prevents text selection */
    padding: 0.375rem 0.75rem; /* Adds padding */
    font-size: 1.5rem; /* Adjusts font size */
    line-height: 1.5; /* Adjusts line height */
    /*border: 1px solid transparent;*/ /* Adds border */
    text-decoration: none; /* Removes underline */
    transition: all 0.15s ease-in-out; /* Smooth hover effect */
    cursor: pointer; /* Makes it look clickable */
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.3);
}

/* Light button styles */
.btn-light {
    color: rgb(70, 70, 70);
    background: linear-gradient(to bottom, white 0%, white 50%, rgb(204, 204, 204) 100%); /* Gradient background */
    border-color: #f8f9fa;
}

.btn-light2 {
    color: rgb(70, 70, 70);
    background: linear-gradient(to bottom, white 0%, white 50%, rgb(234, 234, 234) 100%); /* Gradient background */
    border-color: rgb(204, 204, 204);
    border-width: 2px;
    box-shadow: none;
}

.btn-light-alpha {
    color: #212529; /* Text color */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.80) 50%, rgba(204, 204, 204, 0.75) 100%);
    border-color: #f8f9fa; /* Border color */
}

.btn-orange {
    color: white;
    background: linear-gradient(to bottom, rgba(255,202,0,1) 0%, rgba(255,102,0,0.85) 50%, rgba(255,102,0, 0.75) 100%);
}

.btn-dark-alpha {
    color: white;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.25);
}

.btn-dark-alpha:hover {
    color: white;
}

.btn-dark-alpha span {
    filter: drop-shadow(-3px 3px 3px #000000);
}

/* Hover and focus states for light buttons */
.btn-light:hover, .btn-light:focus {
    color: #212529; /* Keep text color */
    background: linear-gradient(to bottom, #f8f9fa 0%, #e2e6ea 50%, #d6d8db 100%); /* Slightly darker gradient */
    border-color: #dae0e5; /* Slightly darker border */
    text-decoration: none; /* Ensures no underline appears */
}

/* Active state for light buttons */
.btn-light:active {
    background: linear-gradient(to bottom, #e2e6ea 0%, #d6d8db 50%, #c6c8ca 100%); /* Darker gradient */
    border-color: #c6c8ca; /* Darker border */
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15); /* Slight shadow */
}


.btn-action {
    /* background: linear-gradient(to right, rgba(0,152,218,0.5), rgba(0,152,218,1), rgba(0,152,218,0.5)); */
    background: linear-gradient(to top, rgb(200,200,200), rgba(255,255,255));
    filter: drop-shadow(-3px 3px 3px rgba(0,0,0,0.25));
    border: solid rgb(230,230,230) 1px;
    color: rgb(51,51,51);
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    /*
                    text-shadow:
                        0 0 10px rgba(255,255,255,0.5),
                        0 0 20px rgba(255,255,255,0.5),
                        0 0 40px rgba(255,255,255,0.5),
                        0 0 80px rgba(255,255,255,0.5),
                        0 0 120px rgba(255,255,255,0.5);
                                */
    /* text-shadow: -4px 4px 5px rgb(18,67,136); */
    width: 100%;
    margin-bottom: 15px;
    position: relative;
}

.parent-ft {
    font-size:inherit;
}



.bounce {
    animation: bounce 350ms;
    animation-timing-function: ease;
}

@keyframes bounce {
    20% {
        transform: scale(1.8, 1.8);
    }

    40% {
        transform: scale(0.6, 0.6);
    }

    60% {
        transform: scale(1.2, 1.2);
    }

    80% {
        transform: scale(0.9, 0.9);
    }

    100% {
        transform: scale(1,1);
    }
}

.bounce2 {
    animation: bounce2 500ms;
    animation-timing-function: ease;
}

@keyframes bounce2 {
    20% {
        transform: scale(1.8, 1.8);
    }

    40% {
        transform: scale(0.6, 0.6);
    }

    60% {
        transform: scale(1.2, 1.2);
    }

    80% {
        transform: scale(0.9, 0.9);
    }

    100% {
        transform: scale(1,1);
    }
}

.particle-effect {
    width: 320px; /* Set to the width of one frame */
    height: 180px; /* Set to the height of one frame */
    background-image: url('/video/fx-min2.webp'); /* Path to your sprite sheet */
    background-size: 12800px 180px; /* Set to the actual dimensions of the sprite sheet */
    /* Set initial background position to show the first frame */
    background-position: 0 0;
    /* Apply the animation */
    animation: playParticleEffect 1.5s steps(39) 1 forwards; /* Adjust duration and steps */
    /* Optional: Control display with JavaScript */
    z-index: 1000;
    display: none;
    position: absolute; /* If you still want to position it with JS */
}

/* Define the animation */
@keyframes playParticleEffect {
    100% {
        background-position: -12480px 0;
    }
    /* For horizontal strip */
    /* Or for a vertical strip: 100% { background-position: 0 -[total_height_of_sprite_sheet]px; } */
    /* For a grid, the keyframes would be more complex, animating both X and Y positions */
}

#divBibleDialogVersionItems {
    overflow: auto;
    height: 40vh;
}

#divBibleDialogBooks .nav-tabs {
    font-size: small;
}

#ulBibleDialogBooks {
    column-count: 2;
    column-gap: 2rem;
    margin-bottom: 0px;
    font-size: 0.925rem;
}

.ulBibleDialog {
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
}

.ulBibleDialog li {
    margin-bottom: 5px;
    cursor:pointer;
}


#divBibleDialogBookChaptersScroll {
    overflow: auto;
    height: 50vh;
}


#divBibleDialogBookChaptersScroll a {
    display:inline-block;
    width: 40px;
    height: 40px;
    text-align:center;
        
}

.dialogIllustrationsLabelCol {
    font-size: x-small;
    display: none;
}

.dialogIllustrationsLabelColor {
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    margin-right: 6px;
}

#divBibleVerses {
    overflow: auto;
    margin: 2px;
    padding: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

#inviteDialog h6 {
    font-size:small;
    color:gray
}

#inviteDialog button {
    box-shadow:none;
}

#divInviteQRCodeImage img, #divInviteQRCodeImage canvas {
    width: 100%;
    max-width: 128px;
}

#invite-logo {
    width: 100%;
    max-width:128px;
}

#divInviteLinkDisabledMessage, #divInviteUnlimitedMessage {
    padding: 0.5rem;
    font-size: small;
}