html,
body {
    margin: 0;
    padding: 0;
}


.gift-animado {
    width: 150px;
    height: auto;
}

.popup-text{
    font-family: 'Lilita One', Regular;
    font-size: 30px;
    color: white;
    font-weight: 500;
}

div.content-popup{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-contenido {
    /*background-image: url('../../assets/images/background-popup.png'); */
    background-color: #0379e2;
    background-image: url('../../assets/images/sky-background.png');
    background-position-y: 100%;
    background-size: 100%; 
    background-repeat: no-repeat;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    width: 600px; 
    height: 400px; 
    border-radius: 30px; 
    text-align: center;
}

img.close{
    width: 50px;
    height: 50px;
}

.cerrar {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}

.dropdown > .btn-secondary {
    color: #000;
    background-color: #fdfeff;
    border-color: #fdfeff;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
}

.voice-images{
    padding: 15px

}

.hover-effect-login:hover {
    content: url("../../assets/images/login-hover.png");
}

.text-voices-c{
    font-family: 'Lilita One', Regular;
    font-size: 22px;
    color: white;
    font-weight: 700;
}

.drop-zone {
    border-radius: 15px;
    border-style: dotted;
    border-color: #FEBC30;
    background-color: white;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow-y: auto;
    scrollbar-color: #3498db #f1f1f1;
    scrollbar-width: thin;
}

.drop-zone::-webkit-scrollbar {
    width: 11px;
}


.drop-zone::-webkit-scrollbar-thumb {
    background-color: #febc31;
}

.image-thumbnail>button {
    background-color: red;
    color: white;
    font-size: 17px;
    border-radius: 20px;
    padding: 10px;
    border-color: red;
    cursor: pointer;
}

ul>li>a.nav-link:hover {
    text-decoration: underline;
}

ul>li>a.nav-link:active {
    text-decoration: underline !important;
}

body {
    background: transparent linear-gradient(237deg, #0697F2 0%, #005AD1 100%) 0% 0% no-repeat padding-box;
}

li>a.nav-link,
.user-text {
    color: white !important;
    font-size: 12px;
    font-weight: 700;
}


#choose-genre,
#adventurer,
#choose-hero,
#customize,
#storyline,
#voice,
#tweaks {
    position: relative;
}

.content-buttons-bn {
    position: absolute;
    bottom: 10px;
    width: 100%;
}



.btn-primary {
    opacity: 1;
    font-weight: bold;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
}



.icon-user {
    max-width: 51px;
    max-height: 51px;
    padding-top: 10px;
}

a {
    text-decoration: none;
    color: white;
}

.icon-star {
    width: 51px;
    height: 51px;
    margin-left: -12px;
}

.star-button {
    width: 307px;
    height: 51px;
    background-color: #FDE157;
    border-radius: 67px;
}

.credits-text {
    color: #4B4B4B;
    font-size: 11px;
}


html {
    height: auto !important;
}

body {
    background: transparent linear-gradient(237deg, #0697F2 0%, #005AD1 100%) 0% 0% no-repeat padding-box;
}

.container-fluid {
    max-width: 1920px;
}


li>a.nav-link,
.user-text {
    color: white !important;
    font-size: 13px;
    font-weight: 700;
    margin-left: 5px;
    margin-right: 5px;
}

.btn-primary {
    opacity: 1;
    font-weight: bold;
    border: none;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
}

.icon-user {
    max-width: 51px;
    max-height: 51px;
    padding-top: 10px;
}

a {
    text-decoration: none;
    color: white;
}

.icon-star {
    width: 51px;
    height: 51px;
    margin-left: -12px;
}

.star-button {
    width: 307px;
    height: 51px;
    background-color: #FDE157;
    border-radius: 67px;
}

.credits-text {
    color: #4B4B4B;
    font-size: 11px;
}

#nav-new-story-tab,
#nav-story-loading-tab,
#nav-choose-hero-tab {
    background-color: #FFD138 !important;
    border: 2px solid #FFD138;
}


/*Images customized rotation*/



img.choose-hero-girl {
    /*transform: rotate(25deg);
    position: relative;*/
    top: -294px;
    left: 70px;
}

img.choose-hero-boy {
    /*transform: rotate(-25deg);
    position: relative;*/
    top: 35px;
    right: 180px
}





/*#nav-customize-tab, 
#nav-story-edition-tab{
    background-color: #FEBC31 !important;
    border: 2px solid #FEBC31;
}

#nav-storyline-tab, 
#nav-story-player-tab{
    background-color: #F8AF15 !important;
    border: 2px solid #F8AF15;
}
#nav-voice-tab{
    background-color: #F79B08 !important;
    border: 2px solid #F79B08;
}
#nav-tweaks-tab{
    background-color: #F28705 !important;
    border: 2px solid #F28705;
}*/

/*#nav-new-story-tab:active {
    background-color: #FFD138 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

#nav-choose-hero-tab:active {
    background-color: #FFD138 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

#nav-choose-genre-tab:active {
    background-color: #FFD138 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

#nav-customize-tab:active {
    background-color: #FEBC31 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

#nav-storyline-tab:active {
    background-color: #F8AF15 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

#nav-voice-tab:active {
    background-color: #F79B08 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

#nav-tweaks-tab:active {
    background-color: #F28705 !important;
    border: 6px solid #FDE157;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}*/

button.nav-link {
    color: white !important;
    height: 90px;
    font-size: 25px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;

}

.nav-tabs {
    border-bottom: 0px solid #dee2e6 !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #495057;
    background-color: transparent !important;
    border-color: transparent !important;
}




.content-custome {
    width: auto !important;
    height: auto !important;
}




/*.astro-boy{
    width: 398px;
    position: absolute;
    left: 80%;
}*/


/*#new-story,
#choose-hero,
#choose-genre,
#customize,
#custom-user,
#storyline, 
#voice,
#tweaks, 
#story-loading, 
#story-edition,
#adventurer{
    height: 967px !important;
    width: auto;
    font-family: 'Lilita One', cursive;
}*/



/*Button Or select files */
button,
input,
optgroup,
select,
textarea {
    line-height: inherit;
    background-color: transparent;
    border: none;
    color: #F08707;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.delete-button {
    position: absolute;
    top: -16px;
    right: -5px;
    border: 1px solid;
    border-radius: 100px;
    width: 40px;
    height: 40px;
}

.image-thumbnail {
    position: relative;
}



#imageList {
    /*display: flex;
    flex-direction: colum*/
}


#video-stories {
    /*background-color: #0C75D0 !important;*/
    background: transparent linear-gradient(237deg, #FEBC31 0%, #FFCE2C 100%) 0% 0% no-repeat padding-box !important;
    border-radius: 69px;
    border: 6px solid #FFCE2C;
}

#collections {
    background-color: #F18603;
    border-radius: 69px;
}

#video-collections {
    background-color: #fecb5f;
    border-radius: 15px;
    /*width: auto;*/
    text-align: start;
}

#video-our-collections {
    background-color: #f4a13b;
    border-radius: 15px;
    /*width: auto;*/
    text-align: start;
}


.video-box-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 415px;
}


.video-box-scroll::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 15px;
}

.video-box-scroll::-webkit-scrollbar-thumb {
    background-color: #ff7f00;
}

.video-box-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #e67200;
}

.video-box-scroll::-webkit-scrollbar-corner,
.video-box-scroll::-webkit-scrollbar-track {
    background-color: #d7be75;
}

#video-box {
    width: 150px;
}


.video-box-scroll-collections {
    overflow-y: auto;
    overflow-x: hidden;
    height: 425px;
}


.video-box-scroll-collections::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.video-box-scroll-collections::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 15px;
}

.video-box-scroll-collections::-webkit-scrollbar-thumb {
    background-color: #ff7f00;
}

.video-box-scroll-collections::-webkit-scrollbar-thumb:hover {
    background-color: #e67200;
}

.video-box-scroll-collections::-webkit-scrollbar-corner,
.video-box-scroll-collections::-webkit-scrollbar-track {
    background-color: #d7be75;
}

#video-box-collections {
    width: 150px;
}



video {
    border: 7px solid white;
}

