.section-align-center {
    margin-left: 550px;
    width: 220px;
}

.section-align-center-terms-conditions {
    margin-left: 505px;
    width: 360px;
}

.anchor-color-blue {
    color: #00ADEF !important;
}

.button-color-width-green {
    background-color: #71BB83;
}

.button-color-width-blue {
    background-color: #00ADEF;
}

.alert-font-size {
    font-size: 12px;
}

.alert-background-color-display-none {
    display: none;
    background-color:white;
}

.alert-login-failed-align-center {
    margin-left: 490px;
    width: 340px;
    text-align:center;
}

.section-login-page-align-center {
    margin-left: 550px;
    width: 220px;
}

.section-forgot-password-page-align-center {
    margin-left: 560px;
    width: 220px;
}

.section-register-alert-validation {
    margin-left: 420px;
    width: 450px;
}
.error-validation-color {
    background-color:white;
    color:white;
}
.usertype-margin-top{
    margin-top:5px;
}
.body-margin-top{
    margin-top:100px;
}

.form-header {
    text-align: center;
    font-weight : bold;
    font-size: 30px;
}

.graph-header {
    text-align: center;
    font-weight : bold;
    font-size: 22px;
}

.button-text-color{
    color:white;
}

.display-none{
    display:none;
}
.spinner {
    position: fixed;
    top: 0px;
    left: 0px;
    /*margin-left: -50px; /* half width of the spinner gif */
    /*margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100%; /* width of the spinner gif */
    height: 100%; /*hight of the spinner gif +2px to fix IE8 issue */
    padding-top: 218px;
}


#tooltips {
    padding: 5px;
    border-radius: 5px;
    visibility:hidden;
    position:fixed;
    z-index: 90000;
    background-color: rgba(0, 173, 238, 0.7);
}

.customLegend {
    float: left;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 15px;
}
.graphDiv {
    border: 1.5px solid #d5d5d5;
    margin:5px;
    padding-bottom: 10px;
    background-color: #ffffff;
}
.graphHeading {
    background-color: rgb(237, 237, 237);
    font-size: 16px;
    font-weight: 600;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    margin : 3px;
    /*margin-bottom: 15px;*/
}

.legendLabel {
    float:left;
}

.legendColorBox {
    clear:both;
    float:left;
    margin-top: 3px;
    margin-bottom: 6px;
    height: 16px;
    width: 16px;
}

/*.legendColorBox > div > div {
    width : 30px;
    height : 30px;
}*/

.legendLabel > span {
    padding-left:10px;
    font-size: 16px;
    font-weight: 400;
    width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.graph {
    float: left;
    width: calc(50% - 10px);
    min-width: 630px;
}
.pieCanvas {
    float:left;
    margin: 0 auto;
    height:300px;
    width: 400px;
    margin: auto;
}
.barCanvas {
    margin: 0 auto;
    width: 90%;
    height: 300px;
}

.flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1534px) {
    .graph {
        width: calc(100% - 10px);
    }    
}