body
	{
		    font-family:Arial, Helvetica, sans-serif;
	}
    @charset "UTF-8";
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  height: auto;
  /* AGREGADO: ISMAEL PROYECTO CESPM */
  overflow: auto;
  /* AGREGADO: ISMAEL PROYECTO CESPM */
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  height: auto;
  overflow: auto;
}

    div.azul {
  background: url(../imagenes/fondo-azul.jpg) center center #888B8D;
  background-size: cover;
  padding: 15px;
}

    #encabezado
    {
		    background-color: #F1F2F3;
		    background-image: -moz-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    background-image: -o-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    background-image: -webkit-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    background-image: linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    height: 80px;
		    box-sizing: border-box;
		    position: fixed;
		    top: 0px;
		    left: 0px;
		    right: 0px;
		    z-index: 2;
		    padding-left: 20px;
    }


    menu
    {
            margin: 1em 0;
            padding: 0 0 0 40px;
    }

    .menu {
          background-color: #F1F2F3;
          background-image: -moz-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
          background-image: -o-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
          background-image: -webkit-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
          background-image: -ms-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
          background-image: linear-gradient(#F3F4F5, #FFF, #F1F2F3);
          height: 64px;
          box-sizing: border-box;
          position: fixed;
          top: 0px;
          left: 0px;
          right: 0px;
          z-index: 2;
          padding-left: 20px;
    }

    .menu .logo {
  width: 50px;
  height: 50px;
  margin: 5px;
}
.menu a {
  font-family: "Frutiger";
  color: #565759;
  text-decoration: none;
  cursor: pointer;
}
.menu #mobile-btn {
  display: none;
}
.menu nav {
  display: inline-block;
  position: absolute;
  right: 25px;
  top: 7px;
}
.menu nav a:hover:not(.btn), .menu nav a.indicador {
  color: #4089C8;
}


/*@media screen and (max-width: 1150px) {
  .menu #mobile-btn {
    background-image: url(../imagenes/icon-menu.svg);
    background-position: center center;
    background-size: cover;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    height: 44px;
    width: 44px;
    overflow: hidden;
    text-indent: -999px;
  }
  .menu .active + .menu-logged {
    display: block;
  }
  .menu .dropped {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: static;
    display: none;
    width: 100%;
  }
  .menu .active + .dropped {
    display: block;
  }*/


.menu .menu-logged > a, .menu .drop-content {
  color: #565759;
  display: inline-block;
  font-size: 18px;
  padding: 0 20px;
  border-right: 1px solid #DDD;
}
.menu #pago-en-linea {
  color: white;
  background-color: #F95203;
}
.menu nav > a.btn {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  border: none;
  font-size: 18px;
  padding: 12px 20px;
  margin: 0 5px;
  font-family: "Frutiger", sans-serif;
}
   
    .menu-logged
    {
		    display:block;
		    margin-top:10px;
    }
   .menu-logged > a, .menu-logged > ImageButton
    {
		    display:block;
		    float:right;  
		    color: #565759;
		    display: inline-block;
		    font-size: 18px;
		    padding: 0 20px;
		    border-right: 1px solid #DDD;
		    font-size:12px;
		    top:25px;
    }

  

   .menu #pago-en-linea {
      color: white;
      background-color: #F95203;
    }

   #menu-titulo 
    {
            display:block;
            float:left;
            width:30%;
            height:30%; 
            margin-top:0px;
            
    }
 /*
    #menu-help 
    {
            display:block;
            float:left;
            width:15%;
            margin-top:10px;
            
    }

    #menu-return 
    {
            display:block;
            float:right;
            width:20%;
            margin-top:0;
            
    }*/

    .menu .social 
    {
      display: initial;
    }

    .menu .social a 
    {
      display: initial;
      border: none;
      margin: 10px;
      padding: 0px;
    }

    .menu .social #img_help 
    {
      height: 45px;
      margin: 0px;
      padding: 0px;
    }

    .titulo
    {
            /*font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            color:#ddd;
            font-size:20%;*/
            float:left;
            display:block;
            width:100%;
            height:30%;        
            max-width:412px;
            min-height:63px;
    }

 
    button.btn, a.button, a.btn, div.btn-multilinea, a[id^="LinkButton"], a[id*=" LinkButton"], [id^="Button"], [id*=" Button"] {
		    -webkit-border-radius: 5px;
		    -moz-border-radius: 5px;
		    border-radius: 5px;
		    background-color: #FAB317;
		    padding: 9px 30px;
		    border: none;
		    color: #565759;
		    margin: 5px;
    }

    button.btn:hover, a.button:hover, a.btn:hover, div.btn-multilinea:hover, a[id^="LinkButton"]:hover, a[id*=" LinkButton"]:hover, [id^="Button"]:hover, [id*=" Button"]:hover {
		    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
		    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
		    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
		    -webkit-transition: all 0.5s ease;
		    -moz-transition: all 0.5s ease;
		    -o-transition: all 0.5s ease;
		    transition: all 0.5s ease;
		    cursor: pointer;
    }

    button.btn:active, a.button:active, a.btn:active, div.btn-multilinea:active, a[id^="LinkButton"]:active, a[id*=" LinkButton"]:active, [id^="Button"]:active, [id*=" Button"]:active 
    {
		    -webkit-box-shadow: 0px 0px 0px transparent;
		    -moz-box-shadow: 0px 0px 0px transparent;
		    box-shadow: 0px 0px 0px transparent;
		    cursor: pointer;
    }
    .spacer 
    {
		    width: 100%;
		    height: 64px;
		    display: block;
    }

    .contenido
    {
		    margin-right: auto;
		    margin-left: auto;
		    padding-left: 15px;
		    padding-right: 15px;
		    height: auto;
		    /*overflow: auto;	*/
    }

    @media (min-width: 768px) {
          .contenido {
            width: 750px;
      }
    }
    @media (min-width: 992px) {
          .contenido {
            width: 970px;
      }
    }
    @media (min-width: 1200px) {
          .contenido {
            width: 1170px;
      }
    }

    .azul 
    {
            background: url(../imagenes/fondo-azul.jpg) center center #4089C8;
            background-size: cover;
            padding: 15px;
            height:100%;
            width:100%;
    }

    .row {
            margin-left: -15px;
            margin-right: -15px;
    }

    .file-upload 
    {
            display: inline-block;
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
            font-family: Arial;
            border: 1px solid #124d77;
            background: #007dc1;
            color: #fff;
            border-radius: 6px;
            -moz-border-radius: 6px;
            cursor: pointer;
            text-shadow: #000 1px 1px 2px;
            -webkit-border-radius: 6px;
    }

    .file-upload:hover 
    {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
            background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
            background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
            background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
            background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
            background-color: #0061a7;
    }

    .titulo
    {
            position: relative;
            font-size:14px;
            color:#565759;
    }

    .det
    {
            position: relative;
            font-size:14px;
            color:#FFF;
    }

    #txt_uuid 
    {
            position: relative;
            font-size:14px;
            color:#FFF;
            width:50%;
            border:0;
            background-color:transparent;
            border-style: none;

    }

    #contenido-central 
    {
            position: relative;
            float: left;
            width: 100%;
            height:620px;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom:15px;        
            opacity: 20;
            filter: alpha(opacity=20);
    }

   .lado-izq
    {
            position: relative;
            float: left;
            display:block;
            width: 20%;
            height:18px;
            color:#6abde8;
            text-align:center;
            padding:3px;
            margin-bottom:3px;
            margin-left:15%;
            background-color:gainsboro;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
    }

    .lado-der
    {
            position: relative;
            float: left;
            display:block;
            width: 45%;
            height:18px;
            background-color:rgba(0, 0, 0, 0.3);
            padding:3px;
            margin-bottom:3px;
            margin-left:1%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            text-align:center;
            border:1px solid #a1a8a9;
           
    }

    .lado-der-selarc
    {
            position: relative;
            float: left;
            display:block;
            width: 45%;
            height:22px;
            background-color:rgba(0, 0, 0, 0.3);
            padding:3px;
            margin-bottom:3px;
            margin-left:1%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            text-align:center;
            border:1px solid #a1a8a9;
           
    }

    .lado-izq-sinfondo
    {
            position: relative;
            float: left;
            display:block;
            width: 20%;
            height:40px;
            color:#fff;
            text-align:center;
            padding:3px;
            margin-bottom:3px;
             -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
    }

    .lado-der-sinfondo
    {
            position: relative;
            float: left;
            display:block;
            width: 60%;
            height:40px;
            padding:3px;
            text-align:right;
            margin-bottom:3px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
    }

    .lado-der-alto
    {
            position: relative;
            float: left;
            display:block;
            width: 45%;
            height:60px;
            background-color:rgba(0, 0, 0, 0.3);
            padding:3px;
            margin-bottom:3px;
            margin-left:1%;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            text-align:justify;
            border:1px solid #a1a8a9;
            overflow-y:auto;
            font-size:11px;
    }


    #piepag
    {
		    text-align: center;
		    background-color: #F1F2F3;
		    background-image: -moz-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    background-image: -o-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    background-image: -webkit-linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    background-image: linear-gradient(#F3F4F5, #FFF, #F1F2F3);
		    height: 90px;
		    box-sizing: border-box;

		    bottom: 0px;
		    left: 0px;
		    right: 0px;
		    z-index: 2;
		    padding-left: 20px;	
		    font-size:15px;
		    color:#aaa;
    }

    #piepag #logo_cespm img {
		    width: 100%;
		    display: inline-block;
		    max-width: 200px;		
    }


    .popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 460px;
  background-color: #bb9f66;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}