.video-buttons {
    width: auto;
    height: 90px;
}

.navbar-light .navbar-toggler {
    color: rgb(255 255 255);
    border-color: rgb(255, 255, 255);
    border-width: 2px;
}

img.champ {
    width: 318px;
    height: 345px;
    padding: 25px;
}



img.button-back {
    max-width: 156px;
    height: auto;
}

img.button-next {
    max-width: 156px;
    height: auto;
}

.choose-option {
    width: 583px;
    height: 424px;
    background: #FDF6DD 0% 0% no-repeat padding-box;
    box-shadow: 5px 5px 20px #C6A40057;
    border-radius: 14px;
    opacity: 1;
}








.voice-images {
    height: 300px;
    width: 300px;
}



select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}





.story-title {
    font-size: 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: #4B4B4B;
}


div.box-text-story {
    height: auto;
    background-color: #FFFFFF;
    border-radius: 20px;
}


.story-images {
    max-height: 262px;
    width: auto;
    border-radius: 20px;
}

.story-box-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.story-box-scroll::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 2px solid transparent;
}

.story-box-scroll::-webkit-scrollbar-thumb {
    background-color: #ff7f00;
}

.story-box-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #e67200;
}

.story-box-scroll::-webkit-scrollbar-corner,
.story-box-scroll::-webkit-scrollbar-track {
    background-color: #d7be75;
}

/*Scroll Upload Images*/

.upload-box-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.upload-box-scroll::-webkit-scrollbar-track {
    background-clip: content-box;
    border: 2px solid transparent;
}

.upload-box-scroll::-webkit-scrollbar-thumb {
    background-color: #ff7f00;
}

.upload-box-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #e67200;
}

.upload-box-scroll::-webkit-scrollbar-corner,
.upload-box-scroll::-webkit-scrollbar-track {
    background-color: #d7be75;
}

/*End Scroll Upload Images*/

.btn-story-save,
.btn-story-back,
.btn-story-pause {
    width: 267px;
    height: 77px;
}

/* Progress Bar */

.progress {
    height: 75px;
    line-height: 35px;
    background: #f7f7f7;
    border-radius: 0 15px 0 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.progress {
    height: 85px;
    background: transparent !important;
    border-radius: 15px 15px 15px 15px !important;
    margin-bottom: 100px;
    box-shadow: none !important;
}

.progress-bar {
    background-color: #ffad00;
}


.progress .progress-bar {
    position: relative;
}

.progress .progress-bar span {
    display: block;
    background: #000;
    color: #fff;
    border-top-right-radius: 15px;
    font-size: 11px;
    padding: 2px 8px;
    position: absolute;
    right: 2px;
    top: 1px;
}

.progress-bar.active {
    animation: progress-bar-stripes 0.90s linear infinite;
}


.user-image {
    width: auto;
    height: 240px;
    margin-top: 65px;
    border-radius: 200px;
}


.drop-zone {
    /*border: 2px dashed #ccc;*/
    /*padding: 20px;*/
    /*text-align: center;*/
    cursor: pointer;
}

.file-list {
    list-style: none;
    padding: 0;
}

.file-list li {
    margin: 5px;
}

.thumbnail {
    max-width: 115px;
    max-height: 115px;
    margin: 5px;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: 0 0;
    border: 0px solid transparent !important;
}

/* Ejemplo de CSS para personalizar controles de audio */
audio {
    width: 100%;
}

audio::-webkit-media-controls-play-button {
    background-color: #3498db;
    color: #fff;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.1);
    }
}


.column-tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
}



/*Design Responsive with Media Queries*/

