:root {
    --scale-value: 100vw;
    --shelf-value: 100vw;
    --rules-scale-vh: min(800px, 100vh);
    --rules-scale-vw: 100vw;
    --tile-color: linear-gradient(#fcd7b8, #eeca9d);
    --lit-tile-color: linear-gradient(#ffd26b, #f8ac04);
    --tile-shading: 0 0 calc(var(--scale-value) / 97.4978065) calc(var(--scale-value) / 195.000195) #9f836f inset, 0 0 calc(var(--scale-value) / 260.00026) calc(var(--scale-value) / 433.333767) #646487;
    --lit-tile-shading: 0 0 calc(var(--scale-value) / 97.5000024) calc(var(--scale-value) / 195.000195) #c57425 inset, 0 0 calc(var(--scale-value) / 260.00026) calc(var(--scale-value) / 433.333767) #646487;
    --tile-text-ghost: #8b6131;
    --modal-background: #ffffff;
    --modal-lines: #dee2e6;
    --modal-text: #212529;
    --modal-text-data: #212529;
    --modal-border: 1px solid #888;
    --crown-box: 0px 0px calc(var(--scale-value) / 260.00026) calc(var(--scale-value) / 390.00039) #918584 inset;

    /* NEW from OPTIMIZATION */
    --letter-box-bg: #5eb4ce;
    --key-box-bg: linear-gradient(#0f76a1 40%, #014e8b);
    --key-container-bg: #3ca0c5;
    --key-container-border: #09416f;
    --hint-btn: #0e77a4;
    --hint-border: #065c8a;

    --gray-info: #9f9b97;
    --gray-text: #9f9b97;
    --gray-icon: gray;
}

.notransition {
    -o-transition: none !important;
    -ms-transition: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.game-p {
    color: var(--modal-text);
}
.game-data-p{
    color: var(--modal-text-data);
}

/*
Loading UI Overlay to display until page fully loads
Reference https://stackoverflow.com/questions/1853662/how-to-show-page-loading-div-until-the-page-has-finished-loading
*/
#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    opacity: 1;
    background-color: #152f4a;
    z-index: 99999;
    text-align: center;

    -webkit-animation: fadeout 1s ease-in;
    -moz-animation: fadeout 1s ease-in;
    animation: fadeout 1s ease-in;
    animation-delay: 1s;
    animation-fill-mode: forwards;



}

#loading-content {
    color: white;
    position: absolute;
    text-align: center;
    z-index: 10000;
    font-size: 4vw;

}

.hide {
    display: none;        /*JL Note that this really doesn't do anything b/c the display property is set with javascript in the init() function */

    transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.0s;
}

.animateHide {
    animation: fadeOut 1s;
}


@-webkit-keyframes fadeout {
    /*
      from { opacity: 1; }
      to { opacity: 0; }
    */
    0% { opacity: 1; }
    10% { opacity: 1; }
    100% {opacity: 0; }
}

@-moz-keyframes fadeout {
    /*
     from { opacity: 1; }
     to { opacity: 0; }
   */
    0% { opacity: 1; }
    10% { opacity: 1; }
    100% {opacity: 0; }
}

@keyframes fadeout {
    /*
      from { opacity: 1; }
      to { opacity: 0; }
    */
    0% { opacity: 1; }
    10% { opacity: 1; }
    100% {opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition-property: height, visibility;
        transition-duration: .35s;
    }
}

/* Stack the divs on top of each other reference for CSS below
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=css-overlay-one-div-over-another-div
*/

.container2{
    width: calc(var(--scale-value) / 20.5263152);
    height: calc(var(--scale-value) / 17.7272716);
    /* position: relative; */
    /* margin: 20px; */
}
.box{
    width: calc(var(--scale-value) / 15.600001);
    height: calc(var(--scale-value) / 13.9285718);
    position: absolute;
    border-radius: calc(var(--scale-value) / 55.7142793); /* match tile bevel */
    top: 0; /*calc(var(--scale-value) / -129.999961); OLD*/
    /*left: 1.25;
    top: -1.5;
    bottom: 0;*/
    opacity: 0.4;  /* for demo purpose  */
}
.stack-top{
    z-index: 9;
    /*transform:translate(calc(var(--scale-value) / 285.714286), calc(var(--scale-value) / 333.333333));*/
}




@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: .4; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to { opacity: .4; }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: .4; }
}

.animate {
    background-color: #ff0018;
    color: white;
    -webkit-animation: fadein .75s ease-in alternate infinite;
    -moz-animation: fadein .75s ease-in alternate infinite;
    animation: fadein .75s ease-in alternate infinite;
}






/* QUESTIONABLE section start */

.foot {
    border-top: 1px solid #999999;
    position:fixed;
    width: 600px;
    z-index: 10000;
    /*  text-align:center;  */
    height: 500px;
    font-size:18px;
    color: #000;
    background: rgb(247, 205, 105);
    /* display: flex; */
    /* justify-content: center;  */ /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    /*  right: 0;  */   /* JTL - removed this so the div will align left */
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* bottom: -400px;  */
    bottom: 10%-200px;
    opacity: .98;
}

.slide-up
{
    bottom: 0px !important;
}

.slide-down
{
    bottom: -400px !important;
}




.removeFloatLeft {

    clear:left;   /* This is used to remove any lefter padding from the prior line - this allows for a force left */

}



.whiteForeground {

    color: white;
}

h6 {
    font-size: calc(var(--scale-value) / 24.3750006);
}


#tooltip {
    background: #333;
    color: white;
    font-weight: bold;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 4px;
    display: none;
}

#tooltip[data-show] {
    display: block;
}

#arrow,
#arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}

#arrow {
    visibility: hidden;
}

#arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}

#tooltip[data-popper-placement^='top'] > #arrow {
    bottom: -4px;
}

#tooltip[data-popper-placement^='bottom'] > #arrow {
    top: -4px;
}

#tooltip[data-popper-placement^='left'] > #arrow {
    right: -4px;
}

#tooltip[data-popper-placement^='right'] > #arrow {
    left: -4px;
}

 body
 {
     /* padding-left: 20px;  */
     background-color: #152F4A;

 }


.instructions {
    padding-left: 0px;
}

kbd {

    -webkit-border-radius: calc(var(--scale-value) / 194.999815) !important;

    -webkit-appearance:none;
    border-radius: calc(var(--scale-value) / 50);

    background-color: #eee;
    /*
    border-radius: 3px;
    */
    border: calc(var(--scale-value) / 390.00039) solid #b4b4b4;
    /* box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset; */
    color: #333;
    display: inline-block;
    font-size: calc(var(--scale-value) / 28.6764746);
    font-weight: 700;
    line-height: 1;

    /* padding: 2px 4px;  */

    padding: 0px;

    white-space: nowrap;


    width: calc(var(--scale-value) / 11.142861) !important;
    height: calc(var(--scale-value) / 16.2500004) !important;

    text-align: center;


}




/* Fix for ios to prevent rounded buttons and other styling issues that ios breaks - this is an ovveride
https://stackoverflow.com/questions/5263260/stop-safari-mobile-from-giving-input-buttons-rounded-corners
*/


input[type="submit"] {
    text-align: left;
    -webkit-appearance:none;
    -webkit-border-radius:7px;
    border-radius:2;


    font-weight: 900;
    width: 22px !important;
    /*height: 24px;*/

    padding-bottom: 0px;
    margin-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 1px;



    display:table-cell;


    text-align: center;



}

input[type="button"] {
    text-align: left;
    -webkit-appearance:none;
    -webkit-border-radius: calc(var(--scale-value) / 55.7142793);
    border-radius: calc(var(--scale-value) / 50);

    font-weight: 700;
    /* width: 22px !important;    */    /*Jtl removed this so that I can have different widths for different input buttons - the main width issue still seems resolved without this in place */

    /* height: 24px;  */

    padding-bottom: calc(var(--scale-value) / 78.0000172);
    margin-bottom: calc(var(--scale-value) / 125);
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0;
    margin-right: calc(var(--scale-value) / 212.765957);
    transform: translate(calc(var(--scale-value) / 285.714286), calc(var(--scale-value) / 333.333333));


    display:table-cell;

    text-align: center;

}

.disableHack {
    pointer-events: none;
}

/* End of the ios issues override styling */


.kbdUsedLetter {

    opacity: .4;


}


.christPrefillEnter {
    animation: prefillEnter 2s forwards;
}

@keyframes prefillEnter {
    0% {
        background-color: rgb(243, 243, 243);
        color: #2c8aa8;
        border-color: #b6e7f0;
        opacity: 1;
    }
    5% {
        background-color: white;
        color: white;
        border-color: #fff6b8;
        box-shadow: 0 0 calc(var(--scale-value) / 200) calc(var(--scale-value) / 400) #b5ff8c;
        opacity: 1;
    }
    15% {
        background-color:#f3ad35;
        border-style: solid;
        border-width: calc(var(--scale-value) / 132);
        border-color: #fff6b8;
        color: white;
        box-shadow: 0 0 calc(var(--scale-value) / 200) calc(var(--scale-value) / 400) #b5ff8c;
        opacity: 1;
    }
    70% {
        background-color:#f3ad35;
        border-style: solid;
        border-width: calc(var(--scale-value) / 132);
        border-color: #fff6b8;
        color: white;
        box-shadow: 0 0 calc(var(--scale-value) / 200) calc(var(--scale-value) / 400) #b5ff8c;
        opacity: 1;
    }
    100% {
        background-color:#f3ad35;
        border-style: solid;
        border-width: calc(var(--scale-value) / 132);
        border-color: #fff6b8;
        color: white;
        box-shadow: 0 0 calc(var(--scale-value) / 200) calc(var(--scale-value) / 400) #b5ff8c;
        opacity: 0.7;
    }
}

