/** DO NOT MODIFY THIS FILE. All code here are generated by MachForm Theme Editor **/

#main_body h1 a
{
background-image: url('https://forms.unibe.edu.do/data/themes/images/img_661a55db471bfc288ff99d814b68ce21-image-1.png');
height: 62px;
}

html
{
background-image: url('https://forms.unibe.edu.do/images/form_resources/grey-mild.png');
background-repeat: repeat;
}

#main_body h1
{
background-color: #525252;
background-image: none;
}

#form_container
{
background-color: #ffffff;
border-width: 0px;
border-style: solid;
border-color: #CCCCCC;
}

#main_body form li.highlighted,#main_body .matrix tbody tr:hover td,#machform_review_table tr.alt
{
background-color: #FFF7C0;
}

#main_body form .guidelines
{
background-color: #F5F5F5;
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
}

#main_body form .guidelines small
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 80%;
color: #444444;
}

#main_body input.text,#main_body input.file,#main_body textarea.textarea,#main_body select.select,#main_body input.checkbox,#main_body input.radio
{
background-color: #FBFBFB;
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #666666;
}

#machform_review_table td.mf_review_value
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 100%;
color: #444444;
}

#main_body .form_description h2,#main_body .form_success h2
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 160%;
color: #444444;
}

#main_body .form_description p,#main_body form ul.payment_list_items li
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 95%;
color: #444444;
}

#main_body form li span.ap_tp_text
{
color: #444444;
}

#main_body form li label.description,#main_body form li span.description,#main_body .matrix caption,#main_body .matrix td.first_col,#main_body form li.total_payment span,#machform_review_table td.mf_review_label
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 95%;
color: #444444;
}

#main_body form li span label,#main_body label.choice,#main_body .matrix th,#main_body form li span.symbol,.mf_sigpad_clear,#main_body form li div label,#main_body form li div span.label
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
color: #444444;
}

#main_body form .section_break h3,#main_body form .media h3,#machform_review_table td .mf_section_title
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 110%;
color: #444444;
}

#main_body form .section_break p,#main_body form .media p,#machform_review_table td .mf_section_content
{
font-family: 'Lucida Grande','Lucida Grande',Tahoma,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 85%;
color: #444444;
}

#main_body form li.section_break
{
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #CCCCCC;
}



/** Advanced CSS **/

/* =========================================================
   UNIBE — MachForm Theme (versión mejorada)
   Mismos selectores que el original: drop-in replacement.
   ========================================================= */

:root{
  --unibe-navy:#0d2c6b;
  --unibe-navy-dark:#081b45;
  --unibe-blue:#1e4fd6;
  --unibe-red:#df1a22;
  --unibe-ink:#2a2e3a;
  --unibe-ink-soft:#6b7280;
  --unibe-border:#dfe3ea;
  --unibe-bg:#eef1f6;
  --unibe-field-bg:#fafbfc;
  --radius:10px;
  --shadow-card:0 20px 50px -20px rgba(13,44,107,.25),0 2px 8px rgba(13,44,107,.06);
}

html{
  background-color: var(--unibe-bg);
  background-image: radial-gradient(circle at 20% 0%, rgba(30,79,214,.06), transparent 45%),
                     radial-gradient(circle at 100% 100%, rgba(223,26,34,.05), transparent 40%);
}

#main_body h1{
  background-color: transparent;
  background-image: none;
  color: var(--unibe-navy);
}

/* ---------- Tarjeta del formulario ---------- */
#form_container{
  background-color: #ffffff;
  border-width: 0px;
  border-style: solid;
  border-color: var(--unibe-border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
}

#main_body .matrix tbody tr:hover td,
#machform_review_table tr.alt{
  background-color: #fde7e8;
}

/* Campos marcados como "highlighted" en el editor de MachForm:
   ya no se pintan de rosa (eso se veía como un error de validación).
   Se muestran igual que el resto, solo con un borde izquierdo sutil
   como acento discreto. */
#main_body form li.highlighted{
  background-color: transparent !important;
  border-left: 3px solid var(--unibe-blue);
  padding-left: 12px !important;
}

#main_body form .guidelines{
  background-color: #f6f8fb;
  border-width: 1px;
  border-style: solid;
  border-color: var(--unibe-border);
  border-radius: 8px;
}

#main_body form .guidelines small{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 80%;
  color: var(--unibe-ink-soft);
}

