/*INICIO MENU NUEVO 2023*/
*{
  margin:0px;
  padding:0px;
}
header {
/*  background: #fff;*/
  background: transparent;
  padding: 10px 20px;
/*  box-shadow: 0px -8px 25px #6d6d6d;       */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;    
  z-index: 991;
}
.menu{
  display:inline-block;
  cursor: pointer;
    height: 100%;
}
.main_nav {
  position: relative;
/*  top: 50px;*/
  top: 0px;
  padding-top: 20px;
}
aside {
  width: 60px;
  background: #216093;
  padding: 0px 0px 10px 0px;
  position: absolute;
  left: 0;
  top: 0px;
  height: 100%;
  box-shadow: 0px 3px 5px #6d6d6d;
  overflow: hidden;
  overflow-y: scroll;
  z-index: 99;
}
aside ul {
  list-style: none;
  width: 100%;
}
aside ul li {
  cursor: pointer;
/*  border-bottom: 1px solid #ccc;*/
  padding: 10px 20px;
  position: relative;
}
aside ul li a {
  text-decoration: none !important;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
/*  text-transform:uppercase;   */
  white-space: nowrap;
  display: inline-block;
}
aside ul li a span {
  text-decoration: none !important;
  display: inline-block;
  vertical-align: middle;
  color: #fafafa;
  width: 38px;
}
article {
  width: 97.5vw;
  height: 100vh;
  overflow-y: scroll;
  margin-left: 50px;
/*
  border-radius: 5px;
  box-shadow: 0px 2px 7px #6d6d6d;
*/
}
article.margin {
    margin-left: 190px !important;
}
aside ul li:hover {
  background: #216093;
  box-shadow: inset 0px 0px 4px #fafafa;
}
aside ul li a:hover {
  color: #fff !important;
}
aside ul li a span.notif {
  position: absolute;
  top: 8px;
  text-align: center;
  width: 30px;
  height: 30px;
  right: 10px;
  line-height: 31px;
  border-radius: 100%;
  color: #fff;
}
.blue {
  background: #007bff !important;         
  box-shadow: 0px 0px 10px #007bff;
}
.gray {
  background: #6c757d !important;         
  box-shadow: 0px 0px 10px #6c757d;
}
.green {
  background: #28a745 !important;
  box-shadow: 0px 0px 10px #28a745;
}
.red {
  background: #dc3545 !important;
  box-shadow: 0px 0px 10px #dc3545;
}
.yellow {
  background: #ffc107 !important;
  box-shadow: 0px 0px 10px #ffc107;
}
.skyblue {
  background: #17a2b8 !important;
  box-shadow: 0px 0px 10px #17a2b8;
}
.purple {
  background: #6f42c1 !important;
  box-shadow: 0px 0px 10px #6f42c1;
}
.black {
  background: #343a40 !important;
  box-shadow: 0px 0px 10px #343a40;
}
.orange {
  background: #e35205 !important;
  box-shadow: 0px 0px 10px #e35205;
}
aside ul li a span.notif.blue {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;    
    transition: all 0.2s ease;
}
aside ul li a span.notif.gray  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.green  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.red  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.yellow  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.skyblue  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.purple  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.black  {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;
    transition: all 0.2s ease;
}
aside ul li a span.notif.orange {
    width: 10px;
    height: 10px;
    color: transparent;
    right: 5px;    
    transition: all 0.2s ease;
}
aside ul li:hover a span.notif.blue {
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #007bff;
    top: 10px;
}
aside ul li:hover a span.notif.gray{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #6c757d;
    top: 10px;
}
aside ul li:hover a span.notif.green{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #28a745;
    top: 10px;
}
aside ul li:hover a span.notif.red{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #dc3545;
    top: 10px;
}
aside ul li:hover a span.notif.yellow{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #ffc107;
    top: 10px;
}
aside ul li:hover a span.notif.skyblue{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #17a2b8;
    top: 10px;
}
aside ul li:hover a span.notif.purple{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #6f42c1;
    top: 10px;
}
aside ul li:hover a span.notif.black{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #343a40;
    top: 10px;
}
aside ul li:hover a span.notif.orange{
    width: 30px;
    height: 30px;
    right: 15px;
    color: #fff;
    box-shadow: 0px 0px 60px #e35205;
    top: 10px;
}
aside.keep.width {
    width: 200px;
}
aside.keep.width ul li a span.notif {
    width: 30px;
    height: 30px;
    right: 10px;
    color: #fff;
    box-shadow: 0px 0px 10px transparent;
    top: 8px;
}
/*  */
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
.blink{
  text-decoration: blink;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-direction: alternate;
}
p.blink.mah {
  text-align: center;
  line-height: 25;
  position:relative;
}
p.blink.mah span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 102, 153, 0);
  top: 248px;
  left: 360px;
}
/*FIN ESTILO MENU NUEVO 2023*/


