templates/pdf/reportArt2.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         {# <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet"> #}
  6.         {# <link rel="preconnect" href="https://fonts.gstatic.com"> #}
  7.         {# <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> #}
  8.         {# <link rel="preconnect" href="https://fonts.gstatic.com"> #}
  9.         {# <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet"> #}
  10.         <style>
  11.             {# @font-face {
  12.                 font-family: "keepcalm";
  13.                 src: url('{{absolute_url(asset('assets/css/fonts/KeepCalm-Medium.ttf'))}}');
  14.             } #}
  15.             {# @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); #}
  16.             @page {
  17.                 margin: 100px 0;
  18.             }
  20.             {# FALTA agregar el svg aca #}
  21.             {# @font-face {
  22.                 font-family: "KeepCalmW01-Medium"; 
  23.                 src: url("http://db.onlinewebfonts.com/t/f6ba7132b9acc2507f874e183b5790ae.eot"); 
  24.                 src: url("http://db.onlinewebfonts.com/t/f6ba7132b9acc2507f874e183b5790ae.eot?#iefix") format("embedded-opentype"), 
  25.                     url("http://db.onlinewebfonts.com/t/f6ba7132b9acc2507f874e183b5790ae.woff2") format("woff2"), 
  26.                     url("http://db.onlinewebfonts.com/t/f6ba7132b9acc2507f874e183b5790ae.woff") format("woff"), 
  27.                     url("http://db.onlinewebfonts.com/t/f6ba7132b9acc2507f874e183b5790ae.ttf") format("truetype")
  28.                     url("http://db.onlinewebfonts.com/t/f6ba7132b9acc2507f874e183b5790ae.svg#KeepCalmW01-Medium") format("svg")
  29.                     ; 
  30.             } #}
  31.             @font-face {
  32.                 font-family: "KeepCalmW01-Medium"; 
  33.                 src: url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Medium/f6ba7132b9acc2507f874e183b5790ae.eot'))}}"); 
  34.                 src: url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Medium/f6ba7132b9acc2507f874e183b5790aeiefix.eot'))}}") format("embedded-opentype"), 
  35.                      url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Medium/f6ba7132b9acc2507f874e183b5790ae.woff2'))}}") format("woff2"), 
  36.                      url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Medium/f6ba7132b9acc2507f874e183b5790ae.woff'))}}") format("woff"), 
  37.                      url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Medium/f6ba7132b9acc2507f874e183b5790ae.ttf'))}}") format("truetype");
  38.             }
  40.             @font-face {
  41.                 font-family: "KeepCalmW01-Light"; 
  42.                 src: url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Light/67dd7a753cce719a17304beb973d5dfc.eot'))}}"); 
  43.                 src: url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Light/67dd7a753cce719a17304beb973d5dfciefix.eot'))}}") format("embedded-opentype"), 
  44.                      url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Light/67dd7a753cce719a17304beb973d5dfc.woff2'))}}") format("woff2"), 
  45.                      url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Light/67dd7a753cce719a17304beb973d5dfc.woff'))}}") format("woff"), 
  46.                      url("{{absolute_url(asset('assets/css/fonts/KeepCalmW01-Light/67dd7a753cce719a17304beb973d5dfc.ttf'))}}") format("truetype");
  47.             }
  49.             {# @font-face {
  50.                 font-family: "KeepCalmW01-Light"; 
  51.                 src: url("http://db.onlinewebfonts.com/t/67dd7a753cce719a17304beb973d5dfc.eot"); 
  52.                 src: url("http://db.onlinewebfonts.com/t/67dd7a753cce719a17304beb973d5dfc.eot?#iefix") format("embedded-opentype"), 
  53.                     url("http://db.onlinewebfonts.com/t/67dd7a753cce719a17304beb973d5dfc.woff2") format("woff2"), 
  54.                     url("http://db.onlinewebfonts.com/t/67dd7a753cce719a17304beb973d5dfc.woff") format("woff"), 
  55.                     url("http://db.onlinewebfonts.com/t/67dd7a753cce719a17304beb973d5dfc.ttf") format("truetype"), 
  56.                     url("http://db.onlinewebfonts.com/t/67dd7a753cce719a17304beb973d5dfc.svg#KeepCalmW01-Light") format("svg"); 
  57.             } #}
  59. /* latin-ext */
  60. @font-face {
  61.   font-family: 'Lato';
  62.   font-style: normal;
  63.   font-weight: 300;
  64.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6u9w4BMUTPHh7USSwaPGR_p.woff2'))}}") format('woff2');
  65.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  66. }
  67. /* latin */
  68. @font-face {
  69.   font-family: 'Lato';
  70.   font-style: normal;
  71.   font-weight: 300;
  72.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6u9w4BMUTPHh7USSwiPGQ.woff2'))}}") format('woff2');
  73.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  74. }
  75. /* latin-ext */
  76. @font-face {
  77.   font-family: 'Lato';
  78.   font-style: normal;
  79.   font-weight: 400;
  80.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6uyw4BMUTPHjxAwXjeu.woff2'))}}") format('woff2');
  81.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  82. }
  83. /* latin */
  84. @font-face {
  85.   font-family: 'Lato';
  86.   font-style: normal;
  87.   font-weight: 400;
  88.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6uyw4BMUTPHjx4wXg.woff2'))}}") format('woff2');
  89.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  90. }
  91. /* latin-ext */
  92. @font-face {
  93.   font-family: 'Lato';
  94.   font-style: normal;
  95.   font-weight: 700;
  96.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6u9w4BMUTPHh6UVSwaPGR_p.woff2'))}}") format('woff2');
  97.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  98. }
  99. /* latin */
  100. @font-face {
  101.   font-family: 'Lato';
  102.   font-style: normal;
  103.   font-weight: 700;
  104.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6u9w4BMUTPHh6UVSwiPGQ.woff2'))}}") format('woff2');
  105.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  106. }
  107. /* latin-ext */
  108. @font-face {
  109.   font-family: 'Lato';
  110.   font-style: normal;
  111.   font-weight: 900;
  112.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6u9w4BMUTPHh50XSwaPGR_p.woff2'))}}") format('woff2');
  113.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  114. }
  115. /* latin */
  116. @font-face {
  117.   font-family: 'Lato';
  118.   font-style: normal;
  119.   font-weight: 900;
  120.   src: url("{{absolute_url(asset('assets/css/fonts/Lato/S6u9w4BMUTPHh50XSwiPGQ.woff2'))}}") format('woff2');
  121.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  122. }
  124. {# MONTSERRAT #}
  125. /* cyrillic-ext */
  126. @font-face {
  127.   font-family: 'Montserrat';
  128.   font-style: normal;
  129.   font-weight: 400;
  130.   font-display: swap;
  131.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2'))}}") format('woff2');
  132.   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  133. }
  134. /* cyrillic */
  135. @font-face {
  136.   font-family: 'Montserrat';
  137.   font-style: normal;
  138.   font-weight: 400;
  139.   font-display: swap;
  140.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2'))}}") format('woff2');
  141.   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  142. }
  143. /* vietnamese */
  144. @font-face {
  145.   font-family: 'Montserrat';
  146.   font-style: normal;
  147.   font-weight: 400;
  148.   font-display: swap;
  149.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2'))}}") format('woff2');
  150.   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  151. }
  152. /* latin-ext */
  153. @font-face {
  154.   font-family: 'Montserrat';
  155.   font-style: normal;
  156.   font-weight: 400;
  157.   font-display: swap;
  158.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2'))}}") format('woff2');
  159.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  160. }
  161. /* latin */
  162. @font-face {
  163.   font-family: 'Montserrat';
  164.   font-style: normal;
  165.   font-weight: 400;
  166.   font-display: swap;
  167.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2'))}}") format('woff2');
  168.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  169. }
  170. /* cyrillic-ext */
  171. @font-face {
  172.   font-family: 'Montserrat';
  173.   font-style: normal;
  174.   font-weight: 700;
  175.   font-display: swap;
  176.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTURjIg1_i6t8kCHKm45_dJE3gTD_u50.woff2'))}}") format('woff2');
  177.   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  178. }
  179. /* cyrillic */
  180. @font-face {
  181.   font-family: 'Montserrat';
  182.   font-style: normal;
  183.   font-weight: 700;
  184.   font-display: swap;
  185.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTURjIg1_i6t8kCHKm45_dJE3g3D_u50.woff2'))}}") format('woff2');
  186.   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  187. }
  188. /* vietnamese */
  189. @font-face {
  190.   font-family: 'Montserrat';
  191.   font-style: normal;
  192.   font-weight: 700;
  193.   font-display: swap;
  194.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTURjIg1_i6t8kCHKm45_dJE3gbD_u50.woff2'))}}") format('woff2');
  195.   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  196. }
  197. /* latin-ext */
  198. @font-face {
  199.   font-family: 'Montserrat';
  200.   font-style: normal;
  201.   font-weight: 700;
  202.   font-display: swap;
  203.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTURjIg1_i6t8kCHKm45_dJE3gfD_u50.woff2'))}}") format('woff2');
  204.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  205. }
  206. /* latin */
  207. @font-face {
  208.   font-family: 'Montserrat';
  209.   font-style: normal;
  210.   font-weight: 700;
  211.   font-display: swap;
  212.   src: url("{{absolute_url(asset('assets/css/fonts/Montserrat/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2'))}}") format('woff2');
  213.   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  214. }
  216. {# Quicksand #}
  217. /* vietnamese */
  218. @font-face {
  219.     font-family: 'Quicksand';
  220.   font-style: normal;
  221.   font-weight: 300;
  222.   font-display: swap;
  223.   src:url("{{absolute_url(asset('assets/css/fonts/Quicksand/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo58m-wi40.woff2'))}}") format('woff2');
  224.   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  225. }
  226. /* latin-ext */
  227. @font-face {
  228.   font-family: 'Quicksand';
  229.   font-style: normal;
  230.   font-weight: 300;
  231.   font-display: swap;
  232.   src: url("{{absolute_url(asset('assets/css/fonts/Quicksand/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo58i-wi40.woff2'))}}") format('woff2');
  233.   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  234. }
  235. /* latin */
  236. @font-face {
  237.     font-family: 'Quicksand';
  238.     font-style: normal;
  239.     font-weight: 300;
  240.     font-display: swap;
  241.     src: url("{{absolute_url(asset('assets/css/fonts/Quicksand/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo58a-wg.woff2'))}}") format('woff2');
  242.     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  243. }
  246.             header {
  247.                 position: fixed;
  248.                 top: -60px;
  249.                 left: 0;
  250.                 right: 0;
  251.             }
  252.             
  253.             p {
  254.                 page-break-after: always;
  255.             }
  256.             p:last-child {
  257.                 page-break-after: never;
  258.             }
  260.             .fc8 {
  261.                 background-color: rgb(254, 169, 0);
  262.             }
  263.             .fc9 {
  264.                 background-color: rgb(75, 119, 180);
  265.             }
  266.             .fc7 {
  267.                 background-color: rgb(45, 171, 226);
  268.             }
  269.             .fc6 {
  270.                 color: rgb(88, 88, 90);
  271.             }
  272.             .fc5 {
  273.                 color: rgb(59, 59, 59);
  274.             }
  275.             .fc4 {
  276.                 /* background-color: #e3e3e3; */
  277.                 padding: 0 60px;
  278.             }
  280.             .fc0 {
  281.                 color: rgb(96, 96, 96);
  282.             }
  283.             .fc1 {
  284.                 color: rgb(53, 53, 53);
  285.             }
  286.             .fc2 {
  287.                 background-color: rgb(255, 255, 255);
  288.             }
  289.             .fc3 {
  290.                 color: rgb(0, 0, 0);
  291.             }
  292.             .fc10 {
  293.                 color: #525252;
  294.             }
  295.             .fc11 {
  296.                 color: #353535;
  297.             }
  298.             .fc12 {
  299.                 color: #606060;
  300.             }
  301.             .result {
  302.                 background-color: #a9ee3b;
  303.                 border-radius: 1px;
  304.                 color: white;
  305.                 text-align: center;
  306.                 display: inline-block;
  307.                 font-size: 20px;
  308.                 border-radius: 0 0 30px 30px;
  309.                 height: 40px;
  310.                 width:200px;
  311.                 line-height: 40px;
  312.             }
  313.             .right {
  314.                 display: inline-block;
  316.                 position: relative;
  317.             }
  318.             .left {
  320.                 display: inline-block;
  321.                 position: relative;
  322.                 text-align: left;
  323.                 font-size: 1rem;
  324.             }
  325.             .table {
  326.                 display: inline-block;
  327.                 margin-left: 5px;
  328.                 margin-right: 5px;
  329.                 width: 30%;
  330.                 position: relative;
  331.                 text-align: center;
  332.                 border-radius: 5px;
  333.                 font-size: 1rem;
  334.             }
  335.             .flecha-down {
  336.                 width: 0;
  337.                 height: 0;
  338.                 border-left: 7px solid transparent; /* izquierda flecha */
  339.                 border-right: 7px solid transparent; /* derecha flecha */
  340.                 font-size: 0;
  341.                 line-height: 0;
  342.                 margin-left:auto;
  343.                 margin-right:auto;
  344.             }
  345.             .flecha-down-big {
  346.                 width: 0;
  347.                 height: 0;
  348.                 border-left: 14px solid transparent; /* izquierda flecha */
  349.                 border-right: 14px solid transparent; /* derecha flecha */
  350.                 font-size: 0;
  351.                 line-height: 0;
  352.                 margin-left:auto;
  353.                 margin-right:auto;
  354.             }
  355.             .line-grey {
  356.                 height: 1px;
  357.                 background-color: grey;
  359.             }
  360.             .body-end1 {
  361.                 background-color: rgb(75, 119, 180);
  362.                 color: white;
  363.                 text-align: justify;
  364.                 padding: 20px;
  365.                 margin-top: 30px;
  366.                 border-radius: 5px;
  367.             }
  368.             .body-end2 {
  370.                 color: black;
  371.                 text-align: left;
  372.                 text­align: justify;
  373.                 padding: 0 40px;
  374.             }
  375.             .color {
  376.                 color: white;
  377.                 border-radius: 5px 5px 0 0;
  379.             }
  380.             .container {
  381.                 font-size: 10px;
  382.             }
  384.             .img-logo-imagen1 {
  385.                 margin-left: 0;
  386.                 width: 15%;
  387.                 position: relative;
  388.             }
  390.             .img-logo-imagen2 {
  391.                 float: right;
  392.                 width: 38%;
  393.             }
  394.             .encabezado {
  395.                 /* margin-top: 25px; */
  396.                 margin-left: auto;
  397.                 margin-right: auto;
  398.             }
  399.             .col-6 {
  400.                 width: 50%;
  401.                 margin-top: 10px;
  402.                 display: inline-block;
  403.             }
  405.             .titulo {
  406.                 margin-top: 15px;
  407.                 text-align: center;
  408.                 font-size: 20px;
  409.             }
  410.             .image-qr {
  411.                 margin-top: 25px;
  412.                 width: 200px;
  413.                 height: 200px;
  415.             }
  416.             .texto {
  417.                 font-size: 15px;
  418.                 text-align: center;
  419.             }
  420.             .texto-izquieda {
  421.                 margin-top: 3px;
  422.                 text-align: left;
  423.             }
  425.             .col-6b {
  426.                 font-size: 13px;
  427.                 width: 50%;
  428.                 display: inline-block;
  429.             }
  430.             .col-4b {
  431.                 margin-top: 5px;
  432.                 font-size: 15px;
  433.                 width: 25%;
  434.                 display: inline-block;
  435.             }
  437.             .col-3b {
  438.                 margin-top: 5px;
  439.                 font-size: 15px;
  440.                 width: 18%;
  441.                 display: inline-block;
  442.             }
  443.             .fontLato {
  444.                 font-family: 'Lato', sans-serif;
  445.             }
  446.             .fontMontserrat {
  448.                 font-family: 'Montserrat', sans-serif;
  449.             }
  450.             .fontQuicksand {
  451.                 font-family: 'Quicksand', sans-serif;
  452.                 font-size: 1rem;
  454.             }
  455.             .light {
  456.                 font-weight: 300;
  457.             }
  458.             .regular {
  459.                 font-weight: 400;
  460.             }
  461.             .bold {
  462.                 font-weight: 700;
  463.             }
  464.             .black {
  465.                 font-weight: 900;
  466.             }
  467.             .manual-section-left {
  468.                 display: inline-block;
  469.                 width: 35%;
  470.                 text-align: left;
  471.             }
  472.             .manual-section-right {
  473.                 display: inline-block;
  474.                 width: 63%;
  475.                 right: 0px;
  476.                 text-align: right;
  477.             }
  478.             .manual-title-left {
  479.                 vertical-align: top;
  480.                 display: inline-block;
  481.                 width: 38%;
  482.                 padding-right: 10px;
  483.                 text-align: right;
  484.                 border-right: 2px solid #E8E8E8;
  485.                 height: 150px;
  486.             }
  487.             .manual-title-right {
  488.                 vertical-align: top;
  489.                 display: inline-block;
  490.                 width: 40%;
  491.                 text-align: left;
  492.                 height: auto;
  493.             }
  494.             .header-left {
  495.                 display: inline-block;
  496.                 text-align: left;
  497.                 width: 400px;
  498.             }
  499.             .header-right {
  500.                 display: inline-block;
  501.                 text-align: right;
  502.                 width: 400px;
  503.             }
  504.             .automatic-section-left {
  505.                 display: inline-block;
  506.                 width: 65%;
  507.                 text-align: left;
  508.             }
  509.             .automatic-section-right {
  510.                 display: inline-block;
  511.                 width: 30%;
  512.                 text-align: right;
  513.                 margin-top: -10px;
  514.                 height: 100px
  515.             }
  516.             .automatic-section-bubble {
  517.                 width:140px;
  518.                 height: 100%;
  519.                 float:left;
  520.                 /* line-height: 120px; */
  521.                 font-weight: 500;
  522.             }
  524.             {# .subsection {
  525.                 page-break-inside: avoid !important;
  526.             }
  527.             .section {
  528.                 page-break-after: always !important;
  529.             }
  530.             .result-header{
  531.                 page-break-before: always !important;
  532.             } #}
  534.             {# @media print{
  536.                 .section {
  537.                     page-break-after: always !important;
  538.                 }
  540.                 .subsection {
  541.                 page-break-inside: avoid !important;
  542.                 }
  543.                 .result-header{
  544.                     page-break-before: always !important;
  545.                 }
  546.             } #}
  548.             @media print{
  550.                 .subsection {
  551.                     page-break-inside: avoid !important;
  552.                 }
  553.                 .result-header{
  554.                     page-break-before: always !important;
  555.                 }
  556.             }
  560.             .automatic-section{
  561.                 background-color: #FFFFFF;
  562.             }
  564.             .section .manual-title-right p {
  565.                 margin: 0px 20px 20px 20px;
  566.                 padding: 20px;
  567.                 color: #525252;
  568.                 font-size: 35px;
  569.                 font-weight: 500;
  570.                 font-family: "KeepCalmW01-Medium";
  571.                 line-height : 40px;
  572.             }
  574.             .section .manual-title-right p::first-line {
  575.                 font-family: "KeepCalmW01-Light";
  576.                 font-weight: 300;
  577.             }
  579.             .border-result{
  580.                 border-top: solid #F4F4F4 1px;
  581.                 width: 100%;
  582.             }
  584.             .bibliography {
  585.                 font-family: 'Quicksand', sans-serif;
  586.                 font-style: italic;
  587.                 color:#666666;
  588.                 font-size: 12px;
  589.             }
  590.             .note-body {
  591.                 font-family: 'Quicksand', sans-serif;
  592.                 font-size: 16px;
  593.                 font-style: italic;
  594.             }
  596.             .bibliography-title {
  597.                 font-family: 'Quicksand', sans-serif;
  598.                 font-weight: 600;
  599.                 font-size: 13px;
  601.             }
  603.         </style>
  604.     </head>
  605.     <body>
  608.         {% for result_section in result_report.resultSections|sort((a, b) => a.orderNumber >= b.orderNumber) %}
  609.             <div class="section">
  610.                 <div style="display:flex;top:20px;vertical-align:middle" class="result-header">
  611.                     <div class="manual-title-left">
  612.                         <img style="height: 110px;" src="{{absolute_url(asset('uploads/section/images/'~result_section.section.path))}}">
  613.                     </div>
  615.                     <div class="manual-title-right">
  616.                         <div class="light" style="position: relative;top:10%;">
  617.                             <p style="font-family:KeepCalmW01-Medium;vertical-align:middle">{{result_section.section.title}}</p>
  618.                         </div>
  619.                     </div>
  620.                 </div>
  621.                 {% for result_subsection in result_section.resultSubsections|sort((d, e) => d.position >= e.position) %}
  622.                     
  623.                     {% if not result_subsection.subsection.isAutomatic and (pre == false or pre == null) %}
  624.                         <div class="fontLato subsection">
  625.                             <div class="fc4">
  626.                                 <div class="border-result">
  627.                                 </div>
  628.                                 <center>
  629.                                     <div class="result">
  630.                                         <span>Tus resultados</span>
  631.                                     </div>
  632.                                 </center>
  633.                                 <br>
  634.                                 <div>
  635.                                     <div class="row">
  636.                                         <div class="manual-section-left">
  637.                                             <div class="fc10" style="margin-top:0px">
  638.                                                 <p style="margin-top:0px;line-height : 40px;font-size:25px; font-family:KeepCalmW01-Medium">
  639.                                                 {{result_subsection.subsection.title}}
  640.                                                 </p>
  641.                                             </div>
  642.                                             {# <div class="black fc10" style="font-family:keepcalm; font-size:24px">
  643.                                                 <span>{{result_subsection.subsection.title}}</span>
  644.                                             </div> #}
  645.                                             <div class="fontMontserrat" style="font-size:24px;margin-top: 100px; margin-bottom: 30px;">
  646.                                                 <span class="bold fc11">
  647.                                                     Resultado descriptivo
  648.                                                 </span>
  649.                                                 <p class="regular fc12" style="padding:0px; margin: 0px;">
  650.                                                     {% for  answer in  result_subsection.answers %}
  651.                                                         {{answer[0]}}
  652.                                                     {% endfor %}
  653.                                                 </p>
  654.                                             </div>
  655.                                         </div>
  656.                                         <div class="manual-section-right">
  657.     
  658.                                             <div class="table fc2 " style="float:right">
  659.                                                 <div class="color fc8 bold" style="padding:10px;">GENOTIPO</div>
  660.                                             
  661.                                                 <div style="border-top:7px solid rgb(254,169,0)" class="flecha-down">
  663.                                                 </div>
  664.                                             
  665.                                                 <div>
  666.                                                     {% for aux_marker in result_subsection.subsection.markers|split(',') %}
  667.                                                         {% for result_marker in result_subsection.resultMarkers %}
  668.                                                             {% if aux_marker == result_marker.marker  %}
  669.                                                                 <div style="margin-top:5px;margin-bottom:5px"><span style="color:#606060"><span style="color:#606060">{{result_marker.genotype}}</span></div>
  670.                                                                 <div class="line-grey"></div>
  671.                                                             {% endif %}
  672.                                                         {% endfor %}
  673.                                                     {% endfor %}
  674.                                                     
  675.                                                 </div>
  676.                                             </div>
  677.     
  678.                                             <div class="table fc2">
  679.                                                 <div class="color fc9 bold" style="padding:10px;">GEN</div>
  680.                                                 <div style="border-top:7px solid rgb(75,119,180)" class="flecha-down">
  681.                                                         
  682.                                                 </div>
  683.                                                 
  684.                                                     <div>
  685.                                                         {% for aux_marker in result_subsection.subsection.markers|split(',') %}
  686.                                                             
  687.                                                             {% for result_marker in result_subsection.resultMarkers %}
  688.                                                                 {% if aux_marker == result_marker.marker  %}
  689.                                                                     <div style="margin-top:5px;margin-bottom:5px"><span style="color:#606060"><span style="color:#606060">{{result_marker.gene}}</span></div>
  690.                                                                     <div class="line-grey"></div>
  691.                                                                 {% endif %}
  692.                                                             {% endfor %}
  693.                                                         {% endfor %}
  695.                                                     </div>
  697.                                                 
  699.                                             </div>
  700.     
  701.                                             <div class="table fc2 ">
  702.                                                 <div class="color fc7 bold " style="padding:10px;">MARCADOR</div>
  703.                                             
  704.                                                     <div style="border-top:7px solid rgb(45,171,226)" class="flecha-down"></div>
  706.                                                     
  707.                                                     <div>
  708.                                                         {% for aux_marker in result_subsection.subsection.markers|split(',') %}
  709.                                                             {% for result_marker in result_subsection.resultMarkers %}
  710.         
  711.                                                                 {% if aux_marker == result_marker.marker  %}
  712.                                                                     <div style="margin-top:5px;margin-bottom:5px"><span style="color:#606060">{{result_marker.marker}}</span></div>
  713.                                                                     <div class="line-grey"></div>
  714.                                                                 {% endif %}
  715.                                                             {% endfor %}
  716.                                                         {% endfor %}
  718.                                                     </div>
  720.                                                 </div>
  722.                                             </div>
  724.                                             </div>
  725.                                             <div class="fontQuicksand">
  726.                                                 <div class="body-end1">
  727.                                                     {% for  answer in  result_subsection.answers %}
  728.                                                         {{answer[1]|raw}}
  729.                                                     {% endfor %}
  730.                                                 </div>
  731.                                                 <div style="border-top:14px solid rgb(75,119,180)" class="flecha-down-big"></div>
  732.                                                 <div style="word-break: break-all;">
  733.                                                     {# <p>     #}
  734.                                                         {% if result_subsection.aditionalText %}
  735.                                                             <br><br>
  736.                                                             {{result_subsection.aditionalText|raw}}
  737.                                                         {% endif %}
  739.                                                         {% if result_subsection.note %}
  740.                                                             <br>
  741.                                                             <div class="body-end1 fontQuicksand">
  742.                                                                 {# <span class="bibliography-title">{{'Note'|trans}}</span> #}    
  743.                                                                 <br>
  744.                                                                 {{result_subsection.note|raw}}
  745.                                                             </div>
  746.                                                             
  747.                                                         {% endif %}
  749.                                                         {% if result_subsection.bibliography %}
  750.                                                             <br><br>
  751.                                                               <span class="bibliography-title">{{'Bibliography'|trans}}</span>
  752.                                                             <br>
  753.                                                             {% for bio_item in result_subsection.bibliography|split('</p>') %}
  754.                                                         
  755.                                                                 <div class="bibliography">{{bio_item|replace({'</p><p>':'','<p>': '','</p>':'',"<p>&nbsp;</p>":'','</p>':'','\r\n':'','\n':'','\r':''})|raw}}</div>
  756.                                                             {% endfor %}
  757.                                                         {% endif %}
  758.                                                         <br><br><br>
  759.                                                     {# </p> #}
  760.                                                     {#Siguiendo estas recomendaciones tendrás una mayor posibilidad de beneficiar a tu salud y mantener un peso corporal óptimo.</p> #}
  761.                                                 </div>
  762.                                             </div>
  763.                                         </div>
  764.                                     </div>
  765.                                 </div>
  766.                             </div>
  767.                         </div>
  768.                     {% endif %}
  769.     
  770.                     {% if result_subsection.subsection.isAutomatic %}
  771.                     
  772.                         {% set aux_subsection_title = null %}
  773.                         {% for aux_marker in result_subsection.subsection.markers|split(',') %}
  774.                             {% for result_marker in result_subsection.resultMarkers     %}
  775.                                 {% if aux_marker == result_marker.marker  %}
  777.                                     <div class="fontLato subsection automatic-section" style= "margin-bottom: 50px;">
  778.                                         <div class="fc4" style="background-color:white">
  779.                                             <div class="border-result">
  780.                                             </div>
  781.                                             <center>
  782.                                                 <div class="result">
  783.                                                     <span>Tus resultados</span>
  784.                                                 </div>
  785.                                             </center>
  786.                                             <br>
  787.                                             <div class="container">
  788.                                                 <div class="row" style="display:flex">
  789.                                                         <div class="fc10" style="font-size:24px;font-family:KeepCalmW01-Medium; margin-top:34px; margin-bottom:40px; ">
  790.                                                             <span>
  791.                                                             {% if result_subsection.subsection.title !=  aux_subsection_title %}
  792.                                                                 {{result_subsection.subsection.title}}
  793.                                                                 {% set aux_subsection_title = result_subsection.subsection.title %}
  794.                                                             {% endif %}
  795.                                                             </span>
  796.                                                         </div>
  797.                                                         <div style="float:left;">
  798.                                                             <div>
  799.                                                                 <div style="
  800.                                                                 border: 1px solid none;
  801.                                                                 height: 220px;
  802.                                                                 background-image: url('{{absolute_url(asset('assets/img/burbujas.png'))}}');
  803.                                                                 color:white;top:-140px;
  804.                                                                 display:inline-block; text-align:center;
  805.                                                                 background-size: contain; background-repeat: 
  806.                                                                 no-repeat; background-size: cover;">
  807.                                                                     <div class="automatic-section-bubble" style="padding-right: 10px;width:130px;word-break: break-all;">
  808.                                                                         
  809.                                                                         <div  style="margin-top:55px; word-break: break-all;font-family: 'Montserrat', sans-serif; font-size:13px; vertical-align:middle{% if result_marker.gene|length > 7 %}; font-size:9px{% endif %}">
  810.                                                                             {% if result_marker.gene > 10 %}
  811.                                                                                 {% set temp_marker_parts = result_marker.gene|split(' ') %}
  812.                                                                                 {% for mp in temp_marker_parts %}
  813.                                                                                     <div>{{mp}}</div>
  814.                                                                                 {% endfor %}
  815.                                                                             {% else %}
  816.                                                                                 {{result_marker.gene}}
  817.         
  818.                                                                             {% endif %}
  819.                                                                         
  820.                                                                         </div>
  821.                                                                     </div>
  822.                                                                     <div class="automatic-section-bubble">
  823.                                                                         <div style="margin-top:55px;font-family: 'Montserrat', sans-serif; font-size:13px;vertical-align:middle ;">{{result_marker.marker}}</div>
  824.                                                                     </div>
  825.                                                                     <div class="automatic-section-bubble">
  826.                                                                         <div style="margin-top:55px;font-family: 'Montserrat', sans-serif; font-size:13px; vertical-align:middle">{{result_marker.genotype}}</div    >
  827.                                                                     </div>
  828.                                                                 </div>
  829.                                                             </div>
  830.                                                         </div>
  831.                                                         <div class="fc10" style="float:right; border: 1px solid none;width:400px">
  832.                                                             <div style="width:400px; border: 1px solid none;">
  833.                                                                 <div>
  834.                                                                     <span class="fontMontserrat" style="font-size:22px;margin-bottom:30px;font-weight:bold">
  835.                                                                     
  836.                                                                         {% if result_marker.answers[0] is defined %}
  837.                                                                             {{result_marker.answers[0]|raw}}
  838.                                                                         {% endif %}
  839.                                                                     </span>
  840.                                                                 </div>
  842.                                                                 {% if result_marker.answers[0] is defined %}
  843.                                                                     
  844.                                                                     {% if 'Ligeramente' in result_marker.answers[0]|raw %}
  845.                                                                         <img style="margin-top:20px;margin-left:-5px;width:67%;" src="{{absolute_url(asset('assets/img/barrita_celeste.png'))}}" alt="imd demo" width="250"/>
  846.                                                                     {% elseif 'Típico' in result_marker.answers[0]|raw or
  847.                                                                         'Típica'  in result_marker.answers[0]|raw or
  848.                                                                         'Menos'  in result_marker.answers[0]|raw or
  849.                                                                         'menos'  in result_marker.answers[0]|raw or
  850.                                                                         'menor'  in result_marker.answers[0]|raw or
  851.                                                                         'Menor'  in result_marker.answers[0]|raw or
  852.                                                                         'Normal'  in result_marker.answers[0]|raw or
  853.                                                                         'normal'  in result_marker.answers[0]|raw or
  854.                                                                         'bajo'  in result_marker.answers[0]|raw or
  855.                                                                         'Bajo'  in result_marker.answers[0]|raw or
  856.                                                                         'baja'  in result_marker.answers[0]|raw or
  857.                                                                         'Podes digerir la leche'  in result_marker.answers[0]|raw or
  858.                                                                         'Baja'  in result_marker.answers[0]|raw %}
  859.                                                                         <img style="margin-top:20px;" src="{{absolute_url(asset('assets/img/horizontal-bar.png'))}}" alt="imd demo" width="250"/>
  860.                                                                     {% else %}
  861.                                                                         <img style="margin-top:20px;margin-left:-5px;width:67%;" src="{{absolute_url(asset('assets/img/barrita_azul.png'))}}" alt="imd demo" width="250"/>
  862.                                                                     {% endif %}
  863.                                                                 {% else %}
  864.                                                                     <img style="margin-top:20px;" src="{{absolute_url(asset('assets/img/horizontal-bar.png'))}}" alt="imd demo" width="250"/>
  865.                                                                 {% endif %}
  866.                                                             
  867.                                                                     {#<img src="{{absolute_url(asset('assets/img/horizontal-bar.png'))}}" style="transform: rotate(180deg)" alt="imd demo" width="250"/>#}
  868.                                                                 <div style="">
  869.                                                                     <br>
  870.                                                                     <span class="fontMontserrat" style="font-size:22px;margin-bottom:30px;font-weight:bold">{{'Descriptive Result'|trans}}</span>
  871.                                                                     <br>
  873.                                                                     <p style="font-size: 16px;text-align: justify;">
  874.                                                                         {% if result_marker.answers[1] is defined %}
  875.                                                                             {{result_marker.answers[1]|raw}}
  876.                                                                         {% endif %}
  877.                                                                     </p>
  878.                                                                     
  879.                                                                     
  880.                                                                 </div>
  882.                                                             </div>
  883.                                                         </div>
  884.                                                         <div style="clear:both"></div>
  885.                                                         
  886.                                                         <div style="margin-top:30px; margin-bottom:10px; display:block;">
  888.                                                             {% if result_marker.note %}
  889.                                             
  890.                                                                 <div class="body-end1 fontQuicksand">
  891.                                                                     {# <span class="bibliography-title">{{'Note'|trans}}</span> #}    
  892.                                                                     {{result_marker.note|raw}}
  893.                                                                 </div>
  894.                                                                 
  895.                                                             {% endif %}
  896.                                                             
  897.                                                             {% if result_marker.bibliography %}
  898.                                                             <br>
  899.                                                                 {# <strong>{{'Bibliography'|trans}}:</strong> #}
  900.                                                                 <span class="bibliography-title">{{'Bibliography'|trans}}</span>
  901.                                                                 <br>
  902.                                                                 {# {{result_marker.bibliography|raw}} #}
  903.                                                                 <span style="margin-bottom:30px;" class="bibliography">{{result_marker.bibliography|replace({'</p><p>':'<br>','<p>': '','</p>':'<br>','</p>':'<br>','\r\n':'<br>','\n':'<br>','\r':'<br>'})|raw}}</span>
  904.                                                             {% endif %}
  905.                                                         
  906.                                                         </div>
  909.                                                     
  910.                                                     <div style="clear:both"></div>
  911.                                                 </div>
  912.                                             </div>
  915.                                         </div>
  916.                                     </div>
  917.                                 {% endif %}
  918.                             {% endfor %}
  919.                              {# <br>  #}
  920.                         {% endfor %}
  921.                         {# <h4>aaaaa</h4> #}
  922.                     {% endif %}
  923.     
  924.     
  925.                 {% endfor %}
  926.             {% endfor %} 
  927.             </div>
  929.             </body>
  930.         </html>
  931.     </body>
  932. </html>