/* ---------------- ROOT VARIABLES ------------------ */

:root{
    --box-shadow-btn: 12px 12px 7px -4px rgb(0 0 0 / 50%);
    --box-shadow: 0 2rem 3rem rgba(132,139,200,0.18);
    --background-pb-color: #f6f6f6;
    --color-pb-clar: #ffffff;
    --color-pb-red: #a4253a;
    --color-pb-red-hover: #8C2736;
    --color-pb-blue: #0025ff;
    --color-pb-blue-hover: #0025ff;
    --color-pb-tronja: #fc7200;
    --color-pb-tronja-hover: #fc7200;
    --color-pb-green: #298618;
    --color-pb-black: #000000;
}
.bodypackback{
    background-color: var(--background-pb-color);
}

.btn-packback{
    -webkit-box-shadow: var(--box-shadow-btn-pb); 
    box-shadow: var(--box-shadow-btn-pb);
}

.btn-packback:hover, .btn-packback:focus{
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* HEADER */
.footerDivFino{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1%;
    width: 98%;
    height: 5px;
    background-color: var(--color-pb-tronja);
    opacity: 1;
}
.footerDiv{
    position: absolute;
    margin-top: 3%;
    width: 98%;
    height: 100px;
    opacity: 1;
}
.logo{
    max-width: 25vh;
    max-height: 20vh;
    width: auto;
    height: auto;
}
.posLogo{
    margin: auto;
    height: auto;
    padding: 5vh !important;
}
.titlePb{
    margin-top: 5%;
    text-align:center;
    font-size:24px;
}
.titlePbRightName{
    float:right;
    padding: 2%;
    font-size:14px;
}

#maininfodiv{
    position: relative;
    height: 100%;
}
#btns_info{
    position: absolute;
    bottom: 25px;
    left: 0;
}

/* FI HEADER */

.btn-primary{
    text-decoration: none !important;
    padding: 1vh !important;
    border-radius: 0.25rem !important;
    background-color: var(--color-pb-green) !important;
    border: 1px solid var(--color-pb-green) !important;
    color: var(--color-pb-clar) !important;
    font-weight: bold !important;
}
.btn-primary:hover{
    background-color: var(--color-pb-clar) !important;
    border-color: var(--color-pb-green) !important;
    color: var(--color-pb-green) !important;
}
.btn-danger{
    text-decoration: none !important;
    padding: 1vh !important;
    border-radius: 0.25rem !important;
    background-color: var(--color-pb-red) !important;
    border: 1px solid var(--color-pb-red) !important;
    color: var(--color-pb-clar) !important;
    font-weight: bold !important;
}
.btn-danger:hover{
    background-color: var(--color-pb-clar) !important;
    border-color: var(--color-pb-red) !important;
    color: var(--color-pb-red) !important;
}

/* CSS SALDO */

#div_saldoview{
    text-align:center;
}
#div_saldoview > p{
    margin: 0px;
    font-size: 1em;
}
#saldo_valor_div > div > div > h4, #amount_saldo{
    display: inline;
}

.red{
    font-weight: bold;
    color: var(--color-pb-red);
}

#btn_recargar{
    font-size: 1.6em;
    color: var(--color-pb-red);
    bottom: 0px;
}
#btn_recargar:hover{
    cursor: pointer;
}

#btn_recargar:hover .bi-arrow-clockwise::before{
    transform: rotate(360deg);
}

.bi-arrow-clockwise::before{
    transition: 0.5s ease all;
}

#saldo_recargar_div{
    text-align:left;
    position: relative;
}
#amount_alert{
    color: Grey;
}
#othercontent{
    margin-top: 5vh;
}

#text_saldo_p{
    text-align: right;
}

#saldo_valor_div, #devostogglediv{
    text-align: left;
    padding: 0px 2%;
}
#saldo_valor_div > div > div > p{
    margin: 0px;
}

#devostogglediv{
    margin-bottom: 3vh;
}

.titlePbRightNamemovil{
    display: none;
    float: right;
    padding: 2%;
}

.alert{
    z-index: 100;
}
/* FIN CSS SALDO */

/*CheckBox Slider*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    -webkit-transition: .4s;
    transition: .4s;
    width: 60px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #149dcc;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* FI CheckBox Slider*/

/* CORRECTO O INCORRECTO */
#Correcte{
    min-height: 10vh;
    max-height: 15vh;
    position: absolute;
    top: -15vh;
    transition: top 0.2s linear, opacity 0.3s linear;
    -webkit-transition: top 0.2s linear, opacity 0.3s linear;
    -moz-transition: top 0.2s linear, opacity 0.3s linear;
    -o-transition: top 0.2s linear, opacity 0.3s linear;
    opacity: 0;
}
#Incorrecto{
    min-height: 10vh;
    max-height: 15vh;
    position: absolute;
    top: -15vh;
    transition: top 0.2s linear, opacity 0.3s linear;
    -webkit-transition: top 0.2s linear, opacity 0.3s linear;
    -moz-transition: top 0.2s linear, opacity 0.3s linear;
    -o-transition: top 0.2s linear, opacity 0.3s linear;
    opacity: 0;
}

.fade{
    top: 0vh !important;
    opacity: 1 !important;
}
.divTitleContent{
    position: relative;
}

/* INFO CARRUSEL */

.infoitemresalt{
    padding: 1vh;
    border: 2px solid red !important;
    transition: all 0.5s ease;
    border-radius: 15px;
}

#masinfo{
    position: absolute;
    right: 0;
    bottom: 20%;
    padding: 2%;
    color: var(--color-pb-blue);
}
#masinfo:hover{
    cursor: pointer;
    color: var(--color-pb-blue-hover);
}
#infopackback{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(120, 120, 120, 0.5);
    z-index: 20;
    transition: all 0.5s ease;
    padding: 2vh;
    display: none;
    /*opacity: 0;*/
}

.mySlides {
    display: none;
    position: relative;
    margin: auto;
    width: 85%;
}

.mySlides .text > img{
    padding: 15px;
}

/* Slideshow container */
.slideshow-container {
    max-width: 75%;
    position: relative;
    margin: auto;
}

/* Next & previous buttons */
.prev, .next {
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    color: var(--color-pb-blue-hover);
    /*background-color: rgba(0,0,0,0.8);*/
}

/* Caption text */
.text {
    background-color: rgba(255,255,255,0.90);
    border-radius: 5px;
    color: black;
    font-size: 15px;
    padding: 3vh;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: black;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.btn-mimoos{
    background-color: white;
    font-size: 1em;
    font-weight: bold;
    padding: 1vh 1.5vh;
    border-radius: 2vh;
    text-align: center;
    transition: all 0.1s linear;
    border: 1px solid black;
    color: black;
}

.btn-mimoos:hover{
    border: 1px solid white;
    background-color: black;
    color: white;
}

.btn-mimoos:hover{
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

/* FIN INFO CARRUSEL */

/****** ALL MAX WIDTH ******/

/* MAX WIDTH 765PX */
@media (max-width: 765px) {
    .content70{
        width: 95% !important;
    }
    #wpcontent{
        padding: 0px !important;
    }
    #text_saldo_p{
        text-align: left;
    }
    #amount_saldo{
        font-size: 2.5em;
    }
    .mySlides{
        width: 75%;
        margin: auto;
    }
    #dots_info{
        margin-top: 46px !important;
    }
    .fade{
        top: 46px !important;
    }
    .titlePbRightName{
        display:none;
    }
    .titlePbRightNamemovil{
        display: block;
    }
    .slideshow-container {
        max-width: 100%;
    }
    #closeinfo{
        margin-top: 46px;
    }
}

/* MAX WIDTH 300PX */
@media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
}

/****** ALL MIN WIDTH ******/

/* MIN WIDTH 1200PX */
@media (min-width: 1200px){
    #amount_saldo{
        font-size: 1.1vw;
        word-break:break-all;
    }
    .slideshow-container {
        max-width: 50%;
    }

    #saldo_valor_div > div > h1{
        font-size: 2.25rem;
    }
}