/*PANELES INDIVIDUALES DE MENU*/
    .panel-menu{
        position: relative;
        cursor: pointer !important;
        max-height: 200px; 
        border-radius: 8px !important; 
        border: solid 2px rgba(33, 33, 33, 0.35);
    }
    .panel-menu:hover{
        border: solid 2px #005B8D;
        background: #f0f0f0;
    }
    .icon-panel-menu{
        font-size: 1.25em; 
        color: #e35205; 
    }

/*PANELES ESPECIALES DE MENU*/
    .panel-menu-especial{
        position: relative;
        cursor: pointer !important;
        max-height: 200px; 
        border-radius: 8px !important; 
        background: #cc484f !important;
    }
    .panel-menu-especial:hover{
        background: #212121 !important; 
        color: #fff !important;
        box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.35);
    }
    .icon-panel-menu-especial{
        font-size: 2em; 
        color: #fff; 
        text-shadow: 2px 2px #4a4a4a;
    }
    .icon-info{
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background: #bfbfbf;
        color: #fff;
        border-radius: 100%; 
        border: solid 2px #bfbfbf;
        cursor: pointer;
        margin: 0 auto;
        padding: 0;
        display: table-cell;
        vertical-align: middle;
    }
    .icon-info:hover{
        background: #216093;
        color: #fff;
        border: solid 2px #216093 !important;
    }
/*BOTON FLOTANTE RETORNO*/
    .float-back-btn{
        position:fixed !important;
        width:60px !important;
        height:60px !important;
        bottom:40px !important;
        right:40px !important;
        background-color:#cc484f !important;
        color:#fff !important;
        border-radius:50px !important;
        text-align:center !important;
        font-size:30px !important;
        z-index:100 !important;
    }

    .float-icon{
        margin-top:16px !important;
    }

    .float-back-btn:hover{
        background: #fff !important;
        color: #cc484f !important;
    }
/*BOTON DE CERRADO DE MENUS*/
.closenav{
    display: none;
}

    hr{
        height: 0px;
        background-color: #cc484f !important;
        border: none;
    }

.td_header_blue{
    background: #005B8D !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.td_header_red{
    background: #cc484f !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.mui-btn--raised-red{
    background: #cc484f !important;
    color: #fff;
}
.mui-btn--raised-red:hover{
    background: #9b3237 !important;
    color: #fff;
}
.mui-btn--raised-red:active{
    color: #fff;
}
.mui-btn--raised-blue{
    background: #005B8D !important;
    color: #fff;
}
.mui-btn--raised-blue:hover{
    background: #094e74 !important;
    color: #fff;
}
.mui-btn--raised-blue:active{
    color: #fff;
}

input[type="file"] {
    display: none;
}

/*TABLE EDITS*/
td{
    font-size: 14px !important;
}
th{
    font-size: 14px !important;
    font-weight: 700;
}

