html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Open Sans', sans-serif;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

footer {
    background-color: #fff !important;
}

.btn-qrvoz-login {
}

    .btn-qrvoz-login img {
        width: 15px;
        margin-right: 5px;
    }

    .btn-qrvoz-login span {
    }


.navbar-brand img {
    width: 10%;
}


.main-player {
    /*background-image: url('files/jair.jpeg');*/
    background-size: cover;
}

    .main-player img {
        width: 100%;
    }

    .main-player audio {
        margin-top: 20px;
        width: 100%;
    }


.main-player-img {
    min-height: 600px;
    border: 3px solid #6c6c6c;
    border-radius: 10px;
    background-size: cover;
}

.main-player-text {
    border: 0px solid #6c6c6c;
    border-radius: 10px;
    background-color: #ffffffc2;
    padding: 20px 0px;
}

    .main-player-text span {
        color: #7a0e8f;
        font-size: 48px;
        padding: 20px;
        text-align: center;
    }

    .main-player-text p {
        color: #7a0e8f;
        font-size: 48px;
        padding: 20px;
        text-align: center;
    }

audio {
    width: 20%;
}

.main-player-control {
    background-color: #ffffffc2;
    border-radius: 10px;
    margin-top: 10px;
    border: 0px solid #6c6c6c;
    padding: 20px;

}

.main-player-control-2 {

    background-color: #ffffffc2;
    border-radius: 10px;
    margin-top: 10px;
    border: 0px solid #6c6c6c;
    padding: 20px;
    bottom: 0;
    position: fixed;
    margin-bottom: 10px;
    width: -webkit-fill-available;
    margin: 10px 10px 10px 0px;
}

.main-player-buttons {
    text-align: center;
}

    .main-player-buttons img {
        width: 80px;
        margin-left: 15px;
    }

.main-player-wave {
}

    .main-player-wave img {
        height: 80px;
    }

.steps-rec {
    font-family: 'Roboto 500', sans-serif;
}

.step1-rec {
    display: inline-block;
}

    .step1-rec h1 {
        margin: 20px auto;
        font-size: 28px;
    }

    .step1-rec a {
        margin: 20px auto;
    }

    .step1-rec p {
        margin: 20px auto;
        font-size: 18px;
    }

/*---------------------------------------------------------------*/
.step-rec {
}

.step-rec-hide {
    display: none;
}

.pic-theme-hide {
    display: none;
}

.el-hide {
    display: none !important;
}

.step-rec-show {
    display: block;
}

.pic-theme-show {
    display: block;
}

.step-rec-1 {
}

    .step-rec-1 h2 {
        margin: 20px 10px;
        font-weight: bold;
    }

.step-rec-1-options {
}

    .step-rec-1-options ul {
        list-style: none;
        margin: 10px;
        padding: 0px;
    }

        .step-rec-1-options ul li {
            text-align: center;
            border: 1px solid #b2b2b2;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 10px;
            font-size: 18px;
            font-family: 'Roboto 500', sans-serif;
        }

.step-rec-1-btn-return {
    margin: 10px 10px;
}

.step-rec-1-pictures {
    margin: 10px 10px;
}



.step-rec-1-picture {
    border: 1px solid #cdcdcd;
    border-radius: 10px;
    padding: 10px;
    width: 48%;
    margin-top: 5px;
    float: left;
    margin-right: 5px;
}

    /*.step-rec-1-picture:nth-child(2n+1) {*/
    /*float:right;*/
    /*margin-right:5px;
    }*/

    /*.step-rec-1-picture:nth-child(odd) {*/
    /*float:right;*/
    /*margin-right: 5px;
    }*/


    .step-rec-1-picture img {
        width: 100%;
        border: 1px solid #b9b9b9;
        border-radius: 10px;
        background-size: cover;
    }

    .step-rec-1-picture button {
        margin-top: 15px;
    }

.step-rec-2 {
}

    .step-rec-2 h2 {
        margin: 30px 0px;
    }

    .step-rec-2 h4 {
        margin: 30px 0px;
        color: #dc8804;
    }

.step-rec-2-textarea {
    margin: 30px 0px;
}

.step-rec-3 {
}

.step-rec-4 {
}

.step-rec-5 {
}

/*---------------------------------------------------------------*/

.step-preview {
    min-height: 80vh;
    padding: 20px;
}

.btn-preview {
    width: 180px;
    position: fixed;
    bottom: 5px;
    right: 5px;
    border: 1px solid #b2b2b2;
    /*display: none;*/

}

    .btn-preview span {
        color: #000;
    }

        .btn-preview span.icon {
            width: 24px;
            height: 24px;
        }

        .btn-preview span.icon-up {
            display: inline-block;
            background: url('../img/scaleUp.svg') no-repeat;
            background-size: contain;
        }

        .btn-preview span.icon-down {
            display: inline-block;
            background: url('../img/scaleDown.svg') no-repeat;
            background-size: contain;
        }

        .btn-preview span.icon-title {
            height: 24px;
            margin-left: 10px;
        }

/*.main-player-text-preview {
    border: 0px solid #6c6c6c;
    border-radius: 10px;
    background-color: #ffffffc2;
    padding: 20px 0px;
}
*/