@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    display: swap;
}

@font-face {
	font-family: 'EB Garamond';
	src: url('../fonts/Eb_garamond/EBGaramond-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    display: swap;
}

@font-face {
	font-family: 'Bai Jamjuree';
	src: url('../fonts/Bai_Jamjuree/BaiJamjuree-SemiBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    display: swap;
}

*{
	font-family: 'Montserrat', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #555 #f1f1f1;
}

:root{
    --header-color: #3e315d;
    --text-color: #FFF;
    --green-color: #ADA96C;
    --dark-green-color: #58584B;
    --main-color: #806CAE;
    --complementary-color: #857b976e;
    --header-font: Bai Jamjuree;
}

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }


/* Remove scrollbar buttons (arrows) */
::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
  width: 0px;
}

.icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}


.input-wrapper, #search {
    position: relative;
}

#search{
    margin-left: auto;
}


.ui-menu{
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 30vh;
}

.mensaje-error{
    height: 30vh;
    display: flex;
    gap: 1.5em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.input-wrapper .icon{
    color: #ced4da;
}

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

body {
    background-image: url(../img/Patron3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 !important;
    margin-bottom: 60px !important;
}

.main .container{
    background-color: var(--text-color);
    border-radius: 10px;
    box-shadow: var(--header-color) 8px 8px 50px;
    padding: 4rem;
    margin-bottom: 5rem;
}

footer {
    /* position: absolute !important;
    bottom: 40px !important;
    width: 100% !important;
    height: 40px !important; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    position: absolute;
    height: 60px !important;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

footer .text-center,
footer a {
    font-family: var(--header-font);
}

footer #cambios {
    top: -30px;
}

footer .btn-circle.btn-xl {
    border: 1px solid var(--main-color);
    background-color: var(--header-color);
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 30px !important;
}

footer .btn-circle.btn-xl .fas {
    color: var(--text-color) !important;
}

footer a[href='https://silicondt.com'] {
    color: var(--header-color) !important;
}

footer a[href='https://silicondt.com']:hover {
    color: var(--main-color) !important;
}

.datos{
    background-color: var(--header-color);
    color: white;
    width: 100%;
    margin: auto;
    height: 100%;
    /* padding-left: 3rem;
    padding-right: 3rem; */
}

/**Tabla general**/
.resize{
    resize: horizontal;
}

.thead, .tbody{
    margin: auto;
    width: 100%;
}

.thead div{
    padding: 0.5em;
    background-color: var(--header-color) !important ;
    color: var(--text-color);
    font-weight: 800;
}

.tbody{
    max-height: 45vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.tbody .col-12{
    padding: 0;
}

.tbody .row:nth-child(even){
    background-color: var(--text-color);
}

.tbody .row:nth-child(odd){
    background-color: #816cae26;
}


.table .tbody .row{
    margin: 0;
    padding: 0.7em;

}

.table .tbody{
    border: 1px solid var(--header-color) !important;
}

button[type='submit'] {
    background-color: var(--header-color);
    color: var(--text-color);
    border: 2px solid var(--main-color);
    transition: color 0.5s, background-color 0.5s;
}

button[type='submit']:hover {
    background-color: var(--text-color);
    color: var(--header-color);
    border: 2px solid var(--main-color);
}


.table .tbody .row .btn:hover{
    background-color: #f1e3d2;
    border: 1px #3e315d solid ;
    color:  #3e315d ;
    transition: color 0.5s, background-color 0.5s;
    box-sizing: border-box;
}

.table .tbody .row .btn{
    background-color: var(--header-color);
    border: 0px;
    color:  var(--text-color);
}

.table .tbody .row:hover{
    background-color: var(--complementary-color) !important;
    transition: background-color 0.5s;
}


.table .thead-light th {
    color: #ede5e5;
    background-color: #215897;
    border-color: #dee2e6;
}

/*tabla de dos columnas*/
.tabla, .no-table{
    display: none;
}


.tabla .principal{
    padding: 0.5em;
    background-color: var(--header-color) !important;
    color: var(--text-color);
    font-weight: 800;
}

.tabla{
    border: 2px solid var(--main-color);
}

.tabla .row:not(:last-child){
    border-bottom: 2px solid var(--main-color);
}



/************************/

.editar:hover {
    color: #ff9d3d;
}

.ocultar:hover {
    color: #ff0d0d;
}

.eliminar:hover {
    color: #ff0000;
}

.lista:hover {
    color: #b3fcaf;
}

.ver:hover {
    color: #39c545;
}

.mostrar:hover{
    color: #d8deae;
}

.btn-primary:hover {
    color: #fff;
    background-color: #003d7f;
    border-color: #003d7f;
}

.opciones_edicion {
    list-style-type: none;
    padding-left: 0;
}

.opciones_edicion li {
    margin-top: 10px;
}

.opciones_edicion li i {
    font-size: 0.7em;
}

form p{
    margin-bottom: 0;
}

/*ESQUELA*/
.esquela{
    width: 80%;
    color: #000;
    margin: auto;
    position: relative;
    height: 70vh;
}

.esquela div{
    position: absolute;
    width: 80%;
    transform: translate(-50%,15%);
    left: 50%;
    top:5%;
}

.esquela img{
    width: 100%;
    position: absolute;
    border: 2px solid #2A2A2A;
    height: 100%;
}

.esquela small{
    font-family: 'EB Garamond', 'serif' !important;
}

.esquela h4{
    font-family: 'EB Garamond', 'serif' !important;
    z-index: 100;
    font-size: 3rem;
}

.esquela p{
    font-family: 'EB Garamond', 'serif' !important;
    font-size: 1.25em;
    line-height: 1.1em;
}

.esquela .dep{
    font-size: 1.75em;
    font-weight: 600;
}

/*Encabezados*/
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--header-font);
    line-height: 1.5;
    font-weight: 600;
}

/************/

.buscador {
    font-size: 1.25rem;
}

.centrado {
    margin-top: 10% !important;
}

.password {
    height: fit-content;
}

#posicion {
    overflow-y: auto;
}