/*SELECT STYLE*/
:root {
  --gray: #005b8d;
  --darkgray: #005b8d;
}
select {
  /* Reset Select */
  appearance: none;
  outline: 0;
  border: 0;
  box-shadow: none;
  /* Personalize */
  flex: 1;
  padding: 0 1em;
  color: #fff;
  background-color: var(--darkgray);
  background-image: none;
  cursor: pointer;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  height: 3em;
  overflow: hidden;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
    color: #fff;
  background-color: #005b8d;
  transition: .25s all ease;
  pointer-events: none;
}
/* Transition */
.select:hover::after {
  color: #cc484f;
}

/*INCIO BARRA DE BUSQUEDA DEL TABLERO PRINCIPAL*/
.search {
	width: 60px;
	height: 60px;
	transform: 0.5s;
	background: #fff;
	overflow: hidden;
	position: relative;
	border-radius: 60px;
	box-shadow: 0 0 0 0 5px #2573ef;
}

.search.active {
	width: 360px;
}

.search .icon {
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	display: flex;
	z-index: 1000;
	cursor: pointer;
	position: absolute;
	background: #fff;
	border-radius: 60px;
	align-items: center;
	justify-content: center;
}

.search .icon:before {
	content: "";
	width: 15px;
	height: 15px;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #287dfc;
	transform: translate(-4px, -4px);
}

.search .icon:after {
	content: "";
	width: 3px;
	height: 12px;
	position: absolute;
	background: #287dfc;
	transform: translate(6px, 6px) rotate(315deg);
}

.search .input {
	left: 60px;
	width: 300px;
	height: 60px;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
}

.search .input input {
	top: 0;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	font-size: 18px;
	padding: 10px 0;
	position: absolute;
}

.clear {
	top: 50%;
	right: 15px;
	width: 15px;
	height: 15px;
	display: flex;
	cursor: pointer;
	background: #ff0;
	position: relative;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
}

.clear:before {
	width: 1px;
	height: 15px;
	content: "";
	position: absolute;
	background: #999;
	transform: rotate(45deg);
}

.clear:after {
	width: 1px;
	height: 15px;
	content: "";
	position: absolute;
	background: #999;
	transform: rotate(315deg);
}
/*FIN BARRA DE BUSQUEDA DEL TABLERO PRINCIPAL*/

/*INICIO SCROLL STYLE*/
::-webkit-scrollbar {
  -webkit-appearance: none !important;
  width: 0px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 0px !important;
  background-color: #f0f0f0 !important;
}
/*FIN SCROLL STYLE*/

