$moblie: 767px; $desktop: 1025px; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; // border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }; p{ line-height: 1.5 !important; letter-spacing: 0.5px; } .table-1{ font-size: 10px; } .Analytics-report{ overflow: hidden; h4{ margin-bottom: 10px; } } .facebook-like{ color:#4267B3; font-size: 20px; } #report-cover{ @media screen and(max-width:$moblie) { height: 110vh; } } .Analytics-report-page{ // border:1px solid #000; height: 1123px; position: relative; overflow-y: hidden; @media screen and(max-width:$moblie) { height: auto; } .pagenumber{ position: absolute; bottom:10px; right:15px; p{ font-size: 24px; } } .Orange{ width: 200px; top:-120px; left: -50px; z-index: 30; } .Purple{ width: 200px; top:-70px; left: -100px; // z-index: 50; } .Orange2{ width: 130px; top:-80px; left: -40px; z-index: 30; } .Purple2{ width: 150px; top:-60px; left: -100px; // z-index: 50; } } #myChart{ margin-top: 10px; margin: 0 auto !important; width: 350px !important; height: 250px !important; } #myChart2{ margin-top: 10px; margin: 0 auto !important; width: 350px !important; height: 250px !important; } #myChart-pie{ // border: 1px solid #000 !important; margin: 0 auto !important; width: 300px !important; height: 300px !important; } #myChart-Doughnut1,#myChart-Doughnut2,#myChart-Doughnut3,#myChart-Doughnut4{ margin: 0 auto !important; width: 100% !important; height: 200px !important; @media screen and(max-width:$moblie) { } } .Doughnut-box{ text-align: center; p{ margin-top: 10px; } } #lineChart{ // border: 1px solid #000 !important; margin: 0 auto !important; width: 700px !important; height: 200px !important; } h1{ font-size: calc(1.2rem + 1.5vw); } h2{ font-size: 18px; } h4{ font-size: calc(1.2rem + .3vw); } li{ list-style: disc; margin-left:20px; } @media print { body { -webkit-print-color-adjust: exact; } @page { size: A4 portrait !important; } } .Data-h2{ text-align: center; padding: .5rem; color:#fff; background: linear-gradient(20deg, #EA5413, #920783); } .Analytics-report-title{ margin-left: auto; width: 80vw; margin-top: -40px; } .choozmo{ width: 200px; } .adv-type{ margin-top: 15px; p{ font-weight: 900; } } #myChart-bar{ width: 100% !important; height: 350px !important; } #myChart-bar-yt{ width: 100% !important; height: 350px !important; } #bar-fb{ width: 100% !important; height: 350px !important; } #bar-yt{ width: 100% !important; height: 350px !important; } .choozmo-cover{ width: 350px; @media screen and(max-width:$moblie) { width: 110px; } } .choozmo-copyrighted{ @media screen and(max-width:$moblie) { text-align: center; margin-top: 30px; } } .cover-title{ position: relative; top:-100px; width: 28vw; background: rgba(234,84,19,0.8); margin-left: 5vh; padding: 20px; @media screen and(max-width:$moblie) { width: 60vw; margin-left: 10px; } h1{ font-size: 28px; @media screen and(max-width:$moblie) { font-size: 22px; } } } .copyrighted{ margin-top: 150px; @media screen and(max-width:$moblie) { margin-top: 30px; } } .cover-text{ width: 80vw; margin: 80px auto; @media screen and(max-width:$moblie) { margin: 50px auto; } hr{ height: 5px; width: 25vw; opacity: 1; margin:30px 0px ; } }