.christPrefillLock {
    border-style: solid;
    border-width: calc(var(--scale-value) / 132) !important;
    border-color: #fff6b8 !important;
    color: white !important;
    box-shadow: 0 0 calc(var(--scale-value) / 200) calc(var(--scale-value) / 400) #b5ff8c;
    opacity: 0.7;
    animation: christPulse 6s infinite;
}

@keyframes christPulse {
    0% {background-color:#f3ad35;}
    50% {background-color:#ffc350;}
    100% {background-color:#f3ad35;}
}

.keyboardFixedWidth {
    width: calc(var(--scale-value) / 11.4705879);
    height: calc(var(--scale-value) / 7.79999989);
    margin: 0;
    background-color: rgb(243, 243, 243);     /* This was necessary to get the white keyboard background to work on older ios */
    color:#2388b0; /* #2c8aa8 */
    border: solid #a5d8e5;
    /* border-color: #b6e7f0; */
    border-width: calc(var(--scale-value) / 195.000195);


    /*
    These lines below are duplicate but must be also included here as an override so that the user input keyboard has square corners and not round corners like the display keyboard on the top
    */
    -webkit-border-radius: calc(var(--scale-value) / 195.000195) !important;
    -webkit-appearance:none;
    border-radius: calc(var(--scale-value) / 50);

    font-size: calc(var(--scale-value) / 15.600001);
}

input[type="button"].vowelBlock {
    width: calc(var(--scale-value) / 7.5);
    height: calc(var(--scale-value) / 6.8);
    margin: 0;
    background-color: rgb(243, 243, 243);     /* This was necessary to get the white keyboard background to work on older ios */
    color:#2388b0; /* #2c8aa8 */
    border: solid #a5d8e5;
    /* border-color: #b6e7f0; */
    border-width: calc(var(--scale-value) / 195.000195);


    /*
    These lines below are duplicate but must be also included here as an override so that the user input keyboard has square corners and not round corners like the display keyboard on the top
    */
    -webkit-border-radius: calc(var(--scale-value) / 195.000195) !important;
    -webkit-appearance:none;
    border-radius: calc(var(--scale-value) / 50);

    font-size: calc(var(--scale-value) / 15.600001);
    margin-left: calc(var(--scale-value) / 100);
    margin-right: calc(var(--scale-value) / 100);
}

.hintsBtn {
    background-color: var(--hint-btn);
    color: white;
    border: solid calc(var(--scale-value) / 194.999815) var(--hint-border);
    border-radius: calc(var(--scale-value) / 97.5000024) !important;
    visibility: hidden;
}

#closeHints{
    color: #152F4A;  
    margin-top: -0.5vh;
}

.tileOutline {
    display:block;
    margin:0;
    width: calc(var(--scale-value) / 195.000195);
    height: calc(var(--scale-value) / 20.5263152);

}

.tiles {
    background-color: #fcd7b8;
    background-image: var(--tile-color);
    box-shadow: var(--tile-shading);
    color: #1f5ae2;
    color: #07304d;
    color: var( --tile-text-ghost);
    font-weight: bold;
    font-size: calc(var(--scale-value) / 19.5000005);
    width: calc(var(--scale-value) / 15.6);
    height: calc(var(--scale-value) / 14);
    padding-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    border: none;
    transform: translate(0,0) !important;

}

.tilesLit {
    background-color: #f8ac04;
    background-image: var(--lit-tile-color);
    box-shadow: var(--lit-tile-shading);
    color: #000000;
    font-weight: bold;
    font-size: calc(var(--scale-value) / 19.5000005);
    width: calc(var(--scale-value) / 15.6);
    height: calc(var(--scale-value) / 14);
    padding-top: 0px;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    border: none;
}

/* manually change background tile colors to transparent so they do not show on the top and left */
div.animations-container div.example-container:nth-child(5n+0) div.animation-example {
    background-color: transparent;
}

div.animations-container div.example-container:nth-child(5n+1) div.animation-example {
    background-color: transparent;
}

div.animations-container div.example-container:nth-child(5n+2) div.animation-example {
    background-color: transparent;
}

div.animations-container div.example-container:nth-child(5n+3) div.animation-example {
    background-color: transparent;
}

div.animations-container div.example-container:nth-child(5n+4) div.animation-example {
    background-color: transparent;
}

div.animations-container div.example-container:nth-child(5n+5) div.animation-example {
    background-color: transparent;
}



#divFillForTile0::after{
    width: calc(var(--scale-value) / 15.600001);
    height: calc(var(--scale-value) / 13.9285718);
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}

.tilesTransparent {
    opacity: 0;
    /*background: url(assets/images/tile-blank-24.png) no-repeat;*/
    /*width: 24px;*/
    background-position-x: calc(var(--scale-value) / -195.000195);
    background-position-y: calc(var(--scale-value) / -195.000195);
}

.crownsDiv {
    padding-top: 0px;
    padding-bottom: 0px;
}
.crownSize {
    width: calc(var(--scale-value) / 19.5000005);
    height: calc(var(--scale-value) / 19.5000005);
}


.winStateClass {
    color: #850606;
}

#backgroundContainer {
    background-color: white;
    border-radius: 5px;
    padding: 8px;
    margin:auto;
    margin-top:calc(var(--scale-value) / -50);
    margin-bottom: calc(var(--scale-value) / 200);
    width: 100%;
    max-Width: 500px;
}


.floatBottom {

    position: absolute;
    left:    0;
    /* right:    0; */
    bottom:   0;

}

     /* QUESTIONABLE section start */
 .circle {
     border-radius: 50%;
     width: 90px;
     height: 90px;
     padding: 10px;
     background: rgb(247, 205, 105);
     border: 3px solid #000;
     color: #000;
     text-align: center;
     font: 64px Arial, sans-serif, bolder;
     border: 3px solid green;

 }


.smallModalText {
    font-size: clamp(15px, 2vw, 17px);
}

.translation-info {
    fill: var(--gray-info);
    width: 19px;
    height: 19px;
    margin: 5px;
}
.translation-tooltip-container{
    display:flex;
    justify-content: center;
    margin-top: 9px;
    margin-left:-25px;
    margin: 0 0 -20px 0;
    visibility: hidden;
}
.translation-tooltip-popup{
    display: inline-block;
    /* font-size: clamp(13px, 4vw, 15px); */
    font-size: 14px;
    background-color: #9f9b97;
    color: white;
    border-radius: min(5px, 3vw);
    padding: min(4px,1.5vw) min(8px, 2.5vw);
    filter: drop-shadow(0 calc(var(--game-menu-scale)*.006) calc(var(--game-menu-scale)*.006) rgba(0,15,25,0.6));
}
.pointer-move{
    margin:auto;
    transform: translateY(22px);
}
.tooltip-pointer{
    width: 15px;
    height: 15px;
    transform-origin: center;
    transform: rotate(45deg);
    background-color: #a09b98;
}
.pointer-mask{
    pointer-events: none;
    width: 25px;
    height: 25px;
    margin-left: -22px;
    margin-top: 12px;
    /* transform: translate(216px, -22px); */
    overflow:hidden;
    z-index:1;
    visibility: hidden;
}
#bibleReference{
    /* font-size: clamp(20px, 5.5vw, 25px); */
    font-size: 24px;
}


.center {
    margin: auto;
}


.centerText {
    margin: auto;
    /*padding-left: 90px;*/
    /*width: 200px;*/
    display: flex;
    justify-content: center;
}



.centerDoubleButtonLayout {
    margin: auto;
    /*padding-left: 90px;*/
    width: 300px;
    /* display: flex;    */
    justify-content: center;
}
/* QUESTIONABLE section end */


.scoreDisplayStyle {
    /*position: absolute;*/
    border-radius: calc(var(--scale-value) / 129.999961);
    width: calc(var(--scale-value) / 5.99999988);
    height: calc(var(--scale-value) / 17.7272716);
    padding: calc(var(--scale-value) / 390.00039);
    padding-top: calc(var(--scale-value) / 155.999913);
    margin-top: calc(var(--scale-value) / 86.6666782);
    margin-left: calc(var(--scale-value) / -4.44191334);
    /* margin-right: 20px; */
    background: #fddfc7;
    box-shadow: var(--crown-box);
    border: 0px solid #000;
    color: #000;
    text-align: center;
    font: calc(var(--scale-value) / 24.3750006) Arial, sans-serif, bolder;
    /* float: left; */
}

#winStateDisplay {
    font-size: 1.75rem;
}

.results-stat-num {
    font-size: 16px;
}

.results-stat-padding{
    padding: 0.75rem !important;
    border-color: var(--modal-lines) !important;
}

.th-center {
    max-width: 20vw;
    font-size: 12.8px;
}

.table thead th {
    color: var(--modal-text);
    border-top: 1px solid var(--modal-lines);
    border-bottom: 2px solid  var(--modal-lines);
}
.table {
    color: var(--modal-text-data);
}

#myChart{
    margin: auto;
    padding: 0;
}

#hrResults {
    background-color: #99dfee;
    color: #99dfee;
    height: 1px;
    border: none;
    margin: 0;
    opacity: 1;
}
.hrJustify {
    width:100%;
}
.hrCenter {
    width: 100%;
    height: 1px;
    border: 0;
}

input[type='radio'] {
    accent-color: #152e4a;
    width: calc(var(--game-menu-scale)*.04);
    height: calc(var(--game-menu-scale)*.04);
}
input[type='checkbox'] {
    accent-color: #152e4a;
    width: calc(var(--game-menu-scale)*.04);
    height: calc(var(--game-menu-scale)*.04);
}
input[type='checkbox'].preselectionCheck {
    accent-color: #f6a905;
    width: calc(var(--rules-scale-vh) / 45.45);
    height: calc(var(--rules-scale-vh) / 45.45);
}

