@charset "UTF-8";
/* Colores */
/*compensar colores corporativos*/
/*compensar color cuerpo texto corporativo*/
/*colores complementarios*/
/*compensar fuente texto corporativo*/
/*compensar peso fuente corporativo*/
/* max-width*/
/*center-content*/
/*Iconos*/
/* rendition ID heights & widths */
/* Media Queries Bootstrap y personalizadas */
/* font sizes */
/*bordes*/
/*Sombra*/
/*Opacidad*/
/*mixins tipografia*/
/* mixin for multiline */
/* Reset tipografías */
.form-group .control-label .help-text {
  color: #ccc;
  display: inline-block;
  font-size: 12px;
  font-style: italic;
  line-height: 12px;
}

.form-group .compensar-checkbox input[type="checkbox"] {
  margin-left: 0;
}

body,
body p {
  font-family: "Roboto Light", sans-serif;
  color: #777;
  font-size: 14px;
}

a {
  color: #ff6600;
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #666666;
}

h1,
.main h1 {
  font-family: "Roboto Bold", sans-serif;
  font-size: 36px;
  color: #000;
}

h2,
.main h2,
.main h2 nobr {
  font-family: "Roboto Medium", sans-serif;
  font-size: 24px;
  color: #999999;
  margin-bottom: 20px;
  margin-top: 0;
  line-height: normal;
}

h3,
.main h3 {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  color: #000;
  margin-bottom: 10px;
  margin-top: 0;
}

h3.claro,
main h3.claro {
  color: #999999;
}

h4,
.main h4 {
  font-family: "Roboto Medium", sans-serif;
  font-size: 16px;
  color: #000;
  margin-bottom: 10px;
  margin-top: 0;
}

.ms-core-listMenu-verticalBox a,
.ms-core-listMenu-horizontalBox a,
.ms-core-listMenu-verticalBox span,
.ms-core-listMenu-horizontalBox span {
  font-family: "Roboto", sans-serif;
}

/*botones*/

.btn {
  white-space: normal !important;
}
.btn.btn-primary.reset {
  background-color: transparent;
  border: 0px;
  color: #ff6600;
  text-transform: uppercase;
  box-shadow: 0px;
  width: auto;
}

.btn.btn-primary.reset:hover {
  color: #777777;
  background-color: transparent;
  border: 0px;
  box-shadow: 0px;
}

@media screen and (min-width: 992px) {
  .nonSeccion {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  h2,
  .main h2 {
    /*text-align: center;*/
  }
  .nonSeccion {
    display: block;
  }
}

/* Colores */
/*compensar colores corporativos*/
/*compensar color cuerpo texto corporativo*/
/*colores complementarios*/
/*compensar fuente texto corporativo*/
/*compensar peso fuente corporativo*/
/* max-width*/
/*center-content*/
/*Iconos*/
/* rendition ID heights & widths */
/* Media Queries Bootstrap y personalizadas */
/* font sizes */
/*bordes*/
/*Sombra*/
/*Opacidad*/
/*mixins tipografia*/
/* mixin for multiline */
/* Formularios Compensar */
.form-control {
  border: 1px solid #ccc;
  /*  border-radius: 7px; */
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);
  height: auto;
  padding: 5px 10px !important;
  color: #333;
}
.form-control:focus {
  border-color: #ff6600;
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.5);
  background: #fcf8e2;
}

.has-error .form-control,
.default-error-field-class {
  color: #bb4945 !important;
  background-color: #f2dede !important;
  border: 1px solid #efd3d7 !important;
}

.has-error .input-group-addon {
  border-color: #efd3d7;
}

.has-error .error-message {
  color: #bb4945;
  display: none;
  margin-top: 5px;
}

.has-error .error,
.default-error-message-class {
  color: #bb4945;
}

.has-error p.error,
.default-error-message-class {
  margin-top: 5px;
}

.control-label {
  color: #000;
  font-weight: normal;
}

.input-group .form-control {
  z-index: 0;
}

.input-group-addon {
  /* border-radius: 7px; */
  padding: 6px 15px;
  font-size: 20px;
  color: #666666;
}
.input-group-addon i {
  color: #ccc;
}