option {
    overflow-y: scroll;
}

.epitafio {
    width: 40%;
}

#tablaFallecidos {
    vertical-align: middle;
}

.imagen {
    text-align: center;
    max-width: 100%;
    height: auto;
}

.right {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 10%;
    left: 90%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.quitarImagen:hover .imagen {
    opacity: 0.3;
}

.quitarImagen:hover .right {
    opacity: 1;
}

.sinImagen {
    background-color: grey;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 8px;
}

.sinImagen:focus {
    outline: none;
}

/*
*   FORMULARIOS
*/
.formulario{
    padding: 0.75em;
    box-shadow: 0px 0px 8px 1px #1838182d;
    margin: 1em auto;
}

.formulario::placeholder{
    color:  rgba(0, 0, 0, 0.329);
    font-size: 12px;
}

.formulario input[type='submit']{
    background-color: var(--header-color);
    color: var(--text-color);
    border: 2px solid var(--main-color);
    transition: color 0.5s, background-color 0.5s;
    width: fit-content;
    margin: auto;
    font-size: 16px;
    word-wrap: break-word;
    border-radius: 12px;
    cursor: pointer;
}

.formulario input[type='submit']:focus, .formulario input[type='submit']:hover{
    background-color: var(--text-color);
    color: var(--header-color);
    border: 2px solid var(--main-color);
}

.formulario label{
    color: rgba(0, 0, 0, 0.514);
}

.formulario .form-control:focus{
    border-color: transparent;
    box-shadow: none;
    background-color: #0200800f;
}

input:not(input[type='submit']), textarea, select{
    border: 0px !important;
    border-radius: 0px !important;
    border-bottom: solid 1px var(--header-color) !important;
}

/**MODAL**/
.modal-dialog {
    width: 500px !important;
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
  }
  .modal-dialog .modal-title {
    font-family: 'Montserrat';
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
  }

  .img-mapa{
    width: 70%;
    margin: auto;

  }

@media print {
    /**Esquela**/
    .esquela div{
        padding: 0;
        margin: 0;
    }

    .esquela p{
        font-size: 22px !important;
        margin: 1em;
    }

    .esquela h4, .dep{
        font-size: 40px !important;
    }

    /******/

    .table .thead{
        border: 1px solid black;
    }

    .table .tbody .row{
        border-bottom: 1px solid black;
    }

    .table .tbody{
        border-left: 1px solid black;
        border-right: 1px solid black;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }
}  

@media (max-width: 1200px) {
    iframe{
        width: 100% !important;
    }

    .centrado {
        margin-top: 20% !important;
    }

    .mapa {
        width: 100%;
        height: 400px;
    }

    #cambios {
        display: inline !important;
    }

    .table{
        font-size: 12px;
    }
    /***ESQUELA***/   
    .esquela{
        width: 100%;
    }

    .esquela h4{
        font-size: 4vw;
        font-weight: 600;
    }
    
    .esquela p{
        font-size: 15px;
    }
    
    .esquela .dep{
        font-size: 1.75vw;
    }
    
    .esquela div{
        top:10%;
    }

}

