body { 
   /*background:url("../images/animz.svg")  no-repeat;*/
    background:url("../images/login-img.jpg") no-repeat; 
       margin:0px;  font-size:11px; background-size:100%;

       font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
       font-weight: 400;
       /*background-image: url("../images/animz.svg");*/
}
/*.bodysvg {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
   width: 99%;
  height: 99%;
    top: 0;
    left: 0;
    background-size:100%;
     background:url("../images/animz.svg")  no-repeat; 

}*/
body::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size:100%;
     background:url("../images/animz.svg")  no-repeat; 
}



.clear { clear:both}
.sprite { float:left; background:url("../images/zimra-logo1.png")  
 }
 .pos10 { position: relative; top:-5px}
.logo {    background-position: -22px -14px!important;
    width: 208px!important;
    height: 64px!important;
       top: 5%;
    left: 8%;
    position: relative;
}
.w100 { width:100%!important}
.mr15 { margin-right:15px}
.w40   { width:40%!important}
.mt25 { margin-top:25px; overflow:auto}
.login-header h1 { font-size:18px; color:#3399cc; margin:auto; text-align:left; position:relative; top:30px; margin-left:30px}
.login-container {
  float: right;
    overflow: auto;
    width: 25%;
    background: #fff;
    border-radius: 0px;
    border: 1px solid #cecece;
    box-sizing: border-box;
   margin-top: 5%;
    margin-right: 5%;
    
    }
.login-header {
    height: 84px;
	background: rgb(248,255,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(248,255,232,1) 0%, rgba(227,245,171,1) 33%, rgba(183,223,45,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom,  rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background:linear-gradient(to bottom,  rgb(232 253 255) 0%,rgb(171 234 245) 33%,rgb(18 117 146) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #928a8a;
 
}
.login-header2 {
    height: 40px;
	background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 );/* IE6-9 */
width: 100%;
    border-bottom: 1px solid #928a8a;
 
}
.login-area {
    padding: 30px;
    box-sizing: border-box;
    margin-top: 0px;
}
.login-area input  {clear:both; height: 32px;  margin-top:8px; border:1px solid #cccccc; width: 90%; border-radius:10px; font-size:12px}
.login-area input:focus{
    outline: none;
    box-shadow: 0px 0px 5px #61C5FA;
    border-color: #5AB0DB;
}
.login-area input[type=password] {  border:1px solid #cccccc!important}
.login-area input[type=checkbox] {width:20px; height:20px; } 
.login-area input, .login-area input[type=password] { padding-left:30px;  } 
.txt {

    margin-top: -14px;
  color:white;
}
.password {  margin-top: -14px;
 
    color:white;
}
	.f-password {    background-position: -545px -25px;
    width: 87px;
    height: 80px;
    position: relative;
    left: 40%;
    top: 10%;}
	.mail {
   margin-top: -14px;
 
    color:white;
   
}
.computer {background-position: -124px -81px;
    width: 33px;
    height: 28px;
    position: relative;
    top: -5px;}
.phone {
    background-position: -160px -81px;
    width: 33px;
    height: 28px;
    position: absolute;
    left: 32%;
    /* top: -3px; */
    margin-top: 11px;
    margin-left: 9px;
}
.txt-right {    text-align: right;
    position: relative;
    padding-top: 14px;
    }
	/*.txt-right a { text-decoration:underline; color:#333; font-size: 12px;}
	.txt-right a:hover {  color:#6e9701}*/
.line {border-top:1px solid #cccccc;padding-top: 0px;position: relative;top: 14px;}


.login-area h1{ font-size:18px; color:#246d08; margin:auto; text-align:center} 
.login-area p { text-align:center; color:#666666; font-size:12px; line-height:20px}
.pull-left { float:left}
.pull-right { float:right}
.btn-primary { background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
  /* IE6-9 */
 color:#fff; }
.btn-secondary { background: #f9fcf7; /* Old browsers */
background: -moz-linear-gradient(top, #f9fcf7 0%, #f5f9f0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f9fcf7 0%,#f5f9f0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f9fcf7 0%,#f5f9f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=0 ); border:1px solid #cccccc!important; color:#333}
.btn-primary:hover { background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
 
  }
.btn-secondary:hover { background:background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */}
.btn-blue { background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
border:1px solid #8b8b8b!important; color:#333;
}
.btn-blue:hover { background:#abc5d8}
.btn {
    border-radius: 0px;
    padding: 6px 24px;
    border: none; cursor:pointer;
	font-size: 14px;
font-weight: bold;
}
.sprite-nav { background:url(images/sprite2.png); float:left}
.transit { background-position: -10px -10px; 
width: 30px;
height: 27px;}
.alarm {background-position: -10px -37px; 
width: 30px;
height: 27px;}
.transit-mgmt {background-position: -10px -72px; 
width: 30px;
height: 27px;}
.areas {background-position: -10px -104px; 
width: 30px;
height: 27px;}
.stock-mgmt {background-position: -11px -133px; 
width: 30px;
height: 27px;}
.transit-report {background-position: -11px -169px; 
width: 30px;
height: 27px;}
.reports {background-position: -11px -169px; 
width: 30px;
height: 27px;}
.dashboard {background-position: -10px -204px; 
width: 30px;
height: 27px;}
.yellow-notes {background-position: -10px -237px; 
width: 30px;
height: 27px;}
.settings {background-position: -10px -270px; 
width: 30px;
height: 27px;}
.reply {background-position: -12px -298px; 
width: 30px;
height: 27px;}

@media screen and (max-width:767px) {
	.login-container { width:40%}
	 
	
}

.zmdi {
    display: inline-block;
    font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.login100-form-title {
    font-family: Poppins-Medium;
    font-size: 20px;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    display: block;
}

.wrap-login100 {
    /*width: 500px;*/
    border-radius: 60px;
    overflow: hidden;
    padding: 30px 30px 5px;
    background: #9152f8;
    background: -webkit-linear-gradient(top,#7579ff,#5f1b7b);
    background: -o-linear-gradient(top,#7579ff,#b224ef);
    background: -moz-linear-gradient(top,#7579ff,#b224ef);
    background: linear-gradient(top,#7579ff,#b224ef);
}
.focus-input100::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    background: #fff;
}
.contact100-form-checkbox {
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 35px;
}
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
.input-checkbox100 {
    display: none;
}
.label-checkbox100 {
    
    font-size: 11px;
    color: #fff;
    line-height: 1.2;
    display: block;
    position: relative;
    padding-left: 1px;
    cursor: pointer;
}
.container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.text-center {
    text-align: center;
}
.p-t-90 {
    padding-top: 15%;
}
.text-center {
    text-align: center!important;
}
.txt1 {
    font-family: Poppins-Regular;
    font-size: 13px;
    color: #e5e5e5;
    line-height: 1.5;
        text-decoration: none;
}

a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    transition: all .4s;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
}
.focus-input100::after {
    font-family: Material-Design-Iconic-Font;
    font-size: 22px;
    color: #fff;
    content: attr(data-placeholder);
    display: block;
    width: 100%;
    position: absolute;
    top: 6px;
    left: 0;
    padding-left: 5px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}
.focus-input100 {
    position: absolute;
    display: block;
    /*width: 100%;
    height: 100%;*/
    top: 0;
    left: 0;
    pointer-events: none;
    width: 26px;
    height: 32px;
}
.validate-input {
    position: relative;
}

.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid rgba(255,255,255,.24);
    margin-bottom: 17px;
}
.login100-form-logo {
    font-size: 60px;
    color: #333;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34%;
    height: 90px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 auto;
}

.p-b-34 {
    padding-bottom: 20px;
}
.p-t-27 {
    padding-top: 20px;
}

input {
    outline: none;
    border: none;
}
button, input {
    overflow: visible;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.input100 {
    font-size: 13px;
    color: #fff;
    line-height: 1.2;
    display: block;
    width: 100%;
    height: 45px;
    background: 0 0;
    padding: 0 5px 0 38px;
}

/*.label-checkbox100::before {
    content: "\f26b";
    font-family: Material-Design-Iconic-Font;
    font-size: 13px;
    color: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: #fff;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}*/

input::placeholder {
  color: white;
}

.myinput[type="checkbox"]:before {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border: #ffffff;
    content: "";
    background: #FFF;
    border-radius: 2px;
}

.myinput[type="checkbox"]:after {
    position: relative;
    display: block;
    left: 0px;
  top: -16px;
    width: 14px;
    height: 14px;
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff #ffffff #ffffff #ffffff;
    content: "";
    background-image: linear-gradient(135deg, #ffffff 0%, #FFF 100%);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 2px;
}
.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #ffffff  0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #ffffff  0%, #FFF 100%);
 border-radius: 2px;
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #ffffff  0%, #FFF 100%);
   border-radius: 2px;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
   border-radius: 2px;
}

.login100-form-btn {
    font-family: Poppins-Medium;
    font-size: 16px;
    color: #555;
    line-height: 1.2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 83px;
    height: 40px;
    border-radius: 25px;
    background: #9152f8;
    background: -webkit-linear-gradient(bottom,#7579ff,#b224ef);
    background: -o-linear-gradient(bottom,#7579ff,#b224ef);
    background: -moz-linear-gradient(bottom,#7579ff,#b224ef);
    background: linear-gradient(bottom,#7579ff,#b224ef);
    position: relative;
    z-index: 1;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    border-width: 0px;
}
.login100-form-btn::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    background-color: #fff;
    top: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
}
.login100-form-btn:hover {
    color: #fff;
}
.login100-form-btn:hover:before {
    opacity: 0;
}
*, ::after, ::before {
    box-sizing: inherit;
}

button:focus {
    outline:none !important;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-color: transparent !important;
    background-image: none !important;
    color: none;
}

input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #9152f8 inset !important;
}

loginError{
    color:red;
}

img {
    max-width: 90%;
    max-height: 90%;
}
.changepwd-label{
    color:white;
}