@font-face {font-family:'roboto_l';src: url('RobotoCondensed-Light.ttf');}
@font-face {font-family:'roboto_r';src: url('RobotoCondensed-Regular.ttf');}
body{font-family:'roboto_l', sans-serif;font-size:12px;color:#333;height:100%;background-color:#efc;padding-bottom:30px}
input,select,textarea{font-family:'calibri', sans-serif;font-size:1.2em;padding:4px 1%;border:solid 1px rgba(255,255,255,0.2);border-radius:3px;}
input[type=submit]{width:auto;cursor:pointer;color:#000;}
input,select,textarea,input[readonly]{box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
select optgroup{background-color:#140;color:#fff}
select option{background:rgba(90,120,50,1);color:#fff}
select option:hover {background-color:#333;}
strong{font-weight:bold}
#appName{display:none}
a{text-decoration:none;transition: color .5s ease;color:#de6;cursor:pointer}
a.logo{display:block;margin:auto;float:left;margin-top:-5px}
a.logo img{height:50px;width:auto;}
.login a.logo{width:150px;float:none;margin-top:10px}
.login a.logo img{height:auto}
.fl{float:left}.fr{float:right}.clr{clear:both}
/*.dealerPage a.logo{background:url('../images/marjing-logo-s.png') no-repeat center center transparent;margin:0 0 10px;padding:36px 0;width:80px;float:left;}*/
header{position:relative;width:auto;margin: 0 auto;padding:10px;overflow:hidden;}
.login header{padding:10px 0px;}
header h1{}
nav{position:absolute;left:0;top:0;width:100%;text-align:center;}
nav ul{list-style:none;}
nav ul li{display:inline;margin-right:1px;}
nav ul li a{display:inline-block;padding:5px 7px;color:#fff;background-color:#8b0;text-transform:uppercase;transition: all .20s ease;}
nav ul li a.on,nav ul li a.on:hover{background-color:#360;}
nav ul li a:hover{background-color:#580}

#mobileMenu{position: fixed;top: 0;left: 0;width: 100%;display: none;}
#mobileMenu ul li{display:block;background-color:#379;color: #fff;letter-spacing: 0.1em;text-align: center;text-transform: uppercase;border-bottom: 1px solid #48a;}
#mobileMenu ul li a{padding: 10px 0;display:block;color:#fff;}
.toggleMobile{display: none;}

.button{padding:4px 10px;border: 1px solid #693;text-decoration:none;border-radius:3px;
	background-image: linear-gradient(bottom, #df9, rgba(255,255,255,0));
	background-image: linear-gradient(to bottom, #df9, rgba(255,255,255,0));
	background-color:#fff;
}
.button:hover{background:none #efc;}
.tal{text-align:left}.tar{text-align:right}.tac{text-align:center}

.clear{clear:both;}
.hidden{position:absolute;clip: rect(1px 1px 1px 1px); /* IE6 & 7 */clip: rect(1px, 1px, 1px, 1px);}
.red,.expired{color:red}
.expired span,.active span{color:#fff;display:inline-block;padding:1px 5px;margin-left:5px;}
.expired span{background-color:red;}
.active span{background-color:#6c0;}
.active .expiring{background-color:#fc0;}
.active .active{background-color:#0a3;}

#loginInfo{position:absolute;color:#666;right:0;top:0;line-height:1.2em;z-index:10;white-space:nowrap;padding-top:5px}
#loginInfo a{color:#f70;cursor:pointer;text-decoration:none}
#loginInfo .linkBtn,#loginInfo .button{background-color:#000;color:#fc0;}
#loginInfo form{font-size:1em}
#loginInfo .field,#loginInfo .button{border:none;margin-left:3px;border-radius:1px;}
#loginInfo .field{padding:2px}
#loginInfo .button{text-transform:lowercase;padding:2px 5px;}
#loginInfo .linkBtn{padding:0 5px;font-size:0.9em;position:absolute;right:0px;border-radius:0;top:0;display:none}
#loginBtn{position:fixed;top: 0px;right:20px;}
.profile .profileIcon{display:none}
.profile #loginInfo .linkBtn{display:block}
.profileIcon{background:url("../images/profile_icon.png") center center no-repeat transparent;background-size:81%;display:inline-block;width:34px;height:34px}

#formSection, #contentTop, footer{margin:auto;}
#formSection h2, #contentTop h3{margin-top:10px}
#contentTop h2, #about h3, #news h3, #formSection h2{font-size:1.8em;text-transform:uppercase;text-align:center;font-family:"roboto_r"}
#contentTop h2, #about h3, #news h3{margin-bottom:10px;}
#about{text-align:center;}
#news h3{position:relative}
#news li{border-top:solid 1px rgba(0,0,0,0.1);border-bottom:solid 1px rgba(255,255,255,0.2);padding:5px 0;color:#ddd;}
#news li h4{color:#fff;font-weight:bold;font-size:1.2em;}
#news li:first-child{border-top:none}
#news li:last-child{border-bottom:none}
#staffLogin{display:none}
#toggleStaff{position:absolute;top:5px;right:5px;padding:4px 10px;background-color:rgba(200,255,100,0.3);border-radius:3px;}
#topDealer article{background-color:rgba(255,255,255,0.3);padding:10px;min-height:35px}
#topDealer article:nth-child(3n){background-color:rgba(0,50,100,0.1);margin:8px 0;}
#topDealer article>img{float:left;width:35px;height:35px;background-color:#fff;margin-right:10px}
#topDealer article>h3{font-size:1.2em;margin-bottom:2px;}
#topDealer article>address{color:#000}
#formSection section{text-align:center}
#formSection input,#formSection textarea{display:block;width:98%;margin:10px auto;text-align:center}
#formSection input[type=submit]{width:auto;}
footer{background-color:rgba(0,0,0,0.7);clear:both;text-align:center;padding:5px 0;color:#888;}
footer h2{font-size:1.2em;margin:2px 0;color:#fff;}
.login footer{background-color:transparent;padding:20px 0 10px}
.login footer h2{color:#390}

.tabular{margin:0 auto;padding:20px;min-height:470px;background-color:rgba(255,255,255,0.6)}
.tabular table{width:100%;background-color:#ccc;margin-top:6px;}
.tabular table.activitiesTbl{border:solid 2px #9c9}
.tabular table th{padding:3px 5px 4px;background-color:#250;color:#fff;text-align:left;border:solid	1px #360;border-bottom:none}
.tabular table td{padding:5px;background-color:#fff;border:solid 1px #eee}
.tabular table tr.master td{border-top:solid 2px #9c9}
.tabular table tr.suborder td:first-child{background-color:#fff;}
.tabular table tr.odd td,.tabular table tr.odd.suborder td:first-child{background-color:#dfd;}
.tabular h2>strong{text-transform:uppercase;color:#000;font-size:1.2em}
.tabular h2>span{color:#666}
.tabular h3{font-weight:bold;margin-bottom:5px;font-size:1.2em}

/*table {border: 1px solid #ccc; width: 100%;margin:0; padding:0; border-collapse: collapse; border-spacing: 0;}
table tr { border: 1px solid #ddd; padding: 5px;}
table th, table td { padding: 10px; text-align: center; }
table th {text-transform: uppercase;font-size: 14px;letter-spacing: 1px;}*/






.desc{padding:5px;background-color:rgba(0,0,0,0.05);margin-bottom:5px}
.addBtn,.addItem,.removeItem,.addStaff,.addFY{background:url('../images/plus-w.png') 5px center no-repeat #393;color:#fff;float:right;padding:3px 5px 3px 25px;text-transform:uppercase;}
.removeItem{background:url('../images/cross.png') 5px center no-repeat #e00;}
.saveBtn{padding:2px 5px;background-color:#3c6;color:#fff;border-radius:3px;}
.lockBtn{padding:2px 5px;background-color:#d63;color:#fff;border-radius:3px;}
.comment{word-wrap:break-word;max-width:150px}

#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000}
#loading{background:url(../images/loader.gif) no-repeat center center rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;left:0;top:0;z-index:10000}
.popFormCont{display:none;width:550px;position:fixed;top:60px;border:solid 3px #453;background-color:#dec;z-index:1001;box-shadow:0 0 5px #000;border-radius:5px;}
.popFormCont h3{text-transform:uppercase;padding:5px 2px 6px 0px;font-size:1.6em;font-weight:bold;margin:0;background-color:#453;color:#fff;text-align:center}
.popFormCont .close{background-color:#fff;float:right;color:#d00;font-size:0.5em;font-weight:bold;font-family:'verdana';width:24px;height:24px;line-height:24px;cursor:pointer;text-align:center;border-radius:16px;margin-top:-4px}
.popFormCont form{padding:1% 2%;overflow:hidden}
.popFormCont .field{width:48%;float:left;padding:0 1%;min-height:47px;}
.popFormCont .field.colspanTwo{width:98%}
.popFormCont label{display:block;text-align:left;margin:5px 0 2px;font-size:1.3em;color:#666;}
.popFormCont label.check{display:inline-block;width:45%;font-size:1em;margin-right:2%}
.popFormCont label.check input{float:left;margin:0 5px 0 0;}
.popFormCont input[type=text],.popFormCont input[type=password],.popFormCont textarea{padding:2px 1%;width:98%}
.popFormCont select{padding:1px 1%;width:98%}
.popFormCont select optgroup option,.popFormCont select optgroup{font-size:0.9em}
.popFormCont input[type=file],#customerLogin input[type=file]{font-family: calibri, arial;font-size:0.85em;border-radius:2px;width:98%}
.popFormCont input[type=button],.popFormCont input[type=submit]{margin:8px 2px}
.popFormCont input[name=username]{width:76%}
.popFormCont input[readonly]{background-color:#dec;border-color:#cda}
.popFormCont .buttons{clear:both;width:100%;text-align:center;padding-top:5px;}
.popFormCont .content{text-align:center;padding:20px;}
#registerCont fieldset{border:solid 1px #ccc;border-radius:3px;}
#registerCont fieldset label{width:55px}
#registerCont fieldset .addr{width:190px}
#registerCont label{width:180px}
.popFormCont .radioCont{display:inline-block;width:225px}
.popFormCont .radioCont .radioLbl{width:auto;display:inline;margin:0 5px 0 0;}
.popFormCont .radioCont .radioLbl input{pargin:0}
.taken,.available{background:transparent url('../images/existance.png') no-repeat 0 1px;width:10px;height:10px;position:absolute;margin:5px 0 0 5px;line-height:10px;padding-left:10px;font-size:0.8em;color:#999}
.available{background-position:0 -20px}
.editBtn,.activateBtn,.activateStaff,.resetPass,.deactivateBtn,.verifyBtn,.invoiceBtn,.allNews,.suborderBtn,.editStaff,.deleteStaff,.saveBtn,.serviceDetails,.backBtn,.logBtn,.editClient,.addService,.view,.renewService,.editFY,.setCurrent,.notify{display:inline-block;padding:2px 5px 3px;color:#fff;border-radius:3px;margin:1px}
.editBtn,.editStaff,.backBtn,.editClient,.resetPass,.editFY{background-color:#379;}
.activateBtn,.activateStaff,.verifyBtn,.addService,.renewService{background-color:#3c6;white-space:nowrap}
.deactivateBtn,.deleteStaff{background-color:#900;}
.invoiceBtn,.serviceDetails,.view,.setCurrent{background-color:#3cf;}
.notify{background-color:#f90;white-space:nowrap}
.backBtn{float:right}
.allNews{background-color:#06f;position:absolute;right:0;font-size:0.6em;font-weight:normal;text-transform:lowercase}
.suborderBtn{background-color:#393}
.logBtn{background-color:#6c9}
.tabBtn{background-color:#396;color:#fff;padding:3px 15px;text-transform:uppercase}
.tabBtn.on{background-color:#250;color:#fff;padding:7px 15px 5px;}

.itemList{border:solid 1px #ccc;padding:5px;}
.itemList table{width:100%}
.itemList table th{text-align:left}
.itemList table th,.itemList table td{border-bottom:solid 1px #eee;padding:2px;vertical-align:middle}
.itemList table .tar,.itemList table .tar input{text-align:right}
.itemList input,.itemList select{font-size:0.9em}
.itemList select{padding:1px 1%;}
.itemList .addItem,.itemList .removeItem{display:block;padding:0;width:19px;height:19px;float:none;background-position:center center;border-radius:3px;}
a.attachement{display:inline-block;  color: #3c6; text-decoration: underline;}
a.attachement img{float:left}
.dealerName{font-size:1.6em;float:left}
.dealerPage .dealerName{text-align:center;width:75%;margin:30px auto 0;float:none}
.dealerName>span{font-size:0.6em;color:#666}
.orderStatusCont{background-color:#fcfcfc;border:solid 1px #eee;padding:5px;}
.orderStatusCont strong{font-size:1.4em;line-height:1.4em;color:#035;}
#trackOrder li{background-color:#fcfcfc;border:solid 1px #eee;padding:3px 4px;margin:1px 0;text-align:left}
#trackOrder li>strong{padding-right:5px;}
/*#dealerList select,#depositList select{padding:0;font-size:1em;max-width:200px}
#dealerList #selectDealer,#depositList #selectDealer{color:#fff;border:none;background-color:rgba(0, 80, 120, 0.8);max-width:100px}
*/
.tabular th>select{max-width:100px;}
.tabular th>select,.tabular th>input,#startEDD,#endEDD{padding:0;font-size:1em;}
.tabular #startEDD,.tabular #endEDD{max-width:80px;}

#formSection, #contentTop{width:300px;padding:20px 30px}
#formSection{background-color:#000;border:solid 2px #fff;border-radius:5px;box-shadow:0 0 5px #030;color:#fff;position:relative}
footer{width:100%;position:fixed;bottom:0;left:0}
/*.box{width:280px;float:left;min-height:220px;padding:20px;}*/

.tblTop{margin-top:6px;background-color:rgba(0,0,0,0.1);border:solid 1px #fff;padding:5px 10px;}
.tblTop input{padding:1px;font-size:1em;width:100px;margin-left:5px;}
.tblTop input[type=submit]{padding:1px 5px;margin-left:5px;font-size:1em;background-color:#379;color:#fff;border:none;width:auto}
/*#depositList table,#customerList table{margin-top:0}*/

.pagination{overflow:hidden;padding:10px 0}
.pagination a{background-color:#fff;color:rgba(20,50,0,0.8);border:solid 1px #eee;line-height:12px;margin:0 1px;padding:2px 5px;display:inline-block;}
.pagination a.on{background-color:rgba(20,50,0,0.8);border-color:#000;color:#fff}

.nano {position :relative;overflow:hidden;}
.nano .content {position: absolute;overflow: scroll;overflow-x:hidden;top:0;right:0;bottom:0;left:0;border:none}
.nano .content:focus {outline:thin dotted;}
.nano .content::-webkit-scrollbar {visibility: hidden;}
.has-scrollbar .content::-webkit-scrollbar {visibility: visible;}
.nano > .pane {background : rgba(0, 50, 90, 0.2);position:absolute;width:7px;right: 0;top: 0;bottom: 0;
  visibility: hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity: .01; 
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  border-radius         : 5px;
}
.nano > .pane > .slider {background: rgba(0,0,0,.5);position: relative;margin: 0 1px;border-radius: 3px;}
.moreInfo .nano > .pane > .slider{background:rgba(0, 50, 90, 0.8);}
.nano:hover > .pane, .pane.active, .pane.flashed {visibility : visible\9; /* Target only IE7 and IE8 with this hack */opacity    : 0.99;}
#news .nano{height:200px;}
#clock{position:fixed;right:0;bottom:0;background-color:#035;color:#fff;padding:2px 5px;box-shadow:0 0 3px #fff;}
#appSetting{background:url('../images/settings.png') center center no-repeat transparent;padding:12px;position:absolute;left:2px;top:5px}

.profileCont,.formCont{width:50%;float:left;box-sizing:border-box}
.profileCont h2{margin:10px 20px 15px 5px;font-size:1.4em;text-transform:uppercase;font-family:"roboto_r"}
.profileCont div{font-size:1.2em;padding:5px 0;margin:5px 20px 5px 5px;border-bottom:solid 1px rgba(0,0,0,0.1)}
.profileCont span{min-width:100px;display:inline-block}

.formCont{padding:20px;background-color:#000;border-radius:5px;border:solid 2px #fff;box-shadow:0 0 5px #030}
.formCont form{display:flex;flex-wrap:wrap}
.formCont .field{width:50%}
.formCont label{display:block;margin:10px 0 5px;color:#ccc}
.formCont h2{color:#fff;font-family:"roboto_r";text-transform:uppercase;font-size:1.4em;padding-bottom:5px;margin-bottom:5px;border-bottom:solid 1px rgba(255,255,255,0.2)}
.formCont input[type=text],.formCont input[type=password]{font-size:1em;min-width:90%;margin-bottom:10px}
.formCont .buttonCont{margin-top:10px;text-align:center;width:100%}
.discontinueBtn{background-color:#666;padding:1px 4px;border-radius:3px}

@keyframes blink{
	50%{opacity:0.5}
}
nav ul li a.alert{animation:blink 1s step-start 0s infinite}
/* responsive layout */

@media (max-width: 960px)
{
}

/*@media (max-width: 820px)
{
	#formSection, #contentTop, footer{width:100%}
	.box{width:29%;padding:2%;float:left;min-height:250px;}
}
*/
@media (max-width: 765px)
{
    .popFormCont{position:absolute;}
	header nav{right: auto;bottom: auto;left: 50%;top:100px;margin-left: -184px;}
	footer{height: auto;}
	
	table {border: 0;}
	/*table thead {display: none;}*/
    .tabular table th {display:block;}
	.tabular table tr {margin-bottom: 10px; display: block; border:1px solid #9c9}
    .tabular table tr:after {content: "";display: table;clear: both;}
    .tabular table tr:before { display: block;}
    .tabular  table td {box-sizing: border-box; display: block; float: left; clear: left; width: 100%;text-align: left; font-size: 13px;}
    .tabular table td:last-child {border-bottom: 0;}
    .tabular table td:before {content: attr(data-label); font-style: italic; text-transform: initial; font-weight: bold;}
	.tabBtn {display:block; padding: 7px 10px; text-align: center;}
	.tabBtn.on { background-color: #9c9; color: #000; padding: 7px 10px; Text-transform:uppercase;}
	.editBtn, .activateBtn, .deactivateBtn, .verifyBtn, .invoiceBtn, .allNews, .suborderBtn, .editStaff, .deleteStaff, .saveBtn, .serviceDetails, .backBtn, .logBtn, .editClient, .addService, .view, .renewService { padding: 6px; text-align: center; width: 28%;}

}

@media (max-width: 500px)
{
	.popFormCont{position:fixed;width:99% !important;top:0 !important;height:99%;overflow:auto}  
	.tabular{padding:10px;}
	.tabular .hide{display:none}
	.dealerName{width:60%;margin-top:20px}
	.dealerPage a.logo{}

    #mobileMenu{display: block;z-index: 99;}
	.toggleMobile{position: fixed;top:5px;left:5px;display: block;width:30px;height:28px;cursor: pointer;z-index: 999;}
	.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3{display: block;position: absolute;width:30px;height:6px;left: 0;background: #035;
			-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
			transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile span.menu1{top: 0;}
	.toggleMobile span.menu2{top: 10px;}
	.toggleMobile span.menu3{top: 20px;}
	.toggleMobile.active span.menu1{top: 10px;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
			-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
			transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile.active span.menu2{
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
			-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
			transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile.active span.menu3{
			opacity: 0;
			-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
			transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	header nav{display:none;}
	header h1{font-size:20px; text-align: left; padding-left: 26px;}

	.tblTop {background-color: #f6f6f6; margin-top: 20px; padding: 5px;}
	 /*RESPONSIVE FOR TABLE IN MOBILE VIEW*/

	table {border: 0;}
  
    .tabular table tr {margin-bottom: 10px; display: block;}
    .tabular table tr:after {content: "";display: table;clear: both;}
    .tabular table tr:before { display: block;   border-bottom: none;}
    .tabular table td {box-sizing: border-box; display: block; float: left; clear: left; width: 100%; text-align: left; font-size: 13px;border-bottom: 1px dotted #ccc:}
	.tabular table td:last-child {border-bottom: 0;}
    .tabular table td:before {content: attr(data-label); font-style: italic; text-transform: initial; font-weight: bold;}
	.profileCont,.formCont{width:95%;float:none;box-sizing:border-box;margin:20px auto}
	.login footer{position:static}
#appSetting{left:130px}
a.logo{margin-left:40px;margin-top:-10px}
#loginInfo{right:5px}
header{padding:10px 5px}
}

/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}