@import url('fonts.css');
@import url('variables.css');

body {
    font-family: 'Nunito', sans-serif, monospace;
    padding: 0px;
    margin: 0px;
}

a {
    text-decoration: none;
}

.container-header {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 2fr 1fr;
    background-color: var(--red);
    color: white;
}

.no-spaces {
    padding: 0px;
    margin: 0px;
}

.container-base {
    padding-left: 2%;
    padding-right: 2%;
    margin-right: 4%;
}

@media only screen and (min-width: 1205px) {
    .container-base {
        padding-left: 19%;
    }
}


.justify-content-center {
    display: flex;
    justify-content: center;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}

.text-red {
    color: var(--coffee);
}

.text-blue {
    color: var(--blue);
}

.text-bold {
    font-weight: bold;
}

.border-bottom {
    border-bottom: .05px solid var(--light-grey);
}

.pt-1 {
    padding-top: 1%;
}

.pt-3 {
    padding-top: 3%;
}

.pb-3 {
    padding-bottom: 3%;
}

.hide-element {
    display: none;
}

.container-images-main>div {
    width: 100%;
    height: 100%;
}

.container-images-main {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 1fr;
}

.container-images-main>div>img {
    height: 300px;
}

.img-tu-voto {
    width: 30%;
    background-color: white;
    border-radius: 10%;
    padding: 3%;
}

.center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.container-qr-red {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 2fr;
    padding: 2%;
    background: var(--white);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.container-qr-complaints {
    padding: 1%;
    text-align: center;
    background: var(--white);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.img-qr-complaints {
    width: 180px;
}

/* Area Instutions */
.network-institutions>svg {
    width: 20px;
    filter: invert(21%) sepia(16%) saturate(2032%) hue-rotate(155deg) brightness(94%) contrast(101%);
}

.area-institutions {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 3fr));
}

.area-institution-box {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 0.5fr 2.5fr;
    border: 2px solid var(--light-yellow);
    border-radius: 4%;
    margin: 1%;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 4%;
}

.area-institution-box>div {
    padding-left: 2%;
}

.area-institution-box>div>img {
    width: 100%;
}

.area-institution-box>div>p>svg {
    width: 12px;
}

.img-area-institution-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.area-institutions>div:hover {
    background-color: var(--light-yellow);
}

/* Area material */
.area-material {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 3fr));
}

.area-material>div {
    background-color: var(--light-grey);
    border-radius: 4%;
    margin: 1%;
    padding: 4%;
    align-content: center;
}

.area-material-box {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 0.8fr 2fr;
}

.area-material-box>div>img {
    width: 100px;
    background-color: white;
    border-radius: 10%;
}

.area-material-link>a>svg {
    width: 20px;
}

.area-material-link>a {
    color: black;
}

.area-material-box:hover {
    background-color: var(--light-yellow);
}

.area-material-link>a>svg:hover {
    filter: invert(8%) sepia(60%) saturate(4466%) hue-rotate(314deg) brightness(96%) contrast(98%);
}

.area-material-link>a:hover {
    color: var(--coffee);
    font-weight: bold;
}

/* Footer and networks */
footer {
    background-color: var(--profile-border-color);
    color: var(--navbar-shallow-color);
    padding-top: 2%;
    padding-bottom: 2%;
}

.networks {
    filter: invert(73%) sepia(10%) saturate(125%) hue-rotate(315deg) brightness(89%) contrast(84%);
    width: 30px;
}

.networks:hover {
    filter: invert(13%) sepia(52%) saturate(3066%) hue-rotate(305deg) brightness(85%) contrast(105%);
}

.network-facebook {
    width: 20px;
}

.container-social-networks>a {
    padding-left: 1%;
    padding-right: 1%;
}

/* Section menssage */

.bg-grey {
    background-color: var(--light-grey);
}

.container-coments {
    background-color: var(--light-grey);
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 18%;
}

.form-message {

    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1fr 1fr;
}

.form-message>div>input {
    width: 90%;
}

.form-message-message>input {
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2))
}

.form-message-message {
    display: flex;
    flex-direction: column;
}

.input-form {
    border: 1px solid var(--coffee);
    font-size: 16px;
    outline: none;
    border-radius: 5px;
    padding: 0.5em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.btnSendComents {
    max-width: 25em;
    border: none;
    border-radius: 5px;
    padding: 1em;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    color: white;
    font-weight: bold;
    background-color: var(--coffee);
    margin: 1%;
}

.btn-send-form {
    text-align: right;
}

.btnSendComents:hover {
    background-color: var(--blue);
}

.refresh-captcha {
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}

.form-code-verify {
    text-align: end;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: 1.5fr 0.8fr;
}

.suggestion-text {
    font-style: italic;
    font-size: 14px
}

.input-not-valid {
    border-color: #dc3545;
}

.input-not-valid-with-icon {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Container contact */
.container-contact {
    display: grid;
    grid-auto-flow: dense;
    /* grid-template-columns: repeat(auto-fill, minmax(32rem, 3fr)); */
    grid-template-columns: 1fr 1fr;
}

.container-contact>div {
    padding: 1%;
}

.ieepco-map {
    width: 100%;
    height: 70%;
}

.menu-share-on-networks {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(-38% - -69%);
    right: 6px;
    max-height: 70vh;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;   
}

.menu-share-on-networks>a {
    margin:9%;
}

.text-menu-share-networks {
    display: none;
}