/* 
==================
  C O L O R E S
==================
*/

.clr-blue{
    color: #0f445a;
}

.clr-orange{
    color: #e86710;  
    /* color:#fa9c5d */
}

.clr-orange-via{
    color: #F49521;
}

.clr-lightblue{
   color: lightblue;
}

.bg-lightblue{
    background-color: #f0fffe;
 }
.clr-bord-card{
    border-color: #bce8f1;
}

.clr-bord-gold{
    border-color: #ECB857;
}
.clr-bord-orange{
    border-color:#eb5f0a;
}
.clr-gold{
    color: #ECB857;
}

.clr-black_100{
    background-color:black;
}  

.clr-red{
    color: rgb(255,61,65);
}

.clr-grey{
    background-color: #AFA5D9;
}

.clr-grey2{
    background-color: #DEDEDE;
}
.clr-btn-eliminar {
    color: #fff;
    background-color:rgb(255,61,65);
    border-color:rgb(255,61,65); 
}
.clr-btn-eliminar:hover {
    color: #fff;
    background-color:rgb(200,0,4);
    border-color:rgb(200,0,4); 
}

.bg-lightblue{
    background-color:#bce8f1;
}

.bg-gold{
    background-color:#ECB857;
}

.bg-gold-rep{
    background-color:#f39315;
}

.clr-gold-rep{
    color:#f39315;
}

.bg-orange{
	background-color:#e86710;
}
.bg-orange:hover{
    background-color:#f37b2b;
}
.bg-lgblue1{
    background-color: #dceafc;
}

.bg-lightblue-rep{
    background-color:#009EE3;
}

.clr-lightblue-rep{
    color:#009EE3;
}
.clr-btn-lightblue-rep {
    color: #fff;
    background-color:#009EE3;
    border-color:#009EE3; 
}

.clr-btn-lightblue-rep:hover {
    color: #fff;
    background-color:#0183bb;
    border-color:#0183bb; 
}

.btn-gold-rep {
    color: #fff;
    background-color:#f39315;
    border-color:#f39315; 
}

.btn-gold-rep:hover {
    color: #fff;
    background-color:#fa8704;
    border-color:#fa8704; 
}

.btn-orange-hover:hover{
    background-color:#e86710!important;
    border-color:#e86710!important; 
}

.btn-orange-hover-grilla:hover{
    background-color:#e86710!important;
    border-color:#e86710!important; 
    color: white;
}

.btn-black-hover:hover{
    background-color:black!important;
    border-color:black!important;
}

/*
============================
 T A M A Ñ O S  F U E N T E
============================
*/
.fw-750{
    font-weight: 750 ; 
}
.fw-600{
    font-weight: 600;
}

/*
=============================
 T A M A Ñ O  D E  L E T R A
=============================
*/
.fz-14{
    font-size: 14px;
}
.fz-13{
    font-size: 13px;
}
.fz-12{
    font-size: 12px;
}

/*
============================================
 L I N K   W I T H O U T  U N D E R L I N E
============================================
*/
.lnk-wou{
    color:#5b80b2;  
    text-decoration: none;
}

.lnk-wou:hover{
    color: #447e9b;        
}

.lnk-wou-2{
    color:#878e91;  
    text-decoration: none;
}

.lnk-wou-2:hover{
    color: #447e9b;        
}

.lnk-wou-orange{
    color:#f37b2b;  
    text-decoration: none;
}


/*
============================================
 U L   W I T H O U T   D O T
============================================
*/
.ul-wod{
    list-style-type:none;
}

/*
==========================
  M E N U / S U B M E N U
==========================
*/

/* Color de texto y fondo al hacer hoover en opción de submenu */
 .hoverNav .dropdown-item:hover{        
    color: #000!important;	 	
    background:lightblue;	       
}

/*==================
    T A B L A S
  ==================
*/

