@charset "UTF-8";
/* Styles for Parent Menu */

:root {
    --form-field-color: #FFAB40;
    --form-field-on: #00C282;
    --form-field-off: #DA462E;

    --form-field-disabled: #aaaaaa;
    --form-field-knob-disabled: #eeeeee;

    --button-back: #0083E1;

    --light-text: #cccccc;

    --disabled-button: #cccccc;

    --noodle-bg: #51F3FF;
    --noodle-bg-warn: #FFD094;

    --active-bg: #00C282;
    --noodle-ok-bg: #00C282;
    --noodle-warn-bg: #FFAB40;
    --noodle-error-bg: #EA341E;
}

* {
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

@font-face {
    font-family: "SuperSimple";
    src: url("../SuperSimple.otf") format("opentype")
}

body {
    font-family: "SuperSimple", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    font-size: 16px;
    padding: 10px 10px 5px 10px;
    min-height:100vh;
}

header {
    display: grid;
    grid-template-columns: 100px 4fr;
    align-items: start;
    margin-bottom: 20px;
}

.headersubline{
    color: var(--light-text);
    font-size:0.9em;
    text-align:right;
}


h1 {
    justify-self: right;
    text-align: right;
    margin: 0;
}

h2 {
    font-size: 20px;
    margin: 30px 0 5px 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

section,
footer {
    text-align: center;
    display: block;
    margin-left: 5px;
    margin-right: 5px;
}

hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid #ddd;
}

button {
    border: none;
    font-family: "SuperSimple", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.backButton {
    outline: 0;
    border: 0;
    max-height: 60px;
    max-width: 60px;
    background: none;
    border-radius: 2em;
    padding: 0;
    font-size: 50px;
    line-height: 50px;
    color: rgb(255, 255, 255);
    background-color: var(--button-back);
    opacity: 0.9;
    text-transform: uppercase;
    aspect-ratio: 1 / 1;
    text-indent: -999px;
    background-image: url(../images/button-back.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

label {
    display: block;
    font-size: 20px;
    margin: 30px 0 5px 0;
}

/* Custom drop down select lists. https://stackoverflow.com/a/67200647/97816  */
select {
    border: none;
    background: var(--form-field-color);
    color: #000;
    padding: 10px 15px;
    font-family: 'SuperSimple';
    border-radius: 20px;
    font-size: 16px;
    min-width: 180px;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand {
    display: none; /* remove default caret for ie */
}
.selectwrap {
    overflow: hidden;
    position: relative;
    display: inline-block;
}
.selectwrap::after {
    content: "▼";
    position: absolute;
    right: 8px;
    top: calc(50% - .7em);
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 1em;
    pointer-events: none;
}
select:focus-visible {
    outline: none;
}
/* Saving Sherri's work:
.selectwrap:after {
    content: "▼";
    padding: 6px 6px;
    position: absolute;
    right: 8px;
    top: 0;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
}
*/
/* END - Custom drop down select lists. */


.characterbg {
    background-image: url("../images/jimmy-gesture.png");
    /*padding-bottom: 160px;*/
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 300px;
}

.characterbg-padding {
    margin-bottom:160px;
}

@media only screen and (min-width: 460px) {
    .characterbg {
        background-size: 420px;
    }
}
.characterbg.jimmybg {
    background-image: url("../images/jimmy-gesture.png");
}


.button {
    display: block;
    background-color: var(--form-field-color);
    width: fit-content;
    margin: 0 auto;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    border-radius: 20px;
}

.fullButton {
    margin: 22px auto;
    width: 100%;
    max-width: 350px;
}

.inlineButton {
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}

.dangerButton,
.errorButton{
    background-color: var(--form-field-off);
}

button.dangerButton:disabled,
button.dangerButton[disabled],
button.errorButton:disabled,
button.errorButton[disabled]{
    background-color: var(--disabled-button);
}

.toggleButton{
    background-color: #fff;
}
.toggleButton .onlabel{
    display:none;
}
.toggleButton .offlabel{
    display:inline;
}
.toggleButton.active{
    background-color: var(--form-field-off);
}

.toggleButton.active .onlabel{
    display:inline;
}
.toggleButton.active .offlabel{
    display:none;
}


.red {
    background-color: #DB4630;
}

.green {
    background-color: #02986A;
}

.largerFont {
    font-size: larger;
}

.mainContent {
    position: relative;
    min-height: 100vh;
    max-width: 800px;
    margin: 0 auto;
}

.lightText {
    color: var(--light-text);
}

.playlistIcon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0784DC;
}

.playlistRow {
    display: grid;
    gap: 0.5em;
    align-items: flex-start;
    margin: 10px 0;
    grid-template-columns: 50px 60px 1fr;
    padding: 10px 25px;
}

.playlistRowElement {
    align-self: center;
    justify-self: left;
}


/* ** HTML Confirmation Dialog ** */
dialog.modalDialog {
    max-width: 400px;
    text-align: center;
    border-radius: 10px;
    border-color: #999;
}

@media only screen and (max-width: 408px) {
    dialog.modalDialog {
        margin-left:4px;
        margin-right:4px;
    }
}


dialog.modalDialog button {
    display:inline-block;
    margin: 0 6px;
}

dialog.modalDialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

dialog.modalDialog button.cancelButton {
    background-color: #aaa;
}

dialog.modalDialog button.confirmButton {
    background-color: var(--form-field-on);
}

/* ** Friendly Checkboxes Buttons ** */
input[type=checkbox].friendly-checkbox {
    position: relative;
    top: -1px;
    width: 2.6em;
    height: 2.6em;
    color: #fff;
    display: inline-block;
    /*border: 2px solid #99a0a6;*/
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    cursor: pointer;
    background: #10ce28;
    vertical-align: middle;
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    vertical-align: middle;
}

label.friendly-checkbox-label {
    cursor: pointer;
    text-align: left;
    vertical-align: middle;
}

input[type=checkbox].friendly-checkbox:checked {
    color: #fff;
    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
    /*border-color: #363839;*/
    background: #10ce28;
}

input[type=checkbox].friendly-checkbox:disabled {
    color: #363839;
    border: 2px solid #ccc;
    background: #10ce28;
}

input[type=checkbox].friendly-checkbox:checked::before {
    opacity: 1;
}

/* --- END friendly checkboxes --- */




/* Index page */
.mainMenu {
    display: grid;
    margin: 0 auto;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    max-width: 600px;
}

.mainMenu li {
    width: 100%;
}

.mainMenu.singleMenu {
    grid-template-columns: 1fr;
}
.mainMenu.singleMenu li {
    width: 80%;
    max-width: 300px;
}

.mainMenu a {
    display: grid;
    width: 100%;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: black;
    grid-gap: 5px;
    /* opacity: .2; */
    transition: all .3s ease-in;
    transform-origin: -100% 50%;
}

.mainMenu .icon {
    background: lightblue;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 40px;
    background-size: cover;
}

.mainMenu .label {
    font-size: 20px;
}

/* The following rule will preload the onclick images for the menu into the body in an invisible way.
 * This prevents the flicker when the onclick swaps the image for the animated one. */
body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; /* hide images */
   content:url(../images/menu/CustomerSupport-Idle.png) url(../images/menu/CustomerSupport-Open.png);   /* preload images */
}

.mainMenuSettings .icon {
    background-color: #74cfc3;
    background-image: url(../images/menu/parentmenu_settings.jpg);
}

/*
.mainMenuSettings.clicked .icon {
    background-image: url(../images/icon-settings-temp_hover.png);
}
*/

.mainMenuContent .icon {
    background-color: #fbda4b;
    background-image: url(../images/menu/parentmenu_content.jpg);
}

/*
.mainMenuContent.clicked .icon {
    background-image: url(../images/icon-content-temp_hover.png);
}
*/

.mainMenuOffline .icon {
    background-color: #b1dde2;
    background-image: url(../images/menu/parentmenu_offlinemode.jpg);
}

.mainMenuSubscription .icon {
    background-color: #2e91c9;
    background-image: url(../images/menu/parentmenu_subscription.jpg);
}

.mainMenuSupport .icon {
    background-color: #80c9d5;
    background-image: url(../images/menu/parentmenu_customersupport.jpg);
}

/*
.mainMenuSupport.clicked .icon {
    background-image: url(../images/menu/CustomerSupport-Open.png);
}
*/

.bounce {
    position: relative;
    animation: bounce 0.5s ease-in-out 0s 1 normal both;
}

@keyframes bounce {
    0% {
        transform: rotate(-1deg);
    }

    25% {
        transform: rotate(0.5deg);
    }

    50% {
        transform: rotate(-0.5deg);
    }

    75% {
        transform: rotate(0.25deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

.footerMenu {
    display: grid;
    max-width: 600px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    text-align: center;
    margin-top: 40px;
    grid-gap: 10px;
    hyphens: auto;
}

.footerMenu a {
    background-color: #02986A;
    width: fit-content;
    padding: 10px 20px;
    border-radius: 20px;
    color: black;
    text-decoration: none;
    max-width: 100%;
    word-break: break-word;
}



/* Settings Page */

.settingsPage {
    background-image:  url("../images/jimmy-gesture.png");
    background-size: 330px;
    background-repeat: no-repeat;
    background-position: calc(50% - 84px) calc(100% + 56px);
    padding-bottom: 0;
    min-height: calc(100vh - 10px);

}
.settingsPage .mainContent {
    padding-bottom: 185px;
    min-height: unset;
}

a.appIcon {
    display: block;
    width: 100px;
    height: 100px;
    background: turquoise;
    border-radius: 20px;
    margin: 0 auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px #ddd solid;
}

.storageBar {
    width: 100%;
    height: 100px;
    background-color: #FE8720;
    border-radius: 20px;
}

.storageKey {
    display: grid;
    grid-template-columns: auto auto auto;
    padding-top: 5px;
    gap: 6px;
}

.storageKey div {
    text-align:center;
}

.storageKey .favorites {
    color: #0784DC;
}

.storageKey .total {
    color: #FE8720;
}

.storageKey .remaining {
    color: #00C282;
}

/* Custom slider checkboxes */
.toggleSwitch {
    display: grid;
    align-items: center;
    margin: 10px 0;
    grid-template-columns: 1fr 72px;
    background: var(--form-field-color);
    padding: 10px 20px 10px 25px;
    border-radius: 40px;
    min-width: 200px;
    max-width: 800px;
}

.toggleSwitch input[type=checkbox] {
    display: none;
}

.toggleSwitch label {
    display: inline-flex;
    margin: 0 0 0 0;
    margin-right: 10px;
    font-size: 16px;
    text-align: left;
}

.toggleSwitch .switchBody {
    background-color: var(--form-field-off);
    border: solid 4px var(--form-field-off);
    border-radius: 999px;
    display: inline-flex;
    justify-content: flex-start;
    cursor: pointer;
    width: 72px;
    transition: all 0.1s ease;
}

.toggleSwitch .toggle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background-color: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    transition: transform 0.1s ease;
}

/* When the switch is readonly/disabled, turn it grey. */
.toggleSwitch input[type=checkbox]:disabled + .switchBody {
    background-color: var(--form-field-disabled);
    border: solid 4px var(--form-field-disabled);
}
.toggleSwitch input[type=checkbox]:disabled + .switchBody>.toggle {
    background-color: var(--form-field-knob-disabled);
}


.toggleSwitch.active .switchBody {
    background-color: var(--form-field-on);
    border: solid 4px var(--form-field-on);
}

.toggleSwitch.active .switchBody .toggle {
    transform: translateX(100%);
}

/* END - Custom slider checkboxes */


.hidden {
    display: none !important;
}

.singlepanel {
    display: flex;
    width:100%;
}

.dualpanel {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: flex-start;
    gap: 20px;

/*
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
*/
}

@media only screen and (max-width: 699px) {
    .dualpanel {
        flex-wrap: wrap;
    }

}

/* ******** Noodle Bubble Box **************** */

.noodle-background {
    position:relative;
    overflow: hidden;
    background-color: var(--noodle-bg);
    border-radius: 16px;
    font-weight: normal;
    padding: 10px 10px 0 10px;
    min-width: 210px;
    width:100%;
    margin-top: 20px;
    font-size: 11pt;
    text-align: left;
}
.noodle-bg-ok {
    background-color: var(--noodle-bg);
}
.noodle-bg-warn {
    background-color: var(--noodle-bg-warn);
}


.noodle-bubble {
   text-align:center;
   background-color: var(--noodle-ok-bg);
   color: #fff;
   max-width:500px;
   border-radius: 12px;
   padding:12px 12px 0 12px;
   margin: 4px auto 0 auto;
}

.noodle-ok .noodle-bubble {
   background-color: var(--noodle-ok-bg);
}
.noodle-warn .noodle-bubble {
   background-color: var(--noodle-warn-bg);
}
.noodle-error .noodle-bubble {
   background-color: var(--noodle-error-bg);
}

.noodle-text{
    display:inline-block;
    margin: 20px 0 30px 0;
}

.noodle-bubble::after,
.noodle-ok .noodle-bubble::after {
  content:url('../images/bubble-tail-green-right.png');
  position:relative;
  /*left: -80px;*/
  padding-right: 150px;
  bottom: -38px;
}
.noodle-warn .noodle-bubble::after {
  content:url('../images/bubble-tail-orange-right.png');
}
.noodle-error .noodle-bubble::after {
  content:url('../images/bubble-tail-red-right.png');
}

.noodle-left .noodle-bubble::after,
.noodle-left.noodle-ok .noodle-bubble::after {
  content:url('../images/bubble-tail-green-left.png');
  /*left: 80px;*/
}
.noodle-left.noodle-warn .noodle-bubble::after {
  content:url('../images/bubble-tail-orange-left.png');
}
.noodle-left.noodle-error .noodle-bubble::after {
  content:url('../images/bubble-tail-red-left.png');
}

.noodle-bubble p {
    margin-bottom:0;
}

.noodle-bubble h2 {
    font-size:1.4em;
    margin-top: 5px;
    margin-bottom: 0;
}

.noodle-bubble button.paleButton {
    background-color: white;
    color: black;
    margin-top: 20px;
}



.noodle-wrap {
    position: relative;
    z-index: 4;
    display:block;
    margin: 0 auto 0 auto;
    width: 220px;
    height: 194px;
    /*bottom: 206px;
    right: 40px;*/
    padding: 0;
    padding-left: 20px;
}
.noodle-left .noodle-wrap {
    padding-right: 20px;
}

@media only screen and (max-width: 1100px) {
    .noodle-wrap {
        /* right: 20px;*/
    }
    .noodle-left .noodle-wrap {
        /*left: 20px;*/
    }
}


.noodle {
    position: inherit;
    z-index: 2;
    /*right: 10%;
    bottom: -16px;*/
    background-image: url('../images/noodle.png');
    background-repeat: no-repeat;
    width: 220px;
    height: 194px;
    background-position: center;
    background-size: contain;
}

.noodle-left .noodle{
    /*margin-left:-180px;*/
}

.noodle-sad .noodle {
    background-image: url('../images/noodle-sad.png');
}

.noodle-left.noodle-sad .noodle {
    background-image: url('../images/noodle-sad-left.png');
}





/*

@media only screen and (max-width: 699px) {
    .noodle-bubble::after {
        left: -80px;
    }
    .noodle-left .noodle-bubble::after {
        left: 80px;
    }

    .noodle-wrap {
        right: 10px;
    }
    .noodle-left .noodle-wrap {
        left: 10px;
    }
}

@media only screen and (max-width: 400px) {
    .noodle-bubble::after {
        left: -80px;
    }
    .noodle-left .noodle-bubble::after {
        left: 80px;
    }

    .noodle-wrap {
        right: -10px;
    }
    .noodle-left .noodle-wrap {
        left: -10px;
    }
}
*/


.footer-character-jimmy{
    width: 300px;
    margin: 0 auto 0 auto;
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

.footer-character {
    width:420px;
    position:absolute;
    right: 0;
    margin:0;
    padding:0;
}
@media only screen and (max-width: 420px) {
    .footer-character {
        width:100%;
    }
}

/* *********** END Noodle Bubble Box ************* */


/* Offline Mode Page */
.offline-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    gap: 4px;
    margin-bottom:30px;
}
.content-icon img {
    width:40px;
    height: 40px;
}




/* App Icon Page */
.selectIcon {
    display: grid;
    width:100%;
    justify-content: center;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin: 0 auto;
}

@media only screen and (max-width: 500px) {
    .selectIcon {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
}

@media only screen and (max-width: 400px) {
    .selectIcon {
        gap: 15px;
    }
}

div.checkboxContainer {
    max-width:128px;
    width: 100%;
    /*justify-self: center;*/
}

.selectIcon input {
    width: 0;
    height: 0;
    opacity: 0;
    display: block;
    margin: 0;
    padding: 0;
}

.selectIcon label {
    display: block;
    background: #D9D9D9;
    background-size:cover;
    background-repeat:no-repeat;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    margin: 0;
    transition: all ease-in-out 0.1s;
    max-width:128px;
}

.selectIcon label:active {
    transform: scale(1.1);
    background-color: #07d5dc;
}

.selectIcon label.highlighted {
  -webkit-box-shadow:inset 0px 0px 0px 8px #FFDA35;
  -moz-box-shadow:inset 0px 0px 0px 8px #FFDA35;
  box-shadow:inset 0px 0px 0px 8px #FFDA35;
}




/* Content Page */
.playlistButtons {
    display: grid;
    grid-template-columns: auto auto auto;
    margin-bottom: 40px;
}



/* Subscription Page */
.confirmBox {
    position: absolute;
    padding: 2em;
    background: #ff0000eb;
    color: white;
    border-radius: 30px;
    top: 1em;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .2);
    border: solid 3px white;
    z-index:50;
}

.confirmBoxButtons {
    padding-top: 1em;
}

.confirmBoxButtons button {
    padding: 10px 14px;
    border-radius: 10px;
    background: white;
}


/* Notices/warning boxes. */
#content-error,
#loading {
    margin-top:30px;
    display: block;
    text-align: center;
}