.largerModeText {
    display: inline;
    font-size: clamp(14px, 2vw, 16px);
}


.rules-text {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size:  clamp(12px, calc(var(--rules-scale-vh) / 50), 16px) !important;
    line-height: 1.22857143;
}

.rules-header {
    font-size: clamp(14px, calc(var(--rules-scale-vh) / 40), 20px) !important;
}

.modal-title {
    font-size: max(calc(100vh / 40), 14px) !important;
    justify-content: left;
    height: calc(100vh / 16.666);
    margin-bottom: 0;
}

.modalTitleBar {
    height: calc(100vh / 16.666);
}

.rules-list {
    color: white;
    font-size: clamp(12px, calc(var(--rules-scale-vh) / 50), 16px);
    width: max(150px, calc(var(--rules-scale-vh) / 3.8416));
    margin-bottom: 0;
    padding: 0 0 0 calc(var(--rules-scale-vh) / 30);
}

.modal-close {
    font-size: calc(100vh / 45) !important;
    width: calc(100vh / 8.333);
    height: calc(100vh / 16.666);
    border-width: calc(100vh / 333.333) !important;
    padding: 0 !important;
}

.deduct-info {
    padding: calc(var(--rules-scale-vh) / 80);
    width:25%;
}

.game-header-break {
    color: white;
    background-color: transparent;
    opacity: 1;
    width: 40vw;
    max-width: 200px;
    margin: auto; 
    margin-top: 0;
    border-width: calc(var(--rules-scale-vh) / 400) 0 0 0;
    border-style: dotted;
}

.rules-header-break {
    color: white;
    border-top: solid calc(var(--rules-scale-vh) / 400);
    margin: calc(var(--rules-scale-vh) / 100);
}
#game-container .rules-background-border {
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: calc(var(--rules-scale-vh) / 50);
    margin-top: calc(var(--rules-scale-vh) / 33.333);
    margin-bottom: calc(var(--rules-scale-vh) / 100);
    width: 93vw;
    max-width: min(425px, 93vh);
    max-height: calc(var(--rules-scale-vh) / 1.4286);
    padding: calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 20) calc(var(--rules-scale-vh) / 66.666);
}

#game-container .rules-background {
    background-color: #63bdd7;
    border-radius: calc(var(--rules-scale-vh) / 50);
    padding: calc(var(--rules-scale-vh) / 50);
    padding-top: calc(var(--rules-scale-vh) / 33.333);
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 200) black;
    width: 83vw;
    max-width: min(400px, 90vh);
    max-height: calc(var(--rules-scale-vh) /1.5385);
}

.rules-bg-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rules-spacing {
    margin-bottom: calc(var(--rules-scale-vh) / 33.333);
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    padding-top: 10vh; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* background-color:#152F4A;
    background-color: #152F4A66; */
    background-image:linear-gradient(#152F4A80, #02112280);
}
.add-blur{
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.add-more-blur{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Modal Content */
.modal-content {
    background-color: var(--modal-background);
    margin: auto;
    padding: 1vw;
    border: var(--modal-border);
    width: 100%;
    margin-bottom: 50px;
}

.radioLabel {
    display: inline;
    font-size: clamp(12px, 2vw, 16px);
}

.closeModal {
    font-size: clamp(12px, 2.5vh, 16px) !important;
    margin-top: 0.4vw;
    margin-right: 1.2vw;
}

.modalIcons {
    font-size: 19px;
    font-size:clamp(15px, 3vw, 19px);
    max-width:19px;
}

.modalBtns {
    /* Older Devices */
    font-size: 13px !important;
    width: 90px;
    height: 57px;
    font-size: clamp(13px, 120%, 15px) !important;
    border-radius: 7% !important;
    border-width: 1.5px !important;
    width: clamp(80px, 25vw, 110px);
    height: clamp(51px, 15.9vw, 70px);
    padding: 0 !important;
}

#viewingOptions {
    margin:auto;
    display:flex;
    justify-content: center;
    font-size: clamp(10px, 120%, 13px);
    margin-bottom: 10px;
}
.viewingOptionsBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: right;
    border: none;
    background-color: transparent;
    color: gray;
}
#viewingBtn:focus {
    outline: none !important;
}
.viewIcon {
    display: flex;
    align-items: center;
    margin-right: 3px;
}
.dropDownFilter{
    display: none;
    margin:auto;
    font-size: clamp(10px, 120%, 13px);
    background-color: #def7fc;
    border-radius: 5px;
    border: solid #99dbee;
    margin-bottom: 25px;
    padding: 5px;
    width: 100%;
}
.labelMargin {
    color:#212529;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.filter-title{
    margin:auto;
    padding: 0;
    padding-top: calc(var(--game-menu-scale)*.12);
    width: 100%;
    text-align: center;
    font-size: calc(var(--game-menu-scale)*.08);
    font-weight: bolder;
    text-shadow: 2px 2px 2.5px rgb(14, 31, 59);
    color: white !important;
    margin-bottom: calc(var(--game-menu-scale)*.02);
}

.filter-header{
    width: min(80%, 325px);
    margin: calc(var(--game-menu-scale)*.035) auto calc(var(--game-menu-scale)*.055) auto;
    color:white;
}

.filterMenu{
    position:fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    /* background-color: #152F4A;
    background-color: #152F4A80; */
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: scroll;
}

.close-filters {
    position:absolute;
    right:0;
    top:0;
    border:none !important;
    outline: none !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: bold;
    font-size: clamp(12px, 2.5vh, 16px) !important;
    margin: calc(var(--game-menu-scale)*.02) calc(var(--game-menu-scale)*.03) 0 0 !important;
    padding: 0;
    z-index: 4;
}

@media (min-width: 768px) {
    .close-filters {
        border: calc(var(--game-menu-scale)*.005) solid #dc3545 !important;
        margin: calc(var(--game-menu-scale)*.06) calc(var(--game-menu-scale)*.06) 0 0 !important;
    }
}

.filter-shadow{
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
}

.results-filter-labels-container{
    position: relative;
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: min(85vw,375px);
    margin: auto;
    margin-bottom: 2px;
}
.results-filter-labels{
    place-self: center;
    font-size: 13px; 
    font-weight: 500; 
    color: var(--gray-icon);
}
.filter-label{
    place-self: start;
}
.prefill-label{
    place-self: end;
}

.prefill-version-box{
    display: flex;
    justify-content: center;
    margin:auto;
    margin-top: calc(var(--game-menu-scale)*.03);
    padding: calc(var(--game-menu-scale)*.05);
    background-color:rgb(255, 255, 255);
    width: calc(var(--game-menu-scale)*.92);
    border-radius: calc(var(--game-menu-scale)*.03) calc(var(--game-menu-scale)*.03) 0 0;
    border-bottom: calc(var(--game-menu-scale)*.005) solid rgb(200, 200, 200);
}

.prefill-version{
    font-size: calc(var(--game-menu-scale)*.055);
    margin-right: calc(var(--game-menu-scale)*-.01);
}
#unlimitedCheckLabel{
    margin-left: calc(var(--game-menu-scale)*.01);
}

.prefill-game{
    font-size: calc(var(--game-menu-scale)*.05);
    margin-right: calc(var(--game-menu-scale)*.01);
   }

.prefill-filters-box{
    display: flex;
    justify-content: center;
    margin:auto;
    padding: calc(var(--game-menu-scale)*.07);
    background-color:#ffe8d4; /* rgb(177, 229, 239) */
    width: calc(var(--game-menu-scale)*.92);
    height: auto;
}

.prefill-datatype-box{
    display: flex;
    justify-content: center;
    margin:auto;
    padding: calc(var(--game-menu-scale)*.05);
    background-color:rgb(255, 255, 255);
    width: calc(var(--game-menu-scale)*.92);
    border-radius: 0 0 calc(var(--game-menu-scale)*.03) calc(var(--game-menu-scale)*.03);
    border-top: calc(var(--game-menu-scale)*.005) solid rgb(200, 200, 200);
    margin-bottom: 50px;
}

.prefill-datatype{
    font-size: calc(var(--game-menu-scale)*.05);
}

.p-filter-center{
    margin-left: calc(var(--game-menu-scale)*-.022);
}

.prefill-toggle-bg{
    border-top-left-radius: calc(var(--game-menu-scale)*.029);
    border-top-right-radius: calc(var(--game-menu-scale)*.029);
    border-bottom-left-radius: calc(var(--game-menu-scale)*.029);
    border-bottom-right-radius: calc(var(--game-menu-scale)*.029);
    width: calc(var(--game-menu-scale)*.12);
    height: calc(var(--game-menu-scale)*.06);
    box-shadow: inset 0 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.003) rgba(0,0,0,0.4);
    overflow:hidden;
}

.prefill-toggle-nob{
    background-color: white;
    border-radius: 100%;
    width: calc(var(--game-menu-scale)*.06);
    height: calc(var(--game-menu-scale)*.06);
    box-shadow: 0 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.003) rgba(0,0,0,0.4);
    pointer-events: none;
    transition: all 0.2s;
}

.prefill-toggle-on{
    transform: translateX(calc(var(--game-menu-scale)*.06));
}

.prefill-grid{
    display: grid;
    grid-template-columns: calc(var(--game-menu-scale)*.15) calc(var(--game-menu-scale)*.15) calc(var(--game-menu-scale)*.07) calc(var(--game-menu-scale)*.15) calc(var(--game-menu-scale)*.15);
    grid-template-rows: 1fr calc(var(--game-menu-scale)*.035) 1fr 1fr 1fr 1fr;
    height: calc(var(--game-menu-scale)*.45);
}

.prefill-way-box{
    place-self: center;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.prefill-del-box{
    place-self: center;
    grid-column: 4 / span 2;
    grid-row: 1;
}

.prefill-game-hr{
    place-self: center;
    grid-column: 1 / span 5;
    grid-row: 2;
    width: 100%;
    margin-top: calc(var(--game-menu-scale)*.03);
}

.prefill-del-hr{
    /* NOT IN USE */
    place-self: center;
    grid-column: 4 / span 2;
    grid-row: 2;
    width: 100%;
    margin-top: calc(var(--game-menu-scale)*.03);
}

.nofill-toggle{
    place-self: center;
    grid-column: 1;
    grid-row: 3;
    background-color: lightGray;
}
.first-toggle{
    place-self: center;
    grid-column: 1;
    grid-row: 4;
    background-color: lightGray;
}
.last-toggle{
    place-self: center;
    grid-column: 1;
    grid-row: 5;
    background-color: lightGray;
}
.vowels-toggle{
    place-self: center;
    grid-column: 1;
    grid-row: 6;
    background-color: lightGray;
}
.christ-toggle{
    place-self: center;
    grid-column: 4;
    grid-row: 3;
    background-color: lightGray;

}
.glory-toggle{
    place-self: center;
    grid-column: 4;
    grid-row: 4;
    background-color: lightGray;

}
.holy-toggle{
    place-self: center;
    grid-column: 4;
    grid-row: 5;
    background-color: lightGray;
}

.toggle-label{
    color: black;
    font-size: calc(var(--game-menu-scale)*.04);
    padding-left: calc(var(--game-menu-scale)*.005);
}

.nofill-label{
    align-self: center;
    grid-column: 2;
    grid-row: 3;
}
.first-label{
    align-self: center;
    grid-column: 2;
    grid-row: 4;

}
.last-label{
    align-self: center;
    grid-column: 2;
    grid-row: 5;

}
.vowels-label{
    align-self: center;
    grid-column: 2;
    grid-row: 6;

}
.christ-label{
    align-self: center;
    grid-column: 5;
    grid-row: 3;

}
.glory-label{
    align-self: center;
    grid-column: 5;
    grid-row: 4;

}
.holy-label{
    align-self: center;
    grid-column: 5;
    grid-row: 5;

}



.incorrectAlertModal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background-color:#152F4A;
    background-color: #152F4A66; */
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.customAlertModal, .imageFeatureModal {
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background-color:#152F4A;
    background-color: #152F4A66; */
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.customModalText {
    height:95vh;
    text-align: center;
    background-color: white;
    border-style: solid;
    border-color: lightgray;
    border-radius: 1vh;
}


.paywall-content {
    text-align:center;
    position:fixed;
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 45px;
    overflow-y:scroll;
}

@media only screen and (min-width: 600px) {
    .paywall-content {
        height:90vh;
        position:inherit;
    }
}

@media only screen and (min-width: 768px) {
    .paywall-content {
        height:95vh;
        position:inherit;
    }
}

.benefit_text {
    text-align:left;
    font-size:2vh;
}


.offering_title {
    text-align: center;
    font-size:2em;
    font-weight:bold;
}

.offering_subtitle {
    text-align: center;
    font-size:1.8em
}

.paywall-close-container {
    display:flex;
    justify-content: center;
    padding-right:20px;
}

.paywall-close-container.mobile {
    justify-content: flex-end;
    padding-right:0px;
}


.btn-modal-close {
    margin: 0;
    border: 0;
    padding: 0;
    background: #5b5b5b;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 150ms;
}
.btn-modal-close .icon-cross {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    width: 15px;
    height: 15px;
}
.btn-modal-close .icon-cross:before, .btn-modal-close .icon-cross:after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 3px;
    background: #fff;
    border-radius: 3px;
}
.btn-modal-close .icon-cross:before {
    transform: rotate(45deg);
}
.btn-modal-close .icon-cross:after {
    transform: rotate(-45deg);
}
.btn-modal-close .icon-cross span {
    display: block;
}

.cross-stand-alone {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    width: 40px;
    height: 40px;
}
.cross-stand-alone:before, .cross-stand-alone:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 4px;
    background: #000;
    border-radius: 4px;
}
.cross-stand-alone:before {
    transform: rotate(45deg);
}
.cross-stand-alone:after {
    transform: rotate(-45deg);
}
.cross-stand-alone span {
    display: block;
}

.cross-1px {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    width: 80px;
    height: 80px;
}
.cross-1px:before, .cross-1px:after {
    content: "";
    position: absolute;
    top: 39.5px;
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
    border-radius: 1px;
}
.cross-1px:before {
    transform: rotate(45deg);
}
.cross-1px:after {
    transform: rotate(-45deg);
}
.cross-1px span {
    display: block;
}

.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

.checkmark {
    display: inline-block;
    width: 44px;
    height: 44px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin-right:40px;
}

.checkmark-container {
    padding-left: 5px;
}

.checkmark_circle {
    position: absolute;
    width: calc(var(--game-menu-scale)*.11);
    height: calc(var(--game-menu-scale)*.11);
    background-color: green;
    border-radius: 22px;
    left: 0;
    top: 0;
}

.checkmark_stem {
    position: absolute;
    width: calc(var(--game-menu-scale)*.015);
    height: calc(var(--game-menu-scale)*.045);
    background-color: #fff;
    left: calc(var(--game-menu-scale)*.051);
    top: calc(var(--game-menu-scale)*.029);
}

.checkmark_kick {
    position: absolute;
    width: calc(var(--game-menu-scale)*.015);
    height: calc(var(--game-menu-scale)*.015);
    background-color: #fff;
    left: calc(var(--game-menu-scale)*.038);
    top: calc(var(--game-menu-scale)*.059);
}

@media only screen and (max-width: 600px) {
 .customModalText {
     height:100vh;
     border-radius: 0px;
     border: none;
 }

    .xs-no-padding {
        padding:0px;
    }
}

@media only screen and (min-width: 600px) {
    .s-no-padding {
        padding:0px;
    }
}

@media only screen and (min-width: 768px) {
    .no-padding {
        padding:0px;
    }
}

.incorrectAlertText {
    position: fixed;
    margin:auto;
    top: calc(var(--scale-value) / 2.60000003);
    width: calc(var(--scale-value) / 1.3);
    height: calc(var(--scale-value) / 2.60000003);
    text-align: center;
    background-color: white;
    border-style: solid;
    border-color: lightgray;
    border-radius: calc(var(--scale-value) / 78.0000172);
}

.incorrectAlertText.larger {
    height: calc(var(--scale-value) / 1.17);
}

.incorrectAlertText.largest {
    height: calc(var(--scale-value) / 0.9);
}

.incorrectAlertText.home-scale {
    height: calc(var(--scale-value) / 1.33);
}

#incorrectGuessText {
    position: fixed;
    color: #152F4A;
    top: calc(var(--scale-value) / 1.95000001);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    padding: calc(var(--scale-value) / 19.5000005);
}

.warningText {
    position: fixed;
    color: #152F4A;
    top: calc(var(--scale-value) / 1.95000001);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    padding: calc(var(--scale-value) / 19.5000005);
}
#warningText.warningText{
    top: calc(var(--scale-value) / 1.5);
}

#warningText.warningText.wrongSolve{
    top: calc(var(--scale-value) / 1.7);
    display: flex;
    height: calc(var(--scale-value) / 3.3);
    justify-content: center;
    align-items: center;
    flex-direction:column;
}

#whoops, #applied {
    position: fixed;
    top: calc(var(--scale-value) / 2.10810813);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    color: #e9a205;
    font-size: calc(var(--scale-value) / 16.2500004);
}

.oopsContainer{
    position:fixed;
    pointer-events: none;
    width:100vw;
    margin:auto;
    left: 0;
    padding-top: calc(var(--scale-value) / 50);
}
.oops{
    width: calc(var(--scale-value) / 3);
    margin:auto;
    filter: drop-shadow(0 2px 3px rgba(36, 40, 78, 0.5));
}


#incorrectGuessModalDiv {
    visibility: hidden;
}

.warningModal {
    visibility: hidden;
}

.checkPosition{
    position: fixed;
    display: flex;
    justify-content: center;
    width: calc(var(--scale-value) / 1.3);
    top: calc(var(--scale-value) / 1.37);
}
.dontPopup {
    position: relative;
    display: inline-flex;
    text-align: center;
    color: #749ab5;
    padding: 0;
}
.preselectionCheck {
    float: right;
    align-items:flex-end;
    align-self:center;
    margin-left: calc(var(--scale-value) / 50);
}
.incorrectAlertText.medium {
    height: calc(var(--scale-value) / 2);
}

.incorrectAlertText.medium-large {
    height: calc(var(--scale-value) / 1.6);
}


.midnightAlertModal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-color:#152F4A;
    background-color: #152F4A66; */
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 99998;
}

.midnightIn {
    animation: nightIn 2.5s forwards;
    opacity:0;
}
@keyframes nightIn {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.midnightAlertText {
    position: fixed;
    margin:auto;
    top: calc(var(--scale-value) / 2.60000003);
    width: calc(var(--scale-value) / 1.3);
    height: calc(var(--scale-value) / 2);
    text-align: center;
    background-color: white;
    border-style: solid;
    border-color: lightgray;
    border-radius: calc(var(--scale-value) / 78.0000172);
    box-shadow: 0 0 calc(var(--scale-value) / 100) calc(var(--scale-value) / 300) rgba(0,10,20,0.3);
}

#midnightText {
    position: fixed;
    color: #152F4A;
    top: calc(var(--scale-value) / 1.95000001);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    padding: calc(var(--scale-value) / 19.5000005);
}

#midnightTitle {
    color: #e9a205 !important;
    position: fixed;
    top: calc(var(--scale-value) / 2.10810813);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    /* color: rgb(200,50,50); */
    font-size: calc(var(--scale-value) / 16.2500004);
}