/* Tamaño de fuente en tablas */
 table td,table th{   
    font-size: 12px;
}
/* Cambio de tipo de cursar al hacer hoover en fila*/
.table tr {
    cursor: pointer;
    
}
/* Clase creada para el toggle de una fila*/
.hiddenRow {
    padding: 0 4px !important;    
    font-size: 12px;
}

table.table>tbody>tr:hover th {
    background-color: #ff4444 !important;
  }

/* Hover de la tabla */
/* .custom_hover tr:hover {
    background-color: #e86710 !important;
} */

/*
=====================
  D A T A T A B L E S
=====================
*/ 

:root {
    /* hover color en todas las datatables*/
    --dt-row-stripe: 232, 103, 16;
    --dt-row-hover: 232, 103, 16;
    /* select row color en todas las datatables*/
    --dt-row-selected: 232, 103, 16;
}

/* Permite aplicar los backgrund colors de bootstrap 5 a las
datatables */
table.table.dataTable > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
}


/*Clase para aplicar una tipografía más pequeña en eñ menu */
.nav-item,.dropdown-item,.text-footer {
    font-size: 14px;    
}

/*Clase creada para que el color del texto de los menus sea negro al hacer hoover*/
.hoverNav .dropdown-item:hover{        
    /* color: #000!important;	 	
    background:lightblue;	 */    
    color: white!important;	 	
    background:#e86710;	
}


/* Clases afectadas a la ordenación de las columnas 
   CSS_ORDENACION  */
 
table tr th {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
 } 
 .asc:after {
    content: ' ↑';
 }
 .desc:after {
    content: " ↓";
}
/* Background color columna votación*/
.bg-grey-custom{
    background-color: #F2F2F2 !important;
    /* background-color: #fa9c5d !important; */
}

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



/*==================
    B K 
  ==================
*/
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
#background-home {
	background-image: url('/static/img/bkg-home-nuevo.jpg');
	background-size:cover;
	background-position:center;
	min-height: 560px;	
}

#background-home img{
	width:auto;
	min-height: 100%;
	margin-left:-50px;
}

#background-home h1{
	font-weight:700;
	margin-top:150px;
}
#background-home h2{
	font-size:27px;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.btn-outline-secondary:hover {
    background-color: rgba(108, 117, 125, 0.1); /* gris muy suave */
    color: #6c757d; /* el mismo color que el texto original */
    border-color: #6c757d;
}

.clr-z21-blue{
    color: #004AAD;
}

.clr-asamblea-green{
    color:#1B532F;
}

.clr-asamblea-red{
    color: #FE4C20;
}

.img-avatar {
    width: 200px;
    height: 200px;
    object-fit: cover;   /* Recorta la imagen en lugar de estirarla */
}
.verde-azul {
    color: #0092a0;
}
.rojo{
    color: #ff6f60;
}
.text-justify {
    text-align: justify;
}

#quienes{
	background-color: #f39521;
    text-align: center;
}
  
.bkg-quienes{
    background-image: url('/static/img/bkg-quienes.jpg');
    width: auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bkg-quienes-2{
    background-image: url('/static/img/bkg-quienes2.jpg');
    width: auto;
    background-position: center;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.bkg-compromiso{
    background-image: url('/static/img/bkg-compromiso.png');
    width: auto;
    height: 100%;
    background-position:right;
    background-repeat: no-repeat;
    background-size: cover;
}
.list-group-item {
    border: none;
    background-color: none; 
}
.list-group-item{
    background-color: transparent !important;
}

#productos {
    background-color: #0092a0;
    text-align: center;
}

#servicios{
    background-color: #ff6f60;
     text-align: center;
}
.bkg-servicios{
    background-image: url('/static/img/bkg-servicios.png');
    width: auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bkg-servicios-2{
    background-image: url('/static/img/bkg-servicios2.png');
    width: auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#z21{
    background-color: #004AAD;
    text-align: center;
}
.bkg-z21{
    background-image: url('/static/img/bkg-z21.jpg');
    width: auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#z21-call-center{
    background-color: #e86710;
    text-align: center;
}
.bkg-z21-call-center{
    background-image: url('/static/img/bkg-callcenter.jpg');
    width: auto;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.violeta{
    color:#923283;
}
#asamblea{
    background-color: #1B532F;
    text-align: center;
}
.bkg-asamblea{
    background-image: url('/static/img/bkg-asamblea.jpg');
    width: auto;
    height: 100%;
    background-position:left;
    background-repeat: no-repeat;
    background-size: cover;
    
}
/***********************************************/
/*****  PARALLAX ******************************/
/************************************************/
#intro{
    width: 100%;
}
#intro{
    background:url('/static/img/pulgares-bkg-big.jpg') 50% 0 no-repeat fixed;
    /*color: white;*/
    background-size: cover;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}


