@import url('https://fonts.cdnfonts.com/css/avenir');
*{
    margin: 0;
    padding: 0;
}
*, body{
    font-family: 'Avenir', sans-serif !important;
}
.btn, .btn-close{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0.25rem !important;
}
.card{
    background-color: white !important;
}
/* header */
.header{
    background-color: #2F2F2F !important;
    padding: 15px !important;
}
.img-header{
    /* width: 70%; */
    margin-left: 5% !important;
}
/* fin header */

/* navbar */
.buttons-navbar{
    width: 20% !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.buttons-navbar:hover,
.buttons-navbar:focus,
.buttons-navbar:active{
    background-color: #FF6D15 !important;
    color: white !important;
    border-color: #FF6D15 !important;
}
.navbar-collapse.show{
    margin-top: 20px !important;
}
/* fin navbar */

/* selector imagenes */
.back-frem{
    width: 18rem !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}
.back-frem .back-chang{
    width: 60px !important;
    height: 30px !important;
    background: wheat !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid gray !important;
}
.back-frem .back-chang img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* fin selector imagenes */

.contenedor-index{
    width: 90% !important;
    margin-left: 5% !important;
}
.cards-selectoras{
    width: 90% !important;
    margin-left: 5% !important;
}
.contenedor-elecciones{
    width: 90% !important;
    margin-left: 5% !important;
}
.contenedor-encuesta{
    padding: 50px !important;
    background-color: #BEBEBE;
}
.card-index{
    border: none !important;
    text-align: center !important;
    box-shadow: 0px 0px 20px 8px lightgray !important;
}
.titulo-index{
    font-size: 50px !important;
}
.texto-index{
    font-size: 18px !important;
    width: 65% !important;
    overflow: hidden !important;
    font-weight: 500 !important;
}
.comenzar-encuesta-texto{
    font-size: 20px !important;
    text-decoration: none !important;
    color: #FF6D15 !important;
    font-weight: 700 !important;
}
.persona{
    float: right !important;
    width: 80% !important;
}
.img-generador{
    height: 120px !important;
    width: 70% !important;
}
.nueva-encuesta{
    color: #FF6D15;
}
.add-img{
    background-color: #FFF3E8 !important;
    cursor:  pointer !important;
}
.add-img-2{
    width: 100%;
    background-color: #FFF3E8 !important;
    cursor:  pointer !important;
}
.label-agregar-imagen{
    cursor: pointer !important;
    color: #FF6D15 !important;
    font-weight: 600 !important;
    margin-bottom: 3rem !important;
}
.agregar-imagen{
    display: none !important;
}
.agregar-opciones{
    cursor: pointer !important;
    color: #FF6D15 !important;
    font-weight: 600 !important;
    margin-bottom: 3rem !important;
}
.input-titulo{
    outline: none !important;
    box-shadow: none !important;
    width: 90% !important;
    margin-left: 5% !important;
    border-color: black !important;
    font-size: 25px !important;
    font-weight: 500 !important;
}
.input-titulo::placeholder{
    color: black !important;
}
.input-titulo-modal{
    outline: none !important;
    box-shadow: none !important;
    width: 90% !important;
    margin-left: 5% !important;
    border-color: black !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}
.input-titulo-modal::placeholder{
    color: black !important;
}
.input-opcion{
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
    border-color: black !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.input-opcion::placeholder{
    color: black !important;
}
.sin-imagen{
    width: 100% !important;
    /* width: 500px !important; */
    height: 300px !important;
}
#imagenback{
    width: 100% !important;
    height: 80% !important;
}
.sin-imagen-2{
    width: 100% !important;
    height: 100% !important;
}
.sin-imagen-opciones{
    width: 100% !important;
    height: 200px !important;
}
.col-opciones{
    margin-left: 4%;
}
.col-hover:hover{
    cursor: pointer !important;
    box-shadow: 0px 0px 40px 2px rgb(233, 232, 232);
    transition: all 0.300ms;
    border: none !important;
}
.nombre{
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}
.check-input{
    width: 30px !important;
    height: 30px !important;
}
.check-input[type='radio']:after {
    width: 30px !important;
    height: 30px !important;
    border-radius: 15px;
    left: -1px;
    position: relative;
    content: '';
    display: inline-block;
    visibility: visible;
}

.check-input[type='radio']:checked:after {
    background-color: #FF5F42  !important;
    border: 2px solid white !important;
}

.bi-star-fill{
    color: #FFA426;
}
.text-area{
    height: 150px;
    max-height: 300px;
}
.text-area::placeholder{
    color: black !important;
}
.finalizar{
    background-color: transparent !important;
    border-radius: 8px !important;
    border: 2px solid black !important;
    color: black !important;
}

/* backcolors */
.back-colors{
    float: right !important;
}
.back-color-uno{
    border-radius: 10px !important;
    border: 2px solid black !important;
    color: #e9e9e9;
}
.back-color-dos{
    border-radius: 10px !important;
    border: 2px solid black !important;
    color: #BEBEBE;
}
.back-color-tres{
    border-radius: 10px !important;
    border: 2px solid black !important;
    color: #8E8E8E;
}
.col-estrellas{
    display: flex; 
    justify-content:center; 
    padding:20px;
}
/* fi backcolores */ 



/* modals */
.modal-content{
    border-radius: 0.25rem !important;
}
.card-opciones{
    border-radius: 0px !important;
}
.modal-datos{
    border-radius: 10px !important;
}
.listo-modal{
    background-color: white !important;
    border-radius: 8px !important;
    border: 2px solid black !important;
    color: black !important;
    font-weight: 600 !important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    -ms-border-radius: 8px !important;
    -o-border-radius: 8px !important;
}
.titulo-modal{
    color: #FF6D15 !important;
    font-weight: 600 !important;
}
/* fin modals */
@media (max-width: 500px){
    .img-header{
        width: 20% !important;
    }
    .contenedor-encuesta{
        padding: 1px !important;
    }
    .titulo-uno, .titulo-dos{
        font-size: 16px !important;
    }
    .back-colors{
        margin-top: 10px;
    }
    .col-estrellas{
        justify-content: space-between !important;
    }

    #imagenback{
        width: 100% !important;
        height: 60% !important;
    }
    .input-titulo{
        font-size: 16px !important;
    }
    .col-11.text-center.col-hover.ms-4.mb-4 {
        margin-left: 0px !important;
        padding: 0px !important;
        width: 100%;
        margin-bottom: 5px !important;
    }
    .input-opcion.border-0.border-bottom.pb-2 {
        font-size: 12px !important;
    }
    .col-11.text-center.ms-4.mb-5 {
        margin-left: 15px !important;
    }
    #mostrar_dos_ {
        width: 108%;
        right: 4% !important;
    }
}
@media (max-width: 210px){
    .cards-selectoras{
        width: 96% !important;
        margin-left: 2% !important;
    }
    .img-header{
        width: 30% !important;
    }
    .contenedor-encuesta{
        padding: 1px !important;
    }
    .titulo-uno, .titulo-dos{
        font-size: 16px !important;
    }
    .back-colors{
        margin-top: 10px;
    }
    .col-estrellas{
        justify-content: space-between !important;
    }
    #imagenback{
        width: 100% !important;
        height: 40% !important;
    }
    .input-titulo{
        font-size: 16px !important;
    }
}