html, body{
  width: 100%;
  height: 100%;
}

body{
  padding-bottom: 190px;
}

.header_bg{
  width: 100%;
  height: 130px;
  background-image: url("../images/banner.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: inherit;
  display: flex;
  justify-content: center;
}

.header{
  width: 100%;
  padding: 10px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999999;
  transition: background .1s ease-in-out;
}

.header .header_max{
  width: 100%;
  max-width: 1920px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .header_title{
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .header_title .img{
  width: 120px;
  margin-left: 16px;
}

.header .header_title .titl{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 16px;
}

.header .header_title .titl h5{
  color: #FFF;
  font-weight: bold;
  font-size: 26px;
  margin-bottom: 0;
}

.header .header_title .titl p{
  font-weight: bold;
  font-size: 18px;
  color: rgba(255,255,255,.6);
  margin-bottom: 0;
}

.header .header_title .img img{width: 100%;}
.header_bg .btn{font-weight: bold;}

.header .btn-transparent {
  background: transparent;
  color: #FFF;
  transition: background 0.3s ease;
  margin-left: 5px;
  font-weight: bold;
}

.header .btn-transparent:hover {
  background:rgba(255,255,255,.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.header .btn-transparent.bord{border: 1px solid #FFF;}

.header .nav-mobile{display: none;}

.header .nav-mobile > .btn-transparent{
  width: 45px;
  height: 45px;
  border-radius: 50% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin-left: 0;
  margin-right: 16px;
}

.btn-group .dropdown-menu{padding: 0;}

.btn-group .dropdown-menu .dropdown-item{
  padding: 12px;
  text-align: center;
}

.btn-group .dropdown-menu .dropdown-divider{margin: 0;}

/*HEADER ACTIVE*/
.header.active{background:#FFF;border-bottom: 1px solid rgba(0,0,0,.15);}
.header.active .header_title .titl h5{color: #555;}
.header.active .header_title .titl p{color: #888}
.header.active .btn-transparent{color: #555555;}
.header.active .btn-transparent:hover {background:rgba(0,0,0,.1);}
.header.active .btn-transparent.bord{border: 1px solid #555;}


/*PANEL FECHA*/
.section_date{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 25px;
  width: 100%;
  max-width: 1920px;
  margin:auto;
}

.section_date .button_date{
  display: flex;
  justify-content: center;
  align-items: center;
  background:#EEE;
  width: 350px;
  height: 36px;
  padding: 0 24px;
  border-radius: 36px !important;
  color: #515151;
}

.section_date .button_date p{
  margin-bottom: 0;
  margin-right: 5px;
  font-size: 16px;
  font-weight: 600;
}

.section_date .info{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #515151;
}

.section_date .info a{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.section_date .info a i{position: relative;top: 1px;}

.section_date .info a{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  justify-content: center;
  margin-right: 8px;
  transition: background .2s ease-in-out; 
}

.section_date .info a:hover{background: rgba(0,0,0,.2);}

.section_date .info p{
  margin-bottom: 0;
  margin-left: 16px;
  font-size: 21px;
  font-weight: 600;
}

/*CONTENIDO*/
.contenido{
  max-width: 1920px;
  margin:0px auto 35px auto;
}

.contenido_w{
  width: 100%;
  padding: 0px 25px 30px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contenido_w.two{
  padding: 30px 25px 30px 25px;
  flex-direction: column;
  justify-content: center;
}

.contenido_w.two.contactos .card{
  width: 100%;
  max-width:1000px;
  margin-bottom: 32px;
}

.contenido_w .alert span{font-size: 20px;}
.nodata {color: #414141; font-size: 18px;}


.contenido_w .table-responsive{
  width: 100%;
  max-width: 1080px;
}

.contenido .section2 .card{
  border: none;
  border-radius: 24px;
  overflow: hidden;
  border:1px solid #E2E2E2;
  background:transparent;
}

.contenido .section2 .card-body{
  padding: 0;
  min-width: 360px;
  background: #FFF;
}

.contenido .form-header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 60px;
}

.contenido .card-body{
  position: relative;
}

.contenido .card-body .bg{
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgb(97 54 119) 0%, #4b7cc3 100%);
}

.contenido .form-header.disabled,.contenido .card.disabled .bg{opacity: .65;}

.contenido .form-header div{
  width:75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(224,224,224,.14);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: rgba(0,0,0,.61);
  font-size:30px;
  overflow: hidden;
}

.contenido .form-header p{
  font-weight: bold;
  color: #252525;
  font-size:18px;
  margin-bottom: 0;
  margin-top: 5px;
}

.contenido form{
  margin: 16px 25px 25px 25px;
}

.contenido form .input-group span{
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #252525;
}

.contenido form .input-group .input-group-text.two{
  width: auto;
  border:1px solid #ced4da;
  background: #FFF;
  font-size: 16px;
  flex: 1 1 auto;
  width: 1%;
}

.contenido form .btn-check:checked+.btn-outline-primary {
    color: #FFF;
    border-color: rgba(63,94,251,1);
    background: rgba(63,94,251,1);
}

.contenido form .btn-check:checked+.btn-outline-primary:focus,
.contenido form input:focus+.btn-outline-primary{
  box-shadow: none;
}

.contenido form .input-group.checks{display: flex;width: 100%;}

.contenido form .btn-outline-primary:not(.notstyles) {
  color: #313131;
  background: #FFF;
  border-color: #ced4da;
  flex: 1;
}

.contenido form .btn-outline-primary:hover {
  color: rgba(63,94,251,1);
  background: rgba(63,94,251,.2);
  border-color: rgba(63,94,251,1);;
}

.contenido form .btn-check:checked+.btn-outline-primary:hover {
    color: #FFF;
    background: rgba(63,94,251,1);
    border-color: rgba(63,94,251,1);
}

.togglePassword{cursor: pointer;}
.togglePassword:hover{background: #ced4da;}

.contenido form .d-grid button{
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(90deg, rgb(97 54 119) 0%, #4b7cc3 100%);
  font-weight: bold;
}

.carousel{
  width: 530px !important;
  overflow:hidden;
  border-radius: 24px !important;
  border: 2px solid #E2E2E2;
  box-shadow: none !important;
}

.carousel.two{
  width: 715px !important;
}

.carousel-custom .carousel-control-next,
.carousel-custom .carousel-control-prev {
  display: none;
}

.contenido .section0{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contenido .section0 .btn-light{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  padding: 0;
  background: rgba(63,94,251,.05);;
  border:1px solid rgba(63,94,251,1);
  transition: border .1s ease-in-out;
  margin-bottom: 6px;
}

.contenido .section0 .btn-light .img{width: 75px;margin-top: 8px;}

.contenido .section0 .btn-light .img img{width: 100%;}

.contenido .section0 .btn-light p{
  width: 100%;
  background: rgba(63,94,251,.10);
  margin-top:8px;
  margin-bottom: 0;
  padding: 5px 0;
  font-size: 16px;
  text-align: center;
  font-weight: 800;
}

.contenido .section0 .btn-light:hover{background: rgba(63,94,251,.15);}
.contenido .section0 .btn-light:hover p{color: rgba(63, 94, 251, 1);}

/*FOOTER*/
footer{
  width: 100%;
  position: relative;
  background: linear-gradient(90deg, #232323 0%, #000 100%);
  padding: 32px 16px 16px 16px;
}

footer .content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1080px;
  margin: auto;
}

footer .content .section0{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer .content .section0 p{
  color: rgba(255,238,218,.8);
  margin-bottom: 0;
  text-align: center;
  font-weight: 600;
}

footer .content .section0 p:first-child{margin-bottom: 5px;}

footer .content .section1 .btn-transparent{
  color: rgba(255,238,218,.5);
  margin-right: 5px;
  border-radius: 24px;
}

footer .content .section1 .btn-transparent:hover{
  color: #FFF;
  background:rgba(255,255,255,.1);
}

footer .content .section1{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

footer .content .section2{margin-top: 5px;}
footer .content .section2 p{color: rgba(255,238,218,.5); margin-bottom: 0; text-align: center;}

.modal-content{
  border-radius: 16px;
  box-shadow: 9px 9px 18px rgba(0,0,0,.5), -9px -9px 18px rgba(0,0,0,.2);
}

.notifications_login{
  width: 100%;
  max-width: 400px;
  margin: auto;
}

/*RESPONSIVE*/
@media (max-width: 1400px) {
  .header .header_title .titl p{font-size: 16px;}
}

@media (max-width: 1250px) {
  .contenido_w{flex-direction: column;}
  .contenido .section0{width:100%;flex-direction:row;justify-content:space-between;margin-bottom: 16px;}
  .contenido .section0 .btn-light{width:calc(100/4);margin-right: 5px;}
  .contenido .section0 .btn-light:last-child{margin-right: 0px;}
  .contenido .section0 .btn-light p{font-size: 12px;}
  .carousel{margin-bottom: 16px;}
}

@media (max-width: 740px) {
  .carousel.two{
    width: 100% !important;
  }
}

@media (max-width: 1000px) {
  .navbar {display: none;}
  .header .header_title .img{display: none;}
  .header {align-items: center;}
  .header .nav-mobile{display: flex;}
  .carousel-inner {height: auto !important;}
}

@media (max-width: 600px) {
  .header .header_title .titl p{display: none;}
  .carousel{width: 100% !important;}
  .contenido .section0 {width:80%;flex-direction: column;}
  .contenido .section1,.contenido .section2 {width:80%;}
  .contenido .section0 .btn-light{width: 100%;}
  .contenido .section0 .btn-light p{font-size: 14px;}
  .contenido .form-header,.contenido .section2 .card-body{width: 100%;min-width: auto;}
  footer .content .section1{flex-direction: column;}

  .section_date{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    width: 100%;
    max-width: 1920px;
    margin:auto;
  }

  .section_date .info{margin-bottom: 16px;}
}

@media (max-width: 500px) {
  .contenido .section0 {width:90%;}
  .contenido .section1,.contenido .section2 {width:90%;}
}

@media (max-width: 400px) {
  .contenido .section0 {width:100%;}
  .contenido .section1,.contenido .section2 {width:100%;}
}

@media (min-width: 576px){
  .modal-dialog {
    max-width: 500px;
    margin: 100px auto 0 auto;
  }
}