.btn.btn-default {
  color: #fff;
  background-color: #ff6600;
  border-color: transparent;
  padding: 10px;
  text-align: center;
  border: 0 solid;
  /*  border-radius: 7px; */
  font-weight: normal;
}
.btn.btn-default:hover {
  background: #777;
  color: #fff;
  cursor: pointer;
}

.btn.btn-primary {
  color: #ff6600;
  background-color: #fff;
  border-color: #ff6600;
  padding: 5px 10px;
  text-align: center;
  border: 1px solid;
  /* border-radius: 7px; */
  font-weight: normal;
}
.btn.btn-primary:hover {
  background: #ff944d;
  color: #fff;
  cursor: pointer;
  border-color: #ff944d;
}

.btn.btn-link {
  text-transform: uppercase;
  color: #ff6600;
  background-color: transparent;
  border-color: transparent;
  padding: 5px 10px;
  text-align: center;
  border: 1px none;
  /* border-radius: 7px; */
  font-weight: normal;
}
.btn.btn-link i {
  margin-right: 10px;
}
.btn.btn-link:hover {
  background: transparent;
  color: #666;
  cursor: pointer;
  text-decoration: none;
}
.no_padding {
  padding: 0px;
}

/* Popovers Compensar */
.acerca {
  color: #ff8533;
  cursor: pointer;
  font-weight: bold;
  margin: 10px 0;
}
.acerca i {
  margin-right: 5px;
}

.help {
  color: #ff8533;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  padding-top: 5px;
}

.popover {
  z-index: 4;
}

.popover .popover-title-container {
  position: relative;
}

.popover .popover-title-container .popover-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ff8533;
  cursor: pointer;
}

.popover .popover-title {
  background-color: #ffffff;
  border-bottom: 0;
  color: #777777;
  font-size: 16px;
  padding: 8px 28px 8px 14px;
  word-wrap: break-word;
}

.popover .popover-content {
  font-size: 12px;
  word-wrap: break-word;
}

/* Colores */
/*compensar colores corporativos*/
/*compensar color cuerpo texto corporativo*/
/*colores complementarios*/
/*compensar fuente texto corporativo*/
/*compensar peso fuente corporativo*/
/* max-width*/
/*center-content*/
/*Iconos*/
/* rendition ID heights & widths */
/* Media Queries Bootstrap y personalizadas */
/* font sizes */
/*bordes*/
/*Sombra*/
/*Opacidad*/
/*mixins tipografia*/
/* mixin for multiline */
/* Componente para imagen, link y titulo
 
<div class="moduloGeneral">
   <h2>Deportes para ti</h2><a href="#"><img src="images/sampleNoticia01.jpg"></a>
   <p>Cursos vacacionales de fútbol, niños de 10 a 15 años, inluye mini torneo</p>
</div>
 
*/
.moduloGeneral a {
  display: block;
}
.moduloGeneral a img {
  width: 100%;
  display: block;
}

.moduloGeneral p,
.moduloGeneral h4,
.moduloGeneral h2 {
  display: block;
}

