/*
0 AD3DD
7 864EB
4 F93CE
*/

/*texto vertical en tabla*/
.vT {
border-style:solid; 
background-color: #F0F3F5;
border-color:  #7864EB;
}
/*fin texto vertical en tabla*/

/*BOLETAS*/
.tg-cv16{
  font-weight:bold;
  font-size:12px;
  background-color:#dae8fc;
  border: 1px solid #B8B8B8; 
  text-align:center;
  vertical-align:middle;
}

.tg-promg{
  font-weight:bold;
  font-size:16px;
  background-color:#dae8fc;
  border: 1px solid #B8B8B8; 
  text-align:center;
  vertical-align:middle;
}

.tg-1kos{
  background-color:#E0E0E0;
  text-align:left;
  border: 1px solid #B8B8B8;
  font-size:12px;
}

.tg-promM{
  background-color:#E0E0E0;
  text-align: center;
  border: 1px solid #B8B8B8;
  font-size:12px;
  font-weight: bold;
}

.tg-reg5{
  background-color:#FFF;
  text-align:center;
  border: 1px solid #B8B8B8;
  font-size:12px;
}

.tg-tut{
  background-color:#FFF;
  text-align:left;
  border: 1px solid #B8B8B8;
  font-size:12px;
}

.tg-reg7{
  background-color:#FFF;
  text-align:center;
  border: 1px solid #B8B8B8;
  font-size:14px;
  font-weight: bold;
}

/*TABLA FICHA SPAN*/
.tablaficha span {
color: #4F93CE;
}

/*AVISOS Index*/
.callout {
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin-left: 20px;
  max-width: 400px;
  z-index: 1000;
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.5);
}

.callout-header {
  padding: 10px 30px;
  background: #8080ff;
  font-size: 22px;
  color: white;
}

.callout-container {
  padding: 15px 15px 15px 60px;
  background-color: #fff;
  color: black
}

.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
}

/*Other*/
.container4 {
  position: relative;
  width: 80%;
}

.image {
  opacity: 1;
  display: block;
  width: 100px;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  border-color: grey; 
  object-fit: contain;
}

.imageqr {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  border-color: grey; 
  object-fit: contain;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container4:hover .image {
  opacity: 0.4;
}

.container4:hover .middle {
  opacity: 1;
}

.text {
  background-color: #7864EB;
  color: white;
  font-size: 12px;
  padding: 12px 20px;
  cursor: pointer;
}

.ignore-css{all:unset;}

/* [SLIDER] */
#slider,  #slider .slide{
  width: 800px;
  height: auto;
}
#slider {
  overflow: hidden;
  margin: 0 auto;
  font-size: 1.2em;
  margin-top: -100px;
}
#slider .container3 {
  position: relative;
  width: 9000px; /* Assign an insanely large width */
  top: 0;
  right: 0;
  animation: slide-animation 20s infinite; 
  font-family: 'Roboto', sans-serif; 
  font-size: 14px; 
  font-weight: normal; 
  color: #727272; 
  font-style: normal;
}
#slider .slide {
  position: relative;
  float: left;
  box-sizing: border-box;
  padding: 10px 20px;
}

/* [ANIMATION] */
@keyframes slide-animation {
  /*
  0% { 
    opacity: 0;
    right: 0;
  }
  2% {
    opacity: 1;
    right: 0; 
  }
  11% {right: 0;}
  12% { right: 100%; }
  33% { right: 100%; }
  34% { right: 200%; }
  55% { right: 200%; }
  56% { right: 300%; }
  77% { right: 300%; }
  78% {right: 400%;}
  98% {
    opacity: 1;
    right: 400%;
  }
  100% {
    opacity: 0;
    right: 400%;
  }
  */
  0% { 
    opacity: 0;
    right: 0;
  }
  2% {
    opacity: 1;
    right: 0; 
  }
  55% {right: 0;}
  57% { right: 100%; }
  98% {
    opacity: 1;
    right: 100%;
  }
  100% {
    opacity: 0;
    right: 100%;
  }
}



