/* fallback */
@font-face {
    font-family: 'Roboto Light';
    font-weight: 100;
    src: url(/style/fonts/Roboto-Light.ttf);
}

/* fallback */
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 100;
    src: url(/style/fonts/material-icons-outlined.woff2) format('woff2');
}
  
.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* fallback */
@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(/style/fonts/material-icons-round.woff2) format('woff2');
}
  
.material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(/style/fonts/material-icons-sharp.woff2) format('woff2');
}
  
.material-icons-sharp {
    font-family: 'Material Icons Sharp';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: 'Material Icons Two Tone';
    font-style: normal;
    font-weight: 400;
    src: url(/style/fonts/material-icons-two-tone.woff2) format('woff2');
}
  
.material-icons-sharp {
    font-family: 'Material Icons Two Tone';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

:root{
    --colour-primary: #00A7EE;
    --colour-secondary: #00A7EE;

    --colour-high: #b02525;
    --colour-med: #e3a944;
    --colour-low: #45b15d;

    --colour-bar1: #00A7EE;
    --colour-bar2: #c2e8f8;
    --colour-bar3: #094158;
    --colour-bar4: #437c95;

    --colour-danger: #ff7782;
    --colour-success: #41f1b6;
    --colour-warning: #ffbb55;
    --colour-white: #ffffff;
    --colour-info-dark: #13263E;
    --colour-info-light: #dce1eb;
    --colour-dark: #363949;
    --colour-light: #eaf8fd;
    --colour-primary-variant: #111e88;
    --colour-dark-variant: #677483;
    --colour-bg: #ffffff;
    --colour-bg-loading: #f5f5f5;
    --colour-bg-shadow: #d4dae4;
    --colour-bg-shadow-hover: #eaedf3;
    --colour-table-header: #A7ACC8;
    --colour-table-data: #13263E;
    --colour-table-line: #e5ebf5;

    --default-font-family: 'Roboto Light';
    --default-user-select: none;

    --card-border-radius: 0.8rem;
    --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 0rem 5rem var(--colour-bg-shadow);
    --box-shadow-hover: 0 0rem 5rem var(--colour-bg-shadow-hover);
}

*{
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: none;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html{
    font-size: 14px;
}

body{
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto Light';
    font-size: 1.02rem;
    background: var(--colour-bg);
    user-select: var(--default-user-select);
    overflow-x: hidden;
}

img{
    width: 100%;
    display:block;
}

a{
    color: var(--colour-dark)
}

a:active,a:hover{
    outline-width:0
}

h1{
    font-weight: 800;
    font-size: 1.8rem;
}

h2{
    font-size: 1.4rem;
}

h3{
    font-size: 1.2rem;
}

h4{
    font-size: 0.8rem;
}

h5{
    font-size: 0.7rem;
}

small{
    font-size: 0.75rem;
}

.profile-photo{
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
}

.text-muted{
    color: var(--colour-info-dark);
}

p{
    color: var(--colour-dark-variant)
}

b{
    color: var(--colour-dark)
}

.primary{
    color: var(--colour-primary)
}

.success{
    color: var(--colour-success)
}

.warning{
    color: var(--colour-warning)
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*===========================================================================*/
/*                                 Page Style                                */
/*===========================================================================*/
.container{
    display: grid;
    width: 100%;
    margin: 0 auto;
    gap: 1.8rem;
    padding-right: 1.8rem;
    grid-template-columns: 20rem auto;
}

aside {
    background: white;
    position: sticky;
}

aside .nav-container{
    display: block;
    position: sticky;
    height: 100%;
}

aside .sidebar .logo img{
    width: 10rem;
    height: auto;
    margin: 0 auto;
    padding-top: 2rem;
}

aside .sidebar img{
    width: 1.5rem;
}

aside .close{
    display: none;
}

aside .sidebar{
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0rem;
}

aside .logo{
    position: sticky;
    bottom: 1rem;
    width: 10rem;
    margin: 0 auto;
}

aside .logo img{
    position: sticky;
    bottom: 1rem;
    width: 10rem;
    margin: 0 auto;
}

aside .logobottom{
    position: absolute;
    bottom: 0;
    width: 10rem;
    height: 100vh;
    z-index: -2;
}

aside .logobottom img{
    position: absolute;
    bottom: 1rem;
    width: 5rem;
    margin: 0 auto;
    left: 7rem;
}

aside h3{
    font-weight: 500;
}

aside .sidebar a{
    display: flex;
    color: var(--colour-info-dark);
    margin-left: 0rem;
    gap: 1rem;
    align-items: center;
    position: relative;
    height: 3.7rem;
    /*transition: all 300ms ease;*/
    transition: all 300ms ease;
}

aside .sidebar a:before {
    font-size: 1.0rem;
    content: '';
    width: 6px;
    height: 100%;
    background: transparent;
}

aside .sidebar a span {
    font-size: 1.0rem;
}

aside .sidebar a:last-child{
    position: absolute;
    bottom: 4rem;
    width: 100%;
}

aside .sidebar a.last{
    position: absolute;
    bottom: 4rem;
    width: 100%;
}

aside .sidebar a.active{
    background: var(--colour-white);
    color: var(--colour-primary);
    margin-left: 0;
}

aside .sidebar a.active:before{
    content: '';
    width: 6px;
    height: 100%;
    background: var(--colour-primary);
}

aside .sidebar a.active span{
    background: var(--colour-primary);
    /*margin-left: calc(1rem - 6px);*/
    /*margin-left: 0;*/
}

aside .sidebar a:hover{
    color: var(--colour-primary);
    margin-left: 1rem;
}

aside .sidebar a.active:hover{
    background: var(--colour-white);
    margin-left: 0;
}

aside .sidebar a.hover span{
    /*margin-left: 1rem;*/
}

/*===========================================================================*/
/*                               Content Style                               */
/*===========================================================================*/
.header{
    height: 8rem;
    width: 100%;
    background: var(--colour-bg);
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    align-items: start;
    text-align: left;
    margin-top: 2rem;
    justify-content: space-between;
}

.header h1{
    padding-top: 2.5rem;
    color: var(--colour-info-dark);
    display:inline-block;
    float: left;
    justify-content: left;
    width: 100%;
}

.header img{
    display:inline-block;
    justify-content: center;
    width: 100%;
    height: 9rem;
    position: relative; 
    top: -1rem;
}

.header .headerlocationselect{
    display:inline-block;
    justify-content: right;
    width: 100%;
    min-width: 100%;
    max-width: 300px;
}

.header .headerlocationselect select{
    max-width: 25rem;
    float: right;
}

.headerlocationselect .field {
    position: relative;
    margin-bottom: 15px;
    width: 60%;
    margin: 10px auto;
    display: block;
    justify-content: center;
    min-width: 300px;
}

.headerlocationselect select {
    outline: 0;
    border-color: #c3c3c3;
}

.headerlocationselect select:focus {
    outline: 0;
    border-color: #1899da;
}

.headerlocationselect select {
    width: 100%;
    line-height: 40px;
    padding: 0 3em;
    box-sizing: border-box;
    font-size: 1em;
    font-family: 'Roboto Light';
    color: #222;
    border: 1px solid #ccc;
    border-radius: 7px;
}






main .insights{
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(3, 1fr);
}

main .insights h3{
    margin: 1rem 0 0.6rem;
    font-size: 1rem;
}

main .insights > div {
    background: var(--colour-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .insights > div:hover{
    box-shadow: var(--box-shadow-hover);
}

main .insights > div span{
    background: var(--colour-primary);
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--colour-white);
    font-size: 2rem;
    font-weight: 100;
}

main .insights > div.first span{
    background: var(--colour-success);

}

main .insights > div.second span{
    background: var(--colour-warning);
}

main .insights > div.third span{
    background: var(--colour-primary-variant);
}

main .insights > div .middle{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main .insights .right{
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
}

main .insights svg{
    width: 7rem;
    height: 7rem;
    transform: rotate(-90deg);
}

main .insights svg circle{
    fill: none;
    stroke: var(--colour-primary);
    stroke-width: 0.4rem;
    stroke-linecap: round;
    transform:  translate(5px, 5px);
    stroke-dasharray: 226;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s ease-in-out;
}

main .insights .first svg circle{
    stroke-dasharray: calc(226*0.81) calc(226*0.29);
    stroke-dashoffset: calc(226*0.81);
}

main .insights .second svg circle{
    stroke-dasharray: calc(226*0.3) calc(226*0.7);
    stroke-dashoffset: calc(226*0.3);
}

main .insights .third svg circle{
    stroke-dasharray: calc(226*0.2) calc(226*0.8);
    stroke-dashoffset: calc(226*0.2);
}

/*===========================================================================*/
/*                              Cards Contents                               */
/*===========================================================================*/
main .main-contents{
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(100px, auto);
}

main .main-contents > div {
    background: var(--colour-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .main-contents > div:hover{
    box-shadow: var(--box-shadow-hover);
}

/*===========================================================================*/
/*                              Cards Contents                               */
/*===========================================================================*/
main .main-contents12{
    /*
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(100px, auto);
    */

    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, 10rem);
    justify-content: center;
    grid-auto-flow: dense;
}

main .main-contents12 > div {
    background: var(--colour-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .main-contents12 > div:hover{
    box-shadow: var(--box-shadow-hover);
}

/*===========================================================================*/
/*                              Cards Contents                               */
/*===========================================================================*/
main .main-contents-centered{
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    max-width: 1000px;
}

main .main-contents-centered > div {
    background: var(--colour-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .main-contents-centered > div:hover{
    box-shadow: var(--box-shadow-hover);
}

div #documents-container {
    position: relative;
}

div #images-container {
    position: relative;
}

div #compliance-container {
    position: relative;
}

div #cssr-container{
    position: relative;
}

div #watertemperatures-container{
    position: relative;
}

div #pichart-container{
    position: relative;
}

div #overduetasks{
    position:relative;
}

div #overduetasks-container{
    position: relative;
}

div #calendar-container{
    position: relative;
}

div #information-container{
    position: relative;
}

