/* By Martin Flores */
:root {
    --safe-area-bottom: env(safe-area-inset-bottom);
  }
  
  /*-------------------------------------------*\
   * _Font_Face
   *
   * Definicion de tipografías
   * - Light     [f1]
   * - Regular   [f2]
   * - Medium    [f3]
   * - SemiBold  [f4]
   * - Bold      [f5]
  \*-------------------------------------------*/
  .sdb{
      font-size: 22px;
      font-weight: bold;
      padding: 10px 0px;
  }
  @font-face {
      font-family: 'Customfont';
      src: url(fonts/5c92d5d3e39a260d5dd06ced7eca070d.ttf);
  }
  
  @font-face {
      font-family: 'f4';
      src: url(fonts/5c92d5d3e39a260d5dd06ced7eca070d.woff2);
  }
  
  @font-face {
      font-family: 'f5';
      src: url(fonts/5c92d5d3e39a260d5dd06ced7eca070d.woff2);
  }
  
  @font-face {
      font-family: 'f3';
      src: url(fonts/b796339b324ec08006ca04dca90284cf.woff2);
  }
  
  @font-face {
      font-family: 'f2';
      src: url(fonts/bcf3bb1b7f7a3436181788e748bae013.woff2);
  }
  
  @font-face {
      font-family: 'f1';
      src: url(fonts/bcf3bb1b7f7a3436181788e748bae013.woff2);
  }
  
  .f1 {
      font-family: 'f1', sans-serif;
  }
  
  .f2 {
      font-family: 'f2', sans-serif;
  }
  
  .f3 {
      font-family: 'f3'!important;
  }
  
  .f4 {
      font-family: 'f4', sans-serif!important;
  }
  
  .f5 {
      font-family: 'f5', sans-serif;
  }
  
  *{font-family: 'f2', sans-serif;letter-spacing: -0.5px;}
  /*.f1{font-family: 'Poppins'!important;letter-spacing: -0.7px!important;font-weight:300;}*/
  /*.f2{font-family: 'Poppins'!important;font-weight: 500; letter-spacing: -0.7px!important;}*/
  /*.f3{font-family: 'Poppins'!important;font-weight: 800;letter-spacing: -0.7px!important;}*/
  .ttc{text-transform: capitalize;}
  .pl0{padding-left: 0px!important;}
  .pr0{padding-right: 0px!important;}
  html body .pt0{padding-top: 0px!important;}
  .bgray{border: 1px solid #d0d0d0;}
  .mb5{margin-bottom: 5px}
  html body .mt20 {
      margin-top: 20px!important;
  }
  .c30{color: #303030!important;}
  /*F7*/
  /*html div.dialog-backdrop.backdrop-in{background: rgba(0, 0, 0, .8);}*/
  .list ul::before{opacity:0!important}
  .list ul::after{opacity:0!important}
  .br,.br1{width: 100%;height: calc(15px * 1);float: left;}
  .br2{width: 100%;height: calc(15px * 2);float: left;}
  .br3{width: 100%;height: calc(15px * 3);float: left;}
  .br4{width: 100%;height: calc(15px * 4);float: left;}
  .br5{width: 100%;height: calc(15px * 5);float: left;}
  .pt90{padding-top: 90px!important;}
  .info{margin-top:0px!important;}
  .info> span{
    z-index: 2!important;
    position: relative!important;
    padding: 0px 3px 0px 3px!important;
    left: 0px!important;
    top: -9px;
    font-family: 'f4'!important;
    font-size: 14px!important;
    text-transform: uppercase;
  }
  .btnScreenFooter{
      width: 232px;
      display: block;
      margin: auto;
  }
  .btnScreenFooter img{
      width: 36px;
      opacity: .9;
      margin: auto;
      height: 36px;
      filter: invert(1);
  }
  .btnScreenFooter span{}
  .btnScreenFooter >a {
      width: 53px;
      height: 53px;
      float: left;
      background: white;
      margin: 0 10px;
      display: flex;
      cursor: pointer;
      border-radius: 10000pt;
      background: #006dd8;
      border: 2px solid white;
  }
  .info> div{
    text-align: left!important;
    position: relative!important;
    top: -10px!important;
    padding-top: 3px!important;
    padding-left: 10px!important;
  }
  .btnSimple{
    border: 0px solid gray;
    border-radius: 1pt;
    background: black;
    color: white;
    padding: 10px 15px;
    cursor: pointer;
  }
  /*SHORT*/
  .b1sw{border:1px solid white!important;}
  .p20{padding: 20px!important}
  .ttu{text-transform: uppercase;}
  .cp{cursor: pointer;}
  html, body{margin: 0;padding:0px;background: #f1f1f1;}
  .noselect{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
  .txt-black{color: black!important;}
  .bgi{background: url(assets/img/bg.png);}
  .br10{border-radius: 10pt!important;}
  .shadow{box-shadow: 0 8px 16px 0 rgb(0 0 0 / 15%)!important;}
  .ma{margin: auto!important;}
  .m0{margin: 0!important;}
  .ml0{margin-left: 0!important;}
  .mra{margin-right: auto!important;}
  .df{display: flex!important;}
  .fdr{flex-direction: row!important;}
  .fl{float: left!important;}
  .tdu{text-decoration: underline;}
  .tdn{text-decoration: none;}
  .fdc{flex-direction: column!important;}
  .db{display: block!important;}
  .toe{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
  .w100{width: 100%!important;}
  .fj{filter: grayscale(1);}
  .bgw{background: white!important;}
  .bgb{background: black!important;}
  .oh{overflow: hidden;}
  .op9{opacity: .9;}
  .p0{padding: 0px!important;}
  html body .pb0{padding-bottom:0px!important;}
  .pt5{padding-top:5px!important;}
  .prt1{position: relative;top: -1.5px;}
  .pl10{padding-left: 10px!important;}
  .pr10{padding-right: 10px!important;}
  .pt10{padding-top: 10px!important;}
  .pb10{padding-bottom: 10px!important;}
  .pl20{padding-left: 20px!important;}
  .pl40{padding-left: 40px!important;}
  .pl45{padding-left: 45px!important;}
  .pl55{padding-left: 55px!important;}
  .pr20{padding-right: 20px!important;}
  .pt20{padding-top: 20px!important;}
  .pb20{padding-bottom: 20px!important;}
  .dfc{display: flex; flex-wrap: wrap; justify-content: center;}
  .box{max-width:1080px!important;margin: auto!important;}
  .pixImg{image-rendering: auto;image-rendering: crisp-edges;image-rendering: pixelated;}
  
  body .c21{color:#212121;}
  body .c31{color:#313131;}
  body .c41{color:#414141;}
  body .c51{color:#515151;}
  body .c61{color:#616161;}
  body .c71{color:#717171;}
  body .c81{color:#818181;}
  body .c91{color:#919191;}
  
  body .bb1c21{border-bottom:1px solid #212121;}
  body .bb1c31{border-bottom:1px solid #313131;}
  body .bb1c41{border-bottom:1px solid #414141;}
  body .bb1c51{border-bottom:1px solid #515151;}
  body .bb1c61{border-bottom:1px solid #616161;}
  body .bb1c71{border-bottom:1px solid #717171;}
  body .bb1c81{border-bottom:1px solid #818181;}
  body .bb1c91{border-bottom:1px solid #e6e6e6;}
  /*FONTS*/
  .f8{font-size: 8pt!important;}
  .f10{font-size: 10pt!important;}
  .f12{font-size: 12pt!important;}
  .f14{font-size: 14pt!important;}
  .f16{font-size: 16pt!important;}
  .f18{font-size: 18pt!important;}
  .f20{font-size: 20pt!important;}
  .f22{font-size: 22pt!important;}
  .f24{font-size: 24pt!important;}
  .f26{font-size: 26pt!important;}
  .f28{font-size: 28pt!important;}
  .f30{font-size: 30pt!important;}
  .f32{font-size: 32pt!important;}
  .f34{font-size: 34pt!important;}
  .f36{font-size: 36pt!important;}
  .f38{font-size: 38pt!important;}
  .f40{font-size: 40pt!important;}
  /* line height */
  .lh8{line-height: 8px!important;}
  .lh10{line-height: 10px!important;}
  .lh12{line-height: 12px!important;}
  .lh14{line-height: 14px!important;}
  .lh16{line-height: 16px!important;}
  .lh18{line-height: 18px!important;}
  .lh20{line-height: 20px!important;}
  .lh22{line-height: 22px!important;}
  .lh24{line-height: 24px!important;}
  .lh26{line-height: 26px!important;}
  .lh28{line-height: 28px!important;}
  .lh30{line-height: 30px!important;}
  .lh32{line-height: 32px!important;}
  .lh34{line-height: 34px!important;}
  .lh36{line-height: 36px!important;}
  .lh38{line-height: 38px!important;}
  .lh40{line-height: 40px!important;}
  .lh45{line-height: 45px!important;}
  .lh50{line-height: 50px!important;}
  /* text colors */
  .txt-red{color: red;}
  .txt-blue{color: blue;}
  .txt-white{color: white;}
  .txt-black{color: black;}
  .txt-orange{color: #ff5000;}
  /* overflow */
  .ov{overflow: visible!important;}
  .oh{overflow: hidden!important;}
  .os{overflow: scroll!important;}
  .osx{overflow-x: scroll!important;}
  .osy{overflow-y: scroll!important;}
  /* floats */
  .fl{float: left!important;}
  .fr{float: right!important;}
  .fn{float: unset!important;}
  /* Positions */
  .pf{position: fixed!important;}
  .pa{position: absolute!important;}
  .pr{position: relative!important;}
  .ps{position: static!important;}
  
  /* columns */
  .d1,.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9,.d10,.d11,.d12,
  .d1-md,.d2-md,.d3-md,.d4-md,.d5-md,.d6-md,.d7-md,.d8-md,.d9-md,.d10-md,.d11-md,.d12-md,
  .d1-sm,.d2-sm,.d3-sm,.d4-sm,.d5-sm,.d6-sm,.d7-sm,.d8-sm,.d9-sm,.d10-sm,.d11-sm,.d12-sm,
  .d1-xs,.d2-xs,.d3-xs,.d4-xs,.d5-xs,.d6-xs,.d7-xs,.d8-xs,.d9-xs,.d10-xs,.d11-xs,.d12-xs{
    float: left;
    padding: 10px;
    transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  /*.d1 img,.d2 img,.d3 img,.d4 img,.d5 img,.d6 img,.d7 img,.d8 img,.d9 img,.d10 img,.d11 img,.d12 img{width: 100%;}*/
  .d1{width: 8.33333333%}
  .d2{width: 16.66666667%}
  .d3{width: 25%}
  .d4{width: 33.33333333%}
  .d5{width: 41.66666667%}
  .d6{width: 50%}
  .d7{width: 58.33333333%}
  .d8{width: 66.66666667%}
  .d9{width: 75%}
  .d10{width: 83.33333333%}
  .d11{width: 91.66666667%}
  .d12{width: 100%}
  .hide{display: none!important;}
  .hide-i{display: none!important;}
  .show{display: block;}
  .txt-left{text-align: left;}
  
  .menuGeneric{
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 68px;
    display: flex;
    cursor: pointer;
  }
  .menuGeneric i{
    margin: auto;
    font-size: 22px;
  }
  .txt-right{text-align: right!important;}
  /* Laptop */
  @media (max-width: 1000px) {
    .txt-center-md{text-align: center!important;}
    .txt-left-md{text-align: center!important;}
    .txt-right-md{text-align: center!important;}
    .hidden-md{visibility: hidden;}
    .hide-md{display: none;}
    .show-md{display: block;}
  }
  /* Tablet */
  @media (max-width: 700px) {
    .txt-center-sm{text-align: center!important;}
    .txt-left-sm{text-align: center!important;}
    .txt-right-sm{text-align: center!important;}
    .hidden-sm{visibility: hidden;}
    .hide-sm{display: none!important;}
    .show-sm{display: block!important;}
    .show-smf{display: flex!important;}
    .height-sm-100{height: 10vh!important;}
    .d1-sm{width: 8.33333333%}
    .d2-sm{width: 16.66666667%}
    .d3-sm{width: 25%}
    .d4-sm{width: 33.33333333%}
    .d5-sm{width: 41.66666667%}
    .d6-sm{width: 50%}
    .d7-sm{width: 58.33333333%}
    .d8-sm{width: 66.66666667%}
    .d9-sm{width: 75%}
    .d10-sm{width: 83.33333333%}
    .d11-sm{width: 91.66666667%}
    .d12-sm{width: 100%}
    html body #content{
      width: 100vw!important;
    }
    html body .headerContent{
      width: 100vw!important;
      padding-left: 50px!important;
    }
    html body aside{
      z-index: 4!important;
      width: 100vw!important;
      transition: transform .5s ease!important;
      transform: translateX(-100vw)!important;
    }
  }
  /* Phone */
  @media (max-width: 460px) {
    .txt-center-xs{text-align: center!important;}
    .txt-left-xs{text-align: center!important;}
    .txt-right-xs{text-align: center!important;}
    .hidden-xs{visibility: hidden;}
    .hide-xs{display: none;}
    .show-xs{display: block;}
    .d1-xs{width: 8.33333333%}
    .d2-xs{width: 16.66666667%}
    .d3-xs{width: 25%}
    .d4-xs{width: 33.33333333%}
    .d5-xs{width: 41.66666667%}
    .d6-xs{width: 50%}
    .d7-xs{width: 58.33333333%}
    .d8-xs{width: 66.66666667%}
    .d9-xs{width: 75%}
    .d10-xs{width: 83.33333333%}
    .d11-xs{width: 91.66666667%}
    .d12-xs{width: 100%}
  }
  
  #splash {
      position: fixed;
      top: 0;
      z-index: 10000000000000000000!important;
      width: 100%;
      height: 100%;
      background: white;
  }
  
  .imgTR {
      width: 180px;
      position: absolute;
      top: 0;
      right: 0;
  }
  
  .imgBL {
      width: 180px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  
  #splash ._logo {
      width: 100px;
      margin: auto;
      display: block;
      margin-top: 10px;
  }
  
  #splash .whitePoly {}
  
  #splash .imgAyuntamiento {
      width: 150px;
      left: 0;
      right: 0;
      bottom: 60px;
      position: absolute;
      margin: auto;
      transition: opacity, transform, .3s ease;
      transform: translateY(30px);
      opacity: 0;
  }
  
  #splash>div>div {}
  
  #splash .centerGrid {
      max-width: 330px;
      height: 250px;
      position: absolute;
      top: 58%;
      transform: translateY(-50%);
      left: 0;
      right: 0;
      padding: 40px 5px;
      margin: auto;
      transition: opacity .3s ease;
      opacity: 0;
      width: 100%;
  }
  
  #splash .gray {
      position: absolute;
      width: 70%;
      height: 3px;
      background: #dedede;
      top: 165px;
      overflow: hidden;
      border: 2px solid #dedede;
      left: 0;
      right: 0;
      margin: auto;
  }
  
  #splash .green {
      width: 0%;
      transition: width 4s ease;
      height: 4px;
      background: #da0000;
      position: absolute;
      left: 0;
      top: 0px;
  }
  
  #splash .whitePoly {
      position: fixed;
      width: 500vw;
      height: 500vh;
      z-index: 100000000000;
      top: 0;
      left: 0;
      transition: opacity .3s ease;
      opacity: 1;
      background: white;
  }
  
  
  
  
  
  #dialog{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000000000000;
      display: none;
      overflow: hidden;
      padding: 0px;
  }
  #dialog .dialog{
      width: 100%;
      margin: auto;
      height: auto;
      transform: translateY(110vh);
      transition: opacity, transform, .5s ease;
      border-radius: 0;
      overflow: hidden;
      background: #f1f1f1;
      max-width: 500px;
      z-index: 2;
      position: absolute;
      top: 0px;
      opacity: 0;
      display: none;
      left: 0;
      transform-origin: center;
      right: 0px;
      margin-top: 9px;
  }
  #dialog .dialog .header{
      width: 100%;
      height: 75px;
      background: white;
      border-bottom: 4px solid #d9d9d9;
  }
  .btnHeadrGradient{
      background: linear-gradient( 134deg ,#35b6e6,#156b9d)!important; color: white; padding: 15px;
  }
  .btnHeadrBlack{
      background:black!important; color: white; padding: 15px;
  }
  #dialog .cap{
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      top:0;
      left: 0;
      background: rgb(0 0 0 / 50%);
      transition: opacity,background, .3s ease;
      opacity: 0;
  }
  
  
  .form-dialog{}
  .form-dialog input:not(*[type="checkbox"]), .form-dialog select{
      all: unset;
      width: 100%;
      text-indent: 10px;
      text-align: left;
      font-size: 16px;
      padding: 8px 0px;
      font-family: 'f3';
      text-transform: uppercase;
      color: black;
      position: relative;
      top: 15px;
      padding-bottom: 0px;
      z-index: 2;
  }
  
  .formInputs{
    max-height: calc(100vh - 170px);
    overflow-y: auto;
  }
  .formInputs > .d12:first-child{margin:0;}
  .formInputs > .d12{
      margin-top: 20px!important;
  }
  
  .formInputs > .d12>.d12 i.icon-chevron-down,
  .formInputs > .d12>.d12 i.icon-loader{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      font-size: 16pt;
  }
  .formInputs > .d12>.d12 i.icon-loader{
      display: none;
      color: #717171;
      animation: loader .5s infinite;
  }
  @keyframes loader{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
  }
  .formInputs > .d12>.d12 {
      background: white;
      overflow: hidden;
      position: relative;
      border: 1px solid #d0d0d0;
      border-radius: 5pt;
      box-shadow: 0px 5px 15px -5px rgb(0 0 0 / 20%);
  }
  .btnSm{
    font-size: 16px!important;
    width: 180px!important;
    height: 50px!important;
    float: right!important;
  }
  .btnSmCancel{
    width: 100px!important;
    padding: 10px!important;
    float: left!important;
    margin-right: 10px!important;
    height: 27px!important;
    padding-top: 18px!important;
  }
  
  
  table{
      background: white;
      width: 100%;
      border-spacing: 0px;
      overflow: auto;
  }
  table tbody{}
  table thead{}
  table tr{
  }
  th {
    background-color: black;
    color: white;
    font-size: 12px;
  }
  tr:hover {background-color: #f5f5f5;}
  tr:nth-child(even) {background-color: #f2f2f2;}
  table td{text-align: left;padding: 15px 8px;min-width: 90px;}
  table th{
      text-align: left;
      padding: 5px 8px;
  }
  
  .loader{
      width: 100%;
      height: 4px;
      background: black;
      overflow: hidden;
  }
  .loader div{
      width: 20px;
      background: white;
      height: 5px;
      display: block;
      margin:auto;
      /*transition: transform 1s ease;*/
      animation-duration: 1.5s;
      animation-name: loading;
      animation-iteration-count: infinite;
  }
  
  @keyframes loading {
    0% {
      transform: translateX(-610%);
    }
  
    50% {
      transform: translateX(610%);
    }
  
    100% {
      transform: translateX(-610%);
    }
  }
  
  .section{width: 100%;display: flex;background: #f7f7f7;flex-direction: column;overflow: hidden;border: 1px solid #d0d0d0;border-radius: 5pt;height: 55px;box-shadow: 0px 6px 6px -5px rgb(0 0 0 / 50%);} .section .main{border-bottom: 1px solid #d0d0d0;padding: 10px;font-family: 'f4';color: #616161;position: relative;cursor: pointer;text-transform: uppercase;background: linear-gradient(0deg, #d0d0d0, #fff);font-size: 18pt;text-align: left;} .subSection{} .subSection .main{padding: 5px;text-transform: uppercase;background: #e5e5e5;font-size: 14px;color: #414141;font-family: 'f3';border: 2px dashed #a1a1a1;}
  .section .main>i{
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20pt;
  }
  
  
  .inputF{
      display: flex;
      flex-direction: column;
      position: relative;
  }
  .iconsito{
      position: absolute;
      bottom: 11px;
      right: 12px;
      font-size: 19px;
      color: #515151;
  }
                              .inputF>span{
      text-align: left;
      padding-left: 5px;
      padding-top: 10px;
      font-size: 14px;
      font-family: 'f3';
      color: #616161;
      text-transform: uppercase;
      position: absolute;
      font-size: 12px;
      top: -7px;
      left: 5px;
      line-height: 12px;
  }
                              .inputF>div{
      border-top: 1px solid #d0d0d0;
      border-bottom: 1px solid #d0d0d0;
      box-shadow: 0px 5px 15px -5px rgb(0 0 0 / 20%);
      background: white;
      height: 50px;
  }
                              .inputF>div>input{}