/*SWITCH MATERIALS*/
.switch-input {
  display: none;
}
.switch-label {
  position: relative;
  display: inline-block;
  min-width: 50px;
  cursor: pointer;
  font-weight: 500;
  text-align: left;
  margin: 5px;
  padding: 0px 0px 0px 44px;
}
.switch-label:before, .switch-label:after {
  content: "";
  position: absolute;
  margin: 0;
  outline: 0;
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.switch-label:before {
  left: 1px;
  width: 34px;
  height: 14px;
  background-color: #9E9E9E;
  border-radius: 8px;
}
.switch-label:after {
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}
.switch-label .toggle--on {
  display: none;
}
.switch-label .toggle--off {
  display: inline-block;
  color: #9E9E9E;
}
.switch-input:checked + .switch-label:before {
  background-color: #B4DBFD;
}
.switch-input:checked + .switch-label:after {
  background-color: #4F93CE;
  -ms-transform: translate(80%, -50%);
  -webkit-transform: translate(80%, -50%);
  transform: translate(80%, -50%);
}
.switch-input:checked + .switch-label .toggle--on {
  display: inline-block;
  color: #4F93CE;
}
.switch-input:checked + .switch-label .toggle--off {
  display: none;
}

/*red switch*/
.switch-input2 {
  display: none;
}
.switch-input2:checked + .switch-label:before {
  background-color: #F5A9A9;
}
.switch-input2:checked + .switch-label:after {
  background-color: #C83030;
  -ms-transform: translate(80%, -50%);
  -webkit-transform: translate(80%, -50%);
  transform: translate(80%, -50%);
}
.switch-input2:checked + .switch-label .toggle--on {
  display: inline-block;
  color: #C83030;
}
.switch-input2:checked + .switch-label .toggle--off {
  display: none;
}


/*green switch*/
.switch-input3 {
  display: none;
}
.switch-input3:checked + .switch-label:before {
  background-color: #B6D9C5;
}
.switch-input3:checked + .switch-label:after {
  background-color: #1E8449;
  -ms-transform: translate(80%, -50%);
  -webkit-transform: translate(80%, -50%);
  transform: translate(80%, -50%);
}
.switch-input3:checked + .switch-label .toggle--on {
  display: inline-block;
  color: #1E8449;
}
.switch-input3:checked + .switch-label .toggle--off {
  display: none;
}


/*iconos de detalles de la tabla CHILDS*/
td.details-control {background: url('../../images/icons/details_open.png') no-repeat center center;cursor: pointer;}

tr.shown td.details-control {background: url('../../images/icons/details_close.png') no-repeat center center;}

tr.loading2 td.details-control {background: url('../../images/icons/Loading7.gif') no-repeat center center;}



table.dataTable tbody tr.selected {color: white !important;background-color: #4F93CE !important;}
table.dataTable tbody tr.selectedYellow {background-color: #F9F4B0 !important;}
table.dataTable tbody tr.selectedGray {background-color: #E8E8E8 !important;}


/* Set !important rule to override default colors */
.activerow {
  background: #F9F4B0 !important;
}

.activerowgray {
  background: #E8E8E8 !important;
}



@media print {
   div.noprint  {
     display: none; 
 } 
}

@media print{
   .noprint{
       visibility: hidden; 
   }
}

/* prepare wrapper element */
div .percent{
  display: inline-block;
  position: relative;
}

/* position the unit to the right of the wrapper */
div .percent::after {
  position: absolute;
  top: 8px;
  right: -1em;
  transition: all .05s ease-in-out;
}

.percent::after {
  content: '%';
}

/*STYLE TABS*/
.container2{
  height:100%;
  width:100%;
  padding:0;
  margin-top: -20px;
  border-radius:5px;
  box-shadow: 0 2px 3px rgba(0,0,0,.3);  
}

.container2 body {
    font-family: 'Roboto', sans-serif;
    background-color: #f9f9f9;
}

.container2 header {
    position: relative;
}

.hide {
    display: none;
}

.tab-content {
    padding:25px;
}

#material-tabs {
    position: relative;
    display: block;
    padding:0;
    border-bottom: 1px solid #e0e0e0;
}

#material-tabs>a {
    position: relative;
   display:inline-block;
    text-decoration: none;
    padding: 22px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: #9DA0A2;
    text-align: center;
    outline:;
}

#material-tabs>a.active {
  color: #0AD3DD;
    font-weight: 500;
    outline:none;
    background-color: inherit;
}

#material-tabs>a:not(.active):hover {
    background-color: inherit;
    color: #0AD3DD;
}