/* ---------- Campos ---------- */
#main_body input.text,
#main_body input.file,
#main_body textarea.textarea,
#main_body select.select,
#main_body input.checkbox,
#main_body input.radio{
  background-color: var(--unibe-field-bg);
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 100%;
  color: var(--unibe-ink);
  border: 1px solid var(--unibe-border) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#main_body input.text:hover,
#main_body textarea.textarea:hover,
#main_body select.select:hover{
  border-color: #c7cede !important;
}

#main_body input.text:focus,
#main_body textarea.textarea:focus,
#main_body select.select:focus{
  outline: none !important;
  border-color: var(--unibe-blue) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(30,79,214,.15) !important;
}

#main_body input.checkbox,
#main_body input.radio{
  width: 17px;
  height: 17px;
  accent-color: var(--unibe-navy);
  cursor: pointer;
}

/* ---------- Tabla de revisión ---------- */
#machform_review_table td.mf_review_value{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 100%;
  color: var(--unibe-ink);
}

/* ---------- Encabezados y textos ---------- */
#main_body .form_description h2,
#main_body .form_success h2{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 170%;
  color: var(--unibe-navy);
  letter-spacing: -.01em;
}

#main_body .form_description p,
#main_body form ul.payment_list_items li{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 108%;
  color: var(--unibe-ink-soft);
  line-height: 1.55;
}

#main_body form li span.ap_tp_text{
  color: var(--unibe-ink-soft);
}

/* Etiquetas de campo */
#main_body form li label.description,
#main_body form li span.description,
#main_body .matrix caption,
#main_body .matrix td.first_col,
#main_body form li.total_payment span,
#machform_review_table td.mf_review_label{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 93%;
  color: var(--unibe-navy);
  letter-spacing: .01em;
}

#main_body form li span label,
#main_body label.choice,
#main_body .matrix th,
#main_body form li span.symbol,
.mf_sigpad_clear,
#main_body form li div label,
#main_body form li div span.label{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  color: var(--unibe-ink);
}

/* Fuerza el mismo color navy en TODAS las etiquetas de campo,
   incluso si el editor de MachForm tiene un color personalizado
   guardado por campo (eso tiene más especificidad que el tema global,
   así que aquí subimos la especificidad y usamos !important). */
#main_body form li label.description,
#main_body form li span.description,
#main_body form li label.description *,
#main_body form li span.description *{
  color: var(--unibe-navy) !important;
}

/* Títulos de sección */
#main_body form .section_break h3,
#main_body form .media h3,
#machform_review_table td .mf_section_title{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 135%;
  color: var(--unibe-navy);
  position: relative;
  padding-left: 14px;
}

#main_body form .section_break h3::before{
  content:"";
  position:absolute;
  left:0; top:.15em; bottom:.15em;
  width:4px;
  border-radius:4px;
  background: linear-gradient(180deg, var(--unibe-blue), var(--unibe-red));
}

#main_body form .section_break p,
#main_body form .media p,
#machform_review_table td .mf_section_content{
  font-family: 'Inter','Lucida Grande',Tahoma,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 106%;
  color: var(--unibe-ink-soft);
}

#main_body form li.section_break{
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--unibe-border);
  clear: both !important;
  width: 100% !important;
  display: block !important;
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  grid-column: 1 / -1 !important;
  order: initial;
}

/* ---------- Botón de envío ---------- */
#main_body input.submit,
#main_body input[type="submit"],
.appnitro .submit_button input{
  background: linear-gradient(135deg, var(--unibe-navy), var(--unibe-blue)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 13px 32px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(13,44,107,.5);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

#main_body input.submit:hover,
#main_body input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(13,44,107,.6);
  opacity: .96;
}

/** Advanced CSS **/

/* ---------- Layout base en flexbox ---------- */
/* Convertimos la lista de campos en flexbox con salto de línea.
   Esto permite que basta con UNA clase (unibe-2col) para que dos
   campos se acomoden lado a lado automáticamente — el navegador
   los va llenando de a 2 por fila solo, sin importar el orden,
   sin necesitar clases "a"/"b" ni que haya otro campo en medio. */
/* ---------- Layout base en flexbox ---------- */
/* Convertimos en flexbox el <ul> que envuelve los campos, para que
   baste con UNA clase (unibe-2col) para acomodar 2 por fila.
   Usamos :has() para detectar automáticamente cuál es ese <ul>
   real (el que contiene campos con la clase unibe-2col), sin
   depender de adivinar su nombre de clase — así no importa si se
   llama "appnitro" o cualquier otro nombre interno de MachForm. */
#main_body form ul:has(> li.unibe-2col),
#main_body form ul.appnitro,
#main_body ul.appnitro,
#main_body .appnitro{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  column-gap: 4% !important;
}