@media (min-width: 1200px) {

    .first-col-login {
        height: 600px !important;
    }

    .super-kiddo {
        width: auto;
        height: 135px;
    }

    .text-video-stories-one {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white
    }


    .search-container {
        width: 200px;
        position: relative;
        color: white;
        position: absolute;
        top: 50px;
        right: 45px
    }

    .tex-collect-our {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white
    }

    .tex-collect-our-2 {
        color: white;
        font-size: 26px
    }

    .buttons-story-player-tab {
        text-align: end !important;
    }

    #custom-user {
        background-color: #FEBC31 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/background-customize.png");
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FFCE2C;*/
        /*position: relative;*/
        max-width: 960px;
        margin: auto;
        height: 512px !important;
    }

    #play-story-character {
        /*text-align: center !important;*/
    }

    .progressbar-title {
        font-family: 'Lilita One', cursive;
        color: #fff;
        text-align: center;
        font-size: 65px;
        color: white;
        padding-top: 90px;
        margin-bottom: 25px
    }

    .kids-age-p {
        font-size: 14px;
        font-family: 'Lilita One', cursive;
        font-weight: 700;
        color: #F28705;
    }

    .age-kids {
        width: auto;
        height: 150px;
        margin-top: 30px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #fff;
        background-color: transparent !important;
        width: auto;
        height: auto;
    }


    #play-story-player, #play-story-player-cover {
        position: absolute;
        bottom: -23px;
        left: 80px;
        width: 431px;
        background-color: transparent;
    }

    .btn-usa {
        width: auto;
        height: 45px;
    }



    .voice-icon {
        width: auto;
        height: 30px;
    }

    .monster-storyline-happy {
        position: absolute;
        left: -113px;
        top: 87px;
        width: 30%;
        z-index: -1;
    }

    .character-play {
        position: absolute;
        right: -4px;
        bottom: -311px;
        width: 100%;
    }

    div.bkg-tweaks {
        background-color: #FDF6DD;
        border-radius: 5px;
        height: 60px;
        /* margin: auto; */
    }

    .story-title {
        font-size: 16px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
    }


    #nav-new-story-tab,
    #nav-story-loading-tab,
    #nav-choose-hero-tab,
    #nav-choose-genre-tab,
    #nav-adventurer-tab,
    #nav-customize-tab,
    #nav-storyline-tab,
    #nav-voice-tab,
    #nav-tweaks-tab {
        width: 10%;
        height: 20%;
    }

    img.skin-image {
        width: auto;
        max-height: 100px;
        margin: 2px;
    }

    .screen-complete {
        height: 100vh !important;
    }

    .drag-drop {
        width: auto;
        height: 8vh;
    }

    .container-drop-zone {
        border-radius: 15px;
        background-color: #FDF6DC;
        height: 270px;
        width: 365px;
    }

    .text-drag-drop {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 25px;
        font-weight: 900
    }

    .second-text-dp {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 900;
    }

    .img-skies-drop {
        max-height: 95px;
    }

    .column-tabs {
        max-width: 1400px;
    }

    #container-tab {
        width: 1640px;
    }

    .bot-relative {
        width: 243px;
        position: absolute;
        left: -25px;
        bottom: -20px;
        display: none;
    }

    /*09/01/24*/
    /*input.text-story {
        border: none;
        font-family: 'Nunito', sans-serif;
        font-size: 22px;
        color: #341E00;
        font-weight: 500;
    }*/





    input.input-customize,
    #age {
        width: 20vw;
        height: 64px;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }

    input.input-custom-user {
        width: 450px;
        height: 64px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }




    select.input-genre,
    .input-story {
        opacity: 1;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 5px 3px #00000029;
        border: 0px !important;
        color: #A8A8A8;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 215px;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        opacity: .9;
        font-size: 22px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        border: none;*/
    }




    .input-genre {
        border-radius: 50px;
        width: 100%;
        height: 29px;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 22px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;*/
        background: white url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 710px center;
    }




    #new-story,
    #choose-hero,
    #choose-genre,
    #adventurer {
        max-width: 960px !important;
        height: 512px !important;
        font-family: 'Lilita One', cursive;
        color: #E37A00;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        /* height: 925px; */
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/backgroud-new-story.png);
        background-position: 100% -1%, 50% 50%;
        background-repeat: no-repeat, no-repeat;
        background-size: 208px, 100% 100%;
        /* border: 6px solid #FDE157; */
        position: relative;
        margin: auto;
    }


    p.paragraph {
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        color: #341E00;
        font-weight: 500;
    }

    .principal-titles {
        font-size: 45px;
        margin-top: 25px;
    }

    img.champ-adv-boy {
        width: 250px;
        height: 250px;
    }

    img.champ-adv-girl {
        width: 250px;
        height: 250px;
        margin-left: 50px;
        margin-right: 50px;
    }

    .images-childrens {
        padding-bottom: 150px;
    }

    img.champ-adv {
        max-width: 201px;
        height: auto;
    }

    .input-div {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 50%; */
    }

    img.choose-hero-girl,
    img.choose-hero-boy,
    img.use-my-photo {
        width: 250px;
        height: 250px;
    }

    #pills-skin-tab,
    #pills-hair-tab,
    #pills-age-tab {
        width: auto;
        height: auto;
        z-index: 1;
    }

    .choose-option {
        max-width: 350px !important;
        height: auto !important;
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 5px 5px 20px #C6A40057;
        border-radius: 14px;
        opacity: 1;
        margin-left: 75px;
        margin-right: 75px;
    }

    .champ-customize {
        width: auto;
        max-height: 55px;
        margin-bottom: 0;
    }

    .sub-titles {
        font-size: 30px;
        color: white;
        font-weight: 700;
    }

    img.girl-champ {
        width: auto;
        max-height: 235px;
        margin-top: 15px;
    }

    #storyline {
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/background-storyline.png");
        background-position: 100% 5%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        max-width: 960px !important;
        height: 512px !important;
    }

    .form-bkg {
        width: 376px;
        height: 305px;
        /* UI Properties */
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 3px 3px 20px #C6A40043;
        opacity: 1;
        border-radius: 10px;
        margin-left: 78px;
        padding: 1vw;
    }

    .text-form-bkg {
        font-size: 14px !important;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 145px;
        font-size: 15px;
    }

    img.storyline-images {
        width: auto;
        max-height: 230px;
        margin-top: 15px;
    }


    #voice {
        background-color: #F79B08 !important;
        border-radius: 69px;
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        background-image: url(../../assets/images/sky-background.png);
        max-width: 960px !important;
        height: 521px !important;
    }

    .display-voices {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    .voice-images {
        max-height: 190px;
        width: auto;
        padding: 15px;
    }

    #tweaks,
    #story-loading {
        /*background-color: #F28705 !important;*/
        background-color: #f08505 !important;
        border-radius: 69px;
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /* border: 6px solid #F49908;*/
        margin: auto;
        background-image: url(../../assets/images/sky-background.png);
        max-width: 960px !important;
        height: 521px !important;
    }

    #btn-suprose-me-ai,
    #btn-story-edit {
        width: auto;
        /*height: 90px;*/
        display: block;
    }

    #btn-suprose-me-ai-mobile,
    #btn-story-edit-mobile {
        width: 370px;
        height: 106px;
        display: none;
    }

    .text-storyland {
        font-weight: 500;
        font-size: 2vw;
        color: white;
        font-family: 'Lilita One', cursive;
    }

    .texts-navs {
        display: none;
    }

    .storyteller {
        margin-top: 1vw;
    }

    #story-edition {
        border-radius: 69px;
        background-image: url(../../assets/images/monster-story-pages.png), url(../../assets/images/background-tweaks.png);
        background-position: 100% 50%, 100% 6%;
        background-repeat: no-repeat, no-repeat;
        background-size: 25%, 100%;
        padding: 50px;
        max-width: 960px !important;
        height: 521px !important;
        margin: auto;
        background-color: #F18605;
    }


    #pills-tabContent {
        width: 16vw;
        height: auto;
        margin: auto;
        margin-top: -15px;
        z-index: -20;
    }


    p.book-title {
        font-size: 16px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
        margin-top: 5px;
        text-align: start;
    }

    input.book-title {
        width: 100%;
        height: 39px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        margin-top: -3px;
        padding-left: 30px;
        padding-right: 30px;
    }

    div.bkg-tweaks-2 {
        background-color: #FDF6DD;
        border-radius: 20px;
        padding-top: 50px;
        padding: 30px;
        margin-top: 50px;
    }

    .buttons-nav-second {
        display: none;
        /*padding-top:30px;*/
    }

    .story-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 165px;
    }

    .upload-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 200px;
    }

    .triangulo-derecha {
        width: 2vw;
        height: 5vh;
        border-top: 25px solid transparent;
        border-left: 53px solid #FDF6DD;
        border-bottom: 25px solid transparent;
        position: absolute;
        right: -50px;
        z-index: 3;
        top: 95px;
        border-top-right-radius: 10px;
    }

    .btn-story-public,
    .btn-story-save {
        height: 68px !important;
        width: auto;
        /* margin-top: -11px; */
        margin-right: -10px;
    }

    .btn-story-back {
        height: auto;
        width: 140px;
    }

    /* Play Story Screen */
    .bkg-story-play {
        background-color: #333333 !important;
        color: white;
        font-size: 26px;
        font-family: 'Nunito', sans-serif;
        height: 360px;
        width: 640px;
        text-align: center;
        border-radius: 20px;
    }

    #story-player {
        background-color: #0C75D0 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/sky-background.png");
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        border: 6px solid #288BE0;
    }

    #video-stories,
    #story-player {
        font-family: 'Lilita One', cursive;
        max-width: 960px !important;
        height: 641px !important;
        margin: auto;
    }


    #collections {
        font-family: 'Lilita One', cursive;
        max-width: 960px !important;
        height: 641px !important;
        margin: auto;
    }

    .book-story {
        background-color: white;
        height: 310px;
        border-radius: 15px;
        width: auto;
        margin: auto;
        --bs-gutter-x: 0rem !important;
    }

    #play-story-image {
        min-height: 265px;
        /* display: flex; */
        /* flex-direction: row; */
        /* object-fit: contain; */
    }

    .book-story-text {
        background: transparent linear-gradient(270deg, #FFFFFF00 90%, #808080 100%) 100% 100% no-repeat;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 310px;
        padding: 50px
    }

    .image-of-story {
        height: 281px;
        width: 100%;
        /* margin: auto; */
        object-fit: cover !important;
        object-position: center center;
    }

    .text-story {
        font-size: 14px;
        font-family: 'Nunito', sans-serif;
        color: #4B4B4B;
    }

    #customize {
        background-color: #FEBC31 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/sky-background.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        max-width: 960px !important;
        height: 512px !important;
    }

    .navs-customize {
        flex-wrap: wrap !important;
        position: relative;
    }




    img.new-story-tab {
        max-width: 181%;
        position: relative;
        z-index: -1;
        top: 9px;
        right: 28px;
    }

    img.customize-tab {
        max-width: 228%;
        position: relative;
        top: 14px;
        right: 50px;
        z-index: 1;
    }

    img.storyline-tab {
        max-width: 213%;
        position: relative;
        top: 10px;
        right: 22px;
        z-index: 1;
    }

    img.voice-tab {
        max-width: 217%;
        position: relative;
        top: 12px;
        right: 34px;
        z-index: 1;
    }

    img.tweaks-tab {
        max-width: 182%;
        position: relative;
        top: 10px;
        right: 25px;
        z-index: 1;
    }

    #nav-new-story-tab,
    #nav-choose-hero-tab,
    #nav-choose-genre-tab,
    #nav-customize-tab,
    #nav-storyline-tab,
    #nav-voice-tab,
    #nav-tweaks-tab,
    #nav-story-loading-tab,
    #nav-story-edition-tab,
    #nav-story-player-tab {
        border-bottom: none;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        /* min-width: 75px; */
        max-width: 10vw;
        height: auto;
    }

    #new-story-tab-hover {
        max-width: 175%;
        position: relative;
        top: 10px;
        right: 47px;
        z-index: 1;
    }



    #customize-tab-hover,
    #upload-pht-tab-hover {
        max-width: 200%;
        position: relative;
        top: 12px;
        right: 54px;
        z-index: 1;
    }

    #storyline-tab-hover {
        max-width: 194%;
        position: relative;
        top: 13px;
        right: 47px;
        z-index: 1;
    }

    #voice-tab-hover {
        max-width: 200%;
        position: relative;
        top: 12px;
        right: 42px;
        z-index: 1;
    }

    #tweaks-tab-hover {
        max-width: 191%;
        position: relative;
        top: 12px;
        right: 53px;
        z-index: 1;
    }
}


@media (min-width: 768px) and (max-width: 1199px) {



    .first-col-login {
        height: 600px !important;
    }

    .first-col-login {
        height: 600px !important;
    }

    .super-kiddo {
        width: auto;
        height: 90px;
    }

    .text-video-stories-one {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white
    }

    .search-container {
        width: 150px;
        position: relative;
        color: white;
        position: absolute;
        top: 50px;
        right: 45px
    }

    .tex-collect-our {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white
    }

    .tex-collect-our-2 {
        color: white;
        font-size: 26px
    }

    .buttons-story-player-tab {
        text-align: end !important;
    }

    #custom-user {
        background-color: #FEBC31 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/background-customize.png");
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100% 101%;
        /*border: 6px solid #FFCE2C;*/
        /*position: relative;*/
        max-width: 960px;
        margin: auto;
        height: 512px !important;
    }



    #play-story-character {
        /*text-align: center !important;*/
    }

    .progressbar-title {
        font-family: 'Lilita One', cursive;
        color: #fff;
        text-align: center;
        font-size: 65px;
        color: white;
        padding-top: 90px;
        margin-bottom: 25px
    }

    .kids-age-p {
        font-size: 14px;
        font-family: 'Lilita One', cursive;
        font-weight: 700;
        color: #F28705;
    }

    .age-kids {
        width: auto;
        height: 150px;
        margin-top: 30px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #fff;
        background-color: transparent !important;
        width: auto;
        height: auto;
    }

    #play-story-player, #play-story-player-cover {
        position: absolute;
        bottom: -18px;
        left: 100px;
        width: 373px;
        background-color: transparent;
    }

    .btn-usa {
        width: auto;
        height: 31px;
    }



    .voice-icon {
        width: auto;
        height: 30px;
    }

    .monster-storyline-happy {
        position: absolute;
        left: -104px;
        top: 87px;
        width: 30%;
        z-index: -1;
    }

    .character-play {
        position: absolute;
        right: -4px;
        bottom: -311px;
        width: 100%;
    }

    div.bkg-tweaks {
        background-color: #FDF6DD;
        border-radius: 5px;
        height: 60px;
        margin: auto;
    }

    .story-title {
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
    }

    img.skin-image {
        width: auto;
        max-height: 100px;
        margin: 2px;
    }

    .screen-complete {
        height: 100vh !important;
    }

    .drag-drop {
        width: auto;
        height: 8vh;
    }

    .container-drop-zone {
        border-radius: 15px;
        background-color: #FDF6DC;
        height: 270px;
        width: 365px;
    }


    .text-drag-drop {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 25px;
        font-weight: 900
    }

    .second-text-dp {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 900;
    }

    .img-skies-drop {
        max-height: 95px;
    }

    .column-tabs {
        max-width: 1403px;
    }

    #container-tab {
        width: 1640px;
    }

    .bot-relative {
        width: 243px;
        position: absolute;
        left: -25px;
        bottom: -20px;
        display: none;
    }

    /*09/01/24*/
    /*input.text-story {
        border: none;
        font-family: 'Nunito', sans-serif;
        font-size: 22px;
        color: #341E00;
        font-weight: 500;
    }*/





    input.input-customize,
    #age {
        width: 20vw;
        height: 64px;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }

    input.input-custom-user {
        width: 450px;
        height: 64px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }




    select.input-genre,
    .input-story {
        opacity: 1;
        font-size: 10px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 5px 3px #00000029;
        border: 0px !important;
        color: #A8A8A8;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 215px;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 14px;
            opacity: .9;
            font-size: 22px;
            font-weight: 500;
            font-family: 'Nunito', sans-serif;
            border: none;*/
    }




    .input-genre {
        border-radius: 50px;
        width: 100%;
        height: 35px;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 54px;
            opacity: .9;
            font-size: 22px;
            font-weight: 500;
            font-family: 'Nunito', sans-serif;*/
        background: white url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 710px center;
    }




    #new-story,
    #choose-hero,
    #choose-genre,
    #adventurer {
        max-width: 960px !important;
        height: 512px !important;
        font-family: 'Lilita One', cursive;
        color: #E37A00;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        /* height: 925px; */
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/backgroud-new-story.png);
        background-position: 100% -1%, 50% 50%;
        background-repeat: no-repeat, no-repeat;
        background-size: 208px, 100% 100%;
        /* border: 6px solid #FDE157; */
        position: relative;
        margin: auto;
    }


    p.paragraph {
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        color: #341E00;
        font-weight: 500;
    }

    .principal-titles {
        font-size: 35px;
        margin-top: 0px;
        padding-top: 25px;
    }

    img.champ-adv-boy {
        width: 250px;
        height: 250px;
    }

    img.champ-adv-girl {
        width: 250px;
        height: 250px;
        /* margin-left: 50px; */
        /* margin-right: 50px; */
    }

    .images-childrens {
        padding-bottom: 150px;
    }

    img.champ-adv {
        max-width: 201px;
        height: auto;
    }

    .input-div {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 50%; */
    }

    img.choose-hero-girl,
    img.choose-hero-boy,
    img.use-my-photo {
        width: auto !important;
        height: 210px;
    }

    #pills-skin-tab,
    #pills-hair-tab,
    #pills-age-tab {
        width: auto;
        height: auto;
        z-index: 1;
    }

    .choose-option {
        max-width: 350px !important;
        height: auto !important;
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 5px 5px 20px #C6A40057;
        border-radius: 14px;
        opacity: 1;
        margin-left: 75px;
        margin-right: 75px;
    }

    .champ-customize {
        width: auto;
        max-height: 55px;
        margin-bottom: 0;
    }

    .sub-titles {
        font-size: 30px;
        color: white;
        font-weight: 700;
    }

    img.girl-champ {
        width: auto;
        max-height: 235px;
        margin-top: 15px;
    }

    #storyline {
        border-radius: 69px;
        background-color: #f8af15;

        /*Background images*/
        background-image: url("../../assets/images/sky-background.png");
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        max-width: 960px !important;
        height: 512px !important;
    }

    .form-bkg {
        width: 345px;
        max-height: 375px !important;
        /* UI Properties */
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 3px 3px 20px #C6A40043;
        opacity: 1;
        border-radius: 10px;
        /* margin-left: 78px; */
        padding: 10px;
    }

    .text-form-bkg {
        font-size: 14px !important;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 115px;
        font-size: 14px;
    }

    img.storyline-images {
        width: auto;
        max-height: 180px;
        margin-top: 15px;
    }


    #voice {
        background-color: #F79B08 !important;
        border-radius: 69px;
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        background-image: url(../../assets/images/sky-background.png);
        max-width: 960px !important;
        height: 521px !important;
    }

    .display-voices {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        /* margin-top: 50px; */
    }

    .voice-images {
        height: 150px;
        width: auto;
    }

    #tweaks,
    #story-loading {
        /*background-color: #F28705 !important;*/
        background-color: #f08505 !important;
        border-radius: 69px;
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /* border: 6px solid #F49908;*/
        margin: auto;
        background-image: url(../../assets/images/sky-background.png);
        max-width: 960px !important;
        height: 521px !important;
    }

    #btn-suprose-me-ai,
    #btn-story-edit {
        width: auto;
        /*height: 77px;*/
        display: block;
    }

    #btn-suprose-me-ai-mobile,
    #btn-story-edit-mobile {
        width: 370px;
        height: 106px;
        display: none;
    }

    .text-storyland {
        font-weight: 500;
        font-size: 25px;
        color: white;
        font-family: 'Lilita One', cursive;
        margin-top: 88px;
    }

    .texts-navs {
        display: none;
    }

    .storyteller {
        margin-top: 50px;
    }

    #story-edition {
        border-radius: 69px;
        background-image: url(../../assets/images/monster-story-pages.png), url(../../assets/images/sky-background.png);
        background-position: 100% 50%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 17%, 100%;
        padding: 50px;
        max-width: 960px !important;
        height: 521px !important;
        margin: auto;
        background-color: #F18605;
        padding-top: 50px !important;
    }


    #pills-tabContent {
        width: 16vw;
        height: auto;
        margin: auto;
        margin-top: -15px;
        z-index: -20;
    }


    p.book-title {
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
        margin-top: 5px;
        text-align: start;
    }

    input.book-title {
        width: 100%;
        height: 30px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 11px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        margin-top: -3px;
        padding-left: 30px;
        padding-right: 30px;
    }

    div.bkg-tweaks-2 {
        background-color: #FDF6DD;
        border-radius: 20px;
        padding: 30px;
        margin: auto;
    }

    .buttons-nav-second {
        display: none;
        /*padding-top:30px;*/
    }

    .story-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 165px;
    }

    .upload-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 200px;
    }

    .triangulo-derecha {
        width: -29px;
        /* height: 15px; */
        border-top: 15px solid transparent;
        border-left: 45px solid #FDF6DD;
        border-bottom: 15px solid transparent;
        position: absolute;
        right: -44px;
        z-index: 3;
        top: 77px;
        border-top-right-radius: 10px;
    }

    .btn-story-public,
    .btn-story-save {
        height: 63px !important;
        width: auto;
        /* margin-top: -11px; */
        margin-right: -10px;
    }

    .btn-story-back {
        height: auto;
        width: 127px;
    }

    /* Play Story Screen */
    .bkg-story-play {
        background-color: #333333 !important;
        color: white;
        font-size: 26px;
        font-family: 'Nunito', sans-serif;
        height: 360px;
        width: 640px;
        text-align: center;
        border-radius: 20px;
        padding: 20px;
    }

    #story-player {
        background-color: #0C75D0 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/sky-background.png");
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        border: 6px solid #288BE0;
    }

    #video-stories,
    #story-player {
        font-family: 'Lilita One', cursive;
        max-width: 960px !important;
        height: 955px !important;
        margin: auto;
    }


    #collections {
        font-family: 'Lilita One', cursive;
        max-width: 960px !important;
        height: 641px !important;
        margin: auto;
    }

    .book-story {
        background-color: white;
        height: 316px;
        border-radius: 15px;
        width: auto;
        margin: auto;
        --bs-gutter-x: 0rem !important;
    }

    #play-story-image {
        min-height: 75%;
        /* padding: 15px; */
    }

    .book-story-text {
        background: transparent linear-gradient(270deg, #FFFFFF00 90%, #808080 100%) 100% 100% no-repeat;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 318px;
        padding: 50px
    }

    .image-of-story {
        height: 280px;
        width: 100%;
        /* margin: auto; */
        object-fit: cover;
        object-position: center center;
        /* margin: auto; */
        max-width: 270px;
    }

    .text-story {
        font-size: 10px;
        font-family: 'Nunito', sans-serif;
        color: #4B4B4B;
    }

    #customize {
        background-color: #FEBC31 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/sky-background.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin: auto;
        max-width: 960px !important;
        height: 512px !important;
    }

    .navs-customize {
        flex-wrap: wrap !important;
        position: relative;
    }




    img.new-story-tab {
        max-width: 157px;
        position: relative;
        z-index: -1;
        top: 14px;
        right: 38px;
    }

    img.customize-tab {
        max-width: 186px;
        position: relative;
        top: 14px;
        right: 50px;
        z-index: 1;
    }

    img.storyline-tab {
        max-width: 172px;
        position: relative;
        top: 10px;
        right: 22px;
        z-index: 1;
    }

    img.voice-tab {
        max-width: 176px;
        position: relative;
        top: 12px;
        right: 34px;
        z-index: 1;
    }

    img.tweaks-tab {
        max-width: 144px;
        position: relative;
        top: 10px;
        right: 25px;
        z-index: 1;
    }

    #nav-new-story-tab,
    #nav-choose-hero-tab,
    #nav-choose-genre-tab,
    #nav-customize-tab,
    #nav-storyline-tab,
    #nav-voice-tab,
    #nav-tweaks-tab,
    #nav-story-loading-tab,
    #nav-story-edition-tab,
    #nav-story-player-tab {
        border-bottom: none;
        /* border-top-left-radius: 30px; */
        /* border-top-right-radius: 30px; */
        /* min-width: 75px; */
        max-width: 106px;
        height: auto;
    }

    #new-story-tab-hover {
        max-width: 155px;
        position: relative;
        top: 13px;
        right: 47px;
        z-index: 1;
    }



    #customize-tab-hover,
    #upload-pht-tab-hover {
        max-width: 169px;
        position: relative;
        top: 12px;
        right: 50px;
        z-index: 1;
    }

    #storyline-tab-hover {
        max-width: 158px;
        position: relative;
        top: 13px;
        right: 47px;
        z-index: 1;
    }

    #voice-tab-hover {
        max-width: 167px;
        position: relative;
        top: 12px;
        right: 37px;
        z-index: 1;
    }

    #tweaks-tab-hover {
        max-width: 156px;
        position: relative;
        top: 12px;
        right: 53px;
        z-index: 1;
    }
}


