.form_input, .form_textarea, .form_select {
  position: relative;
  margin: 30px 0 20px;
}

body{
	overflow-x: hidden;
}

input {
	font-size: 18px;
	padding: 5px 10px 10px 5px;
	display: block;
	width: 94%;
	border: none;
	border-bottom: 1px solid #757575;
	background-color: inherit;
}

input:focus {
  outline: none;
}

textarea {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #757575;
}

select {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #757575;
   -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 0.5em;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' %3E%3Cpath fill='%23333' d='M14.842 17.733L6.68 9 5 10.692l8.31 8.573 1.688 1.697L25 10.687 23.316 9l-8.353 8.733z' /%3E%3C/svg%3E") no-repeat right 0.5em bottom 0.025em;
  background-size: 30px 30px;
}

input:focus {
  outline: none;
}

textarea:focus {
  outline: none;
}

select:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.form_input label{
  top: 10px;
}

.form_textarea label{
  top: 40px;
}

.form_select label{
  top: -25px;
}
input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 16px;
  color: #404040;
}

textarea:focus ~ label,
textarea:valid ~ label {
  top: -20px;
  font-size: 16px;
  color: #404040;
}

.bar {
  position: relative;
  display:block;
  width:100%;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #000000;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

textarea:focus ~ .bar:before,
textarea:focus ~ .bar:after {
  width: 50%;
}


.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animations */
@-webkit-keyframes inputHighlighter {
  from { background: #000000; }
  to   { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #000000; }
  to   { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
  from { background: #000000; }
  to   { width: 0; background: transparent; }
}


.login_div_button{position:relative;z-index:1;display:block;overflow:hidden;width:100%;height:50px;padding:0 30px;border-radius:0;border:0;outline:0;-webkit-box-shadow:inset 0 0 0 2px currentColor;box-shadow:inset 0 0 0 2px currentColor;font:bold 18px GT-Eesti-Pro,sans-serif;line-height:50px;text-decoration:none;text-align:center;text-overflow:ellipsis;cursor:pointer;background:0 0;color:#000}
.login_button{width:100%;margin-top:30px; background:#0a9bcd;color:#fff;-webkit-box-shadow:none;box-shadow:none}
.login_button{display:inline-block;width:auto;margin-top:30px; margin-left:20px;}
.login_div_button {
	border: 1px solid;
	overflow: hidden;
	position: relative;
}

.login_forgot {
	padding-top: 40px;
	position: relative;
	margin-left: 35px;
}
.login_forgot a{
	color:black;text-decoration: underline;background: white;
}

.div_form{

position:relative;
width:380px;
text-align:left;
padding-left:100px;

}/*
#Searchform {
	
	width: 300px;
}*/
#Searchform .login_button{
	
	display:block;
}

.LoginForm .form_input{
	
	margin-left:70px;
}

.star {
    color: inherit;
    margin-left: 5px;
}
#Content{
	margin-left:30%;
	
}


.topnav {
	background-color: #ffff;
	position: fixed;
	top: 0;
	z-index: 15;
	width: 100%;
}

.topnav a {
		float: right;
		display: block;
		color: #090909;
		padding: 14px 16px;
		text-decoration: none;
	}


.topnav a:hover {

			color: #090909;
		}

.topnav .icon {
		display: none;
	}


@media (max-width: 780px) {

	.topnav a:not(:first-child) {
		display: none;
	}

	.topnav a.icon {
		float: left;
		display: block;
	}

	.topnav {
		right: 0;
	}

		.topnav a {
			border-bottom: 1px solid #999;
			font-size: 12px;
		}

.topnav.responsive {
			position: fixed;
		}

.topnav.responsive .icon {
				position: fixed;
				right: 0;
				top: 0;
			}

.topnav.responsive a {
				float: none;
				display: block;
				text-align: left;
				position: relative;
				top: 40px;
				background-color: #1f1e1d;
				color: #fff;
			}

.topnav.responsive img {
				float: none;
				display: block;
				text-align: left;
			}

	.TopBannerIndexImage {
		position: relative;
		margin-left: 60%;
		width: 200px;
	}

		.TopBannerIndexImage img {
			width: 180px;
			height: 120px;
		}

	.header_tools {
		z-index: auto;
	}

	.TopBannerLoginText, .TopBannerIndexText {
		position: absolute;
		margin-left: 5px;
		font-size: 16px;
		margin-top: 40px;
	}

	.login_button {
		background: #667d84;
	}

	.header .container {
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0 15px;
		max-width: 100%;
		left: 10px;
	}

	.header_container {
		display: block;
	}

	h1 {
		font-size: 18px;
		font-weight: lighter;
	}

	.LoginPageContent {
		display: none;
	}

	input {
		font-size: 12px;
		width: 90%;
	}

	.LoginForm .form_input {
		margin-left: 20px;
	}



	.forgottenpasswordSection {
		width: 90%;
		margin-left: 2px;
	}

	.contactusbuttons, .forgottenpasswordbuttons {
		margin-left: 0px;
		width: 295px;
	}

	.forgottenpassword-modal-content, .contactus-modal-content {
		width: 325px;
	}

	.forgottenpassword-modal-content {
		top: 110px;
		height: 300px;
	}

	.contactus-modal-content, .forgottenpassword-modal-content {
		border-radius: 25px;
		background: linear-gradient(to right, #ffff, #d0d0d0);
	}

	.contactus-modal-content {
		margin: 10px 5px;
	}

	.Contactusclose, .forgottenpasswordclose {
		color: #090909;
	}

	.TopBannerTextpopup {
		font-size: 20px;
		margin-left: 10px;
		padding-top: 10px;
		text-align: center;
		border-bottom: 1px #c3c3c3;
		border-bottom-style: dashed;
	}

	textarea {
		background: none;
		width: 92%;
	}

	label {
		color: #585858;
	}

	.TopBannerImagepopup {
		visibility: hidden;
	}

	.header_nav_item {
		font-size: 12px;
	}

	.TopBannerpopup {
		position: initial;
		height: 80px;
		width: 94%;
		display: block;
		background: none;
		text-align: center;
		color: #667d84;
	}

	.TopBannerImagepopup {
		content: url('../images/main/service-call-hsm.jpg');
		margin-left: auto;
	}

	.LoginContent {
		margin-top: 38px;
	}

	#footer {
		line-height: 8px;
		font-size: 8px;
	}

	.mainlogin {
		height: 380px;
	}

	.spnh1 {
		font-size: 22px;
		font-weight: bold;
	}

	.header_nav {
		display: flex;
		position: fixed;
		top: 10px;
	}



	.ContactusSection, .forgottenpasswordSection {
		width: 100%;
		margin-left: 4%;
	}

	.contactusbuttons, .forgottenpasswordbuttons {
		display: block;
		position: relative;
	}

	.form_input, .form_textarea, .form_select {
		position: relative;
		margin: 25px 0 15px;
	}

	label {
		font-size: 14px;
	}

	.login_button {
		margin-left: 7px;
	}

	/*   main page*/


	.ConsumablePanel {
		background-image: url(../images/main/sphone/consumables-call_sp.jpg);
	}

	.ServiceCallPanel {
		background-image: url(../images/main/sphone/service-call_sp.jpg);
	}

	.SoftwareCallPanel {
		background-image: url(../images/main/sphone/software-call_sp.jpg);
	}

	.MeterReadingPanel {
		background-image: url(../images/main/sphone/meter-readings_sp.jpg);
	}

	.RecycleTonerPanel {
		background-image: url(../images/main/sphone/recycle-toner_sp.jpg);
	}

	.OutstandingcallsPanel {
		background-image: url(../images/main/sphone/view-oustanding-calls_sp.jpg);
	}

	.HistoriccallsPanel {
		background-image: url(../images/main/sphone/view-historic-calls_sp.jpg);
	}

	.AllBannersDiv {
		width: 360px;
		height: auto;
		position: relative;
	}

	.btnPane {
		width: 141px;
		height: 129px;
	}

	.Panel span {
		font-size: 10px;
		left: 3px;
		top: 2px;
	}

	.Panel {
		width: 113px;
		height: 20px;
		top: 110px;
	}

	.TopBannerLogin, .TopBannerIndex {
		height: 119px;
	}

	.main {
		top: 200px;
		padding-left: 2px;
	}

	.arrow-right {
		width: 24px;
		height: 21px;
		padding-top: 5px;
	}

	#breadcrumb {
		Top: 15px;
		left: 17px;
		font-size: 14px;
		width: 185px;
		position: relative;
		z-index: 2;
	}

	#Searchform {
		margin-top: 30px;
		margin-left: 15px;
		width: 90%;
		border-right: none;
		position: relative;
	}


	.search-box {
		position: relative;
		background: #f1f2f4;
		height: 30px;
		border-radius: 12px;
		padding: 3px;
	}

	.search-btn {
		color: #1f1e1d;
		float: right;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #f1f2f4;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-txt {
		border: none;
		background: none;
		outline: none;
		float: left;
		padding: 0;
		color: #383535;
		font-size: 12px;
		line-height: 28px;
		transition: 0.4s;
		width: 85%;
		padding-left: 15px;
	}


	.login_div_button {
		height: 40px;
		padding: 0 20px;
		line-height: 40px;
		font-size: 14px;
	}

	.login_button {
		width: 130px;
		margin-top: 8px;
	}



	#Content {
		margin-left: 0px;
		width: 430px;
		font-size: 12px;
		margin-top: 10px;
	}


		#Content #version {
			margin-left: 10px;
		}

	#GeneralDetails, .TableMain {
		margin-left: 2px;
		width: 100%;
	}

	.search_results .td {
		display: block;
		flex-basis: auto;
		padding: 0.6em;
		font-size: 10px;
		flex-grow: 0.1;
	}

	.QuantityTonerTable {
		width: 420px;
	}


	#progresscontent, #progresscontentCU, #progresscontentFP {
		left: 200px;
		top: 300px;
	}

	.GeneralDetailstable {
		width: 410px;
	}

	.consumablesection, .ContactDetailssection, .MeterReadingsection, .Errordetailssection {
		width: 380px;
	}

	.div_form {
		/*padding-left: 40px;*/
		padding-left: 2px;
		z-index: 9;
		background-color: #ffffff;
	}

		.TableMain #UploadFilesDiv #files, .div_form #UploadFilesDiv #files {
			width: 240px;
			margin-left: 5px;
		}

	#progresscontent, #progresscontentCU, #progresscontentFP {
		background-color: #f1f2f403;
	}

	.OutstandingcallsPanel, .HistoriccallsPanel {
		pointer-events: none;
	}


	#service-callImg, #indexImg {
		content: url("../images/main/sphone/service-call-h.jpg");
	}

	#meter-readingsImg {
		content: url("../images/main/sphone/meter-readings-h.jpg");
	}

	#consumablesImg {
		content: url("../images/main/sphone/consumables-h.jpg");
	}

	#Content #version {
		margin-top: 220px;
	}

	.leftBanner, .rightBanner {
		visibility: hidden;
		width: 0;
	}

	.topnav {
		background-color: #1f1e1d;
	}

	.DocumentsList {
	
		width: 100%;
		margin-left: 0px;
		padding: 10px;
	}
}

.loginerr {
	position: relative;
	color: red;
	/* margin-top:25px;
		margin-left:200px;*/
}
/*.LoginContent {
	position: relative;
	margin-top: 250px;
	margin-left: 200px;
	width: 825px;
	margin-left: 500px;
}*/

.form_input .error {
	top: 38px;
	font-size: 12px;
	color: red;
}
#TopBannerImageFP {
	content: url('../images/main/service-call-h.jpg');
}


/*************************************************/