/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0px 0px 11px 0px white; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background-color:var(--hovercolor); 
  border-radius: 15px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--bgcolor); 
}

scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
.cuerpo{
	background-image: url("/img/fondo.jpg");
  
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fotoperfil {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    border: var(--bgcolor) solid 3px;
    position: absolute;
    top: 5%;
    left: 16%;
}
.fotoportada {
    height: 250px;
    width: 100%;
    object-fit: unset;
}


body {
    margin: 0px 0px 0px 0px;
    /*background-color:#ebebeb;*/
    padding-left: 240px;
}
.img-fluid, .card,img{filter:drop-shadow(2px 2px 10px black);}
canvas{filter: drop-shadow(0px 0px 3px gray);}
.body-expanded{
	margin-left: var(--width);
}
#sidemenu{
	background-color: var(--bgcolor);
	color:white;
	position:fixed;
	height: 100%;
	left:0;
	top: 0;
	z-index: 9999;
}
#sidemenu a{
	color:white;
	text-decoration: none;
	text-shadow: var(--textosombra);
}

#sidemenu #header{
	box-sizing: border-box;
	border-bottom: solid 1px var(--hovercolor);
	color:var(--colortexto);
}
#sidemenu #header #title{
	box-sizing: border-box;
	overflow:hidden;
	color:var(--colortexto);
	
}
#sidemenu #header #title, #sidemenu #header #menu-btn{
	vertical-align: middle;
}
#sidemenu #header #menu-btn{
	display:inline-block;
}
#sidemenu #header #menu-btn{
	cursor: pointer;
	padding:10px;
	width: var(--width-collapsed);
	box-sizing: border-box;
	color:var(--colortexto);
}
#sidemenu #header #menu-btn:hover{
	background-color: var(--hovercolor);
}
#sidemenu #header #menu-btn .btn-hamburger{
	background-color: white;
	width: 100%;
	height: 2px;
	margin: 5px 0;
	
}
#sidemenu #profile{
	border-bottom: solid 1px var(--hovercolor);
	padding: var(--padding) 0;
	text-align: center;
	color:var(--colortexto);
}
#sidemenu #profile #photo{
	box-sizing: border-box;
	padding: var(--padding);
	margin: 0 auto;
}
#sidemenu #profile #photo img{
	border-radius: 50%;
	width: 80%;
}
#sidemenu #profile #photo img:hover{
	border-radius: 50%;
	width: 80%;
	filter: opacity(0.5);
}
#sidemenu #profile #photo,#sidemenu #profile #name{
	font-size: 24px;
	padding: var(--padding) 0;
	overflow: hidden;
	color:var(--colortexto);
	text-shadow: var(--textosombra);
}
#sidemenu #menu-items{
	overflow: hidden;
}
#sidemenu #menu-items .item{
	width: var(--width);
	box-shadow: var(--imgsombra);
	height: 45px;
}
#sidemenu #menu-items .item .icon{
	display: inline-block;
}
#sidemenu #menu-items .item .icon,
#sidemenu #menu-items .item .title{
	font-size: 14px;
	vertical-align: middle;
	overflow: hidden;
	display: inline-block;
	color:var(--colortexto);
}
#sidemenu #menu-items .item a{
	display: block;
}
#sidemenu #menu-items .item a:hover{
	background-color:  var(--hovercolor);
	color:#edff8c;
}
#sidemenu #menu-items .item .icon{
	box-sizing: border-box;
	padding: var(--padding);
	width: var(--width-collapsed);
}
#sidemenu #menu-items .item .icon img{
	width: 80%;
	filter:var(--sombraiconos);
}
#sidemenu #menu-items .item .title{
	padding: var(--padding) 0;
	font-size: 10px;
}
#sidemenu #menu-items .item.separator{
	height: 1px;
	border-bottom: solid 1px var(--hovercolor);
	margin: 15px 0;
}


.menu-expanded{
	width: var(--width);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.menu-expanded #header #title{
	display:inline-block;
	width: calc(100%-50px);
	margin-right: -5px;
	padding: var(--padding);
}
.menu-expanded #header #title span{
	width: calc(var(--width)-var(--width-collapsed)-5px);
	overflow: hidden;
}
.menu-expanded #profile #photo{
	width: 200px;
}
.menu-expanded #profile #name{
	width: 100%;
}
.menu-collapsed{
	width: var(--width-collapsed);
}
.menu-collapsed #header #title{
	width: 0;
	height: 0;
	padding: 0;
	margin:0;
}
.menu-collapsed #profile #name{
	display:none;
}
.menu-collapsed .item{
	width: 100px;
}

