@charset "UTF-8";
/* CSS Document */

.body {
    font-family: sans-serif;
    font-size: 1em;
    width: 100vw;
    min-height: 100vh;
    text-align: left;
    background-color: #fff;
    color: #000;
    margin: 0em;
}



.writer {
    color: rgb(255, 255, 255);
    width: 50%;
    margin-left: 5%;
    margin-top: 3vh;
    float: left;
    cursor: pointer;
}

.pbody {
    font-family: sans-serif;
    font-size: 1em;
    width: 100vw;
    height: 90vh;
    text-align: left;
    margin: 0em;
    background-color: #f2f4f7;
    overflow-y: scroll;
    overflow-x:hidden;
}

.DivdashboardSumary {
    width: 100%;
    height: 15vh;
    margin-top: 3vh;
    margin-bottom: 3vh;
}

.Ctypefilter {
    height: 6vh;
    width: 16%;
    float: left;
    padding-bottom: 1vh;
    margin-top: 1vh;
    align-content: center;
    margin-left: 2%;
    margin-right: 2%;
    text-overflow: clip;
    text-align: left;
}

.Ctypefilter {
    height: 6vh;
    width: 16%;
    float: left;
    padding-bottom: 1vh;
    margin-top: 1vh;
    align-content: center;
    margin-left: 2%;
    margin-right: 2%;
    text-overflow: clip;
    text-align: left;
}

.subtalky {
    width: 99%;
    margin-left: 1.5%;
    margin-right: 0%;
    float: left;
    margin-top: 1vh;
}

.zheader {
    width: 100vw;
    height: 10vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    vertical-align: central;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    z-index: 1;
}

.zbheader {
    width: 100vw;
    height: 10vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    vertical-align: central;
    overflow: hidden;
    background-color: transparent;
    color: #fff;
    z-index: 99;
    margin-bottom: -12vh;
}

.wheader {
    width: 100vw;
    height: 10vh;
    padding-top: 3vh;
    padding-bottom: 1vh;
    vertical-align: central;
    overflow: hidden;
    background-color: #fff;
    color: #000;
    text-align: center;
}

.zfooter {
    width: 98vw;
    height: 6vh;
    margin-top: 1vh;
    padding-top: 1vh;
    padding-bottom: 0vh;
    padding-left: 1vw;
    padding-right: 1vw;
    text-align: right;
    text-indent: 11vw;
}

.login-win1 {
    width: 30vw;
    height: 50vh;
    margin-left: 5vw;
    margin-right: 65vw;
    background-color: #fff;
    margin-top: 15vh;
    margin-bottom: 15vh;
    border-radius: 5px;
}

.login-quide {
    width: 15vw;
    height: 10vh;
    margin-left: 45vw;
    margin-right: 5vw;
    background: #96BC33;
    color: #ffffff;
    border-color: #96BC33;
    margin-top: -10vh;
    padding-top: 2vh;
    text-align: center;
    text-indent: 1vw;
}


.login-feedback {
    width: 15vw;
    height: 10vh;
    margin-left: 75vw;
    background: #96BC33;
    color: #ffffff;
    border-color: #96BC33;
    margin-top: -10vh;
    padding-top: 2vh;
    text-align: center;
    text-indent: 1vw;
}

.loginR-feedback {
    /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/
    color: #ffffff;
    height: 80vh;
    margin-left: 75vw;   
    margin-top: -100vh;
    padding-top: 0vh;
    text-align: center;
    text-indent: 1vw;
    width: 15vw;
}
.loginR-Viedo {
    /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/
    color: #ffffff;
    height: 100vh;
    margin-left: 0vw;
    margin-top: 0vh;
    padding-top: 0vh;
    text-align: center;
    text-indent: 1vw;
    width: 75vw;
}
.loginS-feedback {
    /*background: rgba(0, 0, 0, 0) none repeat scroll 0 0;*/
    color: #ffffff;
    height: 80vh;
    margin-left: 75vw;
    margin-top: -70vh;
    padding-top: 0vh;
    text-align: center;
    text-indent: 1vw;
    width: 15vw;
}

.loginS-quide {
    clear: both;
    color: #ffffff;
    height: 3em;
    line-height: 3em;
    margin-left: 0vw;
    margin-right: 0vw;
    margin-top: 2vh;
    padding-top: 0vh;
    text-indent: 0vw;
    width: 20vw;
    text-overflow: ellipsis;
}


.login-win2 {
    width: 30vw;
    height: 50vh;
    margin-left: 60vw;
    margin-right: 10vw;
    background-color: #fff;
    margin-top: 15vh;
    margin-bottom: 25vh;
    border-radius: 5px;
}
.profileLog{
    width: 50vw;
    height: 50vh;
    margin-left:auto;
    margin-right: auto;
    background-color: #fff;
    margin-top: 15vh;
    margin-bottom: 15vh;
    border-radius: 5px;
    z-index:9999;
}

.c1 {
    color: #fff;
    background-color: #1a537c;
}

.c2 {
    color: #fff;
    background-color: #dfe4e9;
}

.cp2 {
    color: #000;
    background-color: #dfe4e9;
}

.c3 {
    color: #1a537c;
    background-color: #afc83d;
}