.appnitro li:not(.column_2):not(.unibe-2col){
  width: 98%;
  flex: 1 1 100% !important;
  max-width: 100% !important;
  margin-bottom: 22px !important;
}

#main_body form li.column_2{
  flex: 1 1 46% !important;
  max-width: 47% !important;
  box-sizing: border-box !important;
  margin-bottom: 22px !important;
}

/* ---------- Clase reutilizable: 2 columnas (una sola clase) ---------- */
/* Aplica esta clase a los campos que quieras poner de a 2 por fila:
   En MachForm → edita el campo → "Element CSS Class" → unibe-2col
   Funciona con cualquier cantidad de campos, en cualquier orden,
   con o sin otros campos de por medio. */
#main_body form li.unibe-2col{
  flex: 1 1 47% !important;
  max-width: 47% !important;
  box-sizing: border-box !important;
  margin-bottom: 22px !important;
}

/* Un poco más de aire entre la etiqueta del campo y el input */
#main_body form li label.description,
#main_body form li span.description{
  margin-bottom: 8px !important;
}

.sec-title{
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: medium;
}

div.mf_progress_value{
  background-color: var(--unibe-red);
  height: 10px;
  text-align: right;
  border-radius: 999px;
}

.cat-title{
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  color: var(--unibe-red);
  font-weight: 700;
}

div#uploadifive-element_9{
  background: var(--unibe-red);
  border: none;
  border-radius: 8px;
  margin-top: 10px !important;
}

/* Sections */
#main_body form .section_break h3{
  margin-bottom: 6px;
}

#main_body form .section_break p{
  text-align: justify;
}

#main_body li.section_break.title_h4 h3{
  font-size: 14px;
  font-weight: 700;
  margin-top: 5px;
}

/* Custom Classes */
.unibe-h4{
  font-size: 14px;
  font-weight: 700;
  color: var(--unibe-navy);
}

.unibe_small_caps > p{
  font-size: 10px !important;
  margin: 0 0 5px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--unibe-ink-soft) !important;
}

.unibe-text-justify{ text-align: justify !important; }

.unibe_border::after{
  border-bottom: 1px solid var(--unibe-border) !important;
  content: " " !important;
  width: 100%;
  visibility: visible !important;
}

#main_body form li.unibe_padding_large{ padding-top: 20px !important; }
#main_body form li.unibe_margin_large{ margin-top: 20px !important; }

#main_body form li.unibe_alert_box{
  margin-top: 8px !important;
  padding: 12px 14px !important;
  background: #e7f0ff;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
}

.unibe_border > h3{ margin: 0 0 3px !important; }
.unibe_alert > h3{ color: var(--unibe-red) !important; }

.unibe_right{
  display: flex !important;
  justify-content: flex-end;
}

.unibe_ext_field span{ width: 45% !important; padding-right: 25px !important; }
.unibe_ext_field span:last-child{ padding-right: 0 !important; }
.unibe_ext_field input{ width: 100% !important; }

.unibe_notice > p{
  background-color: #e7f0ff;
  padding: 15px !important;
  margin-top: 10px !important;
  border-radius: 8px;
}

.signature > h3:first-child{ margin-bottom: 50px !important; }
#main_body li.column_2.signature{ width: 47% !important; }

/* Hacks */
p:empty{ display: none; }

.tooltip > div > span{
  position: absolute;
  left: 102px;
  top: 25px;
  width: 170px !important;
  background: #ffffff;
  border: 1px solid var(--unibe-border);
  border-radius: 6px;
  padding: 6px 8px !important;
  font-size: 10px !important;
  box-shadow: 0 8px 20px -10px rgba(13,44,107,.35);
}

.desc-hightline p{
  background: #fde7e8;
  padding: 10px !important;
  border-radius: 6px;
}

#form_81265 ul li{ width: 97%; }

col-md-12{ width: 100% !important; }
col-md-6{ width: 48% !important; display: inline-block; }
col-md-4{ width: 32.3% !important; display: inline-block; }

.mayuscula{
  text-transform: uppercase;
}

table caption{
  background: var(--unibe-red);
  padding: 20px;
  color: #fff !important;
  border-radius: 10px 10px 0 0;
}

.hr, .section_break{
  margin: 14px 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  #form_container{ border-radius: 12px; padding: 4px 2px; }
  #main_body input.submit,
  #main_body input[type="submit"]{ width: 100%; }
  #main_body form li.unibe-2col,
  #main_body form li.column_2{
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 98% !important;
  }
}