@media only screen and (max-width: 520px) {
    .nav-tabs#material-tabs>li>a {
        font-size: 11px;
    }
}

.yellow-bar {
    position: absolute;
    z-index: 10;
    bottom: 0;
    height: 3px;
    background: #0AD3DD;
    display: block;
    left: 0;
    transition: left .2s ease;
    -webkit-transition: left .2s ease;
}

#tab1-tab.active ~ span.yellow-bar {
    left: 10px;
    width: 110px;
}

#tab2-tab.active ~ span.yellow-bar {
    left:148px;
    width: 105px;
}

#tab3-tab.active ~ span.yellow-bar {
    left: 285px;
    width: 100px;
}

#tab4-tab.active ~ span.yellow-bar {
    left: 420px;
    width: 105px;
}

#tab5-tab.active ~ span.yellow-bar {
    left: 550px;
    width: 80px;
}

#tab6-tab.active ~ span.yellow-bar {
    left: 650px;
    width: 90px;
}
/*FIN STYLE TABS*/


div.info{
  width: 20px; 
  height: 20px;
  content:url( "../../images/icons/info.png");
}


/*Para que el Captcha de Google este in Front*/
.grecaptcha-badge {
     z-index: 101;   
}


.msg_error{
font-family: 'Roboto', sans-serif;
font-weight: normal;
color: #996633; 
padding: 7px;
font-size: 14px; 
background: #ffffcc;
display: none;
  }


#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
     font-size: 12px;
    color: #7864EB;
}


  
  /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../../images/generales/Loading.gif') 
                center
                no-repeat;
    background-size: 70px 70px;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {overflow: hidden;   }

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {display: block;}