#closeMidnightAlert{
    margin-top:calc(var(--scale-value) / 6);
    background-color: #43abc5;
    color: white;

}

#midnightModalDiv {
    visibility: hidden;
}

/* TEMP CLASSES FOR SHARE POPUP */
.shareAlertModal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image:linear-gradient(#152F4A80, #02112280);
}
.shareAlertText {
    position: fixed;
    margin:auto;
    top: calc(var(--scale-value) / 2.60000003);
    width: calc(var(--scale-value) / 1.3);
    height: calc(var(--scale-value) / 2.60000003);
    text-align: center;
    background-color: white;
    border-style: solid;
    border-color: lightgray;
    border-radius: calc(var(--scale-value) / 78.0000172);
    z-index: 9001;
}
#sharePopupText {
    position: fixed;
    top: calc(var(--scale-value) /1.9);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    color: rgb(200,50,50);
    font-size: calc(var(--scale-value) / 16.2500004);
}
#sharePopup {
    visibility: hidden;
}

.closeAlert {
    cursor: pointer; /* not working? */
}

/* WIN/LOSE Modal Content
#notifyWinOrLoseModal {
position: fixed;
margin: auto;
z-index: 1;
width: 100%;
}

.endStateModal {
 display: none;
 position: fixed;
 width: 200px;
 Height: 200px;
 top: 30%;
 left: 50%;
 margin-top: -100px;
 margin-left: -100px;
 text-align: center;
 color:rgb(250, 250, 250);
 animation: winLose 3s forwards;
}

@keyframes winLose {
0% {font-size: 0px; opacity: 0;}
40% {font-size: 50px; opacity: 1;}
90% {font-size: 50px; opacity: 1;}
100% {font-size: 50px; opacity: 0;}
}
*/


/* The Close Button Left */
.close {
    color: #aaaaaa;
    float: left;
    font-size: calc(var(--scale-value) / 13.92857142857139);
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


/* The Close Button Left */
.closeLeft {
    color: #aaaaaa;
    float: left;
    font-size: calc(var(--scale-value) / 26);
    font-weight: bold;
    padding-left: calc(var(--scale-value) / 19.5000005);
}

.closeLeft:hover,
.closeLeft:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}



/* The Close Button Left */
.closeCenter {
    color: #aaaaaa;
    float: center;
    font-size: calc(var(--scale-value) / 26);
    font-weight: bold;
}

.closeCenter:hover,
.closeCenter:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}



/* The Close Button */
.closeRight {
    color: #aaaaaa;
    float: right;
    font-size: calc(var(--scale-value) / 26);
    font-weight: bold;
    /*padding-right: calc(var(--scale-value) / 19.5000005);*/
}

.closeRight:hover,
.closeRight:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}



.btn-outline-primary {   /* Override Bootstrap button */
    border-color: brown;

}

.btn-success {
    border-color: #cc8020 !important;
    box-shadow: none !important;
}


pre > code {
    padding: 0;
    margin: 0;
    font-size: 100%;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}
pre code:before,
.markdown-body pre code:after {
    content: normal;
}
pre code {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}
pre {
    word-wrap: normal;
}
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* QUESTIONABLE section end */

/*This overwrites values that are in styles.css / styles.min.css b/c it is repeated here AFTER the include of styles.min.css */
div.animation-example {
    margin-left: auto;
    width: calc(var(--scale-value) / 20.5263152);       /*JTL - this is two less than the normal width of 24 for other shapes in order to not see 2 pixels extra on the right due to the border of the outer div */
    height: calc(var(--scale-value) / 17.7272716);
    margin-right: auto;
    margin-top: calc(var(--scale-value) / -129.999961);
    border-radius: 50%;
}


div.example-container {
    /* position: relative;  */      /* JTL removed to try to resolve ios */
    float: left;

    width: calc(var(--scale-value) / 20.5263152);     /* JTL trying to remove width to see if that resolves ios issues   */

    /* JTL removed to try to resolve ios
    -webkit-perspective: 100px;
    -ms-perspective: 100px;
    -moz-perspective: 100px;
    -o-perspective: 100px;
    perspective: 100px;

    */



    border: 0 solid #cccccc;
    margin-right: calc(var(--scale-value) / 55.7142793); /*JTL was 5 - trying to fix ios tile width issues */  /* 12/2/22 - Changed to 3 to try to prevent wonky line break issues */
    margin-bottom: 0;
    padding-bottom: calc(var(--scale-value) / 64.9999805); /* added padding to make crowns vertical margin even between tilebox and keybox */
}

div.animations-container {
    margin-left: calc(var(--scale-value) / 19.5000005);
    margin-right: 0px;
    padding-top: calc(var(--scale-value) / 28.4671494);
    width: var(--scale-value);
    height: calc(var(--scale-value) / 1.14705883);
    max-width: calc(var(--scale-value) / 1.07526882);
    /* margin-right: auto;  */   /*JTL was auto but this seems redundant so removing - trying to fix ios tile width issues */

}



p {

    /* margin: auto;  */      /*JTL changed from auto to 0 to try to fix ios issues */     /* This overwrites the less css file that sets margin to 0,0 margin: 0 0 (@line-height-computed / 2);   */

    margin: 0px;

}


/* JTL - Fix the Bootstrap bug in Bootstrap 4.x
https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background
*/

.modal-backdrop {
    z-index: -1;
}



.bg-dark {     /* JTL updated nav background */

    background-color: rgb(51, 68, 97) !important;
}

/* JTL override bootstrap default styles so that custom styles in this program are used */

.navbar {     /* JTL updated nav background to be the background color of the body background color */
    margin: auto;
    background-color: #152F4A !important;
    padding-left: calc(var(--scale-value) / 90)  !important;   /* JTL updated nav to not have left padding to be the background color of the body background color */
    padding-right: calc(var(--scale-value) / 100) !important;
    padding-top: 0px  !important;
    padding-bottom: 0px;
    height: calc(var(--scale-value) / 6.50000016);
    border-radius: 0px !important;
    width: var(--scale-value);

}

#hamburgerGraphicCenter{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0;
    padding:0;
    width: 100%;
}

#hamburgerContainerCenter {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*
  padding:2vh;
  padding-bottom:4vh;
  margin: 0;
  margin-top: 2vh;
  background-color: #63bdd7;
  border-radius:40px;
  width:80vw;
  max-width:400px;
  */
}

.hamNavDisabled {
    opacity: 0.4;
    pointer-events: none;
}

.gameLinksWaymaker {
    color: #007499;
    font-size: max(calc(var(--rules-scale-vh) / 50), 14px) !important;
    transition: all 0.15s;
}
.gameLinksWaymaker:hover {
    color: #07304d;
    text-decoration: none;
    font-size: calc(var(--scale-value) / 19.5);
}

.gameLinksDeliverer {
    color: #007499;
    font-size: max(calc(var(--rules-scale-vh) / 50), 14px) !important;
    transition: all 0.15s;
}
.gameLinksDeliverer:hover {
    color: #07304d;
    text-decoration: none;
    font-size: calc(var(--scale-value) / 19.5);
}

.navbar-dark {
    width: 100%;
}

.fixed-top {
    z-index: 1;
}

/* QUESTIONABLE section start */
#game-container {
    margin: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: calc(var(--scale-value) / 27.8571397);
    line-height: 1.22857143;
    width: var(--scale-value);
}


.navbar-toggle.pull-left {
    margin-left: calc(var(--scale-value) / 25.999999);
}

.navbar-toggle.pull-right {
    margin-left: calc(var(--scale-value) / 25.999999);
}

.more-page-link {
    color: white !important;
}
.more-page-link:hover {
    color: rgba(255,255,255,0.8) !important;
}

#copyrightDiv{
    width: 100%;
    margin:auto;
}
.copyright-portrait {
    position:relative;
    /*bottom:2vh;
    left:50%;
    margin-left:-50.46px; */
    color:rgba(255,255,255,0.65);
    text-align:center;
    font-size:12px;
    z-index: -1;
}
.more-copyright-landscape {
    position:relative;
    padding-bottom: 7px;
    /* margin-top: 120vh;
    left:50%;
    margin-left:-42.5px; */
    color:rgba(255,255,255,0.65);
    text-align:center;
    font-size:10px;
    z-index: -1;
}

.login-copyright-landscape {
    position:relative;
    bottom:0;
    padding-bottom: 7px;
    color:rgba(255,255,255,0.65);
    text-align:center;
    font-size:10px;
}

/* For Nav Bar */

.crowns-center-x {
    position: absolute;
    left: 50%;
    top: calc(var(--scale-value) / 38.9999934);  /* JTL This makes the top nav not move when hamburger menu animates*/
    transform: translateX(-50%);
    z-index: 999;
}


.abs-center-x {
    position: absolute;
    left: 50%;
    top: calc(var(--scale-value) / 38.9999934);  /* JTL This makes the top nav not move when hamburger menu animates*/
    transform: translateX(-50%);
    z-index: 999;
}



.solveButtonActive {
    border: calc(var(--scale-value) / 129.999961) solid #eff542 !important;
    margin-left: calc(var(--scale-value) / -38.9999934);
    padding: 0 !important;
}

 #scrollAnchor {
     position: absolute;
     height: calc(var(--scale-value) / 6.50000016);
     width: var(--scale-value);
     transform:translateY(calc(var(--scale-value) / -6.4));
 }

#letterBox {
    /* background-size: contain;
    background-repeat: no-repeat; */
    background-color: var(--letter-box-bg);
    border-radius: calc(var(--scale-value) / 90);
    width: var(--scale-value);
    height: calc(var(--scale-value) / 1.2);
    margin: auto;
    box-shadow: inset 0 calc(var(--scale-value) / 600) calc(var(--scale-value) / 60) calc(var(--scale-value) / 500) rgba(1, 21, 119, 0.4);
}