.c4 {
    color: #1a537c;
    background-color: #dfe4e9;
}

.c5 {
    color: #afc83d;
}

.c6 {
    color: #000;
}

.c7 {
    color: #808080;
}

.c8 {
    color: #808080;
    background-color: #c4ff00;
}

.c19 {
    color: #fff;
    background-color: #ff0000;
}

    .c19:hover {
        background-color: #ff0000;
        color: #fff;
    }

.f1 {
    font-size: 1em;
}

.f1b {
    font-size: 1em;
    font-weight: bold;
}

.f2 {
    font-size: 13.33px;
}

.f3 {
    font-size: 1.3em;
}

.f4 {
    font-size: 0.5em;
}

.f5 {
    font-size: 1.3em;
    font-weight: bold;
}

.f6 {
    font-size: 0.9em;
}

.text {
    text-align: left;
    color: #1a537c;
    clear: both;
    margin-top: 1.5em;
    padding-top: 2em;
    padding-bottom: 1em;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}

.theader {
    padding-bottom: 0.2em;
}

.zmenu {
    width: 40vw;
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
    margin-top: 0vh;
    overflow: hidden;
}
.zAmenu {
    width: 40vw;
    height: 8vh;
    margin-left:10vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
    margin-top: 0vh;
    overflow: hidden;
}
.sZ1menu {
    width: 40%;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-left: 2.5%;
    margin-bottom: 1vh;
    height: 6vh;
    line-height: 6vh;
    vertical-align: text-middle;
}
.cmpzmenu {
    width: 60%;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-left:6.5%;
    margin-bottom: 1vh;
    height: 6vh;
    line-height: 6vh;
    vertical-align: text-middle;
}
.zmenuLog {
    width: 20vw;
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
    margin-top: 0vh;
    overflow: hidden;
}

.zMasheader {
    width: 100%;
    height: 10vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    vertical-align: central;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    z-index: 1;
}

.zmlogo {
    width: 30%;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
    margin-top: 0vh;
}

.zMasmenu {
    width: 25%;
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
    margin-top: 0vh;
    padding-left: .5%;
    margin-left: 5%;
}


.zMasmenuLog {
    width: 40%;
    height: 8vh;
    padding-left: 2%;
    margin-top: 1.5vh;
    margin-bottom: 1vh;
    text-align: right;
    float: left;
}

.smenu {
    width: 30vw;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-bottom: 1vh;
    padding-top: 2vh;
    height: 6vh;
    vertical-align: middle;
}

.msmenu {
    width: 25vw;
    align-content: center;
    margin-right: 0vh;
    text-align: center;
    float: left;
    margin-top: 14vw;
    padding-top: 2vw;
    height: 6vw;
    vertical-align: middle;
}

.mzsmenu {
    width: 40%;
    margin-right: 2vw;
    margin-left: 2vw;
    text-align: center;
    float: left;
    margin-top: 1vw;
    padding-top: 1vh;
    height: 6vh;
    vertical-align: middle;
}

