@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
--body-bg-color: #425e6c;
--text-color: #247ca8;
--hr-color: #26292a;
--red: #e74c3c;	
--rojo2: #ab1b1b; /*ab1b1b  2f5496*/
--rojo3: #d83535; /*d83535  386cc9*/
--rojo4: #ff5454; /*ff5454  6c9ef6*/	
--amarillo: #cdaf07;
--ct: #3b5461;
--ft: #e9eff2;
--hover1: #cae6f5;
--frm01: #dce5e9;
--txtv: #04a116;
	--tbl_v:#97ff8f;  
	--tbl_v2:#beff8f;
	--tbl_a:#faffac;
	--tbl_r:#ffbfbf;
}

*{margin:0;padding:0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
html{ margin:0px; padding: 0px; font-family: 'Montserrat', sans-serif; font-size: 100%;}
body{ margin:0px; padding: 0px; background: #f4f8fa;}
.movil{ display: none;}
.blq_none{ color: #fff;}

.div_1, .div_2, .div_25, .div_3, .div_33, .div_35, .div_4, .div_5, .div_6,.div_7, .div_75, .div_8, .div_9, .div_10 { position: relative; display: table;  float:left;}
.div_1{ width:10%;}
.div_15{ width:15%;}
.div_2{ width:20%;}
.div_25{ width:25%;}
.div_3{ width:30%;}
.div_33{ width:33.33%;}
.div_35{ width:33.33%;}
.div_4{ width:40%;}
.div_5{ width:50%;}
.div_6{ width:60%;}
.div_7{ width:70%;}
.div_75{ width:75%;}
.div_8{ width:80%;}
.div_9{ width:90%;}
.div_10{width:100%;}

.pad_l{ padding-left:20px;}
.pad_r{ padding-right:20px;}
.pad_t{ padding-top:20px;}
.pad_b{ padding-bottom:20px}
.pad_all{ padding:20px;}

.pad_l2{ padding-left:5px;}
.pad_r2{ padding-right:5px;}
.pad_t2{ padding-top:5px;}
.pad_b2{ padding-bottom:5px}
.pad_all2{ padding:5px;}

.mar_l{ margin-left: 20px;}
.mar_r{ margin-right: 20px;}
.mar_t{ margin-top: 20px;}
.mar_b{ margin-bottom: 20px;}
.mar_all{ margin: 20px;}

.mar_l2{ margin-left: 5px;}
.mar_r2{ margin-right: 5px;}
.mar_t2{ margin-top: 5px;}
.mar_b2{ margin-bottom: 5px;}
.mar_all2{ margin: 5px;}

.txt_ac { text-align: center;}
.txt_al { text-align: left;}
.txt_ar { text-align: right;}
.txt_aj { text-align: justify;}

.cabecera{ position: relative; display:table; width: 100%; height:100px; background:var(--rojo2); margin: 0px; }	
.menu_cont{ position: relative; display:table; width: 100%;   background:var(--ft); border-bottom: solid 1px #EDF3F9 ;margin: 0px; font-size: 90%;}	
.btn_acc{ position: relative; display:table;  margin:7px auto; margin-right: 10px;}
.cuerpo { position: relative; display:block; margin: 30px 30px; padding:70px 50px; border: solid 0.5px #7492a1; background: #ffffff; border-radius: 15px; color: var(--ct);}
.cuerpo a{ text-decoration: none; color:var(--ct); }
.cuerpo a:hover{ color:var(--rojo2);}
.cuerpo p { margin: 20px 0; line-height: 130%;}
.cuerpo ul, .cuerpo ol { margin:50px 0 50px 20px; padding: 0px;}
.cuerpo ul li, .cuerpo ol li { margin:0px; padding: 5px; }
.cuerpo .line{ background: #f0f0f0; height: 1px; width: 100%; margin: 20px 0;  }

.cont_p { position: relative; width: 70%; margin: 0px auto; background: #fff;}

footer{ margin:0px; padding: 50px; background: var(--ct); color: #fff; text-align: center; font-size: 90%; line-height: 150%;}
footer a{ color: #ffffff; text-decoration: none;}
footer a:hover{ color:var(--hover1); }
footer .social{ position: relative; display: table; margin: 10px auto 30px auto;}
footer .social .ico_s{ position: relative; font-size: 30px; margin: 0px 10px; float: left;} 
.ico_m{ position: relative; font-size: 20px; margin:-5px 5px 0px 0; float: left;} 

.nom_usu { position: relative; display: table; margin:10px 30px 0px  0px ; color:var(--ct); font-size:90%;  float: right;  }

.frame_p{ position: relative; display: table; width: 100%; height: 100%;    border:0;   padding:0;   margin:0;}

.btn_acc ul {
  list-style: none;
}

.btn_acc a {
  color: var(--ct);
  text-decoration: none;
}

.btn_acc a .ico_m2{ position: relative; font-size: 24px; margin:-5px 5px 0px 0; float: left; color:var(--rojo2)!important; } 
.btn_acc .sclose{  color:var(--rojo2)!important; }
.btn_acc a:hover { color:var(--rojo2);}

.btn_acc hr {
  border-color: var(--hr-color);
  margin: 10px 0;
}

.btn_acc .menus {
  display: flex;
  justify-content: center;
}

.btn_acc .menus li {
  margin-right: 20px;
}

.btn_acc .menus a {
  position: relative;
  display: block;
  padding: 8px 5px;
}

.btn_acc .menus a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--rojo2), var(--rojo3),var(--rojo4));
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}

.btn_acc .menus a:hover::before {
  transform: scaleX(1);
}

/* ANIMACIÓN
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn_acc .menus[data-animation="to-left"] a::before {
  transform-origin: right;
}

.btn_acc .menus[data-animation="center"] a::before {
  transform-origin: center;
}

.btn_acc .menus[data-animation="bonus"] a::before {
  transform-origin: right;
}

.btn_acc .menus[data-animation="bonus"] a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
}

.frm_sa {  position: relative;   float: left; width:400px;  padding: 0px; }

input[type=text], input[type=password], input[type=submit], input[type=email], input[type=number]{
	position: relative; 
	float: left;
    outline: none;
    background-color: #ffffff;
    border: solid 1px #425e6c;
	border-radius: 5px; padding: 8px 10px;
	font-family: 'Montserrat', sans-serif; font-size: 100%;
	margin-left: 14px;
	color: #425e6c;
  }
 
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus{ background: #fffdec;}

 input[type=submit]{
background: var(--rojo2);
color: #fff;
padding: 8px 18px;
border: none;
cursor: pointer;
}

input[type=submit]:hover{ background: var(--txtv); }

.fila_r { position: relative; display: table;   padding:8px 20px; margin: 0; background:var(--frm01); color: var(--body-bg-color); font-weight: 600;}
.cuerpo2 { position: relative; display:table; width:96%; margin: 10px 0px 40px 0px; padding:30px 2% ; border: solid 0.5px #7492a1; background: #f4f8fa; border-radius: 8px; }
.cp2_p{ padding-top:20px!important; }

.tbl-bl {display: table;}
.txt_v{ color:var(--txtv); }
.txt_r{ color:var(--rojo2); }
.txt_a{ color:var(--amarillo); }
.txt_box1{ display: table; background:var(--body-bg-color); color: #fff; padding: 5px 15px; }

.txt_t1{ font-size: 80%;}
.txt_t15{ font-size: 15px;}
.txt_t2{ font-size: 20px;}
.txt6{ font-weight: 600;}
.txt7{ font-weight: 700;}
.txt8{ font-weight: 600; font-size: 24px; color: var(--rojo2); }
.txt11{ font-weight: 500; font-size: 20px; color: var(--txtv); padding: 25px 0; }
.txt9{ font-weight: 400;}

.txt_t2b{ font-size: 60px;}

.tbl01{ padding: 7px 0; margin-bottom: 5px;  border-bottom: solid 1px #dee7e9!important;}

.frm02{ }

.frm02 input[type=text], .frm02 input[type=password], .frm02 input[type=submit], .frm02 input[type=button], .frm02 input[type=reset], .frm02 input[type=date], .frm02 input[type=email], .frm02 input[type=number], .frm02 .csstextarea{
	/*position: relative; display: table;*/
	width: 100%;            /*anchoa de campos*/
	float: left;
    outline:none;
    background-color: #ffffff;
    border: solid 1px #425e6c;
	border-radius: 5px; 
	padding: 8px 10px;
	font-family: 'Montserrat', sans-serif; 
	font-size: 100%;
	margin: 0px;
	color: #425e6c;
	
  }
 
.frm02 input[type=text]:focus, .frm02 input[type=password]:focus, .frm02 input[type=email]:focus, .frm02 input[type=number]:focus, .frm02 input[type=date]:focus, .frm02 .csstextarea:focus { background: #fffdec;}

.frm02 input[type=hidden] {position: relative; float: left; outline:none; margin: 0px;}

.frm02 .num_car{ background:#f4f8fa!important; border: 0px!important; padding: 0px!important; margin:5px 0 0 0px!important; color:var(--txtv)!important;}

.frm02 input[type=button], .frm02 input[type=reset]{ 

width: 200px;
margin: 0px 15px;
padding: 8px 20px;
background:var(--rojo2);
color: #fff;
border: none; 
cursor: pointer;
}

.frm02 input[type=button]:hover, .frm02 input[type=reset]:hover{ background: var(--txtv); }

.frm02 .caja_boton { cursor: pointer;}
.frm02 .caja_boton:hover { background:var(--ft)!important; border-color: var(--text-color); }

.txt_dat1{ margin: 30px 0px 7px 0px;}
.txt_dat2{ margin: 15px 0px 15px 0px; font-size: 85%;}

.cont_boton{display: table;  margin: 0 auto; }
.txt_cap{ width: 100%!important; margin: 0 auto; text-align: center;}
.img_capch { position: relative; display: table; width: 200px; height: auto; margin: 10px auto;}
.txt_resul{ position: relative; display: table; margin: 10px auto 50px auto;}
.fa_num{ position: relative; display: table; width: 200px; margin:0 0 20px 0; padding: 0px;  margin-right:0px; border-left: solid 1px var(--body-bg-color);
float: right;}
.fa_num p{ text-align: left; padding: 3px 0 0 18px; margin: 0px;}
 
.frm02 select, #sel3 select {

  /* styling */
  background-color: white;
 color: var(--body-bg-color);
  border: solid 1px var(--body-bg-color);
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 7px 40px 7px 10px;
  cursor: pointer; 

  /* reset */
  width: 90%;
  margin: 0 10% 0 0!important;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* arrows */

.frm02 select.classic, #sel3 select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--body-bg-color) 50%),
    linear-gradient(135deg, var(--body-bg-color) 50%, transparent 50%),
    linear-gradient(to right, #9eb1ba, #9eb1ba);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

.frm02 select.classic:focus, #sel3 select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, var(--body-bg-color), var(--body-bg-color));
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: var(--body-bg-color);
  outline: 0;
}

.frm02 select.round {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    radial-gradient(#ddd 70%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

.frm02 select.round:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    radial-gradient(gray 70%, transparent 72%);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}





.frm02 select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}

.frm02 select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}


.frm02 .radio_box{ display: table; padding:5px 0px 15px 15px; border-radius: 7px; background: #e9eff2; }

.frm02 label input[type="radio"] {
    display: none;
 
}
.frm02 label input[type="radio"] ~ span {
    position: relative;
    display: inline-block;
    padding: 0px 40px 0px 30px;
	cursor: pointer; 
	margin: 10px 15px 0 0;
}
.frm02 label input[type="radio"] ~ span:before {
    content: "";
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    background: #fff;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 50%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
}
.frm02 label input[type="radio"]:checked ~ span:before {
    border: 5px solid var(--txtv);
}

.img_100{ position: relative; display: block; width: 100%; height: auto;}
.logo_web{ position: relative; display:table; width: 250px; margin: 20px; float: left;}
.logo_print{ position: relative;  width: 200px; margin: 20px auto 10px auto; display: none;}
.tit_01, .tit_02{ position: relative;    text-align: right; margin:0 30px 0 0; 
	margin-right:30px; color: #fff; font-family: 'Montserrat', sans-serif; padding: 0px;  }
.tit_01{ font-size: 60px;font-weight: 800; }
.tit_02{ font-size: 11.8px;font-weight: 500; line-height: 10%;}


.pag_{ position: relative; display: table; width:40px; height: 40px; float: left; padding: 5px!important;  margin: 0px 4px!important; cursor: pointer;
  background:#9eb1ba;	color: var(--ct); border: none; border-radius: 4px;}
.pag_:hover{ background: #415c6a; color: #fff; }
.blok:hover{ cursor:auto;}
.blok:hover{background:#9eb1ba;	color: var(--ct);}

.pag2_{ position: relative; display: table; width:200px!important; float: left;  padding: 7px 40px 7px 10px!important; 	margin:0px!important; cursor: pointer; }
.cont_cont{position:relative; display: table;  float: left; margin: 0 4px;}
.cont_cont2{position:relative; display: block; margin: 10px 0 0 0px; text-align: right;}
.cont_cont2 i {margin: 0 0 0 5px; cursor: pointer;color:var(--body-bg-color); }
.cont_cont2 i:hover { color:var(--txtv);}

@media screen and (max-width:1400px){

	 html{ font-size:80%;}
	.cuerpo { padding:30px 20px;}	
	.cont_p {  width: 90%; margin: 0px auto;}
  
.pag_{ width:30px; height: 30px;padding: 2px!important;  margin: 0px 2px!important; }
.pag2_{   padding: 5px 40px 5px 10px!important; 	margin:0px!important; }
.cont_cont{margin:2px;}	
	
}
	
@media screen and (max-width:500px){

html{ font-size: 100%;}	
.movil{ display:table;}	
.tit_01, .tit_02{ position: relative; display: table; text-align: center; margin:0 auto!important; color: #fff; font-family: 'Montserrat', sans-serif;  }
.tit_01{ font-size: 50px; padding:0px 0px 0px 0px; }
.tit_02{ font-size: 11px;font-weight: 500; line-height: 80%; padding:0px 0px 25px 0px; }
	
.cont_cont2{text-align: left;}	
.cont_cont2 i {margin: 40px 2px 0 2px; font-size: 40px; }	
	
.div_1,.div_2,.div_25,.div_3,.div_33,.div_35,.div_4,.div_5,.div_6,.div_7,.div_75,.div_8,.div_9,.div_10 {width:100%;}
.pad_l, .pad_r, .pad_t, .pad_b, .pad_all{ padding:10px;}	
.pad_l2, .pad_r2, .pad_t2, .pad_b2, .pad_all2{ padding:10px;}	
.mar_l, .mar_r, .mar_t, .mar_b, .mar_all{ margin:10px;}	
.mar_l2, .mar_r2, .mar_t2, .mar_b2, .mar_all2{ margin:10px;}	
 |
.logo_web{ margin:25px auto 15px auto!important; float:none!important;}	
	
.nom_usu {  margin:10px 0px 0px  30px ;  float: left; }
	
.btn_acc { width: 100%; text-align: center;}	
.btn_acc a {  color:#425e6c;  text-decoration: none; }
.btn_acc hr {  border-color: var(--hr-color);  margin: 10px 0;}
.btn_acc .menus {   display:table;	width: 100%;  justify-content: center;  }
.btn_acc .menus li {width: 100%;  margin:inherits; border-bottom: solid 1px #c0d1da ; }
.btn_acc .menus a {  position: relative;  display: block;  padding: 8px 5px;}

.btn_acc .menus a {  padding: 15px 5px; font-size: 20px; }	
.ico_m{ font-size: 20px !important; margin: inherit; float: inherit; margin-right: 10px;} 
.btn_acc a .ico_m2{   margin: inherit; float: inherit; margin-right: 10px; } 

.txt_box1{ display: table; margin: 0px auto;}	
.txt_alerta{ font-size: 130%; padding-top: 12px; text-align: left!important;}
	
.frm02{ font-size:80%; }
.cuerpo2 { margin: 10px 0px 30px 0px; padding:20px 3%; width: 94%;   }


.fila_r { display: block;  padding:8px 10px; margin:5px auto; font-weight: 600;    text-align: center; }
.fa_num{  width: 100%; margin:0 0 20px 0; padding:0 0 10px 0px; border-left:none; border-bottom: dashed 1px var(--body-bg-color);
float: left;}
.fa_num p{ text-align: center; padding: 3px 0 0 18px; margin: 0px; }
	
.frm_sa {float: inherit; width:100%; padding: 20px 0px; background:var(--ct); }
	
input[type=text], input[type=number], input[type=email], input[type=password], input[type=submit], input[type=button], input[type=reset]{
	position: relative; 
	float: inherit;
    outline:auto;
	width: 50%;
	margin:10px 0px;	
  }
 
.frm02 input[type=text], .frm02 input[type=number], .frm02 input[type=email], .frm02 input[type=password], .frm02 input[type=submit], .frm02 input[type=button], .frm02 input[type=reset], .frm02 .csstextarea {
	position: relative; 
	display: table;
	float: inherit;
    outline:hidden;
	width: 100%;
	margin:10px 0px;	
	font-size: 100%!important;	
  }

.frm02 input[type=button], .frm02 input[type=reset]{ 
	font-size: 150%!important; 
	padding: 12px 20px;
  }

.frm02 select {
  width: 100%;
  margin: 0 0 0 0!important;  

  }		
	
.frm02 label input[type="radio"] ~ span {
	margin: 30px 20px 0 0;
}	 

.frm02 .radio_box{  padding:5px 0px 35px 30px; }	
	
footer{ padding: 30px; font-size: 80%; line-height: 120%;}
footer .social{ margin:0px auto 20px auto;}
footer .social .ico_s{ position: relative; font-size: 28px; margin: 10px; } 

.pag_{ width:25px; height: 32px; padding:4px 1px!important;  margin: 1px 2px 0px 2px!important; }
.pag2_{  width:145px!important;  padding: 5px 35px 5px 5px!important; 	  }	
 		
}

@media print{ 
body, html, cuerpox {
        height: 100% !important;
        width: 100% !important;
        display: inline-block;
	   font-size: 10px;
    }
.logo_print{ display: table;}
.frm02{ font-size:10px; }
.cuerpo2 { margin: 0px 0px 0px 0px; padding:10px 3%; width: 94%;   }
.cabecera{ display: none;}
.menu_cont{ display: none;}
.cuerpo { margin: 5px; padding:10px 5px;}	
 	
.cont_p { width: 96%; padding: 0 10px;}
footer { display: none;}
.frm02 input[type=text], .frm02 input[type=password], .frm02 input[type=submit], .frm02 input[type=email], .frm02 input[type=number], .frm02 input[type=button], .frm02 input[type=reset], .frm02 select, .frm02 .csstextarea{	
	width: 100%;	 
    border:none!important;	 
    border-bottom: dashed 1px var(--body-bg-color) !important;
	border-radius: 0px;
	padding: 0px 0px 4px 0px; 
	font-size: 10px;
	margin: 0px 0px 3px 0px; 
	color: var(--text-color) !important;
	}
.frm02 input[type=button], .frm02 input[type=reset]{ display: none;}
.frm02 .num_car{display: none!important;}
.frm02 .radio_box{ padding:5px 0px 5px 5px; border-radius: 0px; }
.frm02 label input[type="radio"] ~ span { 
    padding: 0px 12px 0px 18px;
	margin: 0px 7px 0 0;
}
.frm02 label input[type="radio"] ~ span:before { width: 12px; height: 12px; }
.frm02 label input[type="radio"]:checked ~ span:before { border: 3px solid var(--text-color); }
	
	
	
.fila_r { padding:5px 20px; margin: 3px 0 0 0; background-color:#fff; color: var(--body-bg-color); font-weight: 600;}
.txt_dat1{ margin: 5px 0px 3px 0px; color: var(--body-bg-color); font-weight: 500;}
.fa_num{ width: 150px;  margin:0 0 0px 0; padding: 0px;  margin-right:0px; border-left: solid 1px var(--body-bg-color);}
.fa_num p{  padding: 0px 0 0 18px; font-size: 10px; }
.cuerpo .line{ background: var(--text-color); height: 1px; width: 100%; margin: 0px 0;  }
.txt_v {color: var(--text-color) !important;}	
.cont_boton, .txt_resul{display:none;}
.mar_t, .mar_b, .mar_l, .mar_r, .mar_t2, .mar_b2, .mar_l2, .mar_r2 {margin: 0px;
}
	
}

/*============================*/
/*============================*/

table.resp, table.resp2, table.resp3 {
  width: 100%;
  margin: 40px auto;
  border: solid 1px var(--body-bg-color);
  border-collapse: collapse;
  border-spacing: 0;
} 
table.resp3 {
  width: 95%;
  margin: 10px auto; 
}

.resp tr th,
.resp tr td,
.resp2 tr th,
.resp2 tr td {
  padding: 7px 6px;
  font-size: 70%;
  color: var(--body-bg-color);
  border: 1px solid var(--frm01);
	text-transform: uppercase;
}

table.resp3 tr th,
table.resp3 tr td {
  padding: 4px 4px;
  font-size: 10px!important;
  color: var(--body-bg-color);
  border: 1px solid var(--frm01);
  text-transform: uppercase;
}

table.resp2 tr td, table.resp3 tr td { cursor: pointer;}

table.resp tr th, table.resp2 tr th, table.resp3 tr th{
 
  color: #fff;
  border: 1px solid var(--ft);
  background: var(--body-bg-color);
}

.resp2 tr.even,
.resp2 tr.alt,
.resp2 tr:nth-of-type(even) {
background: var(--ft); 
}
		
@media only screen and (max-width: 768px) {

	table.resp,
	table.resp thead,
	table.resp tbody,
	table.resp tr,
	table.resp th,
	table.resp td,
	table.resp caption {
	  display: block;
	}
	
	table.resp {
	  border: none
	}
	
	table.resp thead tr {
	  display: none;
	}
	
	table.resp tbody tr {
	  margin: 1em 0;
	  border: 1px solid var(--frm01);
	}
	
	table.resp td {
	  border: none;
	  border-bottom: 1px solid var(--frm01);
	  position: relative;
	  padding-left: 40%;
	  text-align: left; 
	}
	
	table.resp tr td:last-child {
	  border-bottom: 1px double var(--frm01);
	}
	
	table.resp tr:last-child td:last-child {
	  border: none;
	}
	
	table.resp td:before {
	  position: absolute;
	  top: 6px;
	  left: 6px;
	  width: 55%;
	  padding-right: 10px;
	  white-space: nowrap;
	  text-align: left;
	  font-weight: bold;
	}	
	
	table.resp td:nth-of-type(1):before {	  content: "N° Solicitud:";}	
	table.resp td:nth-of-type(2):before {	  content: "F. Solicitud:";}	
	table.resp td:nth-of-type(3):before {	  content: "Tipo:";}	
	table.resp td:nth-of-type(4):before {	  content: "Dependencia:";	}	
	table.resp td:nth-of-type(5):before {	  content: "Razón Social:";}	
	table.resp td:nth-of-type(6):before {	  content: "Teléfono:";}
	table.resp td:nth-of-type(7):before {	  content: "F. Atención:";}
	table.resp td:nth-of-type(8):before {	  content: "Formato:";}
	table.resp td:nth-of-type(9):before {	  content: "Dias T.:";}
	table.resp td:nth-of-type(10):before {	  content: "Prorroga:";}
	table.resp td:nth-of-type(11):before {	  content: "Dias Pro.:";}
	table.resp td:nth-of-type(12):before {	  content: "Situación:";}
	table.resp td:nth-of-type(13):before {	  content: "Expediente:";}
	
	table.resp2,
	table.resp2 thead,
	table.resp2 tbody,
	table.resp2 tr,
	table.resp2 th,
	table.resp2 td,
	table.resp2 caption {
	  display: block;
	}
	
	table.resp2 {
	  border: none
	}
	
	table.resp2 thead tr {
	  display: none;
	}
	
	table.resp2 tbody tr {
	  margin: 1em 0;
	  border: 1px solid var(--frm01);
	}
	
	table.resp2 td {
	  border: none;
	  border-bottom: 1px solid var(--frm01);
	  position: relative;
	  padding-left: 40%;
	  text-align: left;
	}
	
	table.resp2 tr td:last-child {
	  border-bottom: 1px double var(--frm01);
	 
	}
	
	table.resp2 tr:last-child td:last-child {
	  border: none;
	}
	
	table.resp2 td:before {
	  position: absolute;
	  top: 6px;
	  left: 6px;
	  width: 55%;
	  padding-right: 10px;
	  white-space: nowrap;
	  text-align: left;
	  font-weight: bold;
	}	
	
	table.resp2 td:nth-of-type(1):before {     content: "Codigo:";}	
	table.resp2 td:nth-of-type(2):before {	  content: "Nombre:";}	
	table.resp2 td:nth-of-type(3):before {	  content: "Usuario:";} 
	table.resp2 td:nth-of-type(4):before {	  content: "Perfil:";} 
	table.resp2 td:nth-of-type(5):before {	  content: "Tipo Dep.:";} 
	table.resp2 td:nth-of-type(6):before {	  content: "Dependencia:";} 
	table.resp2 td:nth-of-type(7):before {	  content: "Estado:";} 
}