.padding-50{
    padding: 50px;
}
.margin-top-50{
    margin-top: 50px;
}
.margin-top-30{
    margin-top: 30px;
}
.margin-top-43{
    margin-top: 43px;
}
.margin-bottom-50{
    margin-bottom: 50px;
}
.margin-bottom-15{
    margin-bottom: 15px;
}
.margin-top-15{
    margin-top: 15px;
}
.margin-bottom-30{
    margin-bottom: 30px;
}
.margin-xy-30{
    margin:30px;
}

h4 {
    font-weight: 300;
    line-height: 1.2;
}
h2 {
    font-weight: 300;
}
h3 {
    font-weight: 300;
    line-height: 1.5;
}
.bkg-gris{
    background-color: #f9f8f8;
}   

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{
    background-color: transparent !important;    
    border-bottom: solid #00909f;
	
}
.navbar{
	border-radius:0;}
.navbar-nav > li > a:hover{
    border-bottom: solid #f39420;   
}
#contacto{
    background-color: #0092a0;
     text-align: center;
}
/*
.bg-home{
    
    background-image: url(../img/SIVI.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%; /*en el centro     
}
/*
.bg-logAdm{
    background-image: url('../img/login_ADM.png');
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%; /*en el centro*/
   /* background-size:contain;   
}

.bg-logProp{
    background-image: url('../img/login_PRO.png');
    background-repeat:no-repeat;
    background-size: cover;
    background-position:50% 50%; /*en el centro*/
   /* background-size:contain;    
}*/

/*=========================
    DROP-DOWN MENU/SUBMENU
  =========================
*/
 /*
 .dropdown-submenu {
    position: relative;
 }

 .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
 }

 .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
 }	
  
*/

.dropdown-menu li {
    position: relative;
} 

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
} 
   
.dropdown-menu>li:hover>.dropdown-submenu {
    display: block;
} 

 /*=========================
    AGENDA INDEX
  =========================
*/
.hiddenRow {
    padding: 0 !important;
}

/*=================
    S I D E B A R
  =================
*/
/*
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

:root {
    --header-height: 2.5rem;
    --nav-width: 68px;
    --first-color: black;
    --first-color-light: #F7F6FB;
    --clr-gold : #ECB857;
    --white-color: #F7F6FB;
    --orange-color: #e86710; 
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    --z-fixed: 100;
}

*,
::before,
::after {
    box-sizing: border-box
}

body {
    position: relative;
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s
}

a {
    text-decoration: none
}

.header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--white-color);
    z-index: var(--z-fixed);
    transition: .5s
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden    
}

.header_img img {
    width: 35px;
    object-fit: cover;
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: var(--z-fixed)
}

.nav{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 .5rem 1.5rem
}

.nav_logo {
    margin-bottom: 2rem
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {    
    font-weight: 1000
}

.nav_link {
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 1.5rem;
    transition: .3s
}

.nav_link:hover {
    color: var(--orange-color)
}

.nav_icon {
    font-size: 1.25rem
}

.show1 {
    left: 0
}

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem)
}

.active_sb {
    color: var(--orange-color)
}

.active_sb::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--orange-color)
}

.height-100 {
    height: 100vh
}

.dropdown-toggle::after {
    margin-left: 0
}
@media screen and (min-width: 768px) {
    body {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }

    .header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }

    .header_img {
        width: 40px;
        height: 40px
    }

    .header_img img {
        width: 45px
    }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }

    .show1 {
        width: calc(var(--nav-width) + 156px)
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px)
    }
}
*/
/*===================
    C K  E D I T O R
  ===================
*/
.django-ckeditor-widget {
    display: block !important;
}