/*MATERIAL ICONS RULES*/
.red500 { color: #f44336; }
/*MATERIAL ICONS RULES*/

/*BORDER CARD RULES*/
.bordercard-vlue{
    border-left: 6px solid #216093 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-blue{
    border-left: 6px solid #007bff !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-gray{
    border-left: 6px solid #6c757d !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-green{
    border-left: 6px solid #28a745 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-red{
    border-left: 6px solid #dc3545 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-yellow{
    border-left: 6px solid #ffc107 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-skyblue{
    border-left: 6px solid #17a2b8 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-purple{
    border-left: 6px solid #6f42c1 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-black{
    border-left: 6px solid #343a40 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}
.bordercard-orange{
    border-left: 6px solid #e35205 !important;
    border-radius: 7px !important;
    border: solid 2px rgba(33, 33, 33, 0.35);
}

/*INICIO BOTON STICKY SHOW RIGHT PANEL CONTACTS*/
.sticky-container {
    background-color: #343a40;
    padding: 5px;
	position: fixed;
	top: 5%;
	right: -55px;
	width: 80px;
	height: 40px;
    border-radius: 40px 0px 0px 40px;
	z-index: 101;
	margin-top: -24px;
	text-align: center;
}
  
.sticky-container:hover {
    right: -30px;
    background-color: #216093;
}
  
.sticky-container a {
    display: block;
    text-align: left;
    height: 32px;
    width: 32px;
    color: #fff;
    margin-left: -5px;
    text-decoration: none;
    cursor: pointer;
}  
/*FIN BOTON STICKY RIGHT PANEL CONTACTS*/


/*INICIO HIDE RIGHT PANEL CONTACTS*/
.hiderightpanel {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10100;
  top: 0;
  right: 0;
  background-color: #343a40;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 60px;
}

.hiderightpanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  color: #818181;
  display: block;
}

.hiderightpanel a:hover {
  color: #f1f1f1;
}

.hiderightpanel .closebtn {
  position: absolute;
  top: 0;
  left: -10px;
  cursor: pointer;
}

@media screen and (max-height: 450px) {
  .hiderightpanel {padding-top: 15px;}
}
/*FIN HIDE RIGHT PANEL CONTACTS*/

/*INICIO CONTACT CARDS*/
.contact-card{
    background: linear-gradient(90deg, rgba(52,58,64,1) 10%, rgba(33,96,147,1) 80%, rgba(33,96,147,1) 100%);
    border: solid 2px #343a40;
}
.contact-img{
    width: 100%; 
    height: 100%; 
    border-radius: 100%; 
    margin-top: 8px; 
    outline: solid 10px #343a40;
}
.showHideContent{
  text-transform: uppercase;
  cursor: pointer;
}
.Hidecontent{
  margin-top: 5px;
}
/*FIN CONTACT CARDS*/

/*POST LOADER ANIMATION*/
.bar {
      float: left;
      width: 15px;
      height: 6px;
      border-radius: 2px;
      background-color: #4b9cdb;
    }

    .load-10 .bar {
      animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
    }

    @keyframes loadingJ {
      0%,
      100% {
        transform: translate(0, 0);
      }

      50% {
        transform: translate(80px, 0);
        background-color: #f5634a;
        width: 25px;
      }
    }
/*POST LOADER ANIMATION*/


/*INICIO BOTONES ANIMADOS CON BORDE*/    
    .animate-border-btn {
        color:#216093;
        background:transparent;
        border-width:2px;
        border-style: solid;
        border-color: #216093;
        position:relative;
        margin:1em;
        display:inline-block;
        padding:0.5em 1em;
        transition:all 0.3s ease-in-out;
        text-align:center;
    }

    .animate-border-btn:before, .animate-border-btn:after{
        content:'';
        display:block;
        position:absolute;
        border-color:#216093;
        box-sizing:border-box;
        border-style:solid;
        width:1em;
        height:1em;
        transition:all 0.3s ease-in-out;
    }

    .animate-border-btn:before {
        top:-6px;
        left:-6px;
        border-width:2px 0 0 2px;
        z-index:1;
    }

    .animate-border-btn:after {
        bottom:-6px;
        right:-6px;
        border-width:0 2px 2px 0;
    }

    .animate-border-btn:hover:before, .animate-border-btn:hover:after {
        width:calc(100% + 12px);
        height:calc(100% + 12px);
        border-color:#e35205;
        color: #fff;
    }

    .animate-border-btn:hover {
        color:#fff;
        background-color:#e35205;
        border-color:#e35205;
    }

    .panel {
        max-width:96vw;
        text-align:left;
        position:relative;
        margin:auto;
    }

    .bw .animate-border-btn {
        color:#e35205;
        border-color:#e35205;
        text-shadow:0 1px 1px rgba(0,0,0,0.1);
        box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1) inset;
    }
    
    .bw .animate-border-btn:before, .bw .animate-border-btn:after {
        border-color:#e35205;
    }
    
    .bw .animate-border-btn:hover:before, .bw .animate-border-btn:hover:after {
        width:calc(100% + 12px);
        height:calc(100% + 12px);
        border-color:#fff;
    }
    
    .bw .animate-border-btn:hover {
        color:#e35205;
        background-color:#fff;
        border-color:#fff;
    }
/*FIN BOTONES ANIMADOS CON BORDE*/