@media (min-width: 577px) and (max-width: 767px) {

    ul.navbar-nav{
        margin-right: -130px !important;
        margin-bottom: 30px !important;
    }

    .bkg-story-play-end {
        background-color: #333333 !important;
        height: 200px !important;
        width: 90% !important;
        padding: 12px !important;
    }

    .image-of-story-end {
        height: 175px;
        width: 165px;
        margin: auto;
        object-fit: cover;
        object-position: center center;
    }


    /* Styles for the Story Player */

    #play-story-screen-cover{
        width: 90% !important;
        height: 200px;
    }

    .container-titles{
        height: 168px !important;
        border-radius:15px !important
    }

    .time-ai{
        font-weight: 700;
        position: absolute;
        top: 15px !important;
        font-size: 7px !important;
    }

    .this-book{
        font-weight: 700;
        position: absolute;
        top: 30px !important;
        font-size: 5px !important;
    }

    #play-story-texto-cover{
        color:#ffbd00;
        font-weight: 700;
        font-size: 10px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    
    .text-directed{
        position: absolute;
        bottom: -3px !important;
        font-weight: 700;
        font-size: 5px !important;
    }

    .image-of-story-cover{
        max-height: 168px !important;
        /* width: 75px !important; */
        /*object-fit: contain !important;*/
        object-position: center center !important;
        border-radius:15px !important
    }

    /* Styles for the Story Player */


    .super-kiddo {
        width: auto;
        height: 75px;
    }


    #video-box {
        height: auto;
        width: 255px;
        margin: auto;
    }

    #video-collections {
        background-color: transparent;
        text-align: center !important;
    }


    #video-collections>video {
        width: 250px !important
    }

    .text-video-stories-one {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white;
        padding-right: 15px;
        padding-left: 15px;
    }

    #video-stories {
        height: 859px;
    }

    #video-box-collections {
        width: 300px;
        margin: auto;
    }

    #video-our-collections {
        background-color: transparent !important;
    }

    .search-container {
        width: 256px;
        position: relative;
        color: white;
        position: absolute;
        top: 200px;
        right: 80px;
        /* height: 150px; */
    }

    .tex-collect-our {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white
    }

    .tex-collect-our-2 {
        color: white;
        font-size: 26px;
        padding-bottom: 60px;
    }

    .buttons-story-player-tab {
        text-align: center !important;
    }

    #custom-user {
        background-color: #FEBC31 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/sky-mobile.png");
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FFCE2C;*/
        /*position: relative;*/
        /* max-width: 909px; */
        margin: auto;
        height: 610px !important;
    }

    .text-custom-user-tab {
        color: white !important;
        padding-top: 50px;
    }

    .img-skies-drop {
        width: auto !important;
        height: 65px !important;
    }

    .image-list {
        margin: auto;
    }


    .use-my-photo-div {
        display: none;
    }

    .drag-drop {
        width: auto;
        height: 8vh;
    }

    .container-drop-zone {
        border-radius: 15px;
        background-color: #FDF6DC;
        height: 270px;
        width: auto;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }


    .text-drag-drop {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        font-weight: 900
    }

    .second-text-dp {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 12px;
        font-weight: 900;
    }



    .buttons-story-p {
        text-align: center !important;
    }

    .progressbar-title {
        font-family: 'Lilita One', cursive;
        color: #fff;
        text-align: center;
        font-size: 35px;
        color: white;
        padding-top: 90px;
        margin-bottom: 25px;
    }

    .story-edition-box {
        margin-left: 20px;
        margin-right: 20px;
    }

    .form-story-line {
        padding-left: 15px;
        padding-right: 15px;
    }

    .kids-age-p {
        font-size: 20px;
        font-family: 'Lilita One', cursive;
        font-weight: 700;
        color: #F28705;
    }

    .age-kids {
        width: auto;
        height: 185px;
        margin-top: 30px;
    }

    .tabs-customize {
        margin-left: 20px;
        margin-right: 20px;
    }

    .nav-pills .nav-link.active,
    .nav-link {
        color: #fff;
        background-color: transparent !important;
        /* width: auto; */
        /* height: auto; */
        /* margin-bottom: -86px; */
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 0 !important;
    }

    #play-story-player, #play-story-player-cover {
        position: absolute;
        bottom: -11px;
        left: 54px;
        width: 217px;
        background-color: transparent;
        height: 45px !important;
    }

    .btn-usa {
        width: auto;
        height: 65px;
    }



    .voice-icon {
        width: auto;
        height: 40px;
    }

    .monster-storyline-happy {
        position: absolute;
        left: -104px;
        top: 87px;
        width: 30%;
        z-index: -1;
    }

    .character-play {
        position: absolute;
        right: -4px;
        bottom: -311px;
        width: 100%;
    }

    div.bkg-tweaks {
        background-color: #FDF6DD;
        border-radius: 20px;
        height: 150px;
        margin: auto;
    }


    .story-title {
        font-size: 25px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
    }

    img.skin-image {
        width: auto;
        height: 120px;
        margin: 5px;
    }

    /*09/01/24*/
    /*input.text-story {
        border: none;
        font-family: 'Nunito', sans-serif;
        font-size: 22px;
        color: #341E00;
        font-weight: 500;
    }*/





    input.input-customize,
    #age {
        width: 200px;
        height: 50px;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }

    input.input-custom-user {
        width: 450px;
        height: 64px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }




    select.input-genre,
    .input-story {
        opacity: 1;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 5px 3px #00000029;
        border: 0px !important;
        color: #A8A8A8;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 215px;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        opacity: .9;
        font-size: 22px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        border: none;*/
    }




    .input-genre {
        border-radius: 50px;
        width: 100%;
        height: 4vh;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 22px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;*/
        background: white url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 710px center;
    }

    body,
    html {
        background: transparent linear-gradient(237deg, #0697F2 0%, #005AD1 100%) 0% 0% no-repeat padding-box;
    }

    nav {
        display: none;
    }

    #container-tab {
        width: 407px !important;
    }

    #new-story,
    #choose-hero,
    #choose-genre,
    #customize,
    #custom-user,
    #storyline,
    #voice,
    #tweaks,
    #story-loading,
    #story-edition,
    #adventurer {
        /*height: 1311px !important;*/
        font-family: 'Lilita One', cursive;
    }

    .bot-relative {
        display: none;
    }



    #choose-genre {
        width: auto;
        height: auto !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/bot-1-mobile.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 0% 96%, 50% 100%;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 113px, 24%, 100%;
        position: relative;

    }

    #new-story {
        width: auto;
        height: 700px !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 113px, 100%;
        position: relative;
    }

    #choose-hero {
        width: auto;
        height: 790px !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 113px, 100%;
        position: relative;
    }

    #adventurer {
        width: auto;
        height: 700px !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 113px, 100%;
        position: relative;
    }

    p.paragraph {
        font-family: 'Nunito', sans-serif;
        font-size: 16px;
        color: #341E00;
        font-weight: 500;
        margin-left: 25px;
        margin-right: 25px;
    }

    .principal-titles {
        font-size: 40px;
        padding-top: 30px;
    }

    img.champ-adv-boy {
        width: 266px;
        height: 266px;
    }

    img.champ-adv-girl {
        width: 266px;
        height: 266px;
    }

    .images-childrens {
        padding-bottom: 100px;
    }

    img.champ-adv {
        width: 222px;
        height: 222px;
    }

    .input-div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25%;
        height: 56px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    img.choose-hero-girl,
    img.choose-hero-boy,
    img.use-my-photo {
        width: auto;
        height: 220px;
    }

    .choose-option {
        width: auto;
        min-height: 560px;
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 5px 5px 20px #C6A40057;
        border-radius: 14px;
        opacity: 1;
        /* margin-left: 102px; */
        /* margin-right: 102px; */
        /* margin: 0; */
    }

    .champ-customize {
        width: auto;
        height: 50px !important;
        margin-bottom: -45px;
    }

    .nav-tabs-customize {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #customize {
        width: auto !important;
        height: 1151px !important;
        background-color: #FEBC31 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
    }

    .sub-titles {
        font-size: 16px;
        color: white;
        font-weight: bold !important;
        padding-top: 30px
    }

    .drag-and-drop-titles {
        color: white !important;
        padding-top: 50px;
    }

    img.girl-champ {
        width: 185px;
        height: auto;
    }

    #storyline {
        height: 950px !important;
        background-color: #F8AF15 !important;
        border-radius: 69px;

        /*Background images*/
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FFBA27;*/
    }

    .form-bkg {
        width: 377px;
        height: 335px !important;
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 3px 3px 20px #C6A40043;
        opacity: 1;
        border-radius: 10px;
        padding: 20px;
    }

    .text-form-bkg {
        font-size: 12px !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .row {
        --bs-gutter-x: 0rem !important;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 139px;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .input-genre {
        border-radius: 50px;
        width: 100%;
        height: 30px;
        background: white;
        font-size: 12px !important;
        padding-left: 20px;
    }

    img.storyline-images {
        width: 199px;
        height: auto;
        margin-top: 30px;
    }

    .texts-navs {
        font-size: 30px;
        font-family: 'Nunito', sans-serif;
        font-weight: bold;
        color: white;
        padding-top: 30px;
        /* display: none; */
    }

    .monster-storyline-happy {
        display: none;
    }

    #voice {
        width: auto;
        height: 1820px !important;
        background-color: #F79B08 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FCB622;*/
    }

    .display-voices {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .voice-images {
        height: 270px;
        width: auto;
    }

    #tweaks,
    #story-loading {
        width: auto;
        height: 360px !important;
        /*background-color: #F28705 !important;*/
        background-color: #f08505 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
        padding-top: 90px;
    }

    #btn-suprose-me-ai,
    #btn-story-edit {
        display: none;
    }

    #btn-suprose-me-ai-mobile,
    #btn-story-edit-mobile {
        width: auto;
        height: 85px;
        display: block;
    }

    .text-storyland {
        font-weight: 500;
        font-size: 25px;
        color: white;
        padding-left: 25px;
        padding-right: 25px;
    }

    .storyteller {
        margin-top: 0px
    }


    #story-edition {
        width: auto;
        height: 1290px !important;
        background-color: #F28705 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /* padding: 20px; */
    }

    p.book-title {
        font-size: 25px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
        margin-top: 10px;
        text-align: center;
    }

    input.book-title {
        width: 100%;
        height: 44px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 12px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        padding-left: 20px;
        padding-right: 20px;
    }

    div.bkg-tweaks-2 {
        height: 764px !important;
        background-color: #FDF6DD;
        border-radius: 20px;
        padding-top: 50px;
        padding: 20px;
        margin-top: 50px;
    }

    .button-nav-under {
        width: 64px;
        height: 64px;
    }

    .story-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 650px;
    }

    .upload-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 200px;
    }

    .triangulo-derecha {
        position: absolute;
        left: 102px;
        z-index: 3;
        top: 323px;
        border-top-right-radius: 10px;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 36px solid #FDF6DD;
        width: 0;
    }

    .btn-story-public,
    .btn-story-save {
        height: 100px !important;
        width: auto !important;
    }

    .btn-story-back {
        height: 59px !important;
        width: auto !important;
        margin-left: 10px;
        margin-right: 10px;
    }

    .character-play {
        display: none;
    }

    /* Play Story Screen */
    .bkg-story-play {
        background-color: #333333 !important;
        color: white;
        font-size: 26px;
        font-family: 'Nunito', sans-serif;
        height: 200px;
        width: 90%;
        text-align: center;
        border-radius: 15px;
        margin-top: 50px;
        padding: 12px;
    }

    #story-player {
        background-color: #0C75D0 !important;
        border-radius: 69px;
        border: 6px solid #288BE0;
        height: 616px !important;
        width: auto;
        font-family: 'Lilita One', cursive;
        /* margin-bottom: 40px; */
        background-image: url(.././images/sky-background.png);
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .book-story {
        background-color: white;
        height: 175px;
        border-radius: 15px;
        width: 330px;
        margin: auto;
        --bs-gutter-x: 0rem !important;
        padding: 0px;
        /* display: flex; */
        /* flex-direction: column; */
    }

    #play-story-image {
        width: 100%;
        height: 151px;
    }

    .book-story-image {
        width: 165px;
    }

    .book-story-text {
        background: transparent linear-gradient(270deg, #FFFFFF00 90%, #808080 100%) 100% 100% no-repeat;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 177px;
        width: 160px;
        font-size: 10px;
        margin-top: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .image-of-story {
        height: 160px;
        /* width: 68px; */
        /* margin: auto; */
        object-fit: cover;
        /* object-position: center center; */
        /* width: 100%; */
        margin-top: 8px !important;
    }

    .text-story {
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        color: #4B4B4B;
    }
}




@media (max-width: 576px) {

    ul.navbar-nav{
        margin-right: -130px !important;
        margin-bottom: 30px !important;
    }
    
    .bkg-story-play-end {
        background-color: #333333 !important;
        height: 200px !important;
        width: 90% !important;
        padding: 12px !important;
    }

    .image-of-story-end {
        height: 175px;
        max-width: 165px;
        margin: auto;
        object-fit: cover;
        object-position: center center;
    }


    /* Styles for the Story Player */

    #play-story-screen-cover{
        width: 90% !important;
        height: 200px;
    }

    .container-titles{
        height: 168px !important;
        border-radius:15px !important
    }

    .time-ai{
        font-weight: 700;
        position: absolute;
        top: 15px !important;
        font-size: 7px !important;
    }

    .this-book{
        font-weight: 700;
        position: absolute;
        top: 30px !important;
        font-size: 5px !important;
    }

    #play-story-texto-cover{
        color:#ffbd00;
        font-weight: 700;
        font-size: 10px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    
    .text-directed{
        position: absolute;
        bottom: -3px !important;
        font-weight: 700;
        font-size: 5px !important;
    }

    .image-of-story-cover{
        max-height: 168px !important;
        /* width: 75px !important; */
        /*object-fit: contain !important;*/
        object-position: center center !important;
        border-radius:15px !important
    }

    /* Styles for the Story Player */




    .first-col-login {
        height: 300px !important;
    }

    .super-kiddo {
        width: auto;
        height: 75px;
    }

    #video-box {
        height: auto;
        width: 255px;
        margin: auto;
    }

    #video-collections {
        background-color: transparent;
        text-align: center !important;
    }


    #video-collections>video {
        width: 225px !important;
    }

    .text-video-stories-one {
        font-family: 'Lilita One', cursive;
        font-size: 35px;
        color: white;
        padding-right: 10px;
        padding-left: 10px;
    }

    #video-stories {
        height: 910px;
    }

    #video-box-collections {
        width: 172px;
        margin: auto;
    }

    #video-our-collections {
        background-color: transparent !important;
    }


    .search-container {
        width: 183px;
        position: relative;
        color: white;
        position: absolute;
        top: 182px;
        right: 45px
    }

    .tex-collect-our {
        font-family: 'Lilita One', cursive;
        font-size: 24px;
        color: white
    }

    .tex-collect-our-2 {
        color: white;
        font-size: 15px;
        padding-bottom: 36px;
    }

    .buttons-story-player-tab {
        text-align: center !important;
    }

    #custom-user {
        background-color: #FEBC31 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url("../../assets/images/sky-mobile.png");
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FFCE2C;*/
        /*position: relative;*/
        max-width: 960px;
        margin: auto;
        height: 660px !important;
    }

    .text-custom-user-tab {
        color: white !important;
        padding-top: 50px;
    }

    .img-skies-drop {
        width: auto !important;
        height: 65px !important;
    }

    .image-list {
        margin: auto;
    }


    .use-my-photo-div {
        display: none;
    }

    .drag-drop {
        width: auto;
        height: 8vh;
    }

    .container-drop-zone {
        border-radius: 15px;
        background-color: #FDF6DC;
        height: 270px;
        width: auto;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }


    .text-drag-drop {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 15px;
        font-weight: 900
    }

    .second-text-dp {
        color: #341E00;
        font-family: 'Nunito', sans-serif;
        font-size: 12px;
        font-weight: 900;
    }



    .buttons-story-p {
        text-align: center !important;
    }

    .progressbar-title {
        font-family: 'Lilita One', cursive;
        color: #fff;
        text-align: center;
        font-size: 35px;
        color: white;
        padding-top: 90px;
        margin-bottom: 25px;
    }

    .story-edition-box {
        margin-left: 20px;
        margin-right: 20px;
    }

    .form-story-line {
        padding-left: 15px;
        padding-right: 15px;
    }

    .kids-age-p {
        font-size: 20px;
        font-family: 'Lilita One', cursive;
        font-weight: 700;
        color: #F28705;
    }

    .age-kids {
        width: auto;
        height: 185px;
        margin-top: 30px;
    }

    .tabs-customize {
        margin-left: 20px;
        margin-right: 20px;
    }

    .nav-pills .nav-link.active,
    .nav-link {
        color: #fff;
        background-color: transparent !important;
        /* width: auto; */
        /* height: auto; */
        /* margin-bottom: -86px; */
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 0 !important;
    }

    #play-story-player, #play-story-player-cover {
        position: absolute;
        bottom: -11px;
        left: 21px;
        width: 217px;
        background-color: transparent;
        height: 45px !important;
    }

    .btn-usa {
        width: auto;
        height: 65px;
    }



    .voice-icon {
        width: auto;
        height: 40px;
    }

    .monster-storyline-happy {
        position: absolute;
        left: -104px;
        top: 87px;
        width: 30%;
        z-index: -1;
    }

    .character-play {
        position: absolute;
        right: -4px;
        bottom: -311px;
        width: 100%;
    }

    div.bkg-tweaks {
        background-color: #FDF6DD;
        border-radius: 20px;
        height: 150px;
        margin: auto;
    }


    .story-title {
        font-size: 25px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
    }

    img.skin-image {
        width: auto;
        height: 120px;
        margin: 5px;
    }

    /*09/01/24*/
    /*input.text-story {
        border: none;
        font-family: 'Nunito', sans-serif;
        font-size: 22px;
        color: #341E00;
        font-weight: 500;
    }*/





    input.input-customize,
    #age {
        width: 200px;
        height: 50px;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }

    input.input-custom-user {
        width: 450px;
        height: 64px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: 1;
        padding-left: 35px;
        padding-right: 35px;
        font-size: 25px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 3px 6px #00000029, 0px 3px 6px #EFCB22;
        background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0px !important;
    }




    select.input-genre,
    .input-story {
        opacity: 1;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        box-shadow: inset 0px 5px 3px #00000029;
        border: 0px !important;
        color: #A8A8A8;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 215px;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        opacity: .9;
        font-size: 22px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        border: none;*/
    }




    .input-genre {
        border-radius: 50px;
        width: 100%;
        height: 4vh;
        /*background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 22px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;*/
        background: white url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 710px center;
    }

    body,
    html {
        background: transparent linear-gradient(237deg, #0697F2 0%, #005AD1 100%) 0% 0% no-repeat padding-box;
    }

    nav {
        display: none;
    }

    #container-tab {
        width: 407px !important;
    }

    #new-story,
    #choose-hero,
    #choose-genre,
    #customize,
    #custom-user,
    #storyline,
    #voice,
    #tweaks,
    #story-loading,
    #story-edition,
    #adventurer {
        /*height: 1311px !important;*/
        font-family: 'Lilita One', cursive;
    }

    .bot-relative {
        display: none;
    }



    #choose-genre {
        width: auto;
        height: auto !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/bot-1-mobile.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 0% 96%, 50% 100%;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-size: 113px, 24%, 100%;
        position: relative;

    }

    #new-story {
        width: auto;
        height: 700px !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 113px, 100%;
        position: relative;
    }

    #choose-hero {
        width: auto;
        height: 790px !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 113px, 100%;
        position: relative;
    }

    #adventurer {
        width: auto;
        height: 700px !important;
        font-family: 'Lilita One', cursive;
        color: #D96500;
        background-color: #FFD138 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/monster-bkg.png), url(../../assets/images/sky-mobile.png);
        background-position: 100% 0%, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: 113px, 100%;
        position: relative;
    }

    p.paragraph {
        font-family: 'Nunito', sans-serif;
        font-size: 16px;
        color: #341E00;
        font-weight: 500;
        margin-left: 25px;
        margin-right: 25px;
    }

    .principal-titles {
        font-size: 40px;
        padding-top: 30px;
    }

    img.champ-adv-boy {
        width: 266px;
        height: 266px;
    }

    img.champ-adv-girl {
        width: 266px;
        height: 266px;
    }

    .images-childrens {
        padding-bottom: 100px;
    }

    img.champ-adv {
        width: 222px;
        height: 222px;
    }

    .input-div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25%;
        height: 56px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    img.choose-hero-girl,
    img.choose-hero-boy,
    img.use-my-photo {
        width: auto;
        height: 220px;
    }

    .choose-option {
        width: auto;
        min-height: 560px;
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 5px 5px 20px #C6A40057;
        border-radius: 14px;
        opacity: 1;
        /* margin-left: 102px; */
        /* margin-right: 102px; */
        /* margin: 0; */
    }

    .champ-customize {
        width: auto;
        height: 50px !important;
        margin-bottom: -45px;
    }

    .nav-tabs-customize {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #customize {
        width: auto !important;
        height: 1151px !important;
        background-color: #FEBC31 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
    }

    .sub-titles {
        font-size: 16px;
        color: white;
        font-weight: bold !important;
        padding-top: 30px
    }

    .drag-and-drop-titles {
        color: white !important;
        padding-top: 50px;
    }

    img.girl-champ {
        width: 185px;
        height: auto;
    }

    #storyline {
        height: 950px !important;
        background-color: #F8AF15 !important;
        border-radius: 69px;

        /*Background images*/
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FFBA27;*/
    }

    .form-bkg {
        width: 377px;
        height: 335px !important;
        background: #FDF6DD 0% 0% no-repeat padding-box;
        box-shadow: 3px 3px 20px #C6A40043;
        opacity: 1;
        border-radius: 10px;
        padding: 20px;
    }

    .text-form-bkg {
        font-size: 12px !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .row {
        --bs-gutter-x: 0rem !important;
    }

    .input-story {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        width: 100%;
        height: 139px;
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .input-genre {
        border-radius: 50px;
        width: 100%;
        height: 30px;
        background: white;
        font-size: 12px !important;
        padding-left: 20px;
    }

    img.storyline-images {
        width: 199px;
        height: auto;
        margin-top: 30px;
    }

    .texts-navs {
        font-size: 30px;
        font-family: 'Nunito', sans-serif;
        font-weight: bold;
        color: white;
        padding-top: 30px;
        /* display: none; */
    }

    .monster-storyline-happy {
        display: none;
    }

    #voice {
        width: auto;
        height: 1820px !important;
        background-color: #F79B08 !important;
        /*background: transparent linear-gradient(237deg, #FFD138 0%, #FDE157 100%) 0% 0% no-repeat padding-box !important;*/
        border-radius: 69px;

        /*Background images*/
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /*border: 6px solid #FCB622;*/
    }

    .display-voices {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .voice-images {
        height: 270px;
        width: auto;
    }

    #tweaks,
    #story-loading {
        width: auto;
        height: 360px !important;
        /*background-color: #F28705 !important;*/
        background-color: #f08505 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
        padding-top: 90px;
    }

    #btn-suprose-me-ai,
    #btn-story-edit {
        display: none;
    }

    #btn-suprose-me-ai-mobile,
    #btn-story-edit-mobile {
        width: auto;
        height: 85px;
        display: block;
    }

    .text-storyland {
        font-weight: 500;
        font-size: 25px;
        color: white;
    }

    .storyteller {
        margin-top: 0px
    }


    #story-edition {
        width: auto;
        height: 1290px !important;
        background-color: #F28705 !important;
        border-radius: 69px;
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
        /* padding: 20px; */
    }

    p.book-title {
        font-size: 25px;
        font-family: 'Nunito', sans-serif;
        font-weight: 900;
        color: #4B4B4B;
        margin-top: 10px;
        text-align: center;
    }

    input.book-title {
        width: 100%;
        height: 44px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius: 54px;
        opacity: .9;
        font-size: 12px;
        font-weight: 500;
        font-family: 'Nunito', sans-serif;
        padding-left: 20px;
        padding-right: 20px;
    }

    div.bkg-tweaks-2 {
        height: 764px !important;
        background-color: #FDF6DD;
        border-radius: 20px;
        padding-top: 50px;
        padding: 20px;
        margin-top: 50px;
    }

    .button-nav-under {
        width: 64px;
        height: 64px;
    }

    .story-box-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 650px;
    }

    .triangulo-derecha {
        position: absolute;
        left: 102px;
        z-index: 3;
        top: 323px;
        border-top-right-radius: 10px;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 36px solid #FDF6DD;
        width: 0;
    }

    .btn-story-public,
    .btn-story-save {
        height: 100px !important;
        width: auto !important;
    }

    .btn-story-back {
        height: 59px !important;
        width: auto !important;
        margin-left: 10px;
        margin-right: 10px;
    }

    .character-play {
        display: none;
    }

    /* Play Story Screen */
    .bkg-story-play {
        background-color: #333333 !important;
        color: white;
        font-size: 26px;
        font-family: 'Nunito', sans-serif;
        height: 200px;
        width: 90%;
        text-align: center;
        border-radius: 15px;
        margin-top: 50px;
        padding: 12px;
    }

    #story-player {
        background-color: #0C75D0 !important;
        border-radius: 69px;
        border: 6px solid #288BE0;
        height: 616px !important;
        width: auto;
        font-family: 'Lilita One', cursive;
        /* margin-bottom: 40px; */
        background-image: url(.././images/sky-background.png);
        background-image: url(../../assets/images/sky-mobile.png);
        background-position: 50% 100%;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .book-story {
        background-color: white;
        height: 175px;
        border-radius: 15px;
        max-width: 330px;
        margin: auto;
        --bs-gutter-x: 0rem !important;
        padding: 0px;
        /* display: flex; */
        /* flex-direction: column; */
    }

    #play-story-image {
        width: 100%;
        height: 151px;
    }

    .book-story-image {
        max-width: 50%;
    }

    .book-story-text {
        background: transparent linear-gradient(270deg, #FFFFFF00 90%, #808080 100%) 100% 100% no-repeat;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 177px;
        max-width: 50%;
        font-size: 10px;
        margin-top: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .image-of-story {
        height: 160px;
        /* width: 114px; */
        margin: auto;
        object-fit: cover;
        object-position: center center;
        /* width: auto !important; */
        margin-top: 8px !important;
    }

    .text-story {
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        color: #4B4B4B;
    }
}



.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 25px;
    outline: none;
    background-color: #f4a23d;
    border-color: #f4a23d;
    color: white !important;
}

.search-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    /* background-color: #ccc; */
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    background-color: transparent;
    color: white;
}

.search-button i {
    font-size: 24px;
    /* color: #fff; */
    line-height: 40px;
    text-align: center;
    /* background-color: #f4a23d; */
}

.search-button:hover {
    background-color: #aaa;
}

.icon-search-image {
    width: auto;
    height: 20px;
}

.item.highlighted {
    border: 7px solid #ffcc00 !important;
  }