@charset "utf-8";

/*NORMALIZE
----------------------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block;}audio, canvas, video {display: inline-block;}audio:not([controls]) {display: none; height: 0;}[hidden] {display: none;}html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}body {margin-left: 35px;margin-top: 0;margin-right: 0;margin-bottom: 0;}a:focus {outline: thin dotted;}a:active, a:hover {outline: 0;}abbr[title] {border-bottom: 1px dotted;}mark {background: #ff0; color: #000;}code, kbd, pre, samp {font-family: monospace, serif; font-size: 1em;}pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}q {quotes: "\201C" "\201D" "\2018" "\2019";}small {font-size: 80%;}sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}img {border: 0;}svg:not(:root) { overflow: hidden;}figure {margin: 0;}fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}legend {border: 0; padding: 0;}button, input, select, textarea {font-family: inherit; font-size: 100%; margin: 0;}button, input {line-height: normal;}button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}button[disabled], input[disabled] {cursor: default;}input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}textarea {overflow: auto; vertical-align: top;}table {border-collapse: collapse; border-spacing: 0;}

/*GLOBAL
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #808080;
	background: #ffffff;
	width: 100%;
	overflow-y: scroll;
}
#copytextpopup {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #777777;
    border-radius: 6px;
    box-shadow: 0 0 14px #333333;
    display: initial;
    left: 0;
    max-width: 100%;
    padding: 20px;
    position: fixed;
    margin: auto;
    right: 0;
    text-align: center;
    top: 0;
    bottom: 0;
    max-height: 145px;
    height:145px;
    width:400px;
}

    #copytextpopup h1 {
        border-bottom: 2px solid #00c0f3 !important;
        font-size: 20px;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 20px;
        padding-right: 0px;
    }

    #copytextpopup .pop_btns {
        text-align: center;
        margin-top: 17px;
        width: 100%;
        float: left;
    }

    #copytextpopup input[type='text'] {
        text-align: left;
        border: 1px solid #00c0f3 !important;
        border-radius: 3px;
        width: auto;
        height: 30px;
        padding: 5px 15px;
    }

    #copytextpopup input[type='button'] {
        text-align: center;
        background: #bb2026;
        color: #fff;
        border: 0px;
        font-size: 16px;
        padding: 4px 10px;
        width: auto;
        height: 30px;
    }
    
  /*====New Search Filter=====*/ 
 .fieldfilter{width: 20%;float:left;}
 .fieldfilter span{font-size:16px;}
 .conditionfilter{width: 20%;float:left;padding:0 0 10px 40px;}
 .conditionfilter span{font-size:16px;}
 .criterionfilter{width: 45%;float:left;padding:0 0 10px 60px;}
 .criterionfilter span{font-size:16px;}
 #dvSearchFilter input[type=search].SearchInputBorder{border: 1px solid #cccccc;padding: 0 15px 0 10px;}
 #dvSearchFilter select {padding-left: 5px;  border: 1px solid #cccccc;}
 .reports-input #dvEndDate input.inputdate{ max-width: 225px; margin-left:0; font-size:15px; }
 .reports-input #dvEndDate input.inputdate+ input.inputdate{  float:right; }

.wrapper {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px;
}

.content {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #cccccc;
	border-radius: 9px;
	padding: 20px;
	margin-bottom: 20px;
	float: left;
	/*overflow: hidden; for popup issue */
	position: relative;
}
    .content:before,
    .content:after {
	    content: " ";
	    display: table;
    }

    .content:after {
	    clear: both;
    }

.contentFull {
	width: 100%;
	float: left;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
}
    .contentFull:before,
    .contentFull:after {
	    content: " ";
	    display: table;
    }

    .contentFull:after {
	    clear: both;
    }

.contentLeft, .contentRight {
	width: 50%;
	float: left;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 20px;
}
    .contentLeft:before,
    .contentLeft:after,
    .contentRight:before,
    .contentRight:after {
	    content: " ";
	    display: table;
    }

    .contentLeft:after,
    .contentRight:after {
	    clear: both;
    }
    
	.first {margin-top: 0;}
	.contentLeft {padding-right: 10px; clear: both;}
	.contentRight {padding-left: 10px;}
    .data_content .contentRight input{width:49% !important;}
h1, h2, h3, h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #00c0f3;
	line-height: .9em;
	letter-spacing: normal;
	margin: 0px;
	float: left;
	width: 100%;
	display: block;
}