#shelf1 {
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -1.24481328));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}
#shelf2 {
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -1.46627566));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}
#shelf3 {
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -1.78253119));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}
#shelf4 {
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -2.25733634));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}
#shelf5 {
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -3.10559006));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}
#shelf6 {
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -4.92610837));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}
#shelf7 {
    display: none;
    position: absolute;
    background-size: contain;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -4.92610837));
    width: var(--scale-value);
    height: calc(var(--scale-value) / var(--shelf-value));
}

#bottomBar {
    position: absolute;
    background-size: contain;
    overflow: hidden;
    margin: 0px;
    transform: translateY(calc(var(--scale-value) / -13.6986301));
    width: var(--scale-value);
    height: calc(var(--scale-value) / (var(--shelf-value)/1.46));
}

#keyboardBox {
    /* background-repeat: no-repeat;
    background-size: contain; */
    background-image:var(--key-box-bg);
    border-radius: calc(var(--scale-value) / 90);
    width: var(--scale-value);
    height: calc(var(--scale-value) / 1.53846154);
    padding-left: calc(var(--scale-value) / 12.85);
    padding-top: calc(var(--scale-value) / 23.5);
    margin: auto;
    margin-top: calc(var(--scale-value) / 33);
}

#keyboardBox.waymaker {
    height: calc(var(--scale-value) / 1.38846154);
}

.innerKeyBox {
    position: absolute;
    margin: auto;
    background-color: var(--key-container-bg);
    border-radius: calc(var(--scale-value) / 99);
    border: var(--key-container-border) solid calc(var(--scale-value) / 130);
    width: calc(var(--scale-value) / 1.045);
    height: calc(var(--scale-value) / 2.245);
    margin-left: calc(var(--scale-value) / -17.8);
    margin-top: calc(var(--scale-value) / -50);
}

#blurCenter {
    width: calc(var(--scale-value) / 1.0345);
    height: calc(var(--scale-value) / 2.2286);
    margin: auto;
    transform: translateY(calc(var(--scale-value) / -1.58));
    border-radius: calc(var(--scale-value) / 130) calc(var(--scale-value) / 130) calc(var(--scale-value) / 65) calc(var(--scale-value) / 65);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    display:none;
}

#blurCenter.waymaker {
    transform: translateY(calc(var(--scale-value) / -1.42));
}

.keyboardOverlay {
    width: calc(var(--scale-value) / 1.0345);
    height: calc(var(--scale-value) / 2.2286);
    margin: auto;
    transform: translateY(calc(var(--scale-value) / -1.58));
    border-radius: calc(var(--scale-value) / 130) calc(var(--scale-value) / 130) calc(var(--scale-value) / 65) calc(var(--scale-value) / 65);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    display:none;
}

.keyboardOverlay.waymaker {
    transform: translateY(calc(var(--scale-value) / -1.42));
}

.overlayContent {
    margin-top:25px;
}

.overlayMainContent {
    width:100%;
    position: absolute;
    top: calc(var(--scale-value) / 5.5);
}

.top6 {
    top: calc(var(--scale-value) / 6);
}

.top6-5 {
    top: calc(var(--scale-value) / 6.5);
}

.top12 {
    top: calc(var(--scale-value) / 12);
}

.top16 {
    top: calc(var(--scale-value) / 16);
}





.btnToggleOverlay {
    display: flex;
    align-items:center;
    color:white;
    font-size: calc(var(--game-menu-scale) / 17);
    justify-content:center;
    height: calc(var(--game-menu-scale) / 5);
    width: calc(var(--game-menu-scale) / 5);
    //border-radius: 40px;
    //background-image: radial-gradient(#66bad1, #4ea7c4);
    background: transparent;
    //border: 1px solid #4ea7c4;
    border: 0px;
}

.fishbowl {
    display: flex;
    background-image: radial-gradient(#66bad1, #4ea7c4);
    align-items:center;
    justify-content: center;
    height: calc(var(--game-menu-scale) / 5);
    width: calc(var(--game-menu-scale) / 5);
    border-radius:40px;
    position: absolute;
    clip-path: inset(10% 0 10% 0);
    background-image: none;
    background-color: var(--letter-box-bg);
    color: var(--theme-text-color);
}

.fishbowl.fishbowlBorder{
    background: yellow;
}

.btnToggleOverlay.selected .fishbowl.fishbowlButton {
    height: 76px;
    width: 76px;
}

.blurContainer {
    background-color: rgba(100,225,255,0.2);
    width: 100%;
    height: 101%;
    margin: auto;
    border-radius: calc(var(--scale-value) / 130) calc(var(--scale-value) / 130) calc(var(--scale-value) / 65) calc(var(--scale-value) / 65);
    border: calc(var(--scale-value) / 80) solid #3096b7;
}

.blurAnimationIn {
    animation: blurIn 1s forwards;
    opacity:0;
}
@keyframes blurIn {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.blurAnimationOut {
    animation: blurOut 0.3s forwards;
}
@keyframes blurOut {
    0%{opacity: 1;}
    100%{opacity: 0;}
}

#keyboardRoundEndButtons, #vowelSelector {
    position:absolute;
    left:0;
    top: calc(var(--scale-value) / 0.7425);
    width:100%;
    margin: auto;
    display:none;
}

#vowelSelector {
    top: calc(var(--scale-value) / .74);
}

#selectedLetter {
    position: absolute;
    left: 0;
    top: calc(var(--scale-value) / .77);
    display: block;
    text-align:center;
    width:100%;
    margin:auto;
    display: none;
}

.incorrectLetter {
    font-weight:bold;
    font-size: calc(var(--scale-value) / 15);
    padding-left: 5px;
    padding-right:0px;
}

.selectedLetterNo {
    margin-top: calc(var(--scale-value) / 40);
}

.selectedLetterBlock {
    background: #fff;
    height: calc(var(--scale-value) / 3);
    width: calc(var(--scale-value) / 3.5);
    display: flex;
    border-radius: 5px;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    box-shadow: #0000005c 0px 0px 11px 1px;
}

.selectedLetterText {
    font-size: calc(var(--scale-value) / 6);
    margin-top: calc(var(--scale-value) / -100);
}

.selectedLetterDeduction {
    opacity: .75;
}

.usages {
    align-self:flex-end;
    margin-right:11px;
    padding-bottom:11px;
}

.vowelDeduction {
    text-align:center;
    color:#2388b0;
    font-size: calc(var(--scale-value) / 25);
}

.waymakerFunctionButton{
    font-size: calc(var(--game-menu-scale)*.05);
    color:white;
    text-align: center;
    width: calc(var(--game-menu-scale)*.22);
    height: calc(var(--game-menu-scale)*.09);
    box-shadow: 0 2px 2px 1px #39618e, inset 0 0 8px 3px #397288;
    border-radius: min(12px,2vw);
    border:none;
    z-index: 4;
    padding: 0;
    background-image: linear-gradient(#68b0d9, #36597f);
}

#keyboardRoundEndButtons.hintsCall {
    top: calc(var(--scale-value) / 0.765);
}

.hint-text{
    position: absolute;
    width: 100%;
    pointer-events:none;
}

.hint-text p  {
    background: #152f4aa1;
    padding: calc(var(--scale-value) / 50);
    border-radius: 5px;
    box-shadow: 0 2px calc(var(--scale-value) / 300) calc(var(--scale-value) / 500) rgba(0,10,20,0.3);
}

.keyboardBtns {
    font-size: calc(var(--scale-value) / 30) !important;
    width: calc(var(--scale-value) / 4.333);
    height: calc(var(--scale-value) / 6.8421);
    border-radius: 7% !important;
    border-width: calc(var(--scale-value) / 260) !important;
    padding: 0 !important;
    box-shadow: 0 2px calc(var(--scale-value) / 300) calc(var(--scale-value) / 500) rgba(0,10,20,0.3);
}

.keyboardBtns.hints {
    font-size: calc(var(--scale-value) / 16) !important;
}

.keyboardBtns.vowels {
    font-size: calc(var(--scale-value) / 10) !important;
}

.keyboardIcons {
    font-size: calc(var(--scale-value) / 22);
    width: calc(var(--scale-value) / 19.2);
}

#colorOptions {
    position:fixed;
    width:100vw;
    height: 100vh;
    left:0;
    top:0;
    background-image: linear-gradient(#152F4A80, #061f3a80);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.blurIn {
    animation: blurColorIn .5s forwards;
    opacity:0;
}
@keyframes blurColorIn {
    0%{opacity:0;}
    100%{opacity:1;}
}

.blurOut {
    animation: blurColorOut 0.5s forwards;
}
@keyframes blurColorOut {
    0%{opacity: 1;}
    100%{opacity: 0; visibility: hidden;}
}

.flexCenter{
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    width:100vw;
    height: 70vh;
    top:10vh;
}

.colorBtn {
    color:white;
    margin-bottom:calc(var(--scale-value) / 20);
    background-color: #38a0bd;
    padding:calc(var(--scale-value) / 50);
    width:calc(var(--scale-value) / 3);
    height:calc(var(--scale-value) / 3);
    transition: all 0.15s;
    border-radius: calc(var(--scale-value) / 40) !important;
}
.colorBtn:hover{
    color:white;
    background-color: #5dc2de;
    width:calc(var(--scale-value) / 2.8);
    height:calc(var(--scale-value) / 2.8);
    box-shadow: 0 0 calc(var(--scale-value) / 100) calc(var(--scale-value) / 300) rgba(0,10,20,0.5);
}
.colorBtnSelected {
    color:#38a0bd !important;
    background-color: white;
    padding:calc(var(--scale-value) / 50);
    width:calc(var(--scale-value) / 2.8);
    height:calc(var(--scale-value) / 2.8);
    box-shadow: 0 0 calc(var(--scale-value) / 100) calc(var(--scale-value) / 300) rgba(0,10,20,0.5);
    border-radius: calc(var(--scale-value) / 40) !important;
    margin-bottom:calc(var(--scale-value) / 20);
    transition: all 0.15s;
}
.colorBtnSelected:hover{
    width:calc(var(--scale-value) / 2.7);
    height:calc(var(--scale-value) / 2.7);
}

.hintContainer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--scale-value) / 11.99);
    height: calc(var(--scale-value) / 7.8);
    margin: 0px;
    margin-left: calc(var(--scale-value) / 1.204);
    margin-top: calc(var(--scale-value) / 300);
    opacity: 0.6;
    visibility: hidden;
}

.hintBtn {
    -webkit-appearance:none;
    -webkit-border-radius: calc(var(--scale-value) / 97.5) !important;

    position: absolute;
    width: calc(var(--scale-value) / 11.99);
    height: calc(var(--scale-value) / 7.8);
    border: calc(var(--scale-value) / 180) solid #d28525;
    background-color:#F8AC04;
    border-radius: calc(var(--scale-value) / 97.5) !important;
    padding: calc(var(--scale-value) / 100);
}

.gameboard-footer-text {
    opacity:.8;
}

.gameboard-footer-highlight {
    color: #F8AC04;
    font-size: calc(var(--scale-value) / 16);
}

.game-over.footer {
    margin-top:calc(var(--scale-value) / 16);
}

.game-over.footer.deliverer {
    margin-top:calc(var(--scale-value) / 25);
}

.footer-area {
    margin-top:calc(var(--game-menu-scale) / 20);
    margin-left: calc(var(--scale-value) / -17.8);
    margin-right: calc(var(--scale-value) / 39.8);
    display: flex;
    justify-content: space-between;
    align-items:center;
}

.footer-area.solve-mode {
    justify-content: center;
}

.readyToSolve {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--scale-value) / 100);
    visibility:hidden;
}

#btnFinalSolve {
    width: calc(var(--scale-value) / 2);
    font-size: calc(var(--scale-value) / 18);
    display:none;
}

.hintIcon {
    color: white;
    font-size: calc(var(--scale-value) / 20.5);
}

@media screen and (min-width: 580px) {
    #keyboardBox {
        /*padding-left: 0px;    JL turned off in order to try to fix keyboard shifting  */
    }
}


.rowCorrect {
    padding-left: calc(var(--scale-value) / 25.999999);
    margin-top: calc(var(--scale-value) / 20);
    width: var(--scale-value);
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: calc(var(--scale-value) / -27);

}

.titleRow {
    /* This is to space them evenly*/
    display: -ms-flexbox;
    display: flex;
    justify-content:space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* This is to center the game Version over the board and the others to be flush on the sides
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    */
    margin-right: 0;
    margin-left: calc(var(--scale-value) / -25.999999);
    padding: 0 calc(var(--scale-value) / 39) 0 calc(var(--scale-value) / 39);
}

.col-md-12{
    position: relative;
    width: var(--scale-value);
    padding-right: 0px;
    padding-left: 0px;
}

.centerRows {
    display: flex;
    justify-content: center;
    width: var(--scale-value);
    margin-left: 0px;
}

.tileSpacing {
    display: block;
    height: calc(var(--scale-value) / 8.33333333);
    width: 0;
}

.tileAnimation {
    perspective: 20px;
    transition-duration: 2s;
    display:block;
}

#moreMenu {
    position:fixed;
}


html {
    width: 100vw;
}

.navbar-toggler{
    font-size: calc(var(--scale-value) / 27.8571397);
}

.moreClickSpace {
    display: block;
    padding: calc(var(--scale-value) / 40) calc(var(--scale-value) / 30);
}

body.offcanvas-active{
    overflow:hidden;
}
.offcanvas-header{ display:none; }

@media (max-width: 4000px) {
    .offcanvas-header{ display:block; }
    .navbar-collapse {
        position: fixed;
        z-index: 77777;       /* JTL Merged in this concept from BS 5 - https://github.com/twbs/bootstrap/pull/35153/commits/ec49c84c4dc6e39c3a4176515476578eb808c783 */
        top:0;
        bottom: 0;
        left: 100%;
        width: 100%;
        /* padding-right: calc(var(--scale-value) / 30);
        padding-left: calc(var(--scale-value) / 30); */
        overflow-y: auto;
        visibility: hidden;
        /* background-color: rgb(51, 68, 97); */
        /* background-color: #152F4A; */
        background-image: linear-gradient(#152F4A80, #02112280);
        transition: visibility .4s ease-in-out, transform .4s ease-in-out;
    }
    .navbar-collapse.show {
        visibility: visible;
        transform: translateX(-100%);
    }
}

.premium-info-background-border{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    margin: auto;
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: calc(var(--rules-scale-vh) / 50);
    margin-top: calc(var(--rules-scale-vh) / 40);
    margin-bottom: calc(var(--rules-scale-vh) / 40);
    padding: calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 18) calc(var(--rules-scale-vh) / 66.666);
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
    width: min(350px, 93vw);
}
.premium-info-background {
    background-color: #63bdd7;
    border-radius: calc(var(--rules-scale-vh) / 50);
    padding: calc(var(--rules-scale-vh) / 50);
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 200) black;
    height: auto;
    padding-top: calc(var(--rules-scale-vh) / 85);
    width: min(325px, 88vw);
    text-align: center;
    color: white;
}
.premium-info-item{
    font-size: clamp(14px, calc(var(--scale-value) / 25), 16px) !important;
}

.premium-info-title {
    font-size: clamp(14px, calc(var(--scale-value) / 25), 18px) !important;
    font-weight:bold;
    margin-top: 30px;
}

.premium-info-title:first-child{
    margin-top:15px;
}

.premium-info-button {
    display:flex;
    justify-content: center;
    margin-top:30px;
}

.premium-info-button .playGameBtn {
    position: inherit;
    width: calc(var(--game-menu-scale)*.38)
}

.more-background-border{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    margin: auto;
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: calc(var(--rules-scale-vh) / 50);
    margin-top: calc(var(--rules-scale-vh) / 40);
    margin-bottom: calc(var(--rules-scale-vh) / 40);
    padding: calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 66.666) calc(var(--rules-scale-vh) / 18) calc(var(--rules-scale-vh) / 66.666);
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
    width: min(350px, 93vw);
}
.more-background {
    background-color: #63bdd7;
    border-radius: calc(var(--rules-scale-vh) / 50);
    padding: calc(var(--rules-scale-vh) / 50);
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 200) black;
    height: auto;
    padding-top: calc(var(--rules-scale-vh) / 85);
    width: min(325px, 88vw);
}
.more-item{
    font-size: clamp(14px, calc(var(--scale-value) / 25), 18px) !important;
}


.solvePuzzleButton { /* adjuted button to fit inside background graphic */
    font-size: calc(var(--scale-value) / 20.5263152);
    width: calc(var(--scale-value) / 3.8);
    height: calc(var(--scale-value) / 8);
    margin-left: calc(var(--scale-value) / 97.5000024);
    transform: translate(0, calc(var(--scale-value) / 200));
    background-image: linear-gradient(#F8AC04, #e49f31);
}

.btn.backspaceButton {
    font-size: calc(var(--scale-value) / 20.5263152);
    height: calc(var(--scale-value) / 8);
    margin-left: calc(var(--scale-value) / 171.5);
    transform: translate(0, calc(var(--scale-value) / 200));
    background-image: linear-gradient(#F8AC04, #e49f31);
    color: white;
    width: calc(var(--scale-value) / 11.4705879);
    padding:0px;
    visibility:hidden;
}

.btn.solvePuzzleButton {
    font-size: calc(var(--scale-value) / 25);
    padding:0;
}

.useHintsButton {

    height: 35px;
    margin-left: 3px;
    margin-top: -5px;

}

.btn {
    text-decoration: none !important;
    border-width: calc(var(--scale-value) / 194.999815);
    /*border:calc(var(--scale-value) / 390.00039) solid transparent;*/
    border-radius: calc(var(--scale-value) / 97.5000024);
    padding: calc(var(--scale-value) / 64.9999805) calc(var(--scale-value) / 32.5000008);
    font-size: calc(var(--scale-value) / 20.5);
}


/* Override the Bootstrap style for the fly-over menu close button */

.btn-outline-danger {
    color: #fffefe;
    border:none;
}

.btn-outline-danger:hover {
    color: #fffefe;
    border:none;
    background-color:transparent;
}


.btn-outline-dangerBlackText {
    color: #000000;
    font-size: calc(var(--scale-value) / 26);
    font-weight: bold;
    border-color: #FFFFFF;
    border-width: calc(var(--scale-value) / 390);
}

.resize {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: auto;
    margin: auto;
}





/* ---------===| VERSE VAULT CLASSES |===--------- */

/* Blur Background */
.vault-blur{
    position:fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-image:linear-gradient(#152F4A80, #02112280);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    display:none;
}

/* Title and Close */
.close-vault{
    position:absolute;
    right:0;
    top:0;
    border:none !important;
    outline: none !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: bold;
    font-size: clamp(14px, 2vh, 16px) !important;
    margin: calc(var(--game-menu-scale)*.02) calc(var(--game-menu-scale)*.03) 0 0 !important;
    z-index: 4;
}
@media (min-width: 768px) {

    .close-vault {
        border: calc(var(--game-menu-scale)*.005) solid #dc3545 !important;
        margin: calc(var(--game-menu-scale)*.06) calc(var(--game-menu-scale)*.06) 0 0 !important;
    }
    
}
/* Vault Graphic Background */
.vault-border{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    margin: auto;
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: min(20px, 4vw);
    margin-top: calc(var(--rules-scale-vh) / 40);
    margin-bottom: calc(var(--rules-scale-vh) / 40);
    padding: min(13px, 2vw);
    padding-bottom: min(50px, 15vw);
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
    width: min(425px, 93vw);
    height: clamp(508px, 80vh, 700px);
}

/* Tab Setup */
.vault-tabs{
    width: min(400px, 88vw);
    height: min(127.8px, 28.2vw);
}
.last30DaysTab{
    display:none;
}
.favoritesTab{
    display:block;
}
.vault-tab-text-box{
    position: absolute;
    display: grid;
    grid-template-columns: 50%;
    transform: translateY(max(-127px, -28.2vw));
    width: min(400px, 88vw);
    margin: auto;
    font-size: calc(var(--game-menu-scale)*.054);
    font-weight: 400;
}
.vault-30days-text{
    grid-column-start: 1;
    justify-self: center;
    float:left;
    padding: min(15px, 3vw) min(30px, 5vw);
}
.vault-favs-text{
    grid-column-start: 2;
    justify-self: center;
    float:right;
    padding: min(15px, 3vw) min(30px, 5vw);
}
.vault-active{
    text-shadow: 2px 2px 2.5px rgb(58, 120, 149);
}
.vault-inactive{
    color:#96d6ed;
}
.vault-tab-info{
    position:absolute;
    width: min(400px, 88vw);
    transform: translateY(max(-44px, -10.2vw));
    font-size: clamp(13px, 3.5vw, 16px);
    font-weight: normal;
    text-align:center;
}
.vault-top-bar{
    background-image: linear-gradient(#58caee, #44b1d5);
    height: min(10px,2.2vw);
    width: min(400px, 88vw);
}

/* Favorite Item */
.vault-scroll-box{
    background-color: #85e1f6;
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 100) #002658;
    height: 100%;
    width: min(400px, 88vw);
    border-radius: 0 0 5px 5px;
    overflow:scroll;
}
/* width */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}
   
/* Handle */
::-webkit-scrollbar-thumb {
    background: none; 
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: none; 
}

.vault-fav-item{
    font-size:0;
}
.vault-shelf-shadow{
    background-image: linear-gradient(#2f90ac, #1e6591);
    height: min(7px, 1.5vw);
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.005) calc(var(--game-menu-scale)*.005) #002658a5);
}
.vault-ref-box{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    background-color: #f6d4b5;
    padding: 0 min(7px, 1.5vw) 0 min(10px, 2vw);
    margin-top: max(-7px, -1.5vw);
    height: min(45px,12vw);
    float: left;
}
.vault-ref-text{
    padding-top: min(5px, 1vw);
    font-size: clamp(14px, 4.5vw, 18px);
    text-align:center;
    color: #152f4a;
}
.vault-tab-end{
    display:inline-block;
    width:max(70px, 30%);
    height: min(45px,12vw);
    margin-top: max(-7px, -1.5vw);
    margin-left: -1px;
    background-image: url(../../assets/images/vaultHeartTab.svg);
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow( 0 calc(var(--game-menu-scale)*.01) calc(var(--game-menu-scale)*.01) rgba(0,15,25,0.6));
}
.vault-heart{
    margin-left: min(1.9vw, 7px);
    margin-top: min(1.15vw, 5px);
    fill: #f26d86;
    width: min(11vw, 40px);
    height: min(11vw, 40px);
}
.vault-heart.locked{
    margin-left: min(2.5vw, 7px);
    margin-top: min(2vw, 8px);
    fill: #9a9a9a;
    width: min(8.5vw, 35px);
    height: min(8.5vw, 35px);
}
.vault-tan-shelf{
    position: relative;
    z-index: 2;
    width: 100%;
    height: min(16.5px, 3.6vw);
    margin-top: -1px;
    background-image: linear-gradient(#f6d4b5 57%, #ba9d86, #6a697b);
}
.vault-verse-bg{
    background-color: #45add2; /*OLD - #3ca4ca */
    padding: min(15px, 4vw);
    padding-bottom: 0;
    padding-top: min(25px, 6.4vw);
    height: min(70px, 20vw);
    box-shadow: inset 0 0 calc(var(--rules-scale-vh) / 80) #002657d9;
}
.vault-verse-text{
    font-size: clamp(13px, 3.5vw, 16px);
    font-weight: normal;
    height: clamp(32px, 9vw, 40px);
    text-shadow: 2px 2px 2.5px #0e1f3b70;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vault-shelf-light{
    background-image: linear-gradient(#58caee, #44b1d5);
    height: min(10px,2.2vw);
}

/* Bottom Shelf */
.vault-bottom-bar{
    width: min(400px, 88vw);
    height: min(25px,5vw);
    background-image: linear-gradient(#58caee, #359cbe);
    border-radius: 0 0 5px 5px;
    transform: translateY(max(-15px,-3.5vw));
    z-index: 10;
}

/* VERSE DETAILS POPUP */
.verse-details{
    display:none;
}
.details-center{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
}
.close-details{
    position:absolute;
    right:0;
    top:0;
    border: none !important;
    outline: none !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: bold;
    font-size: clamp(14px, 2vh, 16px) !important;
    margin: calc(var(--game-menu-scale)*.02) calc(var(--game-menu-scale)*.03) 0 0 !important;
    z-index: 4;
}
@media (min-width: 768px) {

    .close-details {
        border: calc(var(--game-menu-scale)*.005) solid #dc3545 !important;
        margin: calc(var(--game-menu-scale)*.06) !important;
        padding: calc(var(--game-menu-scale)*.02);
        width: 45px;
        height: 45px;
    }
    
}
.details-header{
    width: min(75%, 300px);
    margin: auto;
    color: white;
}
.details-content-box{
    width: min(325px, 85vw);
}
.details-ref-box{
    display: grid;
    grid-template-columns: 80% auto;
    background-color: white;
    border-bottom: solid 2px lightgray;
    border-radius: calc(var(--game-menu-scale)*.03) calc(var(--game-menu-scale)*.03) 0 0;
    margin-top: min(15px, 5vw);
    padding: min(15px, 4vw) min(30px, 6vw);
}
.details-ref{
    grid-column-start: 1;
    align-self: center;
    font-size: clamp(15px, 5.5vw, 20px);
    text-align:left;
    color: #152f4a;
}
.details-heart{
    grid-column-start: 2;
    justify-self: right;
    align-self: center;
    fill: #f26d86;
    width: min(11vw, 40px);
    height: min(11vw, 40px);
}
.details-verse-box{
    /* padding: min(20px, 4.5vw) min(30px, 6vw); */
    padding: min(30px, 6vw);
    background-image: linear-gradient(#3096b7, #007499);
    border-radius: 0 0 calc(var(--game-menu-scale)*.03) calc(var(--game-menu-scale)*.03);
}
.details-verse{
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: normal;
    text-shadow: 2px 2px 2.5px #0e1f3b70;
    margin-bottom: 15px;
}
.details-translation{
    text-align: center;
    font-size: clamp(14px, 4vw, 17px);
}

/* VERSE HEART | VAULT */
.verse-page-vault{
    display: flex;
    justify-content: center;
    width: 100%;
}
.verse-heart{
    fill: #f26d86;
    width: min(15vw, 60px);
    height: min(15vw, 60px);
}
.verse-heart-filled{
    display:none;
    margin: min(45px,10vh) 0 min(13.5px,3vh) 0;
}
.verse-heart-unfilled{
    display:block;
    margin: min(45px,10vh) 0 min(13.5px,3vh) 0;
}
.vault-btn{
    font-size: min(18px, 5vw);
    color: var(--gray-text);
}

.results-buttons {
    margin-top: 15px;
    width: var(--scale-value);
}

.results-buttons .verse-page-vault {
    background-color: #007499;
    margin-left:10px;
    margin-right:10px;
    border-radius: 7px;
    padding:5px;
}

.results-buttons .vault-btn {
    background-color: #007499;
    border-color: #023b53;
    color:white;
    font-size: clamp(13px, 120%, 15px) !important;
    display:flex;
    align-items:center;
}

.vault-icon{
  fill: var(--gray-icon);
  margin-right: min(5px, 1.1vw);
  width: min(20px,4.5vw);
  height: min(24px,6vw);
}

.results-buttons .vault-icon {
    fill:white;
}

/* Confirm Unfavorite */
.unfavoriteText{
    position: fixed;
    color: #152F4A;
    top: calc(var(--scale-value) / 2.4);
    width: calc(var(--scale-value) / 1.315);
    text-align: center;
    padding: calc(var(--scale-value) / 19.5000005);
    font-weight: normal;
}
.unfavorite-center{
    position: fixed;
    display: flex;
    justify-content: center;
    width: calc(var(--scale-value) / 1.315);
    top: calc(var(--scale-value) / 1.7);
}
.unfavorite-grid{
    display:grid;
    grid-template-columns: 50% 50%;
    width: calc(var(--scale-value) / 2.1);
}
#yesDelete{
    justify-self: center;
    color: #ffffff;
    width: calc(var(--scale-value) / 5);
    text-align: center;
    padding: calc(var(--scale-value) / 50);
    font-weight: normal;
    border-radius: calc(var(--scale-value) / 45);
    background-color: #f26d86;
    border: solid 2px #c02e53;
}
#noCancel{
    justify-self: center;
    color: #ffffff;
    width: calc(var(--scale-value) / 5);
    text-align: center;
    padding: calc(var(--scale-value) / 50);
    font-weight: normal;
    background-color: #66ccd9;
    border: solid 2px #3d829d;
    border-radius: calc(var(--scale-value) / 45);
}