@font-face {
    font-family: "Montserrat";
    src: url("/assets/fonts/montserrat/Montserrat-Regular.ttf");
    src: url("/assets/fonts/montserrat/Montserrat-Regular.ttf") format("ttf"),
        url("/assets/fonts/montserrat/Montserrat-Medium.ttf") format("ttf"),
        url("/assets/fonts/montserrat/Montserrat-Bold.ttf") format("ttf"),
        url("/assets/fonts/montserrat/Montserrat-Black.ttf") format("ttf"),
}

* {
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: #444444 !important;
    font-size: .9em !important
}

body.bg-login {
    background: url(/assets/img/bg-people.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*Header*/

#header {
    color: #ffffff;
}


#header img {
    max-width: 100%;
}

.photoBack {
    position: relative;
    background: url(../img/palacio.jpg) center no-repeat;
    background-size: cover;
    padding-bottom: 15rem;
}

#menuUser p a {
    color: #ffffff;
}

#menuUser p a:hover {
    color: #2196F3;
    text-decoration: none;
}

#menuUser p {
    margin-bottom: 0rem !important;
    display: block;
    text-align: right;
}

#menuUser .nav {
    display: block;
}

.idVotante {
    margin-top: -1rem !important;
}

/*Login*/

#login {
    padding: 1rem 0;
    margin: auto;
    top: -11rem;
}

#login img {
    max-width: 50%;
}

#login h3 {
    color: #047aa3;
}

#btnIngresar {
    background-color: #047aa3;
    color: #fff;
}

#btnFinalizar {
    background-color: #047aa3;
    color: #fff;
}

.fa-thumbs-up {
    font-size: 7rem;
    color: #ffffff;
}

.recibidoExito {
    color: #ffffff;
    text-align: center;
}

#msjFinalizar {
    /* background-color: #f8982b !important; */
    padding: 1rem 0;
    margin: auto;
    top: -9rem;
    /* color: #ffffff; */
}

#msjFinalizar img {
    max-width: 100%;
}

#msjFinalizar h5 {
    color: #047aa3;
    font-size: 2rem;
}

/*Voto*/

#voto {
    padding: 1rem 0;
    margin: auto;
    top: -9rem;
    background-color: rgba(255, 255, 255, .75);
}

#voto img {
    max-width: 80%;
    float: right;
}

#nombreMateria {
    text-transform: uppercase;
    background-color: #047aa3;
    color: #ffffff;
    padding: 1rem;
}

#voto h3 {
    color: #047aa3;
    text-transform: uppercase;
}

.textoVoto h5 {
    margin-top: 3rem;
    padding: 1rem 5rem;
    text-align: justify;
}

.candidato {
    padding: 1rem 0;
    cursor: pointer;
}

.candidato.active {
    color: #ffffff;
    background-color: #5aa40b;
}

.candidato>.indice.d-none {
    display: flex !important;
}

.candidato.active>.indice.d-none {
    display: none !important;
}

.candidato.active>.d-none {
    display: flex !important;
}

#widgetRight p {
    text-align: right;
}

#widgetLeft p {
    text-align: left;
}

#widgetRight p a {
    color: #ffffff;
}

#widgetRight p a:hover {
    color: #2196F3;
    text-decoration: none;
}

#widgetLeft p a {
    color: #ffffff;
}

#widgetLeft p a:hover {
    color: #2196F3;
    text-decoration: none;
}

/*checkbox custom*/
/* Customize the label (the checkContainer) */
.checkContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkContainer:hover input~.checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkContainer input:checked~.checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkContainer input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkContainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkContainer p {
    margin-left: 1rem;
    margin-top: 3rem;
    font-size: 16px;
}



.small, small {
    font-size: .7em;
}

.swal2-html-container {
    overflow: hidden !important;
}

/* Resolución*/

@media only screen and (max-width: 767px) {
    #menuUser p {
        text-align: center;
    }

    #widgetRight p {
        text-align: center;
    }

    #widgetLeft p {
        text-align: center;
    }

    #voto img {
        max-width: 25%;
        margin-right: 38%;
    }

    #voto .card-head {
        text-align: center;
    }

    .orgVotante {
        margin-top: 3rem !important;
    }

    .photoBack {
        padding-bottom: 8rem;
    }

    #login {
        top: -7rem;
    }

    #voto {
        top: -5rem;
    }

    #msjFinalizar {
        top: -4rem;
    }
}

@media only screen and (max-width: 991px) {
    .card-body h4 {
        text-align: justify;
        padding: 0 3rem;
    }

}

@media only screen and (max-width: 460px) {
    #login {
        width: 19rem;
    }

    .card-body {
        width: 100%;
    }

    .form-control {
        width: 16rem !important;
    }

    .orgVotante {
        margin-top: 1rem !important;
    }

    .g-recaptcha {
        transform: scale(0.85);
        -webkit-transform: scale(0.85);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }

    .col {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    #voto h3 {
        font-size: 1.15rem;
    }

    .textoVoto h5 {
        font-size: 0.9rem;
        margin-top: 1rem;
        padding: 1rem 1rem;
    }

    #nombreMateria {
        font-size: 0.9rem;
        margin-top: -2rem !important;
    }

    .candidato h5 {
        font-size: 0.9rem;
    }

    .checkmark {
        height: 20px;
        width: 20px;
    }

    .checkContainer p {
        font-size: 0.9rem;
        margin-left: 0rem !important;
    }

    #btnLimpiar {
        font-size: 0.8rem !important;
        max-width: 100% !important;
    }

    #btnVotar {
        font-size: 0.8rem !important;
        max-width: 100% !important;
    }

    .swal2-popup .swal2-title {
        font-size: 01rem !important;
    }

    .swal2-popup #swal2-content {
        font-size: 1rem !important;
    }

    .swal2-actions {
        max-width: 56%;
    }

    .swal2-cancel {
        font-size: 0.8rem !important;
        max-width: 80% !important;
        text-align: left !important;
    }

    .swal2-confirm {
        font-size: 0.8rem !important;
        max-width: 80% !important;
        text-align: left !important;
    }

    #msjFinalizar h3 {
        font-size: 1.3rem;
    }

    .txtConfirmacion h4 {
        font-size: 1rem !important;
        padding: 0;
    }

    .modal-dialog {
        min-width: 100%;
        margin: 0rem !important;
    }

    .close {
        font-size: 1.3rem !important;
    }

    .modal-body {
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    .videoAyuda {
        width: 18rem !important;
        height: 16rem !important;
    }
}

@media (min-width: 1600px) {
    .col-lg-3 {
        flex: 0 0 auto !important;
        width: 25% !important;
    }
}