/* ESTILOS PARA LA PORTADA SECTIONS*/
.form_wrap{
    width: 95%;
    height: auto;
    margin: 65px auto 5px;
    display: flex;

    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

/* Informacion de Contacto*/

.cantact_info::before{
    content: '';
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    background: #0AD3DD;
    opacity: 0.9;
}

.cantact_info{
    width: 30%;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: initial;

    background-image: url('../../images/generales/back.png');
    background-size: cover;
    background-position: center center;

}

.info_title,
.info_items{
    position: relative;
    z-index: 2;
    color: #fff;
}

.info_title{
    margin-bottom: 60px;
}

.info_title span{
    font-size: 100px;
    display: block;
    text-align: center;
    margin-bottom: 15px;
}

.info_title h2{
    font-size: 25px;
    text-align: center;
}

.info_title h1{
    font-size: 14px;
    text-align: center;
}

.info_items p{
    display: flex;
    align-items: center;

    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.info_items p:nth-child(1) span{
    font-size: 30px;
    margin-right: 10px;
}

.info_items p:nth-child(2) span{
    font-size: 50px;
    margin-right: 15px;
    margin-left: 4px;
}
/*FIN ESTILOS PARA LA PORTADA SECTIONS*/



/* ESTILOS PARA todas las páginas SECTIONS*/
.form_wrap2{
    width: auto;
    height: auto;
    margin: 0px;
    display: flex;

    background: #FFF;
    border-radius: 15px;
    overflow: hidden;
}

.form_contact2{
  margin: auto;
  width: 90%;
}
/* Informacion de Contacto*/

.cantact_info2::before{
    content: '';
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    background: #0AD3DD;
    opacity: 0.9;
}

.cantact_info2{
    width: 3%;
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: url('../../images/generales/back4.png');
    background-size: cover;
    background-position: center center;

}

.info_title2,
.info_items2{
    position: relative;
    z-index: 2;
    color: #fff;
}


.info_title2 span{
    font-size: 100px;
    display: block;
    text-align: center;
}

.info_title2 h2{
    font-size: 20px;
    margin-top: 200px;
    text-align: center;
     -webkit-transform:rotate(270deg); 
    /*writing-mode: vertical-rl;*/
}

.info_title2 h1{
    font-size: 14px;
    text-align: center;
}

.info_items2 p{
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.info_items2 p:nth-child(1) span{
    font-size: 30px;
    margin-right: 10px;
}

.info_items2 p:nth-child(2) span{
    font-size: 50px;
    margin-right: 15px;
    margin-left: 4px;
}
/*FIN ESTILOS PARA todas las páginas SECTIONS*/





.footer {
  padding: 25px;
  background: #7864EB;
  text-align: center;
  background: -webkit-linear-gradient(-135deg, #7221AB, #7864EB);
  background: -o-linear-gradient(-135deg, #7221AB, #7864EB);
  background: -moz-linear-gradient(-135deg, #7221AB, #7864EB);
  background: linear-gradient(-135deg, #7221AB, #7864EB);
}

/*   SUP NAV RESPONSIVE STYLE*/
/* Add a black background color to the top navigation */
/*7_864EB morado primario*/
/*0_AD3DD verdeagua*/
/*7_221AB morado obscuro*/
/*A_DAAF7 Morado claro*/
/*4_f93ce COLOR BOTON*/
/*3_37ab7 COLOR BOTON OBSCURO*/

.topnav {
  background-color: #7864EB;
  overflow: hidden;
  box-shadow: 0 5px 5px -2px rgba(0,0,0,0.7);
	
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 12px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #0AD3DD;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/*SUBMENU3*/
.dropdown3 .submenu {
  font-size: 12px; 
  border: none;
  outline: none;
  color: #7221AB;
  padding: 14px 18px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Dropdown container - needed to position the dropdown content */
.dropdown3 {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown3 .dropbtn3 {
  font-size: 12px; 
  border: none;
  outline: none;
  color: #FFF;
  padding: 14px 18px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown3:hover .dropbtn3 {
  background-color: #7221AB;
  color: #FFF;
}


/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown3:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown3 .dropbtn3 {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

  .topnav.responsive .dropdown3 {float: none;}
  .topnav.responsive .dropdown3 .dropbtn3 {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*FIN DROPDOWN3 */

/*SUBMENU*/
.dropdown .submenu {
  font-size: 12px; 
  border: none;
  outline: none;
  color: #7221AB;
  padding: 14px 18px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #FFF;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-left: 95%;
  margin-top: -40px;
}

/* Style the links inside the dropdown */
.dropdown-content2 a {
  float: none;
  color: #7221AB;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown2:hover .submenu {
  background-color: #7221AB;
  color: #FFF;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content2 a:hover {
  background-color: #7864EB;
  color: #FFF;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown2:hover .dropdown-content2 {
  display: block;
}



/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive .dropdown-content2 {position: relative; margin-left: 20%;
  margin-top: -40px;}
}
/*FIN SUBMENU*/


/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 12px; 
  border: none;
  outline: none;
  color: #FFF;
  padding: 14px 18px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF;
  min-width: 125px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #7221AB;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #7221AB;
  color: #FFF;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #7864EB;
  color: #FFF;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative; right:-5%;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*.fa-address-card, .fa-user-plus, .fa-users,
.fa-power-off, .fa-user-edit, .fa-user-minus, .fa-search {
  color: #0AD3DD;
}*/

/*.lock:hover .fa-address-card,
.lock:hover .fa-user-plus, 
.dropbtn:hover .fa-users,
.lock:hover .fa-power-off, 
.lock:hover .fa-user-edit, 
.lock:hover .fa-user-minus, 
.lock:hover .fa-search,
.lock:hover .far-money-check-edit-alt,
.lock:hover .fa-id-card-alt,
.lock:hover .fa-users-cog,
.lock:hover .fa-hand-holding-usd{
    color: #FFF;
}*/


/*DATA TABLE STYLE*/
th { font-size: 12px; }
td { font-size: 12px; }

.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
	font-size: 12px;
}
/* .dataTables_length Is for the top left box, show 10 entries etc..*/
/* .dataTables_filter Is for the search box top right*/
/* .dataTables_infoIs for the table info on the bottom left*/
/* .dataTables_paginateis for the bottom right pagination*/

table.dataTable.display tbody td.child {
    background: #F1F1F8;
    border-color: #0AD3DD;
    border-width: 3px;
}

table.dataTable.display tbody tr table td{
    background: #F1F1F8;
}

table.dataTable.display tbody tr table th{
    background: #F1F1F8;

}

table.dataTable.display tbody tr table td:hover {
    background: #F1F1F8;
}
table.dataTable.display tbody tr table tr:hover {
    background: #F1F1F8;
}

/***    OTRO CODE EMPIEZA AQUI***/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1{
	font-size: 16px;
}
h2{
font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
h3{
	font-size: 18px;
}
h4{
  font-family: 'Roboto', sans-serif;
	font-size: 16px;
  color: #7864EB;
  font-weight: normal;
}
h5{
	font-size: 14px;
}
h6{
	font-size: 12px;
}
p{
	font-family: 'arial';
	letter-spacing: 2px;
	font-size: 12px;
	line-height: 20px;
}

span {
    font-family: 'GothamBook';
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 20px;
}

.morado {
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 20px;
    color: #7864EB ;
}

header{
	position:fixed; z-index:100; 
	width: 100%;
	top: 0;
	right: 0;
}



.header{
	color: #878787;
	background: #FFF;
	height: 35px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.optionsBar{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-right: 30px;
}

.switches {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #7CB7E8;
  margin: 0px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

.switches span {
    color: #878787;
    font-size: 11pt;
    font-family: 'GothamBook';
    text-transform: uppercase;
    margin-left: 30px;
}

.bolel {
    color: #4F93CE;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
   margin-left: 50px;
}

.boler {
    color: #4F93CE;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
   margin-right: 50px;
}


.photouser {
    margin-left: 30px;
    width: 25px;
    height: 25px;
}
.close{
	width: 25px;
    height: 25px;
}
.optionsBar a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-left: 10px;
	margin-right: 30px;
}



#container{
  padding: 50px 0px 3px 0px;
  background: #9053c7;
  background: -webkit-linear-gradient(-135deg, #D7CDF9, #C0FDF9);
  background: -o-linear-gradient(-135deg, #D7CDF9, #C0FDF9);
  background: -moz-linear-gradient(-135deg, #D7CDF9, #C0FDF9);
  background: linear-gradient(-135deg, #D7CDF9, #C0FDF9);
}


/*///  AQUI ESTA EL CODIGO STYLE DE LA CARPETA PRINCIPAL  ///*/
@font-face {
  font-family: Poppins-Regular;
  src: url('../../fonts/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../../fonts/poppins/Poppins-Bold.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../../fonts/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Montserrat-Bold;
  src: url('../../fonts/montserrat/Montserrat-Bold.ttf'); 
}

 /*CAVIAR DREAMS*/
@font-face {
    font-family: 'Caviar Dreams';
    src: url('../../fonts/caviardreams/CaviarDreams-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url('../../fonts/caviardreams/CaviarDreams-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url('../../fonts/caviardreams/CaviarDreams.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url('../../fonts/caviardreams/CaviarDreams-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
	margin: 0px; 
	padding: 0px; 
	box-sizing: border-box;
}

body, html {
	height: 100%;
	font-family: Poppins-Regular, sans-serif;
}

/*---------------------------------------------*/
a {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #666666;
	margin: 0px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
  color: #0AD3DD;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

p {
	font-family: Poppins-Regular;
	font-size: 12px;
	line-height: 1.7;
	color: #878787;
	margin: 0px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}


/*---------------------------------------------*/


textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #999999; }
input:-moz-placeholder { color: #999999; }
input::-moz-placeholder { color: #999999; }
input:-ms-input-placeholder { color: #999999; }

textarea::-webkit-input-placeholder { color: #999999; }
textarea:-moz-placeholder { color: #999999; }
textarea::-moz-placeholder { color: #999999; }
textarea:-ms-input-placeholder { color: #999999; }

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
  border-radius: 5px;
}

button:hover {
	cursor: pointer;
}

iframe {
	border: none !important;
}


/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
  font-family: Poppins-Regular;
  font-size: 12px;
  line-height: 1.5;
  color: #999999;
}

.txt2 {
  font-family: Poppins-Regular;
  font-size: 12px;
  line-height: 1.5;
  color: #666666;
}


/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
  width: 100%;
  margin: 0 auto;
}


.wrap-login100 {
  width: 90%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 177px 130px 33px 95px;
}

/*------------------------------------------------------------------
[  ]*/
.login100-pic {
  width: 316px;
}

.login100-pic img {
  max-width: 100%;
}


/*------------------------------------------------------------------
[  ]*/
.login100-form {
  width: 100%;
}

.login100-form-title {
  font-family: Poppins-Regular;
  font-size: 20px;
  font-weight: bold;
  color: #7864EB;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.form_div2 {
  font-family: Poppins-Regular;
  font-size: 12px;
  color: #7864EB;
  text-align: center;
  width: 100%;
  background-color: #fff; 
  padding: 0px 15px ;
}

.division2{
	width: 90%; 
	height: 7px; 
	border-bottom: 1.5px solid #7864EB; 
	border-top: .25px solid #0AD3DD; 
	border-bottom-style: solid;
	text-align: left;
	padding: 0px 0px 0px 75px;
	}


.form_div {
 width: 100%;
	height: 20px;
	text-align: left;
	padding: 0 0 0 25px;
}

.division{
	font-size: 20px;
  background-image: linear-gradient(to right, #594AB1 , #7864EB);
	background-color: #7864EB;
	color: #FFFFFF;
	padding: 0 10px;
  border-style: solid;
	border-radius: 5px;
	width: 100%;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
   border-width: 2px;
	}

.form_div3 {
 width: 100%;
  height: 16px;
  text-align: center;
  padding: 0 0 0 0px;
}

.division3{
  margin-top: 5px;
 /* background-image: linear-gradient(to right, #7864EB , #0AD3DD);*/
 background-image: linear-gradient(to right, rgba(79, 147, 206, 0.6) , rgba(10, 211, 221, 0.6));
  color: #FFFFFF;
  text-align: center;
  border-style: solid;
  border-radius: 10px;
  width: 300px;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
   border-width: 2px;
   border-color: #0AD3DD;
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   top: 1px;
   z-index: 101;
  }

  .division3 a{
    font-size: 12px;
    color: #FFFFFF;
  }

/*---------------------------------------------*/
.wrap-input100 {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-bottom: 10px;
}

.input100 {
  font-family: Poppins-Medium;
  font-size: 12px;
  line-height: 1.5;
  color: #666666;

  display: block;
  width: 100%;
  background: #e6e6e6;
  height: 50px;
  border-radius: 25px;
  padding: 0 30px 0 68px;
}


/*------------------------------------------------------------------
[ Focus ]*/
.focus-input100 {
  display: block;
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 0px 0px;
  color: rgba(172,104,245, 0.8);
}

.input100:focus + .focus-input100 {
  -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
  animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 70px 25px;
    opacity: 0;
  }
}

@keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 70px 25px;
    opacity: 0;
  }
}

.symbol-input100 {
  font-size: 12px;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 35px;
  pointer-events: none;
  color: #666666;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus + .focus-input100 + .symbol-input100 {
  color: #57b846;
  padding-left: 28px;
}


/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}


.container-login100 {
  width: 95%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  padding: 25px;
  border-radius: 25px;
  background: #FFF;
}


.login100-form-btn {
  font-family: Montserrat-Bold;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  text-transform: uppercase;

  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: #57b846;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 25px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn:hover {
  background: #333333;
}



/*------------------------------------------------------------------
[ Responsive ]*/



@media (max-width: 992px) {
  .wrap-login100 {
    padding: 10px 10px 10px 10px;
  }
}

@media (max-width: 768px) {
  .wrap-login100 {
   padding: 10px 10px 10px 10px;
  }
}

@media (max-width: 576px) {
  .wrap-login100 {
    padding: 10px 10px 10px 10px;
  }
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: white;
  border: 1px solid #c80000;
  border-radius: 13px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 8px;
  pointer-events: none;

  font-family: Poppins-Medium;
  color: #c80000;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f06a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 13px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}


/*  STYLE FORM */
body,
input,
select,
textarea,
body * {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}
body::after, body::before,
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before,
body *::after,
body *::before {
  box-sizing: border-box;
}


h1 {
  font-size: 2rem;
  text-align: left;
  margin: 0 0 2em;
}

.container {
  position: relative;
  margin: 0rem auto;
  background: #fff;
  width: 95%;
  padding: 0px 20px 0px 0px;
  border-radius: 15px;
  z-index:98;
}

.container::before {
  content: '';
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  	box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0), 0 3px 14px 2px rgba(0, 0, 0, 0), 0 5px 5px -3px rgba(0, 0, 0, 0);
	transition: box-shadow 0.3s ease-in-out;
}

.container:hover::before {
	border-radius: 15px;
	box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease-in-out;
}


.button-container {
  text-align: left;
}

.button-container2 {
  text-align: right;
}

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

fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}

.form-radio,
.form-group {
  font-size: 13px;
  position: relative;
  margin-top: .5rem;
  margin-bottom: .5rem;
	text-align: left;
}

.form-inline > .form-group,
.form-inline > .btn {
  display: inline-block;
  /*margin-bottom: 0;*/
  padding:  0px 15px;
  margin: 15px 0;
}


.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 12px;
}
.checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  position: absolute;
  width: 100%;
	
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}

.form-group input:read-only ~ .control-label{
  font-size: 12px;
  color: #b3b3b3;
  top: -1rem;
  left: 0;
}
.form-group input:read-only {
   outline: none;
   color: #797979;
}

.form-group input {
  height: 1.9rem;
}
.form-group textarea {
  resize: none;
}
.form-group select {
  width: 100%;
  font-size: 12px;
  height: 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 1.6;
  box-shadow: none;
}
.form-group .control-label {
  position: absolute;
  top: 0.25rem;
  pointer-events: none;
  padding-left: 0.125rem;
  z-index: 1;
  color: #b3b3b3;
  font-size: 12px;
  font-weight: normal;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
}
.form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}
.form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #7864EB;
  -webkit-transition: left 0.28s ease, width 0.28s ease;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}

.form-group input,
.form-group textarea {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 12px;
  border-width: 0;
  border-color: transparent;
  line-height: 1.2;
  width: 100%;
  color: transparent;
  -webkit-transition: all 0.28s ease;
  transition: all 0.28s ease;
  box-shadow: none;
}
.form-group input[type="file"] {
  line-height: 1;
}
.form-group input[type="file"] ~ .bar {
  display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
  color: #333;
}
.form-group select ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group input:valid ~ .control-label,
.form-group input.form-file ~ .control-label,
.form-group input.has-value ~ .control-label,
.form-group textarea:focus ~ .control-label,
.form-group textarea:valid ~ .control-label,
.form-group textarea.form-file ~ .control-label,
.form-group textarea.has-value ~ .control-label {
  font-size: 12px;
  color: #C0C0C0;
  top: -1rem;
  left: 0;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
}
.form-group select:focus ~ .control-label,
.form-group input:focus ~ .control-label,
.form-group textarea:focus ~ .control-label {
  color: #707070;
}

.form-group .txt {
color: #C0C0C0;
}

.form-group textarea:focus ~ .txt,
.form-group select:focus ~ .txt,
.form-group input:focus ~ .txt{
color: #707070;
}

.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input,
.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.radio {
  margin-bottom: 1rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  -webkit-transform: scale(0);
          transform: scale(0);
  background-color: #7864EB;
  border-color: #7864EB;
}
.radio label:hover .helper {
  color: #7864EB;
}
.radio input:checked ~ .helper::after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: #7864EB;
}

.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 13px;

}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #7864EB;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #7864EB;
}
.checkbox input:checked ~ .helper {
  color: #7864EB;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: 1rem;
}

.has-error .legend.legend, .has-error.form-group .control-label.control-label {
  color: #d9534f;
}
.has-error.form-group .form-help,
.has-error.form-group .helper, .has-error.checkbox .form-help,
.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: #d9534f;
}
.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}

.button {
  position: relative;
  background: currentColor;
  border: 1px solid white;
  font-size: 12px;
  color: #4f93ce;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #337ab7;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}

.button2 {
  position: relative;
  background: currentColor;
  border: 1px solid white;
  font-size: 12px;
  color: #EAEAEA;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button2 span {
  color: #000;
  position: relative;
  z-index: 1;
}

.button2:hover {
  color: #E1E1E1;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}



.button2:active::before, .button2:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button2:focus {
  outline: none;
}


.button3 {
  position: relative;
  background: currentColor;
  border: 1px solid white;
  font-size: 12px;
  color: #920202;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.button3 span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button3::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button3:hover {
  color: #CC0505;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button3:active::before, .button3:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button3:focus {
  outline: none;
}
/*STYLES JQUERY BUTTONS*/
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .yescls
{
    font-size:12px;
    color: #000;
    /*width: 150px;
    background: #378571;*/
    
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .yescls:hover {
    background: #4f93ce;
    color: white;
    border: 1px solid #FFF;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .yescls:active {
    background: #86BAE7;
    color: white;
    border: 1px solid #000000;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .cancelcls
{
    font-size:12px;
    color: #000;
    background: #FCDFDF;
    
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .cancelcls:hover
{
    color: #FFFFFF;
    background: #C15454;
    
}

/*///////// pruebas para el dialogo////////////*/
.ui-widget {
    
    font-size: 6px;
}

.ui-widget-content {
   font-family: 'Roboto', sans-serif;
   font-size: 12px;
}


 /*Bubble Speech*/
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  display:inline-block;
  clear: both;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}


.him{
  background: #DCDCDC;
  float: left;
  margin-right: 15px;
}

.me{
  float: right;
  background: #DCF8C6;
  color: #565656;
  margin-right: 15px;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 20px;
}
/*Fin Bubble Speech*/

/*tabla csv usuarios*/
#alumnosCSV {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#alumnosCSV td, #alumnosCSV th {
  border: 1px solid #ddd;
  padding: 8px;
  min-width: 100px;
}

#alumnosCSV tr:nth-child(even){background-color: #f2f2f2;}

#alumnosCSV tr:hover {background-color: #ddd;}

#alumnosCSV th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4F93CE;
  color: white;
  position: sticky;
  top: 0;
}

.alumnosCSV {position: relative; overflow-x: scroll; /*max-height: 800px;*/}

/*
0 AD3DD
7 864EB
4 F93CE
*/

.slider {
  height: 800px;
  margin-top: -100px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__nav {
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #ccc;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #7864EB, 0 0 0 0 rgba(120, 100, 235, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  left: -300%;
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.slider__caption {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}
.slider__txt {
  color: #999;
  margin-bottom: 3rem;
  max-width: 300px;
}

@-webkit-keyframes check {
  50% {
    outline-color: #7864EB;
    box-shadow: 0 0 0 12px #7864EB, 0 0 0 36px rgba(120, 100, 235, 0.2);
  }
  100% {
    outline-color: #7864EB;
    box-shadow: 0 0 0 0 #7864EB, 0 0 0 0 rgba(120, 100, 235, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #7864EB;
    box-shadow: 0 0 0 12px #7864EB, 0 0 0 36px rgba(120, 100, 235, 0.2);
  }
  100% {
    outline-color: #7864EB;
    box-shadow: 0 0 0 0 #7864EB, 0 0 0 0 rgba(120, 100, 235, 0);
  }
}

.backgroundD {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10 ' fill='white' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}

 .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}


#tableH tr:nth-child(even) {
  background-color: #F2F2F2;
}



/* NEW CHECK BOX */
.holder {
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.checkdiv {
  position: relative;
  padding: 4px 8px;
  border-radius:40px;
  margin-bottom:4px;
  padding-left:25px;
  display: flex;
  align-items: center;
}
.checkdiv:last-child {
  margin-bottom:0px;
}
.checkdiv span {
  position: relative;
  vertical-align: middle;
  line-height: normal;
}
.le-checkbox {
  appearance: none;
  position: absolute;
  top:50%;
  left:5px;
  transform:translateY(-50%);
  background-color: #F44336;
  width:15px;
  height:15px;
  border-radius:5px;
  margin:0px;
  outline: none; 
  transition:background-color .5s;
}
.le-checkbox:before {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  background-color:#ffffff;
  width:10px;
  height:2.5px;
  border-radius:40px;
  transition:all .5s;
}

.le-checkbox:after {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
  background-color:#ffffff;
  width:10px;
  height:2.5px;
  border-radius:40px;
  transition:all .5s;
}
.le-checkbox:checked {
  background-color:#4CAF50;
}
.le-checkbox:checked:before {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) translate(-2px,2px) rotate(45deg);
  background-color:#ffffff;
  width:6px;
  height:2.5px;
  border-radius:40px;
}

.le-checkbox:checked:after {
  content:'';
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) translate(3px,-1px) rotate(-45deg);
  background-color:#ffffff;
  width:9px;
  height:2.5px;
  border-radius:40px;
}