:root {

    --fontViga: 'Viga', sans-serif;

    --colortimegoldsblue: #2991d6;

}



.pagospaypalindex {

    font-family: var(--fontViga);

}



.pagospaypalindex__form {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    /* background-color: rgb(11, 147, 147); */

}



.pagospaypalindex__formbox {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    width: 30rem;

}



.pagospaypalindex__mask {

    display: flex;

    flex-direction: row;

    justify-content: center;

}



.pagospaypalindex__detallesbox {

    width: 25rem;

    margin-left: 3rem;

}

.divPrecioPagarMask{

    margin-top: 1rem;

    padding: 1rem;

    border: 1px solid rgb(211, 211, 211);

    border-radius: .5rem;

}

#btnVerifiInputs{

    margin-top: 3rem;

}

.pagospaypalindex__paypalbtn {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.pagospaypalindex__paypalbtnmask {

    margin-top: 3rem;

    margin-bottom: 3rem;

    width: 40rem;

    /* padding: 3rem; */

    /* background-color: #5264AE; */

}

#msg-state{

    color: red;

    font-size: 3rem;

}

.pagospaypalindex__titulo {

    text-align: center;

    padding-top: 2rem;

    margin-bottom: 2rem;

}



.pagospaypalindex__titulo h2 {

    color: #2991d6;

}



.select {

    width: 65%;

    margin-right: .5rem;

    float: right;

    outline: none;

    padding: .4rem;

    border: 1px solid #2991d6;

}





/* From uiverse.io by @G4b413l */



.group {

    position: relative;

    margin-top: 2rem;

    width: 100%;

    /* background-color: #5264AE; */

}



.input {

    font-size: 16px;

    padding: 10px 10px 10px 5px;

    display: block;

    width: 98%;

    border-radius: .3rem;

    /* border: none; */

    border: 1px solid #ecc8ff;

    background: transparent;

}



.input:focus {

    outline: none;

}



.group label {

    color: rgb(130, 188, 243);

    font-size: 1rem;

    font-weight: normal;

    font-family: var(--fontViga);

    position: absolute;

    pointer-events: none;

    left: 5px;

    top: 10px;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}



.input:focus~label,

.input:valid~label {

    top: -20px;

    font-size: 14px;

    color: #5264AE;

}



.bar {

    /* position: relative; */

    display: none;

    /* width: 100%; */

}



.bar:before,

.bar:after {

    content: '';

    height: 2px;

    width: 0;

    bottom: 1px;

    position: absolute;

    background: #5264AE;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}



.bar:before {

    left: 50%;

}



.bar:after {

    right: 50%;

}



.input:focus~.bar:before,

.input:focus~.bar:after {

    width: 50%;

}



.highlight {

    position: absolute;

    height: 60%;

    width: 100%;

    top: 25%;

    left: 0;

    pointer-events: none;

    opacity: 0.5;

}



.input:focus~.highlight {

    animation: inputHighlighter 0.3s ease;

}



@keyframes inputHighlighter {

    from {

        background: #5264AE;

    }

    to {

        width: 0;

        background: transparent;

    }

}



@media screen and (max-width:1000px) {

    .pagospaypalindex__mask {

        flex-direction: column-reverse;

        justify-content: center;

        align-items: center;

    }

    .pagospaypalindex__formbox {

        max-width: 30rem;

        width: 100%;

    }

    .pagospaypalindex__paypalbtnmask {

        max-width: 40rem;

        width: 99%;

    }

    .pagospaypalindex__detallesbox {

        max-width: 25rem;

        width: 99%;

        margin-left: 0;

    }

    .input {

        width: 98%;

    }

    .group {

        width: 98%;

        position: relative;

        margin-top: 2rem;

        margin-left: 2%;

        /* background-color: #5264AE; */

    }

}