/* Componente card Compensar
 
<div class="card">
   <div class="headerCard">
       <div class="textoContainer pull-left">
           <h4>Escolaridad</h4>
           <p>Presentar certificado de escolaridad</p>
       </div>
       <div class="iconoContainer pull-right">
           <div class="icono"><i class="fa fa-file-text"></i></div>
       </div>
       <div class="clearfix"></div>
   </div>
   <div class="bodyCard">
       <ul class="datosProducto">                       
           <li>
               <div class="dato icono"><i class="fa fa-user"></i></div>
               <div class="dato"><span>Daniel Camilo Ansola González</span><span><b>Tipo: </b><span>Beneficiaro</span></span><span><b>Alquiler valor: </b><span>$35.000</span></span></div>
           </li>
       </ul>
   </div>
   <div class="footerCard text-center">
       <button class="btn btn-link"><i class="fa fa-pencil"></i><span>Editar</span></button>
   </div>
</div>
 
*/
.card {
  padding: 0 15px;
}
.card .headerCard {
  vertical-align: top;
  border: 1px solid #e5e5e5;
  background: #f0f0f0;
  padding: 15px;
  border-radius: 7px 7px 0 0;
}
.card .headerCard .textoContainer {
  width: 60%;
}
.card .headerCard .icono {
  margin-left: 10px;
  background: #81ba00;
  width: 44px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  padding: 4px;
}
.card .headerCard .icono::before {
  font-size: 24px;
  font-family: FontAwesome;
}
.card .headerCard .icono.citamedica::before {
  content: "";
}
.card .headerCard .icono.turismo::before {
  content: "";
}
.card .headerCard .icono.cursospracticas::before {
  content: "";
}
.card .headerCard .icono.certificadodeescolaridad::before {
  content: "";
}
.card .headerCard h4 {
  font-size: 14px;
  color: #4c4c4c;
  line-height: 18px;
  margin: 0 0 5px;
}
.card .headerCard p {
  margin: 0;
  font-family: "Roboto Bold", sans-serif;
}
.card .bodyCard {
  vertical-align: top;
  padding-bottom: 20px;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 15px;
}
.card .bodyCard h3 {
  margin: 10px 0;
  font-size: 16px;
}
.card .bodyCard ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #666666;
}
.card .bodyCard ul li {
  margin-bottom: 3px;
}
.card .bodyCard ul li:last-child {
  margin-bottom: 0;
}
.card .bodyCard ul li b {
  color: #333333;
}
.card .bodyCard ul li i {
  font-size: 16px;
  padding-right: 15px;
  text-align: center;
  width: 36px;
}
.card .bodyCard ul.datosProducto li {
  margin-bottom: 20px;
  display: table;
  width: 100%;
}
.card .bodyCard ul.datosProducto li .dato {
  display: table-cell;
  vertical-align: top;
}
.card .bodyCard ul.datosProducto li .dato.icono {
  width: 36px;
}
.card .bodyCard ul.datosProducto li .dato span {
  display: block;
  margin-bottom: 3px;
}
.card .bodyCard ul.datosProducto li .dato span span {
  display: inline-block;
  margin-bottom: 0;
}
.card .footerCard {
  padding: 15px;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.card .footerCard .btn.btn-link {
  padding: 0;
  margin-right: 20px;
  font-size: 12px;
  font-family: "Roboto Medium", sans-serif;
  padding-bottom: 0;
}
.card .footerCard .btn.btn-link:last-child {
  margin-right: 0;
}

@media screen and (max-width: 770px) {
  .card {
    margin-bottom: 20px;
  }
  .card:last-child {
    margin-bottom: 0;
  }
}

/* Acordeon Compensar
 
<div class="acordeon">
   <div class="headerAcordeon active">
       <a href="#">
           <span class="col-xs-12">
               <h3>Septiembre</h3>
           <span>
       </a>
   </div>
   <div class="bodyAcordeon">
       <div class="contenidoAcordeon">
       ...
   </div>
</div>
 
*/
.acordeon {
  margin-bottom: 20px;
  float: left;
  width: 100%;
  /*Body Acordeon*/
}
.acordeon .headerAcordeon {
  float: left;
  width: 100%;
  position: relative;
}
.acordeon .headerAcordeon a {
  border-bottom: 1px dashed #e5e5e5;
  padding: 16px 0px;
  position: relative;
  float: left;
  width: 100%;
}
.acordeon .headerAcordeon a h3 {
  color: #333333;
  padding: 0px;
  margin: 0px;
  font-size: 24px;
}
.acordeon .headerAcordeon a:before {
  color: #333;
  font-family: "FontAwesome";
  content: "";
  font-size: 22px;
  position: absolute;
  right: 15px;
  top: 13px;
}
.acordeon .headerAcordeon a:hover h3,
.acordeon.abre .headerAcordeon a h3 {
  color: #ff6600;
}
.acordeon .headerAcordeon a:hover:before,
.acordeon .headerAcordeon a:focus:before {
  content: "";
  color: #ff6600;
}
.acordeon .headerAcordeon.active a {
  border-bottom: none;
}
.acordeon .headerAcordeon.active a h3 {
  color: #ff6600;
}
.acordeon .headerAcordeon.active a:before {
  color: #ff6600;
  content: "";
  border-bottom-style: none;
}
.acordeon .bodyAcordeon {
  background-color: white;
  min-height: 80px;
  position: relative;
  float: left;
  width: 100%;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.acordeon .bodyAcordeon:after,
.acordeon .bodyAcordeon:before {
  width: 100%;
  position: absolute;
  height: 30px;
  content: "";
}
.acordeon .bodyAcordeon:before {
  -webkit-box-shadow: inset 2px 21px 62px -24px #cccccc;
  box-shadow: inset 2px 21px 62px -24px #cccccc;
}
.acordeon .bodyAcordeon:after {
  bottom: 0;
  -webkit-box-shadow: inset 2px -21px 62px -24px #cccccc;
  box-shadow: inset 2px -21px 62px -24px #cccccc;
}
.acordeon .bodyAcordeon .contenidoAcordeon {
  padding: 30px 15px;
  min-height: 100px;
  overflow: hidden;
}

@media screen and (max-width: 770px) {
  .acordeon .headerAcordeon a:before {
    top: 30%;
  }
}

/* Notificiacion Compensar
 
<span class="notificacion">3</span>
 
*/
span.notificacion {
  color: #ff6600;
  font-weight: bold;
  border: 1px solid;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 8px;
  position: absolute;
  text-align: center;
  min-width: 25px;
  top: 0;
  right: 0;
  background: #fff;
}

html {
  height: 100%;
}

body {
  position: relative;
  padding-left: 0%;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

@-moz-document url-prefix() {
  body {
    overflow: auto;
  }
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#ms-designer-ribbon * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.none {
  display: none;
}
@media all and (-ms-high-contrast: none) {
  body > form #s4-workspace.noRibbonExist {
    overflow: auto !important;
  } /* IE10 */
  *::-ms-backdrop,
  body > form #s4-workspace.noRibbonExist {
    overflow: auto !important;
  } /* IE11 */
}

@media only screen and (min-width: 770px) {
  .nonDesktop {
    display: none;
  }
  body > form {
    overflow: hidden;
  }
  body > form #s4-workspace {
    left: 0%;
  }
  body > form #s4-workspace.noRibbonExist {
    overflow: hidden;
  }
}

@media only screen and (max-width: 770px) {
  body {
    overflow: auto;
  }
  .nonDesktop {
    display: block;
  }
  .nonMobil {
    display: none;
  }
}

/* MARGIN HELPER CLASSES */
.mt-0 {
  margin-top: 0 !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.ml-l0 {
  margin-left: 0 !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px !important;
}

.ml-15 {
  margin-left: 15px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

@media screen and (max-width: 770px) {
  body .ms-core-suiteLinkList {
    display: none;
  }
  body .main::after {
    content: "";
    display: block;
    background: #333;
    z-index: -90;
    right: 0;
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  body .menu__interno {
    position: fixed;
    z-index: 2;
    width: 70%;
    left: -70%;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
    height: -moz-calc(100% - (128px));
    height: -webkit-calc(100% - (128px));
    height: calc(100% - (128px));
    top: 128px;
  }

  body .menu__interno.ribbonExist {
    height: -moz-calc(100% - (193px));
    height: -webkit-calc(100% - (193px));
    height: calc(100% - (193px));
    top: 193px;
  }
  body.menuLateral {
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body.menuLateral #s4-workspace {
    overflow-x: hidden;
    overflow-y: hidden;
  }
  body.menuLateral .menu__interno {
    left: 0%;
    padding-bottom: 0;
  }
  body.menuLateral .secciones {
    color: #ff6600;
  }
  body.menuLateral .secciones::before {
    content: "\f056";
  }
  body.menuLateral .main::after {
    z-index: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
  }
  body.menuLateral .main .mainIzquierda,
  body.menuLateral .main .mainDerecha {
    left: 70%;
  }
  body.menuLateral footer {
    left: 70%;
  }
  body .main::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #333333;
    z-index: -90;
    top: 128px;
    right: 0px;
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  body .main .mainIzquierda,
  body .main .mainDerecha {
    left: 0%;
    position: relative;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  body footer {
    left: 0%;
    position: relative;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  body .menu__interno__content {
    height: -moz-calc(100% - (60px));
    height: -webkit-calc(100% - (60px));
    height: calc(100% - (60px));
    display: block;
    overflow-y: auto;
  }
}