@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
    
    :root {
        --color-primary: #7380ec;
        --color-danger: #ff7782;
        --color-success: #41f1b6;
        --color-warning: #ffbb55;
        --color-white: #fff;
        --color-info-dark: #7d8da1;
        --color-info-light: #dce1eb;
        --color-dark: #363949;
        --color-light: rbga(132,139,200,0.18);
        --color-primary-variant: #111e88;
        --color-dark-variant: #677483;
        --color-background: #f6f6f9;
        --color-selector:  rgba(0, 128, 0, 0.74); 
        --color-row-dark: #d2d7db;
        --color-row-light: #f6f6f9;
        --color-modal-light: #7c8488;
        --color-modal-dark: rgba(255, 255, 255, 0.822);
        --color-section-background: rgba(2, 0, 36, 1);
        
        --card-border-radius: 2rem;
        --table-border-radius: 1em;
        --border-radius-1: 0.4rem;
        --border-radius-2: 0.8rem;
        --border-radius-3: 1.2rem;
    
        --card-padding: 1.8rem;
        --padding-1: 1.2rem;
    
        --box-shadow: 0 2rem 3rem var(--color-light);
    
    }
    .dark-theme-variables {
        --color-background: #181a1e;
        --color-dark: #edeffd;
        --color-dark-variant: #a3bdcc;
        --color-light: rbga(0,0,0,0.4);
        --color-white: #202528;
        --box-shadow: 0 2rem 3rem var(--color-light);
        --color-row-dark: #edeffd60;
        --color-row-light: #2c3336;
        --color-modal-light: #dadadaee;
        --color-modal-dark: #7c8488;
    }
    
    * {
        margin:0;
        padding:0;
        outline: 0;
        appearance: 0;
        border: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }
    
    html{
        font-size: 14px;
        margin: auto;
    }

    h2 {
        text-align: center;
		font-family: poppins, sans-serif;
        font-size: 2.3rem;
		font-weight: 600;
    }
    h3 {
        text-align: center;
		font-family: poppins, sans-serif;
        font-size: 1.9rem;
		font-weight: 500;
    }
    h4 {
        text-align: center;
		font-family: poppins, sans-serif;
        font-size: 1.75rem;
		font-weight: 400;
    }

    body{
        margin: auto;
        width: 95vw;
        font-family: poppins, sans-serif;
        font-size: 0.88rem;
        background: var(--color-background) ;
        user-select: text;
        overflow-x: hidden;
    
    }
 
     .linebreak {
        width: 97%;
        height: 10px;
        margin-top: 20px;
        margin-bottom: 30px;
        border-radius: 5px;
    /*    border-bottom: 5px solid rgb(54, 16, 143);    background: blue; */
       
        background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    }
     .linebreak100 {
        width: 100%;
        height: 10px;
        margin-top: 20px;
        margin-bottom: 30px;
        border-radius: 5px;
   		background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    }
    .sectionheadblock {
        height: auto;
        border-radius: 10px;
        border-width: 2px !important;
        border-style: solid;
        border-color: var(--color-primary);
        margin-bottom: .8em;
        background-color: var(--color-section-background);
        color: var(--color-white);
    }
    
    .sectionlinebreak {
        width: 98%;
        height: 20px;
        margin-top: 20px;
        margin-bottom: 30px;
        border-radius: 10px;
    /*    border-bottom: 5px solid rgb(54, 16, 143);    background: blue; */
       
        background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    }
    
    .summarysection {
        width: 90%;
        font-family: poppins, sans-serif;
        font-size: 1.3em;
        text-align: justify;
    }
    .sectionheader {
        color:#261779;
        font-weight: 600;
    
    }
    .sectionheader p {
        font-size: 16px;
        text-align: center;
        font-weight: 700;
    }
    .findingchart {
        width: 40%;
        display: block;
        border: #111e88;
        border-width: 3px !important;
        border-style: solid;
        text-align: center;
        box-shadow: var(--box-shadow);
        transition: all 300ms ease;
    }
	#summaryGraphs1 div {
		display: flex;
		flex-direction: row;
		justify-content: left;
		height: 250px;
		
	}
	.side2side {
		display:  inline-block;
		width: 40%;
	}
    .chartsep {
		margin: 55px;
	}
	.chartrow {
        display:  grid;
		align-items: float;
        grid-template-rows: 300px 1fr;
        grid-template-columns: repeat(2,2fr);
    }
    .chartitem {
        margin: auto;
        box-sizing: border-box;
        display:grid;
    }
    #ingestionstats {
        width: 85%;
        display: block;
        align-items: center;
        border: #111e88;
        border-width: 3px !important;
        border-style: solid;
        text-align: center;
        box-shadow: var(--box-shadow);
        transition: all 300ms ease;
    }
    #resolutionchart {
      /*  border:#181a1e;
        border-radius: 7px;
     */
    }
    .header {
        background: var(--color-background);
        margin: 2em 2em;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    
    }
    .emailheader {
        background: var(--color-background);
        margin: 2em 2em;
        display: grid;
        grid-template-columns: repeat(1,1fr);
    
    }
    .emailheaderlogo {
        max-height: 45px;
    }
    
    .headerlogo {
        max-height: 85px;
    }
    #logolink {
        grid-row: 1;
        grid-column: 1;
    }
    #headertitle {
        grid-row: 1;
        grid-column: 2;
        text-align: center;
    }
	#headertitle-r {
        grid-row: 1;
        grid-column: 3;
        text-align: right;
    }
    .header p {
        font-size: large;
        font-weight: 600;
        color: var(--color-primarydark);
    }
    .content {
        background: var(--color-background);
        display:  grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2.0rem;
        margin-left: 2em;
        margin-right: 2em;
    }
    
    
    .primary{
        color: var(--color-primary);
    }
    .danger{
        color: var(--color-danger);
    }
    .success{
        color: var(--color-success);
    }
    .warning{
        color: var(--color-warning);
    }
    .hidediv {
        display: none;
    }
    .standardtable  {
        width: 90%;
        font-size: medium;
	    margin-left: auto;
		margin-right: auto;
	}
    .showhidebutton {
        font-size: .4em;
        float: right;
        margin-right: 8%;
    }
    
    .indent10 {
        align: center;
        padding-left: 10%;
    }
    .indent10 table {
        background: var(--color-white);
        width: 80%;
        border-radius: var(--table-border-radius);
        padding: var(--card-padding);
        text-align: left;
        box-shadow: var(--box-shadow);
        transition: all 300ms ease;
    }
    .indent10 table thead th {
        height: 2.8rem;
        border-bottom: 2px solid var(--color-light);
        color: var(--color-dark-variant);
    }
    .indent10 table tbody td{
        height: 2.8rem;
        border-bottom: 2px solid var(--color-light);
        color: var(--color-dark-variant);
    }
    #trendstack div{
		width: auto;
		height: auto;
	}
    .footer {
        background: var(--color-background); 
        font-size: 1.1em;
        margin: 2em;
        width: 95%;
    
    }
    
	/* Style the tab */
	.tab {
	overflow: hidden;
	/* border: 1px solid var(--color-dark-variant); */
	background-color: var(--color-background);
	width: auto;
	}

	/* Style the buttons that are used to open the tab content */
	.tab button {
		background-color: var(--color-info-light);
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.5s;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
		background-color: var(--color-modal-dark);
	}

	/* Create an active/current tablink class */
	.tab button.active {
		background-color: var(--color-modal-dark);
	}

	/* Style the tab content */
	.tabcontent {
		display: none;
		padding: 6px 12px;
		border: 3px solid var(--color-dark-variant);
	}
	.tabcontent p, .tabcontent h4,.tabcontent video {
		text-align: center;
	}
	.redbold {
		color: red;
		font-weight: bold;
	}
	.hoverrowpop {
			display: none;
	}
	.hoverrowparent:hover + .hoverrowpop {
		display: table-row;
		color: red;
	}
    @media print {
        .pagebreak { display: block; page-break-after: always; }
    }