*{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        /* background-color: white; */
      }
    
      :root{
          --rojo-claro : #EF3829; 
          --rojo-claro-bajo: #F65041;
          --rojo-claro-alto: #DA291C;
          --turquesa-claro: #1097AE;
          --negro:#000000;
          --negro-medio: #222222;
          --negro-bajo: #444444;
          --gris-medio: #666666;
          --gris-alto: #888888;
          --gris-container: #F4F4F4;
          --gris-container-border: #DBDBDB;
      }
      
      #page-wrapper {
         /* max-width: 960px; */
         margin: auto;
         display: flex;    
         flex-direction: column;
     }

     @font-face {
      font-family: 'Roboto';
      src: url('../fonts/Roboto-Regular.ttf') format('truetype');
     }
     
      html,
      body,
      #page-wrapper{
          font-size: 62.5%;
          height: 100%;
      }
    
      header{
         position: relative;
         display: flex;
         flex-direction: row;
         width: 100%;
         min-width: 320px;
         height: auto;
         background-color: var(--rojo-claro);
         justify-content: space-between;
         height: 54px;
         /* aling-item: center;   */
      }

      #backgroundImgForm {
         background-image: url('../image/fondo-blanco-azul.svg'); /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta a tu imagen */
         background-size: cover;
         background-position: center;
         width: 100%;
         height: 100%;
         position: fixed;
         top: 0;
         left: 0;
         z-index: -100;
     }

      header img{
         align-self: center;
         background-color: var(--rojo-claro);
         height: 23.92px;
         padding-left: 14px
      }
      
      header span{
         align-self: center;
         background-color: var(--rojo-claro);
         padding-right: 14px;
         color: var(--rojo-claro);
      }

      .content-app{
         width: 100%;
         position: relative;
         display: flex;
         flex-direction: row;
         justify-content: center;
         text-align:center;   
      }

      
      .content-app--content-img-phono{
         visibility: hidden ;
         width: 0px;   
     }


      .paso-content-app{
         width: 100%;
         position: relative;
         display: flex;
         flex-direction: row;
         justify-content: center;
         text-align:center;   
      }

      .prueba{
         height: 50px;
         width: 100px;
         background-color: green;
      }

      .container-succes{
         align-items: center; 
         display: flex; 
         height: 100%;
     }

      .paso-content-app--container{
         background-color: var(--gris-container);
         border: solid var(--gris-container-border);
         border-radius: 18px;
         margin: 20px auto;
         padding: 20px 20px;
         width: 90%;
         position: relative;
         display: flex;
         flex-direction: column;
         justify-content: center;
         text-align:center;
         
      }

      .paso-content-app--container--phono{
        height: 190px;
        align-self: center;
      }

      .paso-content-app--container--logo{
        height: 55px;
        margin: 9px 0px;
      }

      .paso-content-app--container--logosucces{
         height: 40px;
         margin-bottom: 4px;
      }

      .paso-content-app--container--step{
         height: 50px;
         margin: 6px 0px;
      }

      .paso-content-app p{
         margin-bottom: 30px;
         align-self: center;
         font-size: 2.2rem;
         font-family: 'Roboto', sans-serif;
         font-weight: 300;
         color: var(--negro-bajo);
         text-align: center;                
 }

   
      label {
         display: block;
         text-align: left;
         font-size: 1.8rem;
         font-weight: 600;
      }

      .text-info-succes {
         font-size: 1.5rem;
     }

     .col-ancho{
      height: 50%;
      width: 60%;
      padding-right: 0;
      padding-left: 0;
  }

      select,
      input,
      input::placeholder {
         height: 50px !important;
         border-radius: 10px !important;
         /* font-size: 2.4rem !important; */
      }

      .form-control {
         font-size: 1.8rem !important;
      }


      .btn-go-back-home{
        
         width: 80% !important;
         height: 58px;
         background: transparent;
         border: 2px solid var(--rojo-claro);
         border-radius: 30px;
         font-size: 1.4rem;
         color: var(--rojo-claro);
         text-align: center;
         align-items: center;
         font-weight: 700; 
      }

      .btn-enviar-new:focus,
     .btn-go-back-home:focus,
      .btn-enviar-new:active,
     .btn-go-back-home:active,
      .bootstrap-select .dropdown-menu.inner li>a:focus {
         outline: none !important;
         box-shadow: none !important;
      }

      .btn-enviar-new {
         background-color: #EF3829;
         color: #FFFFFF;
         text-align: center!important;
         width: 80% !important;
         font-size: 1.4rem;
         font-weight: bold;
         /* padding: 1.25rem; */
         border: 0 solid;
         border-radius: 30px;
         height: 58px;
        
      }

  /* Popup Confirm */
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: calc(60vh /2); /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    
      /* Modal Content */
    .modal-content {
      display: flex;	
      flex-direction: column;
      background-color: #fefefe;
      margin: auto;
      padding: 0px;
      border: 1px solid #888;
      width: 80%;
      max-width: 320px;
    
       border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
    }
    
    .modal-content--title {
      display: flex;	
      flex-direction: row;
      justify-content: center;
      background-color: #fefefe;
      margin: 0 auto;
      width: 100%;
      height: 60px;
      margin-top: 36px;

    }
   
    
    .modal-content--body{
      margin-top: 5px;
      text-align: center;
      font-family: 'Roboto',  sans-serif;;
      font-style: normal;
    }

    .modal-content--body-title{
      
      font-weight: 500;
      font-size: 2.0rem;
      line-height: 19px;
      color: var(--gris-oscuro);
      margin: 10px;
      font-family: 'Roboto',  sans-serif; ;
    }

    .modal-content--body-subtitle{
      font-weight: 400;
      font-size: 1.4rem;
      line-height: 19px;
      color: var(--turquesa-claro);
      margin: 0 25px;
      text-align: center;
    }
    
    .modal-content--footer{
        margin: 20px;
        text-align: center;
    }

    .btn-modal-continue {
      background-color: #EF3829;
      color: #FFFFFF;
      text-align: center!important;
      width: 70% !important;
      font-size: 1.6rem;
      font-weight: 500;
      border: 0 solid;
      border-radius: 30px;
      height: 24px;
      font-size: 1.2rem;
   }
    
    
    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .modal-content span {
      margin-left: calc(50% - 73px);
      margin-right: -5px;
      align-self: center;
      font-size: 3.6rem;
      background-color: var(--rojo-claro);
      color: #FFFFFF;
      opacity: 1;
      font-weight: 100;
    }
    
    
    .close:hover,
    .close:focus {
      text-decoration: none;
      cursor: pointer;
    }
    /* FIN Popup Confirm */
  
    
    /* View Confirm */
    .body--app {
      height: 70vh;
      max-height: 900px;
    }
    .content--app{
      display: flex;
      flex-direction: row  ;
      width: 100%;
      height: 100%;
      min-width: 320px;
      justify-content: center;
      /* aling-item: center;   */
      align-content: center;
      }

      .btn-aceptar-app {
         background-color: #EF3829;
         color: #FFFFFF;
         text-align: center!important;
         width: 100%;
         max-width: 320px;
         font-size: 1.6rem;
         font-weight: bold;
         /* padding: 1.25rem; */
         border: 0 solid;
         border-radius: 10px;
         height: 58px;
      }
   #ticket-container {
         background-color: #DA291C;
         width: 100%;
   }
     
 .text-succes-white{
         color: white;
         font-size: 1.2rem;
         margin-bottom: 0;
 }
     
 .text-succes-white-big{
         color: white;
         font-size: 1.4rem;
         margin-bottom: 0;
 }


    /* FIN View Confirm */