.heading {
    padding-top: 1rem;
}

h1{
    font-weight:bolder;
}

b{
    color:var(--primary-color);
}
.intro {
    margin-top: 5rem;
}
.logo{
    width:441px;
    height:502px;
    align-content:center;
    margin-left:-5rem;
}
h1 {
    font-weight: bold;
    font-size: large;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.user-email {
    color: var(--primary-color);
}

p {
    margin-left: 5rem;
}

.chart {
    display: flex;
    width: 100%;
    align-content: center;
}
.charts1 {
    display: flex;
    margin-left: 5rem;
    margin-right: 5rem;
    width: 100%;
    align-content: center;
}

/*.chart-container2{
    margin-left:5rem;
    margin-right:-9rem;
    height:10rem;
}
*/
.chart-container {
    width:100%;
}

#incident-pie-chart{
    height: 400px;
    width:90%;
}

#incidentChartNikeHeadOffice {
    height: 200px;
}

/*.bar-charts {
    width: 100%;
    margin-left: 10rem;
    height: 0%;
}

.bar-charts2 {
    width: 100%;
    margin-left: 10rem;
    
}*/


#retractableDiv {
    width: auto;
    height: auto;
    background-color: transparent;
    margin-top: 10px;
    transition: height 1.0s ease;
    overflow: hidden;
}

.hidden {
    height: 0;
    padding: 0;
}
#toggleButton{
    width:100%;
    background-color: var(--secondary-color);
    color:white;
}
.button-text{
    color:white;
}
.retract {
    color: var(--priamry-color) !important;
    width: 100%;
    margin-top:2rem;
}

.retract2 {
    color: var(--priamry-color) !important;
    width: 100%;
    margin-top: 2rem;
}
#toggleButton2 {
    width: 100%;
    background-color: var(--secondary-color);
    color: white;
}

#retractableDiv2 {
    width: 100%;
    height: auto;
    background-color:transparent;
    margin-top: 10px;
    transition: height 1.0s ease;
    overflow: hidden;
}
.hidden2 {
    height: 0;
    padding: 0;
}

.retract3 {
    color: var(--priamry-color) !important;
    width: 100%;
    margin-top: 2rem;
}
#toggleButton3 {
    width: 100%;
    background-color: var(--secondary-color);
    color: white;
}

#retractableDiv3 {
    width: 100%;
    height: auto;
    background-color:transparent;
    margin-top: 10px;
    transition: height 1.0s ease;
    overflow: hidden;
}
.hidden3 {
    height: 0;
    padding: 0;
}


.retract4 {
    color: var(--priamry-color) !important;
    width: 100%;
    margin-top: 2rem;
}
#toggleButton4 {
    width: 100%;
    background-color: var(--secondary-color);
    color: white;
}

#retractableDiv4 {
    width: 100%;
    height: auto;
    background-color:transparent;
    margin-top: 10px;
    transition: height 1.0s ease;
    overflow: hidden;
}
.hidden4 {
    height: 0;
    padding: 0;
}

.incident-report-h1{
    margin-top:2rem;
    font-weight:bold;
    font-size: 2em;
}