/*======================
    IMG CIRCLE-ROUNDED
  ======================
*/
/* You can adjust the image size by increasing/decreasing the width, height */
.custom-circle-image {
    width: 4vw; /* note i used vw not px for better responsive */
    height: 4vw;
}
  
.custom-circle-image img {
    object-fit: cover;
}

.custom-circle-thub-image {
    width: 3vw; /* note i used vw not px for better responsive */
    height: 3vw;
}
  
.custom-circle-thub-image img {
    object-fit: cover;
}

/*======================
    DISPLAY-NONE
  ======================
*/

.dis-none{
    display: none;    
}

/*======================
    C A R O U S E L
  ======================
*/
#carouselHero .carousel-item img {  
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    height:80vh;
  }
  
#carouselHero .carousel-item:before {
    content: "";
    background-image:
      linear-gradient(
        to bottom,
        transparent, rgba(0,0,0,0.5)
      );
    display: block;
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
  }

/*======================
    SCROLL DESCRIPTION
  ======================
*/
#descrip_box{  
    /* width: 100vw;
    height: 31.3vh; */
	border: 1px solid #ddd;
	background: #f1f1f1;
	overflow-y: scroll;
    padding:4px;
}


/* .h-custom {
height: calc(100% - 73px);
}
@media (max-width: 450px) {
.h-custom {
height: 100%;
}
} */


.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}


/*======================
    CUSTOM SCROLL-BAR
  ======================
*/
.custom-scrollbar-js,
.custom-scrollbar-css {
    height: 480px;
}

/* Custom Scrollbar using CSS */
.custom-scrollbar-css {
    overflow-y: scroll;
}

/* scrollbar width */
.custom-scrollbar-css::-webkit-scrollbar {
    width: 5px;
}

/* scrollbar track */
.custom-scrollbar-css::-webkit-scrollbar-track {
    background: #6c757d;
}

/* scrollbar handle */
.custom-scrollbar-css::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    /* background-color: #17a2b8;      */
    background-color: #e86710;
    /* background-image: linear-gradient(to top, #3a7bd5 0%, #17a2b8 100%);  */
}

/* pagination buttons*/
.pagination > li > a{
    background-color:#343A40;
    color:white;        
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;       
    vertical-align: baseline;
}

.pagination > li > a:hover{
    color: #fff;
    background-color:#3E4448;         
}

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

/*
==============================
 B O T O N   C I R C U L A R
==============================
*/

.btn-circle.btn-sm { 
    width: 22px; 
    height: 22px; 
    padding: 3px 0px; 
    border-radius: 15px; 
    font-size: 10px; 
    text-align: center; 
} 
.btn-circle.btn-md { 
    width: 50px; 
    height: 50px; 
    padding: 7px 10px; 
    border-radius: 25px; 
    font-size: 10px; 
    text-align: center; 
} 
.btn-circle.btn-xl { 
    width: 200px; 
    height: 200px; 
    padding: 10px 10px; 
    border-radius: 50px;     
    text-align: center; 
} 

/* 
.calculator__output {

    background: hsl(207, 19%, 61%);
    font-size: 4.2rem;
    padding-block-start: 3rem;
    padding-block-end: 0.5rem;
    padding-inline-start: 1.25rem;
    text-align: start;
} 
*/