.iwalp-menu {
    overflow-x: hidden;
}

.iwalp-menu li {
    cursor: pointer;
    -webkit-transition: background-color 900ms, -webkit-transform 900ms;
    transition: background-color 900ms, -webkit-transform 900ms;
    transition: background-color 900ms, transform 900ms;
    transition: background-color 900ms, transform 900ms, -webkit-transform 900ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.iwalp-menu .active {
    background-color: var(--walp_theme_menu_background_color_selected);
}

.iwalp-menu .active-child {
    background-color: var(--walp_theme_menu_background_color_marked);
}

.iwalp-menu li:hover {
    -webkit-transition: all 450ms;
    transition: all 450ms;
    background-color: var(--walp_theme_menu_background_color_hightlight);
    /*transform: scale(1.05) translateY(-1px);*/
}

#app {
    height: 100%;
}

#app,
#app * {
    box-sizing: border-box;
}

.cardListView {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cardListView * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn {
    position: relative;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    z-index: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bgred {
    background: red;
    color: white;
}

.bggreen {
    background: green;
    color: white;
}

.input-placeholder input {
    font-size: 1em;
    outline: none;
    box-shadow: none;
}

.input-placeholder input::-webkit-input-placeholder {
    font-size: 1em !important;
    font-weight: bold;
    text-transform: uppercase;
}

.input-placeholder input:-internal-autofill-selected,
.input-placeholder input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset !important;
    background: none !important;
    color: white !important;
    font-size: 1em !important;
}

.input-placeholder input:not(:placeholder-shown)~.place-holder {
    top: 5px;
    display: block;
    opacity: 1;
    font-size: 0.6em;
}

.input-placeholder .place-holder {
    font-size: 1em;
    position: absolute;
    display: none;
    opacity: 0;
    text-transform: uppercase;
}

.input-placeholder.white input::-webkit-input-placeholder {
    color: #FFF;
}

.input-placeholder.white input,
.input-placeholder.white .place-holder {
    color: #FFF;
}

.input-placeholder input:-webkit-autofill,
.input-placeholder input:-webkit-autofill:hover,
.input-placeholder input:-webkit-autofill:focus,
.input-placeholder input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out, font-size 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

@-webkit-keyframes pm {
    from {
        opacity: 0.99999;
    }
}

@keyframes pm {
    from {
        opacity: 0.99999;
    }
}

.menu-select>li:hover {
    background-color: var(--walp_theme_primary_container);
    color: var(--walp_theme_on_primary_container);
}

.menu-select>.active {
    background-color: var(--walp_theme_secondary);
    color: var(--walp_theme_on_secondary)
}

.menu-line {
    height: 100%;
    position: relative;

}

.menu-line .line {
    position: absolute;
    width: 50%;
    height: 2px;
    background-color: var(--walp_theme_icon_color);
    top: calc(50% - (2px / 2));
    left: calc(50% - 25%);
    -webkit-transition: 250ms;
    transition: 250ms;
}

.menu-line .line.line-top {
    top: calc(50% - (2px / 2) - (2px * 3));
}

.menu-line .line.line-middle {
    top: calc(50% - (2px / 2));
}

.menu-line .line.line-bottom {
    top: calc(50% - (2px / 2) + (2px * 3));
}

.menu-line.active .line.line-top {
    top: calc(50% - (2px / 2));
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);

}

.menu-line.active .line.line-middle {
    top: calc(50% - (2px / 2));
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);

}

.menu-line.active .line.line-bottom {
    top: calc(50% - (2px / 2));
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);

}

.skeleton.line {
    background-image: linear-gradient(90deg, #F4F4F4 0px, rgba(199, 196, 196, 0.8) 80px, #F4F4F4 160px);
    background-size: 1000px;
    -webkit-animation: shine-lines 1s infinite linear;
    animation: shine-lines 1s infinite linear;
    color: transparent;
}

.iconpopanimation {
    -webkit-animation: iconpop 250ms linear both;
    animation: iconpop 250ms linear both;
}

@-webkit-keyframes iconpop {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    90% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes iconpop {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    90% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes shine-lines {
    0% {
        background-position: -250px;
    }

    100% {
        background-position: 250px;
    }
}

@keyframes shine-lines {
    0% {
        background-position: -250px;
    }

    100% {
        background-position: 250px;
    }
}

.card-sound.active {
    background-color: rgb(200, 255, 200) !important;
}

.card-sound.active .checked {
    display: block !important;
}

.progressbar.paused {

    -webkit-animation: progresspaused 3s infinite linear;

    animation: progresspaused 3s infinite linear;
}

@-webkit-keyframes progresspaused {
    0% {
        background-color: var(--walp_theme_menu_background_color_hightlight);
    }

    25% {
        background-color: var(--walp_theme_menu_background_color_marked);
    }

    50% {
        background-color: var(--walp_theme_menu_background_color_selected);
    }

    75% {
        background-color: var(--walp_theme_menu_background_color_marked);
    }

    100% {
        background-color: var(--walp_theme_menu_background_color_hightlight);
    }
}

@keyframes progresspaused {
    0% {
        background-color: var(--walp_theme_menu_background_color_hightlight);
    }

    25% {
        background-color: var(--walp_theme_menu_background_color_marked);
    }

    50% {
        background-color: var(--walp_theme_menu_background_color_selected);
    }

    75% {
        background-color: var(--walp_theme_menu_background_color_marked);
    }

    100% {
        background-color: var(--walp_theme_menu_background_color_hightlight);
    }
}

.mobile_notification_image.active,
.mobile_book_notification_image.active {
    -webkit-animation: notification 1s infinite linear;
    animation: notification 1s infinite linear;
    /* background-color: transparent !important; */
}

@-webkit-keyframes notification {
    0% {
        -webkit-transform: scale(1) rotate(0deg) rotateY(180deg);
        transform: scale(1) rotate(0deg) rotateY(180deg);
    }

    20% {
        -webkit-transform: scale(1.1) rotate(0) rotateY(180deg);
        transform: scale(1.1) rotate(0) rotateY(180deg);
    }

    40% {
        -webkit-transform: scale(1.1) rotate(-20deg) rotateY(180deg);
        transform: scale(1.1) rotate(-20deg) rotateY(180deg);
    }

    60% {
        -webkit-transform: scale(1.1) rotate(20deg) rotateY(180deg);
        transform: scale(1.1) rotate(20deg) rotateY(180deg);
    }

    80% {
        -webkit-transform: scale(1.1) rotate(0) rotateY(180deg);
        transform: scale(1.1) rotate(0) rotateY(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg) rotateY(180deg);
        transform: scale(1) rotate(0deg) rotateY(180deg);
    }
}

@keyframes notification {
    0% {
        -webkit-transform: scale(1) rotate(0deg) rotateY(180deg);
        transform: scale(1) rotate(0deg) rotateY(180deg);
    }

    20% {
        -webkit-transform: scale(1.1) rotate(0) rotateY(180deg);
        transform: scale(1.1) rotate(0) rotateY(180deg);
    }

    40% {
        -webkit-transform: scale(1.1) rotate(-20deg) rotateY(180deg);
        transform: scale(1.1) rotate(-20deg) rotateY(180deg);
    }

    60% {
        -webkit-transform: scale(1.1) rotate(20deg) rotateY(180deg);
        transform: scale(1.1) rotate(20deg) rotateY(180deg);
    }

    80% {
        -webkit-transform: scale(1.1) rotate(0) rotateY(180deg);
        transform: scale(1.1) rotate(0) rotateY(180deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg) rotateY(180deg);
        transform: scale(1) rotate(0deg) rotateY(180deg);
    }
}


.navSubMenuOptions {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    box-shadow: inset 2px 0px 3px #000;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: auto;
}