@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Viga&display=swap");
body {
  font-family: "Roboto", sans-serif;
  background-color: #333333; }

.centrar-img, .top .centrar-img.capacitacion {
  overflow: hidden;
  position: relative; }
  .centrar-img img, .top .centrar-img.capacitacion img, .centrar-img svg, .top .centrar-img.capacitacion svg {
    position: absolute;
    left: -5000px;
    right: -5000px;
    top: -5000px;
    bottom: -5000px;
    margin: auto; }

.top {
  background: linear-gradient(to right, #ffffff 17%, #383838 100%, #383838 100%); }
  .top .centrar-img, .top .centrar-img.capacitacion {
    height: 75px;
    width: 150px; }
    .top .centrar-img img, .top .centrar-img.capacitacion img {
      max-height: 100%; }
  .top .capacitacion.centrar-img {
    width: 170px; }
  .top .banda-color {
    height: 20px;
    background-color: #4ebf50; }

.main {
  background-color: #fff;
  min-height: 600px; }
  .main .left {
    padding-left: 0;
    padding-right: 0; }
  .main .logout {
    text-align: left;
    font-family: "Viga", sans-serif;
    font-size: 13px;
    line-height: 15px;
    color: #333333;
    display: block;
    margin: 11px;
    margin-left: 60px; }
    .main .logout img {
      margin-right: 10px;
      width: 25px; }
  .main .logout:hover {
    text-decoration: none; }
  .main nav button.navbar-toggler {
    top: 10px;
    position: absolute;
    left: 15px;
    padding: 0;
    border-radius: 0; }
    .main nav button.navbar-toggler .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(78, 191, 80, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>"); }
  .main nav button.navbar-toggler:focus {
    outline: none; }
  .main .botonera {
    background-color: #333333;
    border-radius: 0;
    border-bottom: 5px solid #4ebf50;
    width: 100%; }
    .main .botonera .card {
      border-radius: 0;
      background-color: transparent;
      border: 0; }
      .main .botonera .card button {
        background-color: transparent;
        border: none;
        text-align: left;
        display: flex;
        padding: 0; }
        .main .botonera .card button .contenedor-icono {
          width: 45px;
          height: 40px;
          margin: 3px 12px 3px 6px; }
          .main .botonera .card button .contenedor-icono svg {
            max-width: 28px; }
        .main .botonera .card button .contenedor-titulo {
          border-bottom: 1px solid #707070;
          height: 46px;
          width: 100%;
          display: flex; }
        .main .botonera .card button span {
          color: #fff;
          font-family: "Viga", sans-serif;
          font-size: 14px;
          line-height: 15px; }
      .main .botonera .card button:focus {
        outline: none; }
      .main .botonera .card button[aria-expanded="true"] {
        background-color: #969595; }
        .main .botonera .card button[aria-expanded="true"] .contenedor-titulo {
          border: none; }
      .main .botonera .card button.active path {
        fill: #4ebf50; }
      .main .botonera .card button.active span {
        color: #4ebf50; }
      .main .botonera .card .collapsable {
        background-color: #fff; }
        .main .botonera .card .collapsable a {
          color: #565656;
          text-align: left;
          font-size: 12.5px;
          letter-spacing: 0.2px;
          display: block;
          padding: 5px 5px 5px 15px;
          font-family: "Viga", sans-serif; }
        .main .botonera .card .collapsable a.destacado {
          border-bottom: 1px solid #969595; }
          .main .botonera .card .collapsable a.destacado .badge {
            font-weight: 400; }
        .main .botonera .card .collapsable a:hover, .main .botonera .card .collapsable a.active {
          text-decoration: none;
          background-color: #e4e4e4; }
  .main .principal {
    padding-left: 15px;
    padding-right: 15px; }

.footer {
  background-color: #4ebf50;
  min-height: 50px; }

@media (min-width: 576px) {
  .top .centrar-img, .top .centrar-img.capacitacion {
    height: 100px;
    width: 200px; }
  .top .capacitacion.centrar-img {
    width: 230px; } }

@media (min-width: 768px) {
  .main .logout {
    margin-left: 15px; }
  .main .botonera {
    padding-top: 23px;
    padding-bottom: 23px;
    border-radius: 0 15px 0 0;
    border-bottom: 50px solid #4ebf50; }
    .main .botonera .card .collapsable a {
      text-align: right;
      padding: 5px 15px 5px 5px; }
  .main .principal {
    padding-left: 30px;
    padding-right: 20px; } }

@media (min-width: 1200px) {
  .main .left {
    padding-right: 10px; }
  .main .principal {
    padding-left: 30px;
    padding-right: 30px; } }

/* ENCABEZADO */
.encabezado {
  padding-top: 14px;
  padding-bottom: 26px; }
  .encabezado .breadcrumb {
    padding: 3px 0px;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 0; }
    .encabezado .breadcrumb li.breadcrumb-item:first-child {
      margin-right: 25px; }
    .encabezado .breadcrumb li.breadcrumb-item:nth-child(2)::before {
      display: none; }
    .encabezado .breadcrumb li .breadcrumb-item .breadcrumb-item + .breadcrumb-item {
      padding-left: 5px; }
    .encabezado .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
      font-size: 12px;
      line-height: 17px;
      color: #838383;
      padding-right: 1px; }
    .encabezado .breadcrumb a {
      font-size: 12px;
      line-height: 17px;
      color: #838383; }
  .encabezado h1 {
    font-family: "Viga", sans-serif;
    font-size: 21px;
    line-height: 31px;
    color: #393939;
    margin: 23px 0 17px; }
  .encabezado p {
    font-size: 14px;
    line-height: 21px;
    color: #393939;
    margin: 0;
    width: 100%; }
  .encabezado .ayuda {
    padding: 3px 15px;
    text-align: left; }
    .encabezado .ayuda span {
      display: none; }

/* ACORDEONES */
.accordion .card {
  border: none;
  border-radius: 0; }
  .accordion .card .card-header {
    border: none;
    border-top: 1px solid #D5D5D5;
    border-radius: 0;
    background-color: transparent;
    padding: 23px 0 25px; }
    .accordion .card .card-header button {
      border: none;
      background-color: transparent;
      display: flex;
      width: 100%;
      padding: 0; }
      .accordion .card .card-header button h2 {
        font-size: 15px;
        line-height: 22px;
        font-weight: 700;
        color: #104A80;
        margin: 0; }
      .accordion .card .card-header button svg {
        -webkit-transition: -webkit-transform .4s ease-in-out;
        -ms-transition: -ms-transform .4s ease-in-out;
        transition: transform .4s ease-in-out; }
      .accordion .card .card-header button.collapsed svg {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg); }
      .accordion .card .card-header button:focus {
        outline: none; }
  .accordion .card .card-body {
    padding: 0 0 38px; }
    .accordion .card .card-body h3 {
      font-size: 11px;
      line-height: 16px;
      font-weight: 700;
      color: #393939;
      margin: 7px 0; }
    .accordion .card .card-body .modulo-formulario {
      margin: 5px 0 12px;
      display: flow-root; }
      .accordion .card .card-body .modulo-formulario .opciones {
        display: inline-block;
        margin-right: 50px;
        margin-left: 4px;
        margin-top: 0; }
      .accordion .card .card-body .modulo-formulario .ejemplo {
        display: inline-block;
        max-width: 40%; }
        .accordion .card .card-body .modulo-formulario .ejemplo p {
          font-size: 13px;
          line-height: 20px;
          color: #A5A5A5;
          margin: 10px 0 0; }
      .accordion .card .card-body .modulo-formulario:first-child h3 {
        margin-top: 0; }

@media (min-width: 576px) {
  .encabezado p {
    width: 65%; }
  .encabezado .ayuda {
    text-align: right; }
    .encabezado .ayuda span {
      display: inline;
      font-size: 12px;
      line-height: 17px;
      color: #104A80; }
  .accordion .card .card-body .modulo-formulario .ejemplo {
    max-width: none; }
    .accordion .card .card-body .modulo-formulario .ejemplo p {
      margin: 0; }
  .accordion .card .card-body .modulo-formulario .opciones {
    margin-right: 62px; } }

@media (min-width: 992px) {
  .encabezado p {
    width: 45%; } }

@media (min-width: 1200px) {
  .encabezado p {
    width: 35%; } }

/* BOTONES */
.btn {
  font-size: 11px;
  line-height: 15px;
  font-weight: 500;
  padding: 9px 30px;
  border-radius: 20px;
  margin-right: 20px;
  text-transform: uppercase; }

.boton-accion-secundaria {
  background-color: transparent;
  border: 1px solid #104A80;
  color: #393939; }
  .boton-accion-secundaria:hover {
    border: 1px solid #0A2D4D; }
  .boton-accion-secundaria:disabled, .boton-accion-secundaria.disabled {
    color: #A5A5A5;
    border: 1px solid #D5D5D5;
    opacity: 1; }

.boton-accion-primaria {
  background-color: #104A80;
  border: 1px solid #104A80;
  color: #fff; }
  .boton-accion-primaria:hover {
    background-color: #0A2D4D;
    border: 1px solid #0A2D4D;
    color: #fff; }
  .boton-accion-primaria:disabled, .boton-accion-primaria.disabled {
    background-color: #D5D5D5;
    border: 1px solid #D5D5D5;
    opacity: 1; }

/* SELECT CUSTOMIZADO */
.seleccionable {
  display: block;
  font-size: 13px;
  line-height: 14px;
  font-weight: 400;
  color: #393939;
  padding: 12px 40px 12px 10px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #D5D5D5;
  box-shadow: none;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOC4xNjkiIGhlaWdodD0iMy45NDMiIHZpZXdCb3g9IjAgMCA4LjE2OSAzLjk0MyI+DQogIDxkZWZzPg0KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4NCiAgICAgIDxyZWN0IHdpZHRoPSI4LjE2OSIgaGVpZ2h0PSIzLjk0MyIgZmlsbD0ibm9uZSIvPg0KICAgIDwvY2xpcFBhdGg+DQogIDwvZGVmcz4NCiAgPGcgaWQ9ImRyb3Bkb3duLW5lZ3JvIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoKSI+DQogICAgPHBhdGggaWQ9IlRyYXphZG9fMSIgZGF0YS1uYW1lPSJUcmF6YWRvIDEiIGQ9Ik0zMTA2Ljk0NiwyNDk4aDguMTY5bC00LjI3MywzLjk0M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMTA2Ljk0NiAtMjQ5OCkiIGZpbGw9IiMzNzNhM2MiLz4NCiAgPC9nPg0KPC9zdmc+DQo=");
  background-repeat: no-repeat, repeat;
  background-position: right 15px top 50%, 0 0;
  background-size: .65em auto, 100%;
  min-width: 254px;
  margin-bottom: 13px; }
  .seleccionable::-ms-expand {
    display: none; }
  .seleccionable:hover {
    border-color: #104A80; }
  .seleccionable:focus {
    border-color: #104A80;
    box-shadow: none;
    box-shadow: none;
    color: #393939;
    outline: none; }
  .seleccionable option {
    font-weight: normal; }

/* RADIOS CUSTOMIZADOS */
.contenedor-radio {
  display: block;
  position: relative;
  padding: 5px 0px 5px 30px;
  margin: 12px 0;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 14px;
  color: #393939; }
  .contenedor-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer; }
    .contenedor-radio input:checked ~ .marcador {
      background-color: #fff;
      border: 2px solid #104A80; }
      .contenedor-radio input:checked ~ .marcador:after {
        display: block; }
  .contenedor-radio:hover input ~ .marcador {
    background-color: transparent;
    border: 2px solid #104A80; }

.marcador {
  position: absolute;
  top: 3px;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid #D5D5D5; }
  .marcador:after {
    content: "";
    position: absolute;
    display: none; }

.contenedor-radio .marcador:after {
  top: 2px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #104A80;
  border: none; }

/* MODALES */
.modal {
  text-align: center; }
  .modal h1 {
    font-family: "Viga", sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #393939;
    margin: 20px 0; }
  .modal p {
    font-size: 14px;
    line-height: 21px;
    color: #393939;
    margin: 0 0 10px; }
  .modal .modal-sm {
    max-width: 300px;
    margin: 0 auto; }
  .modal .modal-content {
    border-radius: 20px; }
    .modal .modal-content .modal-body {
      padding: 25px; }
    .modal .modal-content .modal-footer {
      padding: 0 25px 47px;
      border: 0;
      justify-content: space-between; }
      .modal .modal-content .modal-footer > :not(:first-child) {
        margin: 0; }

/* TOSTADAS */
.contenedor-tostadas {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none; }

.toast {
  border-radius: 0; }
  .toast.error {
    background-color: #FF4545; }
  .toast .toast-body {
    display: flex;
    align-items: center; }
    .toast .toast-body svg {
      margin-right: 10px; }
    .toast .toast-body p {
      color: #fff;
      font-size: 13px;
      line-height: 19px;
      margin: 0; }