h1 {
    font-size: 60px;
    border-bottom: 4px double #808080;
    margin-bottom: 10px;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 100px;
}
h2 {font-size: 36px; border-bottom: 1px solid #cccccc; padding-bottom: 2px; margin-bottom: 6px; margin-top: 16px;}

p {margin-bottom: 20px; float: left; width: 100%;}

a {cursor: pointer;}
a:link    {text-decoration: none; color: #808080;}
a:visited {text-decoration: none; color: #808080;}
a:hover   {text-decoration: underline; color: #00c0f3;}
a:active  {text-decoration: none; color: #00c0f3;}

a:link { -webkit-tap-highlight-color: rgba(0,0,0,0); }

.loading {display: none; float: right; margin-top: -46px; height: 30px; font-size: 12px; line-height: 31px; color: #00c0f3;}
.loading img {float: right;}
.loadingMain {display: none; position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; line-height: 30px;}

.active .loading, .active .loadingMain { display: inline-block; }

/*NOTIFICATION BAR
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.notificationBar {
	position: fixed;
	top: -100%; left: 0px;
	width: 100%;
	height: auto;    
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 100;
	color: #ffffff;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
	display: table;
	-webkit-transition: top 0.5s ease;
	-moz-transition: top 0.5s ease;
	-ms-transition: top 0.5s ease;
	-o-transition: top 0.5s ease;
	transition: top 0.5s ease; 
}

	.notificationBar.ACTIVE {top: 0px;}
	
	.notificationBar.FAILURE {background: #AD2200;}
	.notificationBar.PERMISSION {background: #1BB89A;}
	.notificationBar.CORRECT {background: #F37600;}
	.notificationBar.SUCCESS {background: #00c0f3 !important;}

.notificationBar div {
	min-height: 40px;
}

.notificationMessage {
	width: 100%;
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px 40px;
	display: table-cell;
	vertical-align: middle;
}
	
.notificationIcon {
	position: absolute;
	top: 0; left: 0px;
	width: 40px;
	height: 40px;
	background-image: url(../images/notifications.png);
	float: left;
}
	
	.notificationBar.FAILURE .notificationIcon {background-position: 0px 0px;}
	.notificationBar.PERMISSION .notificationIcon {background-position: -40px 0px;}
	.notificationBar.CORRECT .notificationIcon {background-position: -120px 0px;}
	.notificationBar.SUCCESS .notificationIcon {background-position: -80px 0px !important;}

.notificationClose {
	position: absolute;
	top: 0; right: 0px;
	width: 40px;
	height: 40px;
	background-image: url(../images/notifications.png);
	background-position: -160px 0px;
	float: left;
	cursor: pointer;
}
	.notificationClose:hover {background-position: -160px -40px;}
	
/*FORMS
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
input:not([type=submit]):not([type=file]) {
	width: 100%;
	height: 40px;
	outline: none;
	font-family: Helvetica, Arial, sans-serif;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 15px 0px 40px;
	border: 0;
	color: #606060;
	font-size: 14px;
}

input {
	-webkit-appearance: none;
	border-radius: 0;
}

input::-ms-clear, input::-ms-reveal {
	display: none;
}

input:not([type=submit]):not([type=file]):focus, input:not([type=submit]):not([type=file]):hover{
	background: #f5f5f5;
}

input[type=submit] {
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border: 0;
	outline: none;
	font-family: Helvetica, Arial, sans-serif;	
}

::-webkit-input-placeholder {color: #b0b0b0;}
:-moz-placeholder {color: #b0b0b0;}
::-moz-placeholder {color: #b0b0b0;}
:-ms-input-placeholder {color: #b0b0b0;}

.input {
	width: 100%;
	height: 40px;
	border-radius: 3px !important;
	border: 1px solid #cccccc !important;
	font-size: 16px;
}
	.input:focus {outline: none;}	

.select {
	padding: 10px;
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	height: 40px;
	border-radius: 3px;
	color: #606060;
	background: #ffffff;
	outline: none;
	border: none;
	font-weight:normal;
}
	.select:hover, .select:active, .select:focus {background: #f5f5f5; outline: none;}

@media screen and (-webkit-min-device-pixel-ratio:0) {/* WEBKIT ONLY
------------------------------------------------------------------------------------------------MEDIA QUERY---*/ 
	select {-webkit-appearance: none;}

	.DropSorter:after, .TI:after {
		content: '';
		display: block;
		width: 0px; height: 0px;
		border-top: 6px solid #808080;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		position: absolute;
		top: 16px;
		right: 15px;
		pointer-events: none;
	}
 
	.groupselect {
		height: 40px;
		text-indent: 1px;
	}
    
}

.button {
	font-size: 18px;
	box-shadow: 0px 1px 2px rgba(0,0,0,.4);
	background-color: #00c0f3 !important;
	color: #ffffff !important;
	text-align: center;
	font-weight: bold;
	border-radius: 3px;
	cursor: pointer;
	text-transform: uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none; 
}
	.button:hover, .button:focus {box-shadow: 0px 3px 4px rgba(0,0,0,.4);}
	.button:active {box-shadow: inset 0px 2px 4px rgba(0,0,0,.4);}

/*EXPANDING TEXT AREA
----------------------*/

	textarea {
		background: transparent;
		font-size: 16px;
		font-family: Helvetica, Arial, sans-serif;
		white-space: pre-wrap; word-wrap: break-word;
		resize: none;
		border: none;
		overflow: hidden;
		-moz-box-sizing: border-box; box-sizing: border-box;
		padding: 10px 15px 10px 40px;
	}
	textarea, .textareaClone {
		width: 100%;
		min-height: 40px;
	}
		textarea:hover, textarea:focus {outline: none; background-color: #f5f5f5;}

/*NAVIGATION & PRINT BUTTON
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.navigation, .utilities {
	position: fixed;
	width: 60px;
	height: auto;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px 10px 0px 10px;
	border: 1px solid #cccccc;
	border-radius: 9px;
	top: 20px;
	margin-left: -100px;
}

/*.utilities {margin-left: 920px;}*/
.nav, .utility {width: 40px; height: 40px; float: left; margin-bottom: 10px;}

.nav div {
	width: 40px; height: 40px;    
	background-size: 40px 40px;
	float: left;   
}

.utility div {
	width: 40px; height: 40px;    
	background-size: 40px 80px;
	background-position: 0 top;
	float: left;
	overflow: hidden; 
}

.nav div img, .utility div img {
	width: 100%; height: auto;    
	float: left;
	user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
	pointer-events: none;  
}
	/*
	.navTrack {background-image: url(../images/track.png);}
	.navCreate {background-image: url(../images/create.png);}
	.navCustomers {background-image: url(../images/customer.png);}
	.navReports {background-image: url(../images/reports.png);}
	.printButton {background-image: url(../images/print.png);}
	*/

@media all and (max-width: 1115px) { /*MEDIUM
------------------------------------------------------------------------------------------------MEDIA QUERY---*/
.navigation, .utilities {
	position: relative;
	width: auto;
	height: 40px;
	padding: 0px;
	top: 0px;
	margin: 0 0 20px 0;
	border: 0px;
	float: left;
}

.reports-input .daterow {
  float: left !important;
  max-width: 300px !important;
  width: 100% !important;
}
.reports-input .enddate {
  margin-right: 1%;
}
	/*.utilities {float: right;}*/

.nav, .utility {margin: 0 10px 0 0; width: 40px;}
/*.utility {margin: 0 0 0 10px; width: 40px;}*/
}

/*HEADER
--------------------*/	
.header {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;	
	margin-bottom: 20px;
	border-bottom: 4px double #808080;
	float: left;
}

.logo {
	margin-bottom: 6px;
	text-indent: -9999px;
	background-image: url(../images/logo.png);
	width: 160px;
	height: 24px;
	background-position: top left;
	background-repeat: no-repeat;
}
	.logo:hover {background-position: bottom left;}
	.logo a {display: block; width: 100%; height: 100%;}

.date {
	float: right;
	text-align: right;
	margin-top: -20px;
}

/*SIGN IN
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.signIn {
	width: 100%;
	max-width: 400px;
	margin: 30px auto 0px auto;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px;
	font-family: Helvetica, Arial, sans-serif;
}

.userpass {
	width: 100%;
	height: auto;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 20px;
	border: 1px solid #cccccc;
	font-size: 18px;
}
	.userpass input {color: #00c0f3 !important;}
	
.user {	
	position: relative;
	padding-left: 30px;
}
	.user span, .pass span {
		position: absolute;
		top: 0px; left: 0px;
		width: 40px; height: 40px;
		display: block;
		background: url(../images/signin.png);
		background-position: top left;
	}
	
.pass {
	position: relative;
	padding-left: 30px;
	border-top: 1px solid #cccccc;
}
	.pass span {
		background-position: bottom left;
	}
	
.user input:hover + span {background-color: #f5f5f5;}
.pass input:hover + span {background-color: #f5f5f5;}
.user input:focus + span {background-position: top right; background-color: #f5f5f5;}
.pass input:focus + span {background-position: bottom right; background-color: #f5f5f5;}

.forgotPassword {
	width: 100%;
	margin-top: 10px;
}

.forgot {
	margin-top: 0px;
	border-top: 1px dotted #cccccc;
}

.passNew {
	border-top: 0px;
}

/*MAIN PAGE
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.mainContainer {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0px;
	-webkit-user-select: none;  
	-moz-user-select: none;     
	-ms-user-select: none;      
	-o-user-select: none;
	user-select: none;
}
.main {
	display: inline-block;
	position: relative;
	width: 100%;	
}

.ratio {padding-top: 100%;}

.mainChoose {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	overflow: hidden;
	background: #fafafa;
	color: #00c0f3;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	box-shadow: 0px 3px 8px rgba(0,0,0,.4);
	border-radius: 3px;
	cursor:pointer;
}
	.mainChoose:hover {box-shadow: 0px 6px 12px rgba(0,0,0,.4);}
	.mainChoose:active {box-shadow: inset 0px 3px 6px rgba(0,0,0,.4);}

.mainChoose:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-top: 6px;
}

.mainChoose:after {
	-webkit-transition: height 0.2s ease, width 0.2s ease;
	-moz-transition: height 0.2s ease, width 0.2s ease;
	-ms-transition: height 0.2s ease, width 0.2s ease;
	-o-transition: height 0.2s ease, width 0.2s ease;
	transition: height 0.2s ease, width 0.2s ease;
}

.mainChoose:after {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;
	width: 20%;
	height: 20%;
	background: #00c0f3;
	border-radius: 0 3px 0 0;	
}
	.mainChoose:hover:after {width: 30%; height: 30%;}
	.mainChoose:active:after {width: 30%; height: 30%; box-shadow: 0px 3px 6px rgba(0,0,0,.4);}

/*.track.mainChoose:after {
	background-image: url(../images/track.png);
	background-size: cover;
}
.create.mainChoose:after {
	background-image: url(../images/create.png);
	background-size: cover;
}*/
.orders.mainChoose:after {
	background-image: url(../images/order.png);
	background-size: cover;
}
.warranties.mainChoose:after {
	background-image: url(../images/warranty.png);
	background-size: cover;
}
.customers.mainChoose:after {
	background-image: url(../images/customer.png);
	background-size: cover;
}
.reports.mainChoose:after {
	background-image: url(../images/reports.png);
	background-size: cover;
}

 .QuoteEmail.mainChoose:after {
	background-image: url(../images/customer.png);
	background-size: cover;
}
.mainChoose.viewsettings:after {
    background-image: url(../images/settings.png);
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

.mainChoose.manageUsers:after {
    background-image: url(../images/manageuser.png);
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

.homeAction {
	cursor:pointer;
}

.importcsv.mainChoose:after {
	background-image: url(../images/import.png);
	background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}

.subOption {
	width: 100%;
	height: 20%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: left;
	text-indent: 5%;
	border-top: 1px solid #eeeeee;
	cursor: pointer;
	color: #cccccc;
	border-radius: 0 0 3px 3px;
	-webkit-transition: background-color 0.2s ease;
	-moz-transition: background-color 0.2s ease;
	-ms-transition: background-color 0.2s ease;
	-o-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
}
	.subOption:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-top: 6px;
	}

	.subOption:after {
		content: '';
		height: 1px;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #eaeaea;
	}

	.subOption img {
		position: absolute;
		right: 0px;
		bottom: 0px;
		height: 100%;
		width: auto;
	}

		.subOption:hover {
			background-color: #00c0f3;
			color: #ffffff;
		}
		.subOption:active {
			box-shadow: inset 0px 3px 6px rgba(0,0,0,.4);
		}


/*TRACK PAGE
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.searchBox {
	width: 100%;
	padding: 20px;
	background: #cccccc;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	margin-bottom: 10px;
	position: relative;
	float: left;
}

.searchBox input {
	color: #00c0f3 !important;
	font-size: 18px;
	border-radius: 3px !important;
	padding-right: 40px !important;
}
	.searchBox input:hover, .searchBox input:focus {background: #ffffff !important;}

.searchBox span {
	position: absolute;
	top: 20px; right: 20px;
	width: 40px; height: 40px;
	display: block;
	background: url(../images/search.png);
	background-position: top;
}
	.searchBox input:focus + span {background-position: bottom;}

.warranty_NoResults, .customer_NoResults {width: 100%; color: #00c0f3; font-style: italic; margin: 10px 0; float: left; font-size: 18px;}
	
.DropSorter {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	border: 1px solid #cccccc;
	height: 40px;
	border-radius: 3px;
	overflow: hidden;	
}
	.DropSorter .select {
		padding-left: 40px;
	}
.DropSorter span {
	position: absolute;
	width: 40px; height: 40px;
	left: 0; top: 0;
	background-image: url(../images/sorticon.png);
	display: block;
}

.DropSorter span {background-position: 0px top;}
	.DropSorter select:hover + span {background-color: #f5f5f5;}
	.DropSorter select:focus + span {background-position: 0px bottom; background-color: #f5f5f5;}
	
.warrantyList,
.warranty_rowSection,
.orderList,
.userList,
.user_rowSection,
.order_rowSection {
	width: 100%;
	height: auto;
	float: left;
}

.warranty_rowSection,
.user_rowSection,
.order_rowSection {
    border-bottom: 1px dotted #808080;
}
	.warranty_rowSection:hover,
	.warranty_rowSection:active,
    .user_rowSection:hover,
    .user_rowSection:active,
	.order_rowSection:hover,
	.order_rowSection:active {
	    background: #f5f5f5 !important; cursor: pointer;
	}

.warranty_rowSection div,
.user_rowSection div,
.order_rowSection div {
    float: left;
    line-height: 40px;
    height: 40px;
    overflow: hidden; white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
}

.CustomerName {width: 45%; font-size: 16px;}
	.CustomerName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .CustomerName:after {background-position: 0px bottom;}
	
.PartNumber {width: 45%; font-size: 16px;}
	.PartNumber:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .PartNumber:after {background-position: 0px bottom;}
	
.Serial {width: 45%; font-size: 16px;}
	.Serial:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .Serial:after {background-position: 0px bottom;}
	
.WarrantyAgreement {width: 45%; font-size: 16px;}
	.WarrantyAgreement:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .WarrantyAgreement:after {background-position: 0px bottom;}
		
.Manufacturer {width: 30%; font-size: 16px;}
	.Manufacturer:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .Manufacturer:after {background-position: 0px bottom;}
	
.ContractNumber {width: 30%; font-size: 16px;}
	.ContractNumber:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .ContractNumber:after {background-position: 0px bottom;}
	
.TimeLeft {
	width: 25%;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: right;
	font-size: 24px;
}
	.t-unit {font-size: .5em; margin-left: 2px;}

.EndSoon .TimeLeft {color: #00c0f3;}
	
.PurchaseOrder {width: 45%; font-size: 16px;}
	.PurchaseOrder:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .PurchaseOrder:after {background-position: 0px bottom;}
	
.Company {width: 30%; font-size: 16px;}
	.Company:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Company:after {background-position: 0px bottom;}
		
.PurchaseDate {
	width: 25%;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: right;
	font-size: 20px;
}

/*=================== Track Order Items======================*/
.Manufacturer {width: 13%; font-size: 11.4px;}
	.Manufacturer:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Manufacturer:after {background-position: 0px bottom;}
	
.HWSW {width: 7%; font-size: 11.4px;}
	.HWSW:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .HWSW:after {background-position: 0px bottom;}	

.Part {width: 5%; font-size: 11.4px;}
	.Part:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Part:after {background-position: 0px bottom;}	

 .Description {width: 10.5%; font-size: 11.4px;}
	.Description:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Description:after {background-position: 0px bottom;}	

   .Serial 
	{
      /*width: 6.5%; */
      width: 13.5%;
      font-size: 11.4px;
      text-align:center;
    }
	
	.Serial:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Serial:after {background-position: 0px bottom;}		
	
	.ShippedTo {width: 9%; font-size: 11.4px;}
	.ShippedTo:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .ShippedTo:after {background-position: 0px bottom;}
	
	.PartType {width: 8.75%; font-size: 11.4px;}
	.PartType:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .PartType:after {background-position: 0px bottom;}
	
	.State {width: 5%; font-size: 11.4px;}
	.State:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .State:after {background-position: 0px bottom;}

   .Site {width: 4%; font-size: 11.4px;}
	.Site:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Site:after {background-position: 0px bottom;}
	
	.CustomerDesc {width: 13%; font-size: 11.4px;}
	.CustomerDesc:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .CustomerDesc:after {background-position: 0px bottom;}
	
	.Dept {width: 5%; font-size: 11.4px;}
	
	.Dept:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Dept:after {background-position: 0px bottom;}
	
	.PriceO {width: 5.25%; font-size: 11.4px;}
	
	..PriceO:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover ..Price):after {background-position: 0px bottom;}
	
	.EndDate {width: 8%; font-size: 11.4px;}
	.EndDate:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .EndDate:after {background-position: 0px bottom;}
	
	.PurchaseOrderNumber 
	{
	   /* width: 4%;*/
	   width: 10%;
	    font-size: 11.4px;
	    text-align:center;}
		
	.PurchaseOrderNumber:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .PurchaseOrderNumber:after {background-position: 0px bottom;}
	
	.Vendor {width: 7%; font-size: 11.4px;}
	.Vendor:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Vendor:after {background-position: 0px bottom;}
	
	.Status {width: 7%; font-size: 11.4px;}
	.Status:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .Status:after {background-position: 0px bottom;}
	/*=========Order Search===============================*/ 
    /*=========Manage User Column===============================*/ 
    .FirstName {width: 10%; font-size: 11.4px;}
	.FirstName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .FirstName:after {background-position: 0px bottom;}

    /*.MiddelName {width: 8%; font-size: 11.4px;}
	.MiddelName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .MiddelName:after {background-position: 0px bottom;}*/

    .LastName {width: 10%; font-size: 11.4px;}
	.LastName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .LastName:after {background-position: 0px bottom;}

    .EmailAddress {width: 13%; font-size: 11.4px;}
	.EmailAddress:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .EmailAddress:after {background-position: 0px bottom;}


    .UserName {width: 9%; font-size: 11.4px;}
	.UserName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .UserName:after {background-position: 0px bottom;}


    .TwoFA {width: 5%; font-size: 11.4px;}
	.TwoFA:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .TwoFA:after {background-position: 0px bottom;}


    /*.Authorized {width: 6%; font-size: 11.4px;}
	.Authorized:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}*/
	/*.user_rowSection:hover .Authorized:after {background-position: 0px bottom;}*/


    .CreatedDate {width: 12%; font-size: 11.4px;}
	.CreatedDate:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}

	.user_rowSection:hover .CreatedDate:after {background-position: 0px bottom;}
    .LastLogin {width: 10%; font-size: 11.4px;}
	.LastLogin:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .LastLogin:after {background-position: 0px bottom;}

     .Roles {width: 12%; font-size: 11.4px;}
	.Roles:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .Roles:after {background-position: 0px bottom;}

     .Actions {width: 19%; font-size: 11.4px;}
	.Actions:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.user_rowSection:hover .Actions:after {background-position: 0px bottom;}


    /*=========Manage User Column===============================*/ 
	/*=========Service Contract===========================*/
	.SCManufacturer {width: 11%; font-size: 11.4px;}
	.SCManufacturer:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCManufacturer:after {background-position: 0px bottom;}
	
	.SCHWSW {width: 6.7%; font-size: 11.4px;}
	.SCHWSW:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCHWSW:after {background-position: 0px bottom;}	
	
	.SCState {width: 5%; font-size: 11.4px;}
	.SCState:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCState:after {background-position: 0px bottom;}

   .SCSite {width: 4%; font-size: 11.4px;}
	.SCSite:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCSite:after {background-position: 0px bottom;}
	
	.SCPart {width: 6%; font-size: 11.4px;}
	.SCPart:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCPart:after {background-position: 0px bottom;}	
	
	.SCDescription {width: 9%; font-size: 11.4px;}
	.SCDescription:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCDescription:after {background-position: 0px bottom;}
	
	.SCCustomerDesc {width: 11%; font-size: 11.4px;}
	.SCCustomerDesc:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCCustomerDesc:after {background-position: 0px bottom;}
	
	.SCPurchaseOrderNumber {width: 9%; font-size: 11.4px;text-align:center;}
	
	.SCPurchaseOrderNumber:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCPurchaseOrderNumber:after {background-position: 0px bottom;}
	
	.SCVendor {width: 6%; font-size: 11.4px;}
	.SCVendor:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCVendor:after {background-position: 0px bottom;}
	
	.SCSerial {width: 10%; font-size: 11.4px;text-align:center;}
	
	.SCSerial:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCSerial:after {background-position: 0px bottom;}		
	
	.SCShippedTo {width: 8%; font-size: 11.4px;}
	.SCShippedTo:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCShippedTo:after {background-position: 0px bottom;}
	
	.SCPartType {width: 9%; font-size: 11.4px;}
	.SCPartType:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCPartType:after {background-position: 0px bottom;}
	
	.ContractNo {width: 10%; font-size: 11.4px;}
	.ContractNo:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .ContractNo:after {background-position: 0px bottom;}
	
	.SCEndDate {width: 7%; font-size: 11.4px;}
	.SCEndDate:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCEndDate:after {background-position: 0px bottom;}
	
	.SCDept {width: 5%; font-size: 11.4px;}
	.SCDept:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCDept:after {background-position: 0px bottom;}
	
	.SCPrice {width: 5%; font-size: 11.4px;}
	.SCPrice:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.warranty_rowSection:hover .SCPrice:after {background-position: 0px bottom;}
	/*=================End Service Contract=========================*/
/*=========Order Search===============================*/ 

.PurchaseOrderTrack {width: 25%; font-size: 16px;}
	.PurchaseOrderTrack:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .PurchaseOrderTrack:after {background-position: 0px bottom;}

.CompanyTrack {width: 35%; font-size: 16px;}
	.CompanyTrack:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .CompanyTrack:after {background-position: 0px bottom;}

.PurchaseDateTrack {
	width: 18%;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: right;
	font-size: 20px;
}

.SerialNumberTrack {width: 22%; font-size: 16px;}
	.SerialNumberTrack:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	.order_rowSection:hover .SerialNumberTrack:after {background-position: 0px bottom;}


/*REPORT PAGE SPECIFIC STYLES*/
.ReportPage .CustomerName {width: 25%; font-size: 16px;}
.ReportPage .PartNumber {width: 25%; font-size: 16px;}
.ReportPage .Serial {width: 25%; font-size: 16px;}
.ReportPage .TimeLeft {width: 25%; font-size: 24px;}
.ReportPage .col-first {padding-left: 1%;width: 10%;}
.ReportPage .col-second {width: 13%;}
.ReportPage .col-third {width: 12%;}
.ReportPage .col-fourth {width: 28%;}
.ReportPage .col-fifth {width: 16%;}
.ReportPage .col-sixth {width: 13%;}
.col-button{width: 7%;}
.warranty_header,
.order_header {    
	width: 100%; height: 24px; 
	line-height: 24px;   
	border-bottom: 4px double #cccccc;
}
.user_header {    
	width: 100%; height: 40px; 
	line-height: 40px;   
	border-bottom: 4px double #cccccc;
}
	.warranty_header div,
	.order_header div {
		float: left;
		line-height: 20px; height: 20px;
		overflow: hidden; white-space: nowrap;
		position: relative;
		font-size: 12px !important;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: normal;
		color: #808080 !important;
	}
     .user_header div {
		float: left;
		line-height: 16px; height: 30px;
		overflow: hidden; white-space: pre-wrap;
		position: relative;
		font-size: 12px !important;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: normal;
		color: #808080 !important;
	}
	
	.warranty_header div:hover,
	.warranty_header div.SORTASC,
	.warranty_header div.SORTDESC,
    .user_header div:hover,
    .user_header div.SORTASC,
    .user_header div.SORTDESC,
	.order_header div:hover,
	.order_header div.SORTASC,
	.order_header div.SORTDESC {
	    color: #00c0f3 !important; cursor: pointer;
	}
		.warranty_header div:hover span,
		.order_header div:hover span {
		    background-position: 0px -60px;
		}
	
	.warranty_header span,
    .user_header span,
	.order_header span {
		width: 20px; height: 20px; line-height: 20px;
		background-image: url(../images/sortlisthide.png);
		background-position: 0px -20px;
		display: inline-block;
		vertical-align: top;
	}    
		.warranty_header div.SORTASC span,
        .user_header div.SORTASC span,
		.order_header div.SORTASC span {
		    background-position: 0px 0px;
		}
		.warranty_header div.SORTDESC span,
        .user_header div.SORTDESC span,
		.order_header div.SORTDESC span {
		    background-position: 0px -40px;
		}
		
.paginationWrap {
	width: 100%;
	height: 30px;
	margin: 10px 0px;
	float: left;
	text-align: center;
}

/*CREATE PAGE
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/

/*SERIAL NUMBER ENTRY
--------------------*/	
.serialContainer {
	width: 100%;
	height: auto;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 20px;
	border: 1px solid #cccccc;
	font-size: 16px;        
}
	.serialContainer:focus {border: 1px solid #00c0f3; outline: none;}

.serialContainer > div {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}

#initRow {margin-top: -2px; float: left; border-top: 1px solid #ccc;}

div.new {    
	display: none;
	float: left;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	height: 40px;
}
	div.new input {padding-right: 50px !important;}

a.rowDelete {
	float: right;
	width: 40px; height: 40px;
	margin-top: -40px;
	position: relative;
	z-index: 2;
	background-image: url(../images/remove.png);
	background-position: top;
}
	a.rowDelete:hover, a.rowDelete:focus {background-position: bottom;}

.formgroup {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 20px;
	border: 1px solid #cccccc;
	float: left;
}
	.formgroup input {
		/*border-bottom: 1px solid #cccccc !important;*/
		color: #00c0f3;
	}
	
	.formgroup input:last-child {border-bottom: 0px !important;}
	
	.groupselect {
		padding: 10px;
		width: 100%;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: 0;		
		font-size: 16px;
		font-family: Helvetica, Arial, sans-serif;
		height: 40px;
		color: #808080;
		outline: none;
	}
	
	.groupselect:hover, .groupselect:active, .groupselect:focus {background: #f5f5f5; outline: none;}

.dayWrap {
	width: 100%;
	height: 40px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 100px;
	overflow: hidden;
	border-bottom: 1px solid #cccccc;
}

.timeDuration {width: 100px; float: right; margin-top: -40px; position: relative; left: 100px;}

.dateend {border-top: 1px solid #cccccc !important;}

.FN, .LN, .CP, .ID, .MF, .SD, .ED, .NO, .NO.cloned, .EM, .PH, .FS, .FE, .DA, .PO, .PN, .DS, .TI, .CN, .HS, .ST, .TP, .SI, .DP, .PO, .VN,.Price,.SW,.Type,
.state,.site,.dept,.vendor, .SH, .Price
 {
	position: relative;	
		border-bottom:1px solid #cccccc;
	
}


.border_none {border:none;}




	.NoBottom, .NO {border-bottom: 0;}
	/*.DS {padding-left: 0px;} REMOVE COMMENT IF USING EXPANDABLE TEXT AREA*/

	.TI {border-top: 1px solid #cccccc;}
	.HS {border-top: 1px solid #cccccc;}
	.PT {border-top: 1px solid #cccccc;}
	

.FN span, .LN span, .CP span, .ID span,
.MF span, .SD span, .ED span, .UP, .NO span, 
.EM span, .PH span, .FS span, .FE span,
.DA span, .PO span, .PN span, .DS span, .TI span, .CN span, .HS span, .ST span, .TP span, .SI span, .DP span, .PO span, .VN span, .SW span,.Type span,
.state span,.site span,.dept span,.vendor span, .SH span, .Price span 
{
	position: absolute;
	width: 40px; height: 40px;
	left: 0; top: 0;
	background-image: url(../images/createicons.png);
	background-size: auto 80px;
	display: block;
}

.delete {
	width: 40px; height: 40px;
	position: absolute;
	right: 0px;
	top: 0px;
	background-image: url(../images/remove.png);
	background-size: 30px auto;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	cursor: pointer;
}
	.delete:hover, .delete:focus {background-position: 5px -25px;}
	.EM input:hover ~ div,
	.EM input:focus ~ div {background-color: #f5f5f5;}
	
	.QuoteEmail {padding-right: 25px;}
	.email_btns{ width: auto !important;padding: 0 49px !important;}

.addEM input {
    width: 100%;
    background-color: #ffffff;
    color: #cccccc !important;
}
    .addEM input:hover,
    .addEM input:focus,
    .addEM input:active {
        background-color: #00c0f3 !important;
        color: #ffffff !important;
    }
        .addEM input:active {
            box-shadow: inset 0px 2px 4px rgba(0,0,0,.4);
        }
        

.FN span {background-position: 0px top;}
	.FN input:hover + span {background-color: #f5f5f5;}
	.FN input:focus + span {background-position: 0px bottom; background-color: #f5f5f5;}
.LN span {background-position: -40px top;}
	.LN input:hover + span {background-color: #f5f5f5;}
	.LN input:focus + span {background-position: -40px bottom; background-color: #f5f5f5;}
.CP span {background-position: -360px top;}
	.CP input:hover + span {background-color: #f5f5f5;}
	.CP input:focus + span {background-position: -360px bottom; background-color: #f5f5f5;}
.ID span {background-position: -80px top;}
	.ID input:hover + span {background-color: #f5f5f5;}
	.ID input:focus + span {background-position: -80px bottom; background-color: #f5f5f5;}
.MF span {background-position: -120px top;}
	.MF input:hover + span {background-color: #f5f5f5;}
	.MF input:focus + span {background-position: -120px bottom; background-color: #f5f5f5;}
.SW span { background-position: -796px top;}
    .SW input:hover + span {background-color: #f5f5f5;}
	.SW input:focus + span {background-position: -796px -40px; background-color: #f5f5f5;}	
	.SD span {background-position: -160px top;}
	.SD input:hover + span {background-color: #f5f5f5;}
	.SD input:focus + span {background-position: -160px bottom; background-color: #f5f5f5;}
.ED span {background-position: -200px top;}
	.ED input:hover + span {background-color: #f5f5f5;}
	.ED input:focus + span {background-position: -200px bottom; background-color: #f5f5f5;}
.CN span {background-position: -1110px 2px;}
	.CN input:hover + span {background-color: #f5f5f5;}
	.CN input:focus + span {background-position: -1110px -38px; background-color: #f5f5f5;}
.NO span {background-position: -280px top;}
	.NO input:hover + span {background-color: #f5f5f5;}
	.NO input:focus + span {background-position: -280px bottom; background-color: #f5f5f5;}
.SH span {background-position: -1152px top;}
	.SH input:hover + span {background-color: #f5f5f5;}
	.SH input:focus + span {background-position: -1152px bottom; background-color: #f5f5f5;}
.FS span {background-position: -680px top;}
	.FS input:hover + span {background-color: #f5f5f5;}
	.FS input:focus + span {background-position: -680px bottom; background-color: #f5f5f5;}
.FE span {background-position: -720px top;}
	.FE input:hover + span {background-color: #f5f5f5;}
	.FE input:focus + span {background-position: -720px bottom; background-color: #f5f5f5;}
.EM span {background-position: -400px top;}
	.EM input:hover + span {background-color: #f5f5f5;}
	.EM input:focus + span {background-position: -400px bottom; background-color: #f5f5f5;}
.PH span {background-position: -440px top;}
	.PH input:hover + span {background-color: #f5f5f5;}
	.PH input:focus + span {background-position: -440px bottom; background-color: #f5f5f5;}
.DA span {background-position: -480px top;}
	.DA input:hover + span {background-color: #f5f5f5;}
	.DA input:focus + span {background-position: -480px bottom; background-color: #f5f5f5;}
.PO span {background-position: -520px top;}
	.PO input:hover + span {background-color: #f5f5f5;}
	.PO input:focus + span {background-position: -520px bottom; background-color: #f5f5f5;}
.Price span { background-position: -759px top;}
.Price input:hover + span {background-color: #f5f5f5;}
	.Price input:focus + span {background-position: -759px -41px; background-color: #f5f5f5;}	
	
	.Type span { background-position: -834px top;}
.Type input:hover + span {background-color: #f5f5f5;}
	.Type input:focus + span {background-position: -834px -40px; background-color: #f5f5f5;}	
	.state span { background-position: -903px top;}
.state input:hover + span {background-color: #f5f5f5;}
	.state input:focus + span {background-position:-903px -40px; background-color: #f5f5f5;}
	.site span { background-position: -939px top;}
.site input:hover + span {background-color: #f5f5f5;}
	.site input:focus + span {background-position:-939px -40px; background-color: #f5f5f5;}		
	.dept span { background-position:-982px top;}
.dept input:hover + span {background-color: #f5f5f5;}
	.dept input:focus + span {background-position:-982px -40px; background-color: #f5f5f5;}		
	.vendor span { background-position:-1061px top;}
.vendor input:hover + span {background-color: #f5f5f5;}
	.vendor input:focus + span {background-position:-1061px -41px; background-color: #f5f5f5;}		
.PN span {background-position: -560px top;}
	.PN input:hover + span {background-color: #f5f5f5;}
	.PN input:focus + span {background-position: -560px bottom; background-color: #f5f5f5;}
.DS span {background-position: -600px top;}
	.DS input:hover + span {background-color: #f5f5f5;}
	.DS input:focus + span {background-position: -600px bottom; background-color: #f5f5f5;}
.DS span {background-position: -600px top;}
	.DS textarea:hover ~ span {background-color: #f5f5f5;}
	.DS textarea:focus ~ span {background-position: -600px bottom; background-color: #f5f5f5;}
.TI span {background-position: -640px top;}
	.TI select:hover + span {background-color: #f5f5f5;}
	.TI select:focus + span {background-position: -640px bottom; background-color: #f5f5f5;}

	
/*UPLOAD A FILE
--------------------*/
.file-wrapper {
	cursor: pointer;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 40px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	border: 1px solid #cccccc;
	border-radius: 3px;
	margin-bottom: 20px;
}

.file-csv-wrapper {
	cursor: pointer;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 40px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Helvetica, Arial, sans-serif;
	border: 1px solid #cccccc;
	border-radius: 3px;
	margin-bottom: 0px;
}

.file-upload {
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 40px;
}

.file-wrapper .uploaderButton {
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 40px;
	display: block;
}

.file-csv-wrapper  .uploaderButton {
	position: absolute;
	top: 0px; left: 0px;
	width: 100%; height: 40px;
	display: block;
}

.file-wrapper .uploadFile {
	width: 100%;
	height: 40px;
	border-radius: 3px;
	cursor: pointer;
	display: block;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 40px;
	padding: 0 15px 0 40px;
	font-size: 16px;
	text-transform: none;
	color: #b0b0b0;
	pointer-events: none;
}
.file-csv-wrapper  .uploadFile {
	width: 100%;
	height: 40px;
	border-radius: 3px;
	cursor: pointer;
	display: block;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 40px;
	padding: 0 15px 0 40px;
	font-size: 16px;
	text-transform: none;
	color: #b0b0b0;
	pointer-events: none;
}
	.file-wrapper:hover .uploadFile {background: #f5f5f5;}
	.file-csv-wrapper:hover  .uploadFile {background: #f5f5f5;}
	
.UP {background-position: -240px top;}
	.file-wrapper input:focus ~ .uploadFile {background: #f5f5f5;}
	.file-wrapper input:focus ~ .UP {background-position: -240px bottom; background-color: #f5f5f5;}
	.file-csv-wrapper input:focus ~ .uploadFile {background: #f5f5f5;}
	.file-csv-wrapper input:focus ~ .UP {background-position: -240px bottom; background-color: #f5f5f5;}
	.lightUP {background-color: #f5f5f5; background-position: -240px bottom;}

.AddPart {
	width: 100%;
	padding: 0px;
	margin-top: 0px;
	float: left;
	margin-bottom: 20px;
}


.OrderGrid {
	width: 100%;
	overflow-x: auto;
    overflow-y: hidden;
	height: auto;
	float: left;
	position: relative;
	-moz-box-sizing: border-box; box-sizing: border-box;
	border-radius: 3px;
	
	margin-bottom: 20px;
	border: 1px solid #cccccc;
	font-family: Helvetica, Arial, sans-serif;
}

	.OrderGridHeader, 
	.OrderGridRow {
	   width: 1800px;
		height: 40px;
		line-height: 40px;
		border-top: 1px solid #cccccc;
		position: relative;
		-moz-box-sizing: border-box; box-sizing: border-box;
		padding-left: 40px;		
	}
		.OrderGridHeader {border: none;}

	.OrderGridHeader .OrderGridColumn, .ServiceGridColumn {
		/* padding-left: 40px; */
		padding-left: 40px;
		
	}
		.OrderGrid .TI {border: none; border-right:1px solid #ccc;}
		.OrderGrid .HS {border: none; border-right:1px solid #ccc;}
		.OrderGrid .SD {border: none;}
			.OrderGridHeader .HS:after {display: none;}

		.GridTitle {
			width: 100%;
			height: 40px;
			line-height: 40px;
			-moz-box-sizing: border-box; box-sizing: border-box;
			padding-left: 10px;
			font-size: 14px;
			text-transform: none;
			display: none;
		}

		.GridItemNumber, .GridItemNumber span {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 0px;
			top: 0px;
			line-height: 40px;
			text-align: center;
			border-right: 1px solid #cccccc;
			cursor: pointer;
			-moz-box-sizing: border-box; box-sizing: border-box;
		}

			.OrderGridRow:nth-of-type(2n) .GridItemNumber {background-color: #eaeaea;}

			.OrderGridRow .GridItemNumber .deleteOrderItem {
				display: none;
				background-color: #cccccc;
				font-size: 20px;
				border-right: none;
			}

			.GridItemNumber:hover .deleteOrderItem {display: block;}
        .ServiceGrid .OrderGridColumn{width: 8%;}
		.OrderGridColumn {
			width:8%;
			/*width:16.6%;*/
			height: 40px;
			float: left;
			-moz-box-sizing: border-box; box-sizing: border-box;
			
			border-right:1px solid #cccccc;
			overflow: hidden;
			background-color: #ffffff;
		}
		.noriteborder{border-right:none!important;}
		.OrderGridRow div:last-child {border-right: none;}
		.OrderGridRow .OrderGridColumn {padding-left: 0px;}
		.OrderGridRow .OrderGridColumn span {display: none;}

        .OrderGridColumn input:not([type=submit]):not([type=file]){
            padding: 0 10px;
        }
        
        /*================================================================ */
        
        .ServiceGridColumn {
			width:8%;
			/*width:16.6%;*/
			height: 40px;
			float: left;
			-moz-box-sizing: border-box; box-sizing: border-box;
			
			border-right:1px solid #cccccc;
			overflow: hidden;
			background-color: #ffffff;
		}
		.noriteborder{border-right:none!important;}
		.OrderGridRow div:last-child {border-right: none;}
		.OrderGridRow .ServiceGridColumn {padding-left: 0px;}
		.OrderGridRow .ServiceGridColumn span {display: none;}

        .ServiceGridColumn input:not([type=submit]):not([type=file]){
            padding: 0 10px;
        }
        
        
            .CD {width:10%;}
            .serviceType{  width: 8%;}
            
            .servicestate{width:10%;}
        
        /*================================================================ */

		.gridSelect, .gridSelectHWSW, .gridSelectState, .gridSelectPartType{
			padding: 10px;
			width: 100%;
			-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
			box-sizing: border-box;
			border: 0;		
			font-size: 16px;			
			height: 40px;
			color: #808080;
			outline: none;
			position: relative;
		}
		
		.gridSelect:hover, .gridSelect:active, .gridSelect:focus {background: #f5f5f5; outline: none;}

		.AddRow {
			width:1800px;
			height: 40px;
			line-height: 40px;
			border-top: 1px solid #cccccc;
			position: relative;
			-moz-box-sizing: border-box; box-sizing: border-box;
			padding-left: 50px;
			font-size: 14px;
			text-transform: none;
			cursor: pointer;
		}

		.AddRow:hover, .AddRow:active, .AddRow:focus {background: #f5f5f5;}

			.AddRow span {
				width: 40px !important;
				height: 40px;
				position: absolute;
				left: 0px;
				top: 0px;
				line-height: 40px;
				text-align: center;
				border-right: 1px solid #cccccc;
				-moz-box-sizing: border-box; box-sizing: border-box;
			}

@media all and (max-width: 680px) { /*STACK GRID
------------------------------------------------------------------------------------------------MEDIA QUERY---*/
	.OrderGridHeader .OrderGridColumn {display: none;}
	.GridTitle {display: block;}

	.OrderGridRow {
		width: 100%;
		/* height: 200px; */
		height: 478px;
		line-height: 40px;
		border-top: 1px solid #cccccc;
		position: relative;
		-moz-box-sizing: border-box; box-sizing: border-box;
		padding-left: 40px;		
	}
.AddRow,.OrderGridHeader, .OrderGridRow{width:100%;}

	.OrderGridRow .OrderGridColumn {
		width: 100%;
		height: 40px;
		float: left;
		-moz-box-sizing: border-box; box-sizing: border-box;
		border-bottom: 1px solid #cccccc;
		border-right: none;
		overflow: hidden;
	}
		.OrderGridRow div:last-child {border: none;}
		.OrderGridRow .OrderGridColumn {padding-left: 25px;}
			.OrderGridRow .OrderGridColumn span {display: block;}

	.GridItemNumber, .GridItemNumber span {  height: 478px;}


}

/*SERIAL NUMBER NOT FOUND
----------------------------------------*/
#serialNotFound {
    width: 100%;
    -moz-box-sizing: border-box; box-sizing: border-box;
    padding: 10px;
    border: 1px solid #F37600;
    color: #F37600;
    border-radius: 4px;
    margin-bottom: 20px;
}

.warranty_serialNumber.serialNotFound {
    color: #F37600 !important;
    font-weight: bold;
}
    .warranty_serialNumber.serialNotFound ~ span {background-image: none;}
    .warranty_serialNumber.serialNotFound ~ span:after {
        content: '!';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 40px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #F37600;
    }



   
/*CUSTOMERS PAGE
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.customer_list, .customer_rowSection {
	width: 100%;
	height: auto;
	float: left;	
}

.customer_rowSection {border-bottom: 1px dotted #808080;}
	.customer_rowSection:hover,
	.customer_rowSection:active {background: #f5f5f5 !important; cursor: pointer;}
	
.customer_rowSection div {float: left; line-height: 40px; height: 40px; overflow: hidden; white-space: nowrap; position: relative;}

.customer_columnLastName {width: 25%; font-size: 16px;}
	.customer_columnLastName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);		
		background-position: 0px top;		
	}
	.customer_rowSection:hover .customer_columnLastName:after {background-position: 0px bottom;}	
		
.customer_columnFirstName {width: 25%; font-size: 16px;}
	.customer_columnFirstName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);		
		background-position: 0px top;		
	}
	.customer_rowSection:hover .customer_columnFirstName:after {background-position: 0px bottom;}
	
.customer_columnID {
	width: 20%;
	display: block;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: right;
	font-size: 24px;
}

.customer_columnCompanyName {width: 30%; font-size: 16px;}
	.customer_columnCompanyName:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);		
		background-position: 0px top;		
	}
	.customer_rowSection:hover .customer_columnCompanyName:after {background-position: 0px bottom;}

.customer_header {    
	width: 100%; height: 24px; 
	line-height: 24px;   
	border-bottom: 4px double #cccccc;
}
	.customer_header div {
		float: left;
		line-height: 20px; height: 20px;
		overflow: hidden; white-space: nowrap;
		position: relative;
		font-size: 12px !important;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: normal;
		color: #808080 !important;
	}
	
	.customer_header div:hover,
	.customer_header div.SORTASC,
	.customer_header div.SORTDESC {color: #00c0f3 !important; cursor: pointer;}
		.customer_header div:hover span {background-position: 0px -60px;}
	
	.customer_header span {
		width: 20px; height: 20px; line-height: 20px;
		background-image: url(../images/sortlisthide.png);
		background-position: 0px -20px;
		display: inline-block;
		vertical-align: top;
	}    
		.customer_header div.SORTASC span {background-position: 0px 0px;}
		.customer_header div.SORTDESC span {background-position: 0px -40px;}
		
.RenewalServices {
    width: 100%;
    height: 40px;
    position: relative;
    float: left;    
}
    .SignedUp {
        width: 100%;
        height: 40px;
        border-radius: 3px;
        border: 1px solid #cccccc;
        -moz-box-sizing: border-box; box-sizing: border-box;
        line-height: 40px;
        text-align: center;
        position: absolute;
        top: 0px;
        left: 0px;
    }


/*EDIT PAGE VIEWS
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.CurrentAgreement {
	width: 100%;
	float: left;
	line-height: 40px;
	height: 40px;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #cccccc;
	text-indent: 40px;
	cursor: pointer;
	color: #606060; 
}

	.CurrentAgreement:before {
		content: '';
		width: 40px; height: 40px;
		position: absolute; left: 0; top: 0;
		background-image: url(../images/createicons.png);
		background-position: -320px top;		
	}
	   
	.CurrentAgreement:after {
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	
	.CurrentAgreement:hover, .CurrentAgreement:focus {outline: none; background: #f5f5f5;}    
	.CurrentAgreement:focus:before {background-position: -320px bottom;}
	.CurrentAgreement:hover:after {background-position: 0px bottom;}
	.CurrentAgreement:focus:after {background-position: 0px bottom;}
	
.formgroup .file-wrapper {border: 0px; border-radius: 0px; margin-bottom: 0px;}
.formgroup .file-wrapper .uploadFile {border-radius: 0px;}
.formgroup .qq-upload-list li {border-radius: 0px;}

.SaveWrap {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	padding-right: 60px;
	float: left;	
}
	  
.deleteButton {
	position: absolute;
	width: 40px; height: 40px;
	right: 0; top: 0;
	background-image: url(../images/delete.png);
	display: block;
	background-position: 0px top;
	text-indent: -9999px;
}

.deleteQuoteEmail {
	position: absolute;
	top: 4px;
	background-image: url(../images/delete.png);
	display: block;
	background-position: 0px top;
	text-indent: -9999px;
}


.deleteButton:hover, .deleteButton:focus, .deleteButton:active {background-position: 0px bottom;}

/*MESSAGE OVERLAY
--------------------*/
.popup_warning .button,
.ui-dialog .button {margin-top: 10px;}


.popup_warning div, .popup_text {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #808080 !important;
}

.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: 10px;
	background: none;
	overflow: auto;
}

.ui-widget-content {
	border: 0px;
	color: #808080;     
}

.ui-widget {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.1em;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.4);
}
	.ui-button.ui-widget {box-shadow: none;}

.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .6;
	filter: Alpha(Opacity=60);
}

.ui-dialog-buttonpane .ui-dialog-buttonset button {
	font-size: 18px;
	box-shadow: 0px 1px 2px rgba(0,0,0,.4) !important;
	background: #00c0f3 !important;
	color: #ffffff !important;
	text-align: center;
	font-weight: bold;
	border-radius: 3px;
	cursor: pointer;
	text-transform: uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	width: 100% !important; height: 40px;
	margin-top: 10px;
	margin-right: 0px;
	line-height: 40px;
	border: 0;
	outline: 0;
}
	.ui-dialog-buttonpane .ui-dialog-buttonset button:hover, 
	.ui-dialog-buttonpane .ui-dialog-buttonset button:focus {box-shadow: 0px 3px 4px rgba(0,0,0,.4);}
	.ui-dialog-buttonpane .ui-dialog-buttonset button:active {box-shadow: inset 0px 2px 4px rgba(0,0,0,.4);}
	
	
	/* Export Button */
	
	.exportExcel{width:40px; height:80px; background:#00c0f3 url(../images/ExcelExport.png) no-repeat !important;}
	.exportExcel a{ float: left; height: 40px;  text-indent: 3.5em;}

/*FOOTER
==============================================================================================================
==============================================================================================================
==============================================================================================================
*/
.footer {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #cccccc;
	border-radius: 9px;
	padding: 12px 20px;
	margin-bottom: 20px;
	float: left;
}

.fL {float: left; width: 33.33%;}
.fC {float: left; text-align: center; width: 33.33%;}
.fR {float: right; text-align: right; width: 33.33%;}

/*popup IE issue css*/

@media all and (max-width: 767px){
    #copytextpopup{ width:80%; margin-left:5%; margin-right:5%;  }
}


@media all and (max-width: 740px) and (min-width: 411px) { /*MEDIUM
------------------------------------------------------------------------------------------------MEDIA QUERY---*/
.wrapper {padding: 15px;}
.content {padding: 15px;}
.footer {padding: 12px 15px;}
.searchBox {padding: 10px;}
.searchBox span {top: 10px; right: 10px;}
.notificationMessage {font-size: 14px;}

}

@media all and (max-width: 550px) { /*SMALL
------------------------------------------------------------------------------------------------MEDIA QUERY---*/
.contentLeft, .contentRight, .contentFull {
	width: 100%;
	padding: 0px;
	margin-bottom: 20px;
	margin-top: 0px;
	
}

.warrantyList div, .customer_list div {font-size: 10px;}
.TimeLeft, .customer_columnID {font-size: 16px !important;}
h1 {padding-bottom: 6px;}

.DropSorter {float: left; margin-top: 0px; max-width: 100%;}
.signIn {margin: 10px auto;	padding: 10px;}

.fL, .fC, .fR {width: 100%; text-align: center; line-height: 30px;}

.formgroup, .file-wrapper {margin-bottom: 0px;}

.AddPart {margin-top: 20px; margin-bottom: 0px;}


}

@media all and (max-width: 410px) { /*SMALL
------------------------------------------------------------------------------------------------MEDIA QUERY---*/
.wrapper {padding: 10px;}
.content {padding: 10px;}
.footer {padding: 12px 10px}
.searchBox {padding: 10px;}
.searchBox span {top: 10px; right: 10px;}
.logo {height: 20px; width: 133px; background-size: auto 40px;}
.loading {text-indent: -9999px;}
h1 {padding-bottom: 4px;}
.notificationMessage {font-size: 12px;}
.signIn {margin: 10px auto;	padding: 0px;}

}



/*Responsive Tabs*/
.reports-input .daterow{width:100%;float:left;}

ul.resp-tabs-list {
    margin: 0px;
    padding: 0px;
}

.resp-tabs-list li {
  color: #00c0f3;
  cursor: pointer;
  display: inline-block;
  float: left;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  list-style: none outside none;
  margin: 0;
  padding: 13px 15px;
}

.resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    clear: left;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
    padding: 15px;
}

.resp-tab-active {
    border: 1px solid #c1c1c1;
    border-bottom: none;
    margin-bottom: -1px !important;
    padding: 12px 14px 14px 14px !important;
}

.resp-tab-active {
    border-bottom: none;
    background-color: #eee;
}

.resp-content-active, .resp-accordion-active {
    display: block;
}

.resp-tab-content {
    border: 1px solid #c1c1c1;
}

h2.resp-accordion {
    font-size: 13px;
    border: 1px solid #c1c1c1;
    border-top: 0px solid #c1c1c1;
    margin: 0px;
    padding: 10px 15px;
}

h2.resp-tab-active {
    border-bottom: 0px solid #c1c1c1 !important;
    margin-bottom: 0px !important;
    padding: 10px 15px !important;
}

h2.resp-tab-title:last-child {
    border-bottom: 12px solid #c1c1c1 !important;
    background: blue;
}
/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list {
    float: left;
    width: 30%;
}

.resp-vtabs .resp-tabs-list li {
    display: block;
    padding: 15px 15px !important;
    margin: 0;
    cursor: pointer;
    float: none;
}

.resp-vtabs .resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    border: 1px solid #c1c1c1;
    float: left;
    width: 68%;
    min-height: 250px;
    border-radius: 4px;
    clear: none;
}

.resp-vtabs .resp-tab-content {
    border: none;
}

.resp-vtabs li.resp-tab-active {
    border: 1px solid #c1c1c1;
    border-right: none;
    background-color: #fff;
    position: relative;
    z-index: 1;
    margin-right: -1px !important;
    padding: 14px 15px 15px 14px !important;
}

.resp-arrow {
    width: 0;
    height: 0;
    float: right;
    margin-top: 3px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid #c1c1c1;
}

h2.resp-tab-active span.resp-arrow {
    border: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #9B9797;
}

/*-----------Accordion styles-----------*/
h2.resp-tab-active {
    background: #DBDBDB !important;
}
.resp-easy-accordion  h2.resp-accordion {
        display: block;
 }
.resp-easy-accordion .resp-tab-content {
    border: 1px solid #c1c1c1;
}

.resp-easy-accordion .resp-tab-content:last-child {
    border-bottom: 1px solid #c1c1c1 !important;
}

.resp-jfit {
    width: 100%;
    margin: 0px;
}

.resp-tab-content-active {
    display: block;
    }

h2.resp-accordion:first-child {
    border-top: 1px solid #c1c1c1 !important;
}
    
.reports-input input.inputdate {
  background: none repeat scroll 0 0 #eee;
  border-radius: 4px;
  margin-left: 2%;
  margin-top: 3%;
  max-width: 250px; /*104px;*/
  padding: 2%;
  width: 100%;
}
.reports-input .enddate{margin-left:5%;}
.clear {
  clear: both;
}


#ex_war_sch{width:100%;}

#ex_war_sch .ex_war_row{width:100%;display:inline-block;}
#ex_war_sch .ex_war_label{width:15%;float:left;}
#ex_war_sch .ex_war_input{width:85%;float:left;display:none;}

#ex_war_sch .ex_war_input span {
  background-image: url("../images/sorticon.png");
  display: block;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}
#ex_war_sch .ex_war_input select:focus + span{background-position: 0 bottom;}
#ex_war_sch .ex_war_selc{position:relative;display:inline-block;border: 1px solid #cccccc;border-radius: 3px;margin: 5px 0;}
#ex_war_sch .ex_war_selc select {padding-left: 40px;width:215px !important;}

#ex_war_list th {border-bottom:4px double #cccccc;padding-bottom:10px;}
#ex_war_list td{text-align:center;padding:5px;}

/* for IMPORT SERVICE CONTRACT */
* {
    box-sizing: border-box;
}
.row {
    position: relative;
    margin: 0 -15px;
}
.container.Import_Service_Contract {
    float: left;
    width: 100%;
}
.col-6 {
    float: left;
    width: 100%;
    max-width: 50%;
    padding: 0 15px;
}
.col-12 {
    float: left;
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
}
.customerlist-main .DropSorter .select {
    padding-left: 10px;
}
.form-group {
    margin-bottom: 17px;
}
.customerlist-main {
    position: relative;
}
.customerlist-main .customerlist {
    position: absolute;
    width: calc(100% - 30px);
    background: #fff;
    top: 40px;
    box-shadow: 0px 12px 10px rgba(0, 0, 0, 0.22);
}
.customerlist-main .customerlist .customer_rowSection, .customerlist-main .customerlist .contentRight {
    padding: 13px 15px 13px 40px;
    font-family: Helvetica, Arial, sans-serif;
    border-bottom: solid 1px rgba(0, 0, 0, 0.16);
    font-size: 13px;
    letter-spacing: 0;
    position: relative;
    width: 100%;
}
.roleChkList input[type="checkbox"],.customerlist-main .customerlist .customer_rowSection input[type="checkbox"], .customerlist-main .customerlist .contentRight input[type="checkbox"] {
    margin: 0px 12px 0px 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    cursor: pointer;
    opacity: 0;
}
.roleChkList input[type="checkbox"]+.custom-checkbox,.customerlist-main .customerlist .customer_rowSection input[type="checkbox"]+.custom-checkbox, .customerlist-main .customerlist .contentRight input[type="checkbox"]+.custom-checkbox {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    text-align: center;
    border-radius: 2px;
    border: solid 2px #777;
    left: 14px;
    top: 10px;
}
.roleChkList input[type="checkbox"]+.custom-checkbox:before,.customerlist-main .customerlist .customer_rowSection input[type="checkbox"]+.custom-checkbox:before, .customerlist-main .customerlist .contentRight input[type="checkbox"]+.custom-checkbox:before {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 7px;
    border: solid 2px #fff;
    z-index: 1;
    border-left: none;
    border-top: none;
    transform: rotate(39deg);
    opacity: 0;
}
.roleChkList input[type="checkbox"]:checked+.custom-checkbox,.customerlist-main .customerlist .customer_rowSection input[type="checkbox"]:checked+.custom-checkbox, .customerlist-main .customerlist .contentRight input[type="checkbox"]:checked+.custom-checkbox {
    background: #777;
}
.roleChkList input[type="checkbox"]:checked+.custom-checkbox:before,.customerlist-main .customerlist .customer_rowSection input[type="checkbox"]:checked+.custom-checkbox:before, .customerlist-main .customerlist .contentRight input[type="checkbox"]:checked+.custom-checkbox:before {
    opacity: 1;
}
.customerlist-main .select.customerSelector {
    padding-left: 15px;
}
.Import_Service_Contract .contentRight input[type="button"] {
    padding: 0 15px;
}
.spacing-with-border{
    border-bottom: 1px solid #636363;display: inline-block;width: 100%;margin: 28px 0 10px 0px;height: 7px;border-top: 1px solid #636363;border-left: none;border-right: none;
}

/* instruction-box */
.instruction-box {
    float: left;
    width: 100%;
    max-width: 100%;
    background: hsla(0, 0%, 50%, 0.12);
    padding: 15px;
    border-radius: 5px;
    border: solid 1px rgba(153, 153, 153, 0.23);
    font-family: Helvetica, Arial, sans-serif;
}
.instruction-box h3 {
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 18px;
    margin-bottom: 10px;
    color: #000;
}
.instruction-box ul li {
    font-size: 12px;
    line-height: 20px;
    color: #4a4a4a;
    text-transform: none;
}




/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width:820px) 
{
    .warrant_grid_r{width:800px; overflow-x:scroll;}  
    .warrant_grid_r table{width:800px; }   
    
}
@media only screen and (max-width: 768px) 
{
    
    ul.resp-tabs-list {
        display: none;
    }
    
    .resp-tab-content
    {
        padding:40px 15px;
        }

    h2.resp-accordion {
        display: block;
        box-sizing: border-box;
    }

    .resp-vtabs .resp-tab-content {
        border: 1px solid #C1C1C1;
    }

    .resp-vtabs .resp-tabs-container {
        border: none;
        float: none;
        width: 100%;
        min-height: initial;
        clear: none;
    }
    .resp-accordion-closed {
        display:none !important;
    }
    .resp-vtabs .resp-tab-content:last-child {
        border-bottom: 1px solid #c1c1c1 !important;
    }
    
#ex_war_sch .ex_war_label{width:100%;}
#ex_war_sch .ex_war_label .flabel {max-width: 105px;width: 100%;    }
#ex_war_sch .ex_war_input{width:100%;}

}


.loading_process
        {
            background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
            display: table;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 99;
        }
        .process-box
        {
            width: 300px;
            height: 150px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
            border: 3px solid #192a48;
            background-color: #ffffff;
            text-align: center;
        }
        .process-lbl
        {
            color: #192a48;
            display: block;
            font-family: arial;
            font-size: large;
            margin-bottom: 11px;
            margin-top: 48px;
        }
/**/


.exp_rp_btn{padding:11px  40px !important; margin:7px 0 0 0;}
 
 .more-space{margin:0 -2%;width:104%;}
 .imgButton{cursor: pointer;background-color: #00C0F3 !important;margin-top: 4px;padding: 3px 4px;}
 .width48{width:48%; margin-right:2%; float:left;}
 
 #datarows_r div{font-size: 16px;width: 25%;}
 #datarows_r div:nth-child(4n) {color:#00C0F3; font-size: 22.7px;text-align:right;font-weight: bold;font-family:Helvetica,Arial,sans-serif;}
 #serviceContractsDataRows_r div{font-size: 16px;width: 45%;}
 #serviceContractsDataRows_r div:nth-child(2n){width: 30%;}
 #serviceContractsDataRows_r div:nth-child(3n){font-size: 16px;width: 25%;}
 
 	#serviceContractsDataRows_r #fadefirst:after, #datarows_r #fadefirst:after{
		content: '';
		width: 10px; height: 40px;
		position: absolute; right: 0; top: 0;
		background-image: url(../images/ellipsefade.png);
		background-position: 0px top;		
	}
	
	.flabel{display: inline-block;width: 80%;}
	.frequency-cs , .frequency-m{ display: inline;vertical-align: middle;width: auto!important;}
	/*.frequency-m{ width:35%!important;}*/

.warrantyList .email_col {
  width: 220px;
word-break: break-all;
  padding: 18px 0 !important;
}
h2.page_title{font-size:32px;}

#ex_war_sch .label-new .ex_war_label{ width: 27%; }
#ex_war_sch .label-new .ex_war_input{ width:73%; }


/*** 26 Sep 2019 ***/
.SignWrapper.Factor-Authentication .Manual-Setup-Code p {

    margin: 30px 0 0 0;
    font-size: 13px;
    line-height: 25px;
    color: #000;

}
.SignWrapper.Factor-Authentication .Manual-Setup-Code {

    position: relative;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    padding: 20px 0;

}
.SignWrapper.Factor-Authentication .query-form #txtCode {

    background: #fff;
    margin-bottom: 15px;
    padding-left: 15px;
    border: solid 1px #ccc;
    border-radius: 2px;

}
.SignWrapper.Factor-Authentication .query-form {

    margin-bottom: 0px;
    padding: 0 20px;

}
.SignWrapper.Factor-Authentication .Problem-scanning {

    padding: 0 20px;

}   
.SignWrapper.Factor-Authentication .query-form .btn.btn-success {

    width: calc(50% - 10px);
    background: #3fb73f;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;

}
.SignWrapper.Factor-Authentication .query-form .PrimaryButton {

    width: calc(50% - 10px);
    background: #e68383;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    float: right;

}
.SignWrapper.Factor-Authentication .EM.Term:first-child {

    clear: both;
    padding: 0 0 7px 0;
    font-size: 15px;
    color: #000;

}   
.SignWrapper.Factor-Authentication {

    max-width: 500px;
    margin: 20px auto;
    clear: both;
    box-shadow: 0px 0px 10px #00000024;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    top: 10px;

}
.SignWrapper.Factor-Authentication .EM.Term {

    border: none;

}
.SignWrapper.Factor-Authentication .EM.Term.CodeDigit {

    margin: 20px 0 0 0;

}
.SignWrapper.Factor-Authentication .EM.Term.CodeDigit .query-form {

    padding: 0;

}
.SignWrapper.Factor-Authentication.Authentication-Code {

    margin: 50px auto;
    top: 25px;

}
.SignWrapper.Factor-Authentication.Authentication-Code form {

    margin: 0;

}
.Settings-bodr {
    clear: both;
    display: flow-root;
    border: solid 1px #ccc;
    padding: 25px;
}
.Settings-bodr .container.Import_Service_Contract .EnableAuthentication {
    text-align: center;
}
.Settings-bodr .container.Import_Service_Contract #btnDisableTwoFA,
.Settings-bodr .container.Import_Service_Contract .EnableAuthentication .button {
    max-width: 250px;
    margin: 0 auto;
    padding: 0;
}
.SignWrapper.Factor-Authentication .EM.Term:first-child .Problem-scanning {
    font-size: 11px;
    margin-bottom: 7px;
}
.editBtn, .pswBtn, .delBtn {
    font-size: 10px;
    padding: 4px 3px 2px 3px;
    letter-spacing: 0px;
}
.editBtn img, .pswBtn img, .delBtn img{position: relative; top:2px;    margin-right: 3px;}
.delBtn img{top:1px;}
.edit-modal.bootstrap-iso .modal-header .close {
    margin-top: -21px;
}
.edit-modal.bootstrap-iso .form-group {
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
}
.edit-modal .form-control {
    border: 1px solid #cccccc !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.edit-modal input[type=checkbox] {
    border: 1px solid #cccccc !important;
    display: inline-block;
    /* background: red; */
    position: relative;
    opacity: 1;
    width: 13px;
    height: 13px;
    margin-right: 5px !important;
    top: 2px;
}
.edit-modal input[type=checkbox]:focus{outline:0 !important}


.edit-modal input[type=checkbox]:checked{background:#00c0f3;}
.bootstrap-iso .form-control#drpAuthorized, .bootstrap-iso .form-control#drp2FAEnable {
    -webkit-appearance: auto;
}

[data-tip] {
	position:relative;

}
[data-tip]:before {
	content:'';
	/* hides the tooltip when not hovered */
	display:none;
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;	
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	display: none;
    content: attr(data-tip);
    position: absolute;
    bottom: 10px;
    left: 0px;
    padding: 3px 5px;
    background: #fff;
    /* color: #1a1a1a; */
    height: fit-content;
    width: 60%;
    line-height: 18px;
    margin-left: 50%;
    border-radius: 0px;
    white-space: pre-wrap;
    word-wrap: normal;
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;	
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}