@media (max-width: 600px) {
    .datos{
        padding: 1rem;
    }

    .datos div{
        text-align: left;
        text-wrap: balance;
    }

    .main .container{
        padding: 2rem;
        border-radius: 0px;
    }

    footer .btn-circle.btn-xl {
        width: 60px;
        height: 60px;
        padding: 0px;
        font-size: 26px !important;
    }

    footer #cambios {
        top: -10px;
    }

    .col-3, .col-1{
        padding: 0 !important;
    }

    .searcher{
        width: 100% !important;    
    }

    iframe{
        width: 100% !important;
        height: auto;
    }

    .modal-dialog {
        width: 100% !important;
        margin: auto;
    }

    /*Encabezados y textos*/
    h2{
        font-size: 5.7vw;
    }
    h3{
        font-size: 4.7vw;
    }
    h4{
        font-size: 4.5vw;
    }
    a, .tabla .row, .table .row, button, input, ::placeholder, p{
        font-size: 14px !important;
    }

    .datos .d-flex{
       text-align: center;
    }

    /*Tablas*/
    .tabla, .no-table{
        display: block;
    }
    .fallecidos{
        display: none;
    }

    /********/

    .tbody{
        overflow-x: auto;
    }

    .mapa {
        width: 100%;
        height: 200px;
    }

    .ventanaMapa {
        width: 1400px !important;
        height: 3000px !important;
    }

    #tablaFallecidos {
        font-size: 8pt;
    }
    
    
    .row:has(.atras) {
        margin-top: 8px;
    }

    /***ESQUELA***/   
    .esquela{
        width: 90%;
        height: 50vh;
    }
    .esquela h4{
        margin: 0;
    }
    
    .esquela p.text-center{
        font-size: 12px !important;
    }
    .esquela div{
        top:5%;
    }

}

.form-control:focus{
    border-color: #49505726 !important;
    box-shadow: 0 0 0 0.2rem rgba(8, 2, 93, 0.25);
}

ul.ui-menu li .ui-menu-item-wrapper:focus, ul.ui-menu li .ui-menu-item-wrapper:hover, ul.ui-menu li .ui-menu-item-wrapper:active{
    border-color: #3d2f5e52 !important;
    background-color: #3d2f5e52 !important;
}

.ui-menu .ui-menu-divider{
    display: none;
}

.display-none{
    display: none;
}

.enlace{
    color: #bdace2 !important;
    text-decoration: underline !important;
}

.enlace:hover, .enlace:active{
    transition: color 0.5s;
    color: #a48fcf !important;
    text-decoration: underline !important;
}

#bienvenida{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-inicio{
    color: #000;
}

.btn-inicio:hover{
    color: #fff !important;
    text-decoration: none;
}

/*TABS*/
.tabs{
    margin-bottom: 5rem;
    color: var(--text-color);
}

.tabs .nav-link, .tabs .nav-link.active, .tabs .tab-content{
    background-color: var(--header-color);
    border-radius: 0.5rem;
}

.tabs .nav-tabs{
    border: 0px;
}

.tabs .imagen{
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

.tabs .nav-item .nav-link{
    color: var(--text-color) !important;
}

.tabs .tab-content{
    padding: 1rem;
}

.tabs .nav-item{
    margin-bottom: 1rem;
} 

.tabs .nav-link.active{
    border-left: 8px solid var(--main-color);
}

.datos button{
    border: 1px solid;
}

.tabs .tabs-boton{
    background-color: var(--main-color);
    color: var(--text-color);
    border: 1px solid var(--text-color);
}

.tabs .tabs-boton:hover{
    background-color: var(--text-color);
    color: var(--main-color);
    border: 1px solid var(--main-color);
    transition: color 0.5s, background-color 0.5s;
}

.tabs form input, .tabs form textarea, .tabs form select{
    background-color: transparent;
    border-bottom: 1px solid #b3a6d3 !important;
    color: var(--text-color) !important;
}

.tabs form select option{
    background-color: var(--header-color);
}

.tabs form input:focus, .tabs form textarea:focus {
    background-color: #b3a6d341 !important;
    border-bottom: 1px solid #b3a6d3 !important;
    box-shadow: 0 0 0 .2rem rgb(181 180 195 / 25%);
}

.tabs ::placeholder, .tabs form a[href=""]{
    color: #d0c9e0;
}

.tabs form.tab-content{
    max-height: 55vh;
    overflow-y: auto;
}

.tabs form.tab-content .tab-pane.active{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tabs form.tab-content .tab-pane.active > .row:nth-child(1){
    flex-grow: 1;
    flex-shrink: 1;
}

.tabs .datos .content{
    text-align: justify;
    margin-right: .5rem;
}