.ms1 {
    background-image: url(Image/managesv.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vw;
    width: 25vw;
    margin-left: 11.25vw;
    margin-right: 11.25vw;
    margin-top: 2vh;
    float: left;
}

.ms2 {
    background-image: url(Image/bills.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vw;
    width: 25vw;
    margin-left: 11.25vw;
    margin-right: 11.25vw;
    margin-top: 2vh;
    float: left;
}
.ms5 {
    background-image: url(Image/live1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vw;
    width: 25vw;
    margin-left: 11.25vw;
    margin-right: 11.25vw;
    margin-top: 2vh;
    float: left;
}

.ms3 {
    background-image: url(Image/trend.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vw;
    width: 25vw;
    margin-left: 11.25vw;
    margin-right: 11.25vw;
    margin-top: 2vh;
    float: left;
}

.ms4 {
    background-image: url(Image/suplog.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 20vw;
    width: 25vw;
    margin-left: 11.25vw;
    margin-right: 11.25vw;
    margin-top: 2vh;
    float: left;
}

.msList1 {

    height: 80vw;
    width: 45vw;
    margin-left: 1.25vw;
    margin-right: 1.25vw;
    margin-top: 2vh;
    float: left;
}

.msList2 {
     height: 80vw;
    width: 40vw;
    margin-left: 5.25vw;
    margin-right: 1.25vw;
    margin-top: 2vh;
    float: left;
}
.mszsubrow {
    width: 100%;
    padding-top: 1vh;
    height: 6vh;
}
.mszsubrowmultiline {
    width: 100%;
    padding-top: 1vh;
    height: 30vh;
}
.mszsubrowfilltext {
    height: 25vh;
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    background-color: #fff;
    color: #000;
    text-overflow: ellipsis;
    text-wrap: normal;
    float: left;
    font: 400 13.3333px Arial;
}
.mszmainsubrow {
    width: 100%;
    padding-top: 0vh;
    height: 6vh;
}
.mszsubheader {
    width: 47%;
    padding-left: 1%;
    padding-right: 1%;
    color: #000;
    float: left;
    height:6vh;
    line-height:5vh;
    vertical-align:middle;
    margin-bottom:.5vh;
}
.mszcheckList {    
    width: 50%;  
    float: left;
}
.mszcheck {
    width: 17%;
    padding-left: 1%;
    padding-right: 1%;
    color: #000;
    float: left;
    height:3em;
    line-height:2.5em;
    vertical-align:middle;
    margin-bottom:.5em;
}
.mszcheckheader {
    width: 77%;
    padding-left: 1%;
    padding-right: 1%;
    color: #000;
    float: left;
   height:3em;
    line-height:2.5em;
    vertical-align:middle;
    margin-bottom:.5em;
}

.msh1header {
    font-size: 0.9em;
    color: #000;
}

.msh1headermain {
    font-size: 0.9em;
    color: #fff;
    background-color: #575757;
}

.msh1headermainwhite {
    color: #fff;
    font-weight: bold;
    padding-top: 1vh;
}

.adname {
    width: 60%;
    float: left;
    text-align: left;
    clear: left;
}

.adyn {
    float: left;
    width: 12%;
    align-content: center;
    background-position: center;
    text-align: left;
}

.zrow {
    width: 100vw;
    height: 75vh;
}

.dfilts {
    height: 10vh;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1vh;
    Margin-bottom: 1vh;
}

.dchart {
    height: 60vh;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    overflow: scroll;
}

.dspacer {
    height: 8vh;
    width: 100%;
}

.chartbox {
    width: 100%;
    height: 32vh;
}

.threechart {
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.49%;
    overflow: hidden;
    height: 30vh;
    float: left;
}

.halfchart {
    width: 100%;
    background-color: #fff;
    color: #1a537c;
    border-radius: 5px;
    height: 32vh;
    margin-bottom: 2vh;
}

.halfchart2 {
    width: 100%;
    background-color: #1a527c;
    color: #fff;
    border-radius: 5px;
    height: 32vh;
    margin-top: 4vh;
}

.appleapp {
    width: 49.9%;
    align-content: center;
    height: 10vh;
    overflow: auto;
    background-image: url(../Content/Image/applelogo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float: left;
    margin-top: 10vh;
    margin-left: auto;
    margin-right: auto;
}

.androidapp {
    width: 49.9%;
    align-content: center;
    height: 10vh;
    overflow: auto;
    background-image: url(../Content/Image/playicon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float: left;
    margin-top: 10vh;
    margin-left: auto;
    margin-right: auto;
}

.m4 {
    background-image: url(../Content/Image/dashboardactive.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 4vh;
    margin-top: 2vh;
}

.m4active {
    background-image: url(../Content/Image/dashboardactive.png);
}

.m1 {
    background-image: url(../Content/Image/charttab.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 2em;
}

    .m1:active {
        background-image: url(../Content/Image/chartactivetab.png);
    }

.m1active {
    background-image: url(../Content/Image/chartactivetab.png);
}

.m2 {
    background-image: url(../Content/Image/reportsactivetab.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 4vh;
    margin-top: 2vh;
}

    .m2:active {
        background-image: url(../Content/Image/reportsactivetab.png);
    }

.m2active {
    background-image: url(../Content/Image/reportsactivetab.png);
}

.m3 {
    background-image: url(../Content/Image/adminactivetab.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 4vh;
    margin-top: 2vh;
}

    .m3:active {
        background-image: url(../Content/Image/adminactivetab.png);
    }

.m3active {
    background-image: url(../Content/Image/adminactivetab.png);
}


.tag {
    float: left;
    clear: both;
    width: 15%;
    margin-left: 1vw;
    margin-right: 1vw;
    /*height:8vh;*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 99;
}

.cog {
    float: left;
    text-align: right;
    width: 5vw;
    height: 4vh;
    margin-top: 2vh;
    background-repeat: no-repeat;
    background-color: none;
    background-size: contain;
    background-image: url(../Content/Image/cog120120.png);
    background-position: center;
}

.pcog {
    float: left;
    text-align: right;
    width: 5vw;
    height: 4vh;
    margin-top: 2vh;
    background-repeat: no-repeat;
    background-color: none;
    background-size: contain;
    background-image: url(../Content/Image/print.png);
    background-position: center;
}

.zvideo {
    align-content: center;
    text-align: center;
    float: left;
    width: 5vw;
    height: 4vh;
    margin-top: 2vh;
    background-image: url(../Content/Image/video.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.flogo {
    align-content: center;
    text-align: center;
    float: left;
    width: 10vw;
    height: 6vh;
    margin-top: 0vh;
    background-image: url(../Content/Image/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.cardback {
    float: left;
    width: 100%;
    height: 100vh;
    margin-top: 0vh;
    background-image: url(../Content/Image/bg-pattern-u1173-fr.png);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
    z-index: 0;
}

.chekimg {
    float: left;
    width: 100%;
    height: 90vh;
    margin-top: 0vh;
    background-image: url(Image/bg-pattern-u1173-fr.png);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
    z-index: 0;
}

.colorrow {
    background-color: #1a537c;
    color: #fff;
    padding-top: 2vh;
    padding-bottom: 0em;
    height: 10vh;
    text-align: center;
}

.pcolorrow {
    background-color: #1a537c;
    color: #fff;
    padding-top: 2vh;
    padding-bottom: 0em;
    height: 7vh;
    text-align: center;
}

.drowheader {
    background-color: #fff;
    height: 10vh;
}

.Dcolorrow {
    color: #1a537c;
    height: 3vh;
    text-align: center;
    margin-bottom: 1vh;
}

.D1colorrow {
    color: #1a537c;
    height: 3vh;
    text-align: center;
    padding-bottom: 2vh;
}

.dashsize {
    width: 100%;
    float: left;
    text-align: left;
    height: 1vh;
    padding-top: 1vh;
    padding-bottom: 1em;
}

.linebox {
    width: 33vw;
    background-color: #afc83d;
    height: 1vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    clear: right;
    float: left;
    z-index: 99;
}

.linebox1 {
    width: 66vw;
    background-color: #1a537c;
    height: 1vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    margin-left: 0.99vw;
    float: left;
    clear: right;
    z-index: 99;
}


.hatch {
    color: #d9dfe7;
    background: repeating-linear-gradient( 135deg, #fff, #d9dfe7 1%, #d9dfe7 0.5%, #d9dfe7 0.5% );
    height: 1em;
    margin-top: -0.2em;
}




.box {
    width: 98%;
    height: 1.6em;
    padding-top: 0.3em;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 0.2em;
    background-color: #fff;
    margin-top: 0.1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}


.tbox {
    width: 95%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 85vh;
    clear: both;
    z-index: 2;
    overflow-x: no-display;
    overflow-y: scroll;
    color: #1a537c;
}

.boxradio {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}

.indradio {
    width: 20vw;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    height: 3vh;
    float: left;
}

.cmpCheck {
    width: 20vw;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    height: 3vh;
    float: left;
}

.qradio {
    width: 15vw;
    height: 3vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    margin-left: 0.99vw;
    float: left;
    clear: right;
}

.ztbox {
    width: 95%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 78vh;
    clear: both;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    color: #1a537c;
}

.ztbox2 {
    width: 95%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 88vh;
    clear: both;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    color: #1a537c;
}

.Rtbox {
    width: 99vw;
    margin-left: auto;
    margin-right: auto;
    height: 88vh;
    clear: both;
    text-align: left;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
}

.Rztbox {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 88vh;
    clear: both;
    text-align: left;
    z-index: 2;
    overflow-x: hidden;
    overflow-y: scroll;
    color: #000;
}

.VRtbox {
    width: 95%;
    height: 15vh;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    clear: both;
    text-align: left;
    z-index: 2;
    overflow: visible;
    color: none;
}

.cblack {
    color: #000;
}

.section1 {
    width: 60%;
    margin-left: 1%;
    margin-right: 1%;
    height: 68vh;
    overflow: hidden;
    float: left;
    background-color: #fff;
    border-radius: 5px;
}

.section2 {
    width: 35.99%;
    margin-left: 1%;
    margin-right: 1%;
    height: 68vh;
    overflow: hidden;
    float: left;
}

.cont {
    width: 98vw;
    height: 40vh;
    margin-left: auto;
    margin-right: auto;
}

.brow {
    background-color: #F8F8F8;
    clear: both;
}


.action {
    width: 7%;
    margin-left: 1.3%;
    margin-right: 1.3%;
    padding-left: 11.5%;
    padding-right: 11.5%;
    background-repeat: no-repeat;
    vertical-align: middle;
}

    .action:active {
        width: 4%;
        margin-left: 1.3%;
        margin-right: 1.3%;
        padding-left: 13%;
        padding-right: 13%;
        max-height: 10vh;
        overflow: hidden;
    }



.homebutton {
    width: 50vw;
    height: 8vh;
    margin-bottom: 2vh;
    font-size: 6vh;
    padding-top: 2vh;
    text-align: right;
    padding-right: 0vw;
    background-color: #E3E3E7;
    border-radius: 10px;
}


#b1 {
    background-image: url(../Content/Image/redbutton148148.png);
    background-size: 10vh;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    color: red;
    margin-top: 2vh;
}


#b2 {
    background-image: url(../Content/Image/yellowbutton148148.png);
    background-size: 10vh;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    color: #fbb03b;
}


#b3 {
    background-image: url(../Content/Image/greenbutton148148.png);
    background-size: 10vh;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    color: green;
}


.h1 {
    font-size: 1.2em;
    font-weight: 400;
}

.h3 {
    font-size: 1.0em;
    font-weight: 100;
}

.h6 {
    font-size: 0.9em;
    color: #1a537c;
}

.h1 .ch1 {
    text-align: center;
}

.filter {
    width: 100%;
    margin-bottom: 4vh;
}
.h12 {
    font-size: 1.0em;
    font-weight: 100;
}
.carsize {
    width: 50%;
    float: left;
    text-align: center;
    padding-top: 3vh;
    padding-bottom: 1.5em;
}

.idphoto {
    height: 20vh;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
    border-style: none;
    border-color: #fff;
    border-radius: 0%;
    width: 70vw;
    overflow: hidden;
    background-image: url(../img/profile.png);
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
}

.qrcode {
    height: 15vh;
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-right: 5vw;
    width: 15vh;
    border-style: none;
    float: right;
}

.profilepicbutton {
    height: 16vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
    border-style: solid;
    border-color: #fff;
    border-radius: 0%;
    width: 16vh;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    /*-webkit-transform: rotate(180deg);
         -moz-transform: rotate(180deg);
         -o-transform: rotate(180deg);
         -ms-transform: rotate(180deg);
         transform: rotate(180deg);*/
}

.infoscroll {
    height: 20vh;
    width: 73.9vw;
    float: left;
    text-align: left;
    font-size: 1.5em;
    overflow: hidden;
}

.pinfoscroll {
    height: 20vh;
    width: 98vw;
    margin-left: 2vw;
    text-align: left;
    font-size: 1.5em;
    overflow: hidden;
    clear: both;
    margin-top: 2vh;
}

.profileinfoscroll {
    height: 6vh;
    width: 90%;
    margin-left: 5%;
    text-align: left;
    font-size: 1.5em;
    margin-top: 3vh;
    clear: both;
    margin-top: 2vh;
}

.boxie {
    width: 70%;
    margin-left: 15%;
    height: 50vh;
    margin-top: 20vh;
    padding-top: 3vh;
    background-color: #fff;
    border-radius: 5px;
    overflow: contain;
    align-content: center;
    text-align: center;
}

.title {
    clear: both;
    width: 15vw;
    height: 3.75vw;
    float: left;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 0.6em;
}
.title3 {
    width: 15vw;
    height: 3.75vw;
    float: left;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 0.6em;
}
.title2 {
    min-width: 30%;
    max-width: 30%;
    float: left;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 0.6em;
}
.protitle {
    clear: both;
    width: 35vw;
    height: 3.75vw;
    float: left;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 0.6em;
}

.protitle2 {
    min-width: 30%;
    max-width: 30%;
    float: left;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 0.6em;
}
.tickyes {
    width: 18%;
    height: 1em;
    background-size: contain;
    background-image: url(../Content/Image/yes.png);
    background-position: left;
    background-repeat: no-repeat;
}

.tickno {
    width: 18%;
    height: 1em;
    background-size: contain;
    background-image: url(../Content/Image/no.png);
    background-position: left;
    background-repeat: no-repeat;
}

.Pscroller {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    clear: both;
    margin-top: 2vh;
    overflow: scroll;
    height: auto;
    color: #000;
    background-color: #f2f4f7;
}

.zsubrow {
    width: 100%;
    padding-top: 1vh;
    height: 4vh;
}

.zmainsubrow {
    width: 100%;
    padding-top: 0vh;
    height: 4vh;
}

.zrowstyle {
    width: 100%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #808080;
    margin-top: .5vh;
    height: .5vh;
}

.zfullrowstyle {
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #808080;
    margin-top: 2vh;
    height: auto;
}

.zsubheader {
    width: 47%;
    padding-left: 1%;
    padding-right: 1%;
    color: #000;
    float: left;
}

.h1header {
    font-size: 0.9em;
    color: #000;
}

.h1headermain {
    font-size: 0.9em;
    color: #fff;
    background-color: #575757;
}

.h1headermainwhite {
    color: #fff;
    font-weight: bold;
    padding-top: 1vh;
}

.zhhsubheader {
    width: 47%;
    padding-left: 1%;
    padding-right: 1%;
    color: #fff;
    float: left;
    font-size: 0.9em;
    background-color: #575757;
}




.h1item {
    font-size: 1.0em;
    color: #000;
    font-weight: 400;
}

.zPscroller {
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    clear: both;
    margin-top: 2vh;
    overflow: auto;
    height: auto;
    color: #000;
}

.oprint {
    float: right;
}

.typefilter {
    height: 2em;
    width: 20%;
    float: left;
    padding-bottom: 3vh;
    margin-top: 3vh;
    align-content: center;
    margin-left: 2.5%;
    margin-right: 2.5%;
    background-color: transparent;
}

.profiletypefilter {
    width: 90%;
    height: 10vh;
    text-align: center;
    padding-bottom: 3vh;
    margin-left: 5%;
    margin-top: 3vh;
    align-content: center;
    color: #000;
    font-size: 1.0em;
}

.tscroller {
    width: 49.9%;
    height: 40vh;
    float: left;
    overflow: hidden;
}

.t1scroller {
    width: 49.9%;
    height: 40vh;
    float: left;
    background-color: #fff;
    overflow: hidden;
}

.t2scroller {
    width: 100%;
    height: 40vh;
    float: left;
    background-color: #fff;
    overflow: hidden;
}

.talky {
    min-width: 23.5%;
    max-width: 23.5%;
    margin-left: 1.5%;
    margin-right: 0%;
    float: left;
    margin-top: 3vh;
}

.scroller {
    color: #39b54a;
    width: 49.9%;
    height: 33vh;
    float: left;
}

.cinfoscroll {
    overflow: scroll;
    height: 50.4vh;
    overflow: scroll;
}

.cscroller {
    height: 65.4vh;
    overflow: scroll;
    width: 100%;
    z-index: 0;
    float: left;
}

.cpscroller {
    height: 25vh;
    overflow: scroll;
    width: 100%;
    z-index: 0;
}

.scroller1 {
    color: #f7931e;
    width: 49.9%;
    height: 33vh;
    float: left;
}

.preuseheader {
    height: 3vh;
    width: 100%;
    background-color: #236fa6;
    color: #fff;
    padding-top: 0.5em;
    margin-right: 0.5em;
    text-align: center;
}

.damageheader {
    height: 3vh;
    background-color: #1a537c;
    width: 100%;
    color: #fff;
    padding-top: 0.5em;
    margin-right: 0.5em;
    text-align: center;
}

.incidentheader {
    height: 3vh;
    background-color: #236fa6;
    width: 100%;
    color: #fff;
    padding-top: 0.5em;
    margin-right: 0.5em;
    text-align: center;
}

.preuse {
    height: 100vh;
    background-color: transparent;
}

.preuseDetails {
    height: 100vh;
    width: 100%;
    background-color: transparent;
}

.damage {
    height: 66.6vh;
    background-color: #afc83d;
}

.incident {
    height: 33.3vh;
    background-color: #f2f4f7;
}

.chart {
    width: 33.3%;
    height: 32vh;
    float: left;
    background-color: #fff;
    padding-bottom: 0.5em;
    padding-top: 1em;
}

.chart1 {
    width: 100%;
    height: 32vh;
    float: left;
    padding-bottom: 0.5em;
    padding-top: 1em;
}

.chart2 {
    width: 100%;
    height: 32vh;
    float: left;
    padding-bottom: 0.5em;
    padding-top: 1em;
    clear: both;
}

.czrow {
    width: 100%;
    height: 66.6vh;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.cameraphoto {
    width: 70%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    margin-bottom: 3vh;
    overflow: hidden;
}

.containervv {
    width: 100vw;
    overflow: auto;
    background-image: url(Image/centre.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 88vh;
    z-index: 0;
}

.containervvL {
    width: 100vw;
    background-image: url(Image/centre.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    z-index: 0;
}

.containervz {
    width: 100vw;
    /*overflow:auto;*/
    background-image: url(Image/supervisor.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 90vh;
    z-index: 0;
}

.zbutton1 {
    width: 15vw;
    height: 4vh;
    z-index: 99;
    margin-left: 6vw;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #808080;
    text-align: center;
    margin-top: 2vh;
    padding-top: 1vh;
    margin-right: 2vw;
}

    .zbutton1:hover {
        background-color: #c4ff00;
        color: #808080;
    }

.zbuttonCR {
    width: 30vw;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-bottom: 1vh;
    padding-top: 2vh;
    height: 6vh;
    vertical-align: middle;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #808080;
    text-align: center;
}

    .zbuttonCR:hover {
        background-color: #c4ff00;
        color: #808080;
    }

.cbutton {
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #c4ff00;
    color: #808080;
    background-color: #c4ff00;
    text-align: center;
    font-weight: bold;
}

    .cbutton:hover {
        background-color: #808080;
        color: #fff;
        font-weight: bold;
    }

.zbutton2 {
    width: 15vw;
    height: 4vh;
    z-index: 99;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #000;
    text-align: center;
    margin-top: 2vh;
    padding-top: 1vh;
}

    .zbutton2:hover {
        background-color: #c4ff00;
        color: #808080;
    }

.zbutton3 {
    width: 15vw;
    height: 5vh;
    z-index: 99;
    margin-left: 70vw;
    margin-right: 5vw;
    margin-top: -45vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #c4ff00;
    color: #808080;
    background-color: #c4ff00;
    text-align: center;
    padding-top: 2vh;
    font-weight: bold;
}

.zbutton4 {
    width: 15vw;
    height: 5vh;
    z-index: 99;
    margin-left: 70vw;
    margin-right: 5vw;
    margin-top: -45vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #c4ff00;
    color: #808080;
    background-color: #c4ff00;
    text-align: center;
    padding-top: 2vh;
    font-weight: bold;
}

.c3 {
    color: #808080;
    background-color: #c4ff00;
}

    .c3:hover {
        background-color: #808080;
        color: #fff;
    }

.zbutton3:hover {
    background-color: #808080;
    color: #fff;
}

.zbuttonstart {
    width: 25vw;
    height: 15vh;
    z-index: 99;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #c4ff00;
    color: #808080;
    background-color: #c4ff00;
    text-align: center;
    padding-top: 2vh;
    font-weight: bold;
    padding-top: 5vh;
    padding-bottom: 5vh;
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

    .zbuttonstart:hover {
        background-color: #808080;
        color: #fff;
    }



.cNbutton {
    width: 15vw;
    height: 4vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #b0bc22;
    text-align: center;
    margin-left: 2vw;
    margin-top: 2vh;
    padding-top: 1vh;
    float: right;
}

    .cNbutton:hover {
        background-color: #c4ff00;
        color: #808080;
    }

.exportbutton {
    width: 25%;
    height: 4vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #b0bc22;
    color: #fff;
    background-color: #b0bc22;
    text-align: center;
    float: right;
    margin-left: 55vw;
    margin-top: 2vh;
    padding-top: 1vh;
}

    .exportbutton:hover {
        background-color: #c4ff00;
        color: #808080;
    }



.zpbutton {
    text-align: center;
    padding-top: 2vh;
    margin-left: 2em;
    width: 100%;
    height: 5vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #b0bc22;
}

    .zpbutton:hover {
        background-color: #c4ff00;
        color: #808080;
    }

.zpbutton1 {
    width: 15vw;
    height: 5vh;
    z-index: 99;
    margin-left: 20vw;
    margin-right: 45vw;
    margin-top: -25vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #b0bc22;
    text-align: center;
    padding-top: 2vh;
}

    .zpbutton1:hover {
        background-color: #c4ff00;
        color: #808080;
    }

.zpbutton2 {
    width: 15vw;
    height: 5vh;
    z-index: 99;
    margin-left: 40vw;
    margin-right: 10vw;
    margin-top: -25vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #b0bc22;
    text-align: center;
    padding-top: 2vh;
}

    .zpbutton2:hover {
        background-color: #c4ff00;
        color: #808080;
    }


.zpbutton3 {
    width: 15vw;
    height: 5vh;
    z-index: 99;
    margin-left: 60vw;
    margin-right: 15vw;
    margin-top: -45vh;
    border-style: solid, 2px;
    border-radius: 4px;
    border-color: #808080;
    color: #fff;
    background-color: #b0bc22;
    text-align: center;
    padding-top: 2vh;
}

    .zpbutton3:hover {
        background-color: #c4ff00;
        color: #808080;
    }


/*Sign up Page*/

.spheader {
    width: 100vw;
    height: 8vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    vertical-align: central;
    overflow: auto;
    background-color: #000;
    color: #fff;
    z-index: 1;
}

.spLogo {
    width: 15vw;
    height: 6vh;
    float: left;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.sptitle {
    width: 65vw;
    height: 6vh;
    line-height: 6vh;
    vertical-align: middle;
    color: #fff;
    margin-left: 5%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    float: left;
}

.spLogoImage {
    background-image: url(../Content/Image/pasted-image-242x210.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.spctille1 {
    width: 45%;
    margin-right:27.5%;
	margin-left:27.5%;
    padding-top: 1.5vh;
    padding-bottom: 0.5vh;
    text-align: center;
    height: 4em;
    text-wrap: suppress;
}

.spctille2 {
    width: 20vh;
    height: 15vh;
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    margin-left:auto;
	margin-right:auto;
	margin-top:5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.scbblack {
    background-color: #000;
    color: #fff;
}

.scbgray {
    background-color: #808080;
    color: #fff;
}

.signupbox {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-indent: 1vw;
    min-height: 24.5vh;
    height: auto;
    padding-top: 1.5vh;
    margin-top: 2.5vh;
    margin-bottom: 2vh;
    text-wrap: suppress;
}

.spboxheader {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-indent: 1vw;
    height: 1.5em;
    padding-top: 1.5vh;
    margin-bottom: 0.5vh;
    text-wrap: suppress;
    line-height: 1.5em;
    vertical-align: middle;
}

.spboxtext {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    text-indent: 1vw;
    height: 4em;
    padding-top: 1.5vh;
    margin-bottom: 0.5vh;
    text-wrap: suppress;
}

.spboxSubmit {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
    padding-top: 0em;
    padding-bottom: 0em;
    text-align: center;
}

.zprmenu {
    width: 100vw;
    height: 18vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: left;
    margin-top: 0vh;
    overflow: hidden;
}

.sprmenu {
    width: 25vw;
    height: 32vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    float: right;
    margin-top: 0vh;
    overflow: hidden;
}

.s1prmenu {
    width: 25vw;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-bottom: 1vh;
    height: 6vh;
    line-height:6vh;
    vertical-align: text-middle;
}

    .s1prmenu:hover {
        width: 25vw;
        align-content: center;
        text-align: center;
        float: left;
        margin-top: 1vh;
        margin-bottom: 1vh;
        height: 6vh;
        vertical-align: middle;
        color: #fff;
        background-color: #afc646;
    }
.cmprmenu {
    width: 25vw;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-bottom: 1vh;
    height: 6vh;
    vertical-align: text-middle;
}

    .cmprmenu:hover {
        width: 25vw;
        align-content: center;
        text-align: center;
        float: left;
        margin-top: 1vh;
        margin-bottom: 1vh;
        height: 6vh;
        vertical-align: middle;
        color: #fff;
        background-color: #afc646;
    }
.comprmenu {
    width: 20vw;
    align-content: center;
    text-align: center;
    float: left;
    margin-top: 1vh;
    margin-bottom: 1vh;
    height: 6vh;
    vertical-align: text-middle;
}

    .comprmenu:hover {
        width: 20vw;
        align-content: center;
        text-align: center;
        float: left;
        margin-top: 1vh;
        margin-bottom: 1vh;
        height: 6vh;
        vertical-align: middle;
        color: #fff;
        background-color: #afc646;
    }
@media screen and (min-width:2px) and (max-width:760px) {
    .profiletypefilter {
        width: 98%;
        height: auto;
        float: left;
        /*padding-bottom:3vh;
			margin-top:3vh;
            align-content:center;
			margin-left:2.5%;
			margin-right:2.5%;*/
        color: #000;
        font-size: 0.8em;
        margin-left: 1%;
    }

    .title {
        width: 15vw;
        height: 3.75vw;
    }

    .writer {
        color: rgb(255, 255, 255);
        width: 70%;
        margin-left: 5%;
        margin-top: 3vh;
        float: left;
        cursor: pointer;
    }

    .boxie {
        width: 90%;
        margin-left: 5%;
        height: 65vh;
        margin-top: 5vh;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        align-content: center;
        text-align: center;
        font-size: 1em;
    }

    .tag {
        width: 30%;
    }

    .zbutton3 {
        width: 65vw;
        height: 10vh;
        z-index: 99;
        margin-left: 17.5vw;
        margin-right: 5vw;
        margin-top: -25vh;
        font-size: 2em;
    }

    .zbutton4 {
        width: 65vw;
        height: 10vh;
        z-index: 99;
        margin-left: 17.5vw;
        margin-right: 5vw;
        margin-top: -25vh;
        font-size: 2em;
    }

    .zbutton1 {
        display: none;
    }

    .btnlogin {
        display: none;
    }

    .qrcode {
        display: none;
    }

    .idphoto {
        height: 20vh;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        border-style: solid;
        border-color: none;
        border-radius: 0%;
        width: 70vw;
        overflow: hidden;
        background-image: url(../img/profile.png);
        background-size: contain;
        background-repeat: no-repeat;
        float: left;
    }

    .containervv {
        width: 100vw;
        overflow: auto;
        background-image: url(Image/supervisor.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 88vh;
        z-index: 0;
    }
}

@media screen and (min-width:1024px) {


    .preuse {
        width: 75%;
        float: left;
    }

    .preuseDetails {
        width: 100%;
    }

    .damage {
        width: 25%;
        float: left;
        height: auto;
    }

    .incident {
        width: 25%;
        float: left;
        height: 33.3vh;
    }
}

@media screen and (max-width:1024px) {

    .msList1 {
        width: 98vw;
        margin:1vw;
        height: auto;
    }

    .msList2 {
        height: auto;
        margin: 1vw;
        width: 98vw;
    }
    .preuse {
        width: 100%;
        float: left;
    }

    .preuseDetails {
        width: 100%;
    }

    .damage {
        width: 66.6%;
        float: left;
        height: 33.3vh;
    }

    .incident {
        width: 33.3%;
        float: left;
    }

    .chart1 {
        width: 50%;
    }

    .containervv {
        width: 100vw;
        overflow: auto;
        background-image: url(Image/supervisor.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 88vh;
        z-index: 0;
    }
}

@media print {
    @page {
        size: portrait;
    }

    .pbody {
        height: auto;
        width: 95%;
        overflow: visible;
        margin-left: auto;
        margin-right: auto;
    }

    .oprint {
        display: none;
    }

    .zfooter {
        display: none;
    }

    .zmenu {
        display: none;
    }

    .zcog {
        display: none;
    }

    .cog {
        display: none;
    }

    .export-pdf {
        display: none;
    }

    .tbox {
        overflow: visible;
    }

    .damage {
        width: 66.6%;
        height: auto;
        float: left;
        background-color: none;
    }

    .incident {
        width: 33.3%;
        height: auto;
        float: left;
    }

    .k-chart {
        color: #1a537c;
    }

    .k-tooltip, .k-chart-tooltip {
        color: #1a537c;
    }

    .chart1 {
        width: 50%;
    }

    .half {
    }



    .box {
        margin-bottom: 0.7em;
    }

    .pcolorrow {
        background-color: #fff;
        color: #1a537c;
    }

    .cameraphoto {
        width: 35%;
        align-content: center;
    }

    .text {
        margin-top: 0.2em;
        padding-top: 0.1em;
    }
}

@media screen and (min-device-width:2px) and (max-device-width:760px) {

    /*.body{font-size:1.6em
	}*/
    .profiletypefilter {
        width: 98%;
        height: auto;
        float: left;
        /*padding-bottom:3vh;
			margin-top:3vh;
            align-content:center;
			margin-left:2.5%;
			margin-right:2.5%;*/
        color: #000;
        font-size: 0.8em;
        margin-left: 1%;
    }

    .title {
        width: 15vw;
        height: 3.75vw;
    }

    .writer {
        display: none;
    }

    .boxie {
        width: 90%;
        margin-left: 5%;
        height: 65vh;
        margin-top: 5vh;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        align-content: center;
        text-align: center;
        font-size: 1em;
    }

    .tag {
        width: 30%;
    }

    .zbutton3 {
        width: 65vw;
        height: 10vh;
        z-index: 99;
        margin-left: 17.5vw;
        margin-right: 5vw;
        margin-top: -25vh;
        font-size: 5vh;
    }

    .zbutton4 {
        width: 65vw;
        height: 10vh;
        z-index: 99;
        margin-left: 17.5vw;
        margin-right: 5vw;
        margin-top: -25vh;
        font-size: 5vh;
    }

    .zbutton1 {
        display: none;
    }

    .btnlogin {
        display: none;
    }

    .qrcode {
        display: none;
    }

    .idphoto {
        height: 20vh;
        margin-left: 2.5vw;
        margin-right: 2.5vw;
        border-style: solid;
        border-color: none;
        border-radius: 0%;
        width: 70vw;
        overflow: hidden;
        background-image: url(../img/profile.png);
        background-size: contain;
        background-repeat: no-repeat;
        float: left;
    }

    .exportbutton {
        display: none;
    }

        .exportbutton:hover {
            display: none;
        }

    .containervv {
        width: 100vw;
        overflow: auto;
        background-image: url(Image/supervisor.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 88vh;
        z-index: 0;
    }
}