.panta-4{
    width: 24%;
    flex: 0 0 auto;
}
.panta-2{
    width: 74%;
    flex: 0 0 auto;
}

.fondopanel{box-shadow: 0 0 5px 0px black; color: white; border-radius: 5%; background-color:var(--colorpan);font-weight: bolder;padding:.5rem .5rem;margin: auto;}
.fondopanelgrap{box-shadow: 0 0 5px 0px black;color: black;border-radius: 2%;background-color: var(--colorgraphpp);font-weight: bolder;padding:.5rem .5rem;margin: .5%;width: 32%;}



.navbar {
position: fixed;
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0px;
}

input#textn, input#textp {
  width: 90%;
  padding: 8px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #8f8f8f00;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 0 9px 2px black;
}


img#logoag{
    width: -webkit-fill-available;
    border-radius: 0 25%;
}
button#btnlog {
  background-color: #4574fd;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  border-radius: 20px;
}
img#megif{
height: 139px;
width:  215px;
}
button:hover {
  opacity: 0.8;
}
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}
.bolden{font-family:"Arial Black";}
.contra{
	color:black;
	-webkit-text-security: disc;
}
.contra:hover{
	font-family:"Arial Black";
	color:black;
	-webkit-text-security: none;
}
.collapsible {
  background-color: #eee;
  color: #01660d;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 13px;
}
.active, .collapsible:hover {
  background-color: #ccc;
}
.content {
  padding: 0px;
  display: none;
  overflow: auto;
  background-color: #f1f1f1;
margin: auto;
max-width: 250%;
   width: 200%;
    margin-left: -50%;
} 

div#login {
    font-family: sans-serif;
    font-size: 16px;
    margin: auto;
    /* background-color: rgb(46 33 33); */
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 3px solid #77be61;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 5px;
    padding-top: 0%;
    border-radius: 20px;
    width: max-content;
}




div#inicio{
    font-family: sans-serif;
    font-size: 16px;
    width: -webkit-fill-available;
    margin: 15px;
    background-color: rgb(255 255 255);
    color: black;
    top: 10%;
    z-index: 2;
    padding: 2%;
}


.bordeado{
	border-radius: 0 10px;
    margin: 0 10px;
    padding: 0 10px;
    width: -webkit-fill-available;
        box-shadow: 0 0 6px 0px black;
}

span.psw {
  float: right;
  padding-top: 16px;
  }

.nav-link {
display: block;
    padding: 7px 10px;
    color: rgba(23,23,23);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#otro{
	display:none;
}
.nav-link:hover {
    background-color: var(--hovercolor);
    background-clip: border-box;
    border: 1px solid white;
    border-radius: 0.8rem;
    box-shadow: 1px 1px 5px black;
}

div#busca{
	width: 12%;
}
	
.nav-item{	padding: 4px 5px;}
span.link {text-shadow: var(--textosombra);}

.iconosbar{width:35px;height:35px;}

.editandoempr{
	margin: auto;background: #f4ff52;padding: 7px;border-radius: 10% 25%;box-shadow: 0 0 5px 0 black;font-weight: bold;text-align: center;
}
.hechoempr{
	margin: auto;background-color: darkseagreen;padding: 7px;border-radius: 10% 25%;box-shadow: 0 0 5px 0 black;font-weight: bold;text-align: center;
}



/* Dropdown Button */
.dropbtn {
    border: none;
    cursor: pointer;
width:auto;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: grid;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 0px 0px 70px 20px;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 6px 12px;
    text-decoration: none;
    display: inline-flex;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--bgcolor);}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display:grid;
background-color: var(--hovercolor);

}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: var(--hovercolor);
}
.barranaval{
	overflow: inherit;
 	height:40px;
 	width:max-content;
}



@media screen and (max-width: 1024px) {
    
.panta-4{
    width: 48%;
    flex: 0 0 auto;
}

h4 {
     font-size: small;
}

.barranaval{
	overflow: inherit;
 	height:40px;
 	width:auto;
}

	span.link {
    display: none;
  }
  div.link {
    display: none;
  }
 td .btn{
    font-size: 12px;
    /*padding: 0px;*/
}
  .graficas, .col-6{
	    flex: 0 0 auto;
    width: 100%;
    height:50%;
    }
  img#logoag{
	height:45px;
	width:70px;
}
img#megif{
height: 82px;
width: 145px;
}
.barranaval{
	    overflow-x: scroll;
	    overflow-y: hidden;
	    height:50px;	    
}
.dropdown-content {
    display: contents;
    width:50px;
    
}
.dropdown:hover .dropdown-content {
    display:contents;
background-color: var(--hovercolor);

}
.dropdown {
    position: relative;
    display: flex;
}
.nav-item{	padding-left: 12px;}
.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: inherit;
}
div.barra {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: inherit;
}
body{
	padding-top:100px;
	font-size:10px;
}
span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
form#login {
    border: 3px solid #f1f1f1;
    font-size: 14px;
    padding: 0 5%;
	
	font-family: sans-serif;
    width: fit-content;
    margin:auto;
    
    background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding-top: 0%; 
  border-radius:20px; 
	
	
	
}
div#busca{
	width: auto;
}

}





@media screen and (max-width: 900px) {
    
.panta-4{
    width: 48%;
    flex: 0 0 auto;
}

h4 {
     font-size: small;
}

.barranaval{
	overflow: inherit;
 	height:40px;
 	width:auto;
}

	span.link {
    display: none;
  }
  div.link {
    display: none;
  }
 td .btn{
    font-size: 12px;
    padding: 0px;
}
  .graficas, .col-6{
	    flex: 0 0 auto;
    width: 100%;
    height:50%;
    }
  img#logoag{
	height:45px;
	width:70px;
}
img#megif{
height: 82px;
width: 145px;
}
.barranaval{
	    overflow-x: scroll;
	    overflow-y: hidden;
	    height:50px;	    
}
.dropdown-content {
    display: contents;
    width:50px;
    
}
.dropdown:hover .dropdown-content {
    display:contents;
background-color: var(--hovercolor);

}
.dropdown {
    position: relative;
    display: flex;
}
.nav-item{	padding-left: 12px;}
.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: inherit;
}
div.barra {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: inherit;
}
body{
	padding-top:100px;
	font-size:10px;
}
span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
form#login {
    border: 3px solid #f1f1f1;
    font-size: 14px;
    padding: 0 5%;
	
	font-family: sans-serif;
    width: fit-content;
    margin:auto;
    
    background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding-top: 0%; 
  border-radius:20px; 
	
	
	
}


div#login {
    font-family: sans-serif;
    font-size: 16px;
    margin: auto;
    /* background-color: rgb(46 33 33); */
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: 3px solid #77be61;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding: 5px;
    padding-top: 0%;
    border-radius: 20px;
    width: max-content;
}


div#busca{
	width: auto;
}

}






@media screen and (max-width: 414px) {
    
.panta-4{
    width: 98%;
    flex: 0 0 auto;
}

	.nav-item{	padding-left: 13px;}
	.graficas, .col-6{
	    flex: 0 0 auto;
    width: 100%;
    height:50%;
    }
	img#logoag{
	height:35px;
	width:35px;
}

.fotoperfil {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    border: var(--bgcolor) solid 3px;
    position: absolute;
    top: 3%;
    left: 35%;
}
.fotoportada{
    height: 125px;
    width: 100%;
    object-fit: unset;
}


span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
  body{
	padding-top:110px;
	font-size:12px;
}
form#login {
    border: 3px solid #f1f1f1;
    font-family: sans-serif;
    font-size: 12px;
    padding: 0 0%;
    box-shadow: 10px 5px 15px black;
}
footer{
	font-size:14px;
	
}
img#megif{
height: 71px;
width: 66px;
}
div#busca{
	width: auto;
}

}

/*ANIMACIONES*/
@keyframes notificacion {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}




.switch {
vertical-align: text-bottom;
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: rgb(0 183 98);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

.seguimi{
    background-color: mediumseagreen;
    color: white;
    text-shadow: 0 0 3px black;
    border-radius: 10px 15px 50px;
    box-shadow: 0 0 5px black;
    width: 60%;
}


.oculto {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    background-color: #f8f9fa;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.contenedor:hover .oculto {
    opacity: 1;
}
.reveal-text {
    filter: blur(5px);
    transition: filter 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

    .reveal-text:hover {
        filter: blur(0);
    }