div #clientinformation-container{
    position: relative;
}

.spinner-container {
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
}

.spinner  {
    position: relative;
    height:60px;
    width:60px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left:1px solid rgba(0,174,239,.15);
    border-right:1px solid rgba(0,174,239,.15);
    border-bottom:1px solid rgba(0,174,239,.15);
    border-top:1px solid rgba(0,174,239,.8);
    border-radius:100%;
 }
 
 @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
 }
 @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
 }
 @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
 }
 @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
 }

/*===========================================================================*/
/*                                Cards Style                                */
/*===========================================================================*/
main .card-header{
    display:flex;
    gap: 1rem;
    color: var(--colour-info-dark);
    font-weight: 800;
    font-size: 1.5rem;
    width: 100%;
}

main .card-header .title{
    margin-top: 0.1rem;
    float: left;
}

main .card-header .refreshicon{
    margin-top: 0.1rem;
    margin-right: 0;
    margin-left:auto;
    display:block;
    text-align: right;
    float: right;
}

main .card-header .addicon{
    margin-top: 0.1rem;
    margin-right: 0;
    margin-left:auto;
    display:block;
    text-align: right;
    float: right;
}

/*===========================================================================*/
/*                              Dcouments Style                              */
/*===========================================================================*/
main .documents{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

main .documents h3 {
    margin-bottom: 0.8rem;
}

main .documents{
    display: block;
}

main .documents-contents{
    display: flex;
    overflow-x: auto;
    margin: 0 auto;
    max-width: 350px;
}

main .documents-contents::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

main .documents-contents::-webkit-scrollbar-thumb {
    background: transparent;
}
  
main .documents-contents::-webkit-scrollbar-thumb:hover {
    background: var(--colour-primary); 
}

main .documents .documents-attach-doc{
    display: block;
    width: 10rem;
}

main .documents .documents-attach-doc img{
    margin: 1rem;
    width: 4rem;
    justify-content: center;
}

main .documents .documents-attach-doc h5{
    width: 6rem;
    text-align: center;
    overflow-wrap: break-word;
}

#ppmdocument{
    position: relative;
    top: calc(25% - 10px);
}

#ppmdocument img{
    width: auto;
    height: auto;
    display: block;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

#ppmdocument h5{
    word-wrap:break-word;
    position: relative;
}

/*===========================================================================*/
/*                               Images Style                                */
/*===========================================================================*/
main .images{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

main .images h3 {
    margin-bottom: 0.8rem;
}

main .images{
    display: block;
}

main .images-contents{
    display: flex;
    overflow-x: auto;
    margin: 0 auto;
    max-width: 350px;
}

main .images-contents::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

main .images-contents::-webkit-scrollbar-thumb {
    background: transparent;
}
  
main .images-contents::-webkit-scrollbar-thumb:hover {
    background: var(--colour-primary); 
}

main .images .images-attach-doc{
    display: block;
    width: 8rem;
    justify-content: center;
}

main .images .images-attach-doc img{
    margin: 1rem;
    width: 6rem;
    justify-content: center;
}

main .images .images-attach-doc h5{
    width: 8rem;
    text-align: center;
    overflow-wrap: break-word;
}

/*===========================================================================*/
/*                                Table Style                                */
/*===========================================================================*/
main .table{
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-right: 1rem;
    padding-left: 1rem;
}

main .table > div {
    background: var(--colour-white);
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
    transition: all 300ms ease;
}

main .table > div:hover{
    box-shadow: none;
}

main .table h3 {
    margin-bottom: 2.8rem;
}

main table{
    background: var(--colour-white);
    width: 100%;
    text-align: center;
}

main .table th{
    color: var(--colour-table-header);
}

main .table td{
    height: 3.8rem;
    color: var(--colour-table-data);
    border-bottom: 1px solid var(--colour-table-line);
}

main .table .align-left{
    text-align: left;
}

main .table .align-right{
    text-align: right;
}

.riskdot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.lowriskcolour {
    background-color: rgb(18, 218, 0);
}

.medriskcolour {
    background-color: rgb(218, 203, 0);
}

.highriskcolour {
    background-color: rgb(218, 0, 0);
}

main .table tr:last-child td{
    border: none;
}

#chart-area-container {
    width: calc(100% * 0.6);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

#chart-area-container #chart-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bar-chart-area {
    width: calc(100% * 0.6);
    justify-content: center;
    margin: 0 auto;
}

main .bar-table{
    background-color: #ffffff;
    width:100%;
    height: calc(100% * 0.7);
    justify-content: center;
    margin-top: calc(100% * 0.1);
}

#overdue-bar-text td{
    background-color: transparent;
    height: calc(100% * 0.4);
    font-size: 0.8rem;
    transform: rotate(45deg);
}

.bars td {
    vertical-align: bottom;
}

.bar-table .bars div:hover {
    opacity: 0.6;
}


.textred{
    color:rgb(218, 0, 0);
    font-weight: 800;
}

.textgreen{
    color:rgb(0, 219, 0);
    font-weight: 800;
}

#calendar-area {
    width: calc(3rem * 8);
    height: calc(2.3rem * 9);
    margin: 0 auto;
}

#calendar-container .monthyear{
    display: flex;
    width: 100%;
    background-color: #eeeeee;
}

#calendar-container table{
    width: 100%;
    height: auto;
    background-color: #ffffff;
    margin: 0 auto;
    text-align: center;
}

#calendar-container td{
    color: var(--colour-table-data);
    border-bottom: none;
}

#calendar-container table thead{
    width: 100%;
    justify-content: center;
}

#calendar-container table tr td{
    width: calc(3rem * 8 / 7);
    height: calc(2rem * 9 / 8);
    border: 1px solid transparent;
    justify-content: center;
    text-align: center;
}

#calendar-container table tr td.today{
    font-weight:800;
    border: 1px solid var(--colour-primary);
    border-radius: 60%;
}

#calendar-container table tr td.hasevent{
    font-weight:900;
}

#calendar-container table tr td div.date{
    width: 100%;
    height: 100%;
}

#calendar-container table tr td div.haseventdot span{
    position: absolute;
    margin-top: -2.2rem;
    margin-left: -0.4rem;
    color:var(--colour-primary);
    font-size: 3rem;
    display: overlay;
}

/*===========================================================================*/
/*                        DSW Information Widget Style                       */
/*===========================================================================*/
#information-container table{
    font-size: 0.8rem;
}

#information-container table tr{
    height: 64px;
}

#information-container img{
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

#information-container table tr td{
    border-bottom: 1px solid var(--colour-table-line);
}

#information-container .top{
    vertical-align: top;
}

/*===========================================================================*/
/*                      Client Information Widget Style                      */
/*===========================================================================*/
#clientinformation-container .table1 .align-left{
    text-align: left;
}

#clientinformation-container .table1 .align-right{
    text-align: right;
}

#clientinformation-container .table2 .align-left{
    text-align: left;
}

#clientinformation-container .table2 .align-right{
    text-align: right;
}

#clientinformation-container .table1{
    font-size: 0.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

#clientinformation-container .table1 .title{
    font-size: 0.8rem;
    font-style: italic;
    color: #333333;
}

#clientinformation-container .detail{
    font-size: 0.8rem;
    font-style: italic;
    color: #666666;
}

#clientinformation-container .table1 td{
    height: 24px;
}

#clientinformation-container .table2{
    font-size: 0.8rem;
}

#clientinformation-container .table2 thead{
    font-size: 1.0rem;
    font-weight: 500;
    color: #333333;
    border-bottom: 1px solid var(--colour-table-line);
}

#clientinformation-container .table2 tr{
    height: 64px;
}

#clientinformation-container .table2 tr td{
    border-bottom: 1px solid var(--colour-table-line);
}

#clientinformation-container .top{
    vertical-align: top;
}

#clientinformation-container .client-information-loc table tr{
    height: 12px;
    font-size: 1rem;
    font-weight: 700;
}

#ppmcontainer{
    justify-content: center;
    border-top: solid 1px #d1d1e2;
    border-bottom: solid 1px #d1d1e2;
    height: 100px;
    margin: 0 auto;
}

#ppmtitle{
    gap: 1rem;
    color: var(--colour-info-dark);
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 5px;
    float:left;
}

#ppmdocument{
    position: relative;
    height: 100%;
    /*top: calc(25% - 10px);*/
}

#ppmdocument a{
    float: right;
    margin-left: 1rem;
}

#ppmdocument img{
    width: auto;
    height: 32px;
    display: block;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

#ppmdocument h5{
    width: 6rem;
    text-align: center;
    overflow-wrap: break-word;
}

#eventstitle{
    gap: 1rem;
    color: var(--colour-info-dark);
    font-size: 1.2rem;
    font-weight: 700;
}

#calendarevents-area{
    width: 100%;
    height: auto;
}

#calendarevents-area #eventstablecontainer{
    overflow: auto;
    width: 100%;
    height: 300px;
}

#eventstablecontainer table{
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout:fixed;
}

#eventstablecontainer table thead th{
    font-size: 1rem;
    color: #222222;
    font-weight: 100;
    border-bottom: 1px solid var(--colour-table-line);
}

#eventstablecontainer table tbody{
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 0.9rem;
}

#eventstablecontainer table tbody tr{
    height: 4rem;
    width: 100%;
    color: var(--colour-table-data);
    border-bottom: 1px solid var(--colour-table-line);
}

#eventstablecontainer table tbody tr td{
    width: 100%;
    border-bottom: 1px solid var(--colour-table-line);
    background-color: transparent;
}

#eventstablecontainer table tbody td.align-left{
    text-align: left;
    white-space: normal;
}

#eventstablecontainer table tbody td.align-right{
    width: auto;
    text-align: right;
    white-space: normal;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px var(--colour-info-light);
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--colour-primary);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--colour-primary); 
  }





.legend {
    vertical-align: bottom;
    align-items: right;
    padding-left: 20px;
    text-align: left;
}

.legbox{
  display: block;
  clear: both;
  width: 90px;
}

.highcolour{
    /*background-color: #0098AD; accorinvest*/
    background-color: var(--colour-high);
}

.medcolour{
    /*background-color: #53A7B2; accorinvest*/
    background-color: var(--colour-med);
}

.lowcolour{
    /*background-color: #46D4E8; accorinvest*/
    background-color: var(--colour-low);
}

.xaxisname {
    margin: 5px;
    color: #fff;
    font-size: 77%;
    padding: 5px;
    float: left;
    width: 10px;
}

/*===========================================================================*/
/*                           Client Image Click                              */
/*===========================================================================*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
}

.images-attach-doc:hover {opacity: 0.7;}

.images-attach-doc {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }