@import url(font-awesome/css/all.min.css);

html, body, span, h1, h2, h3, h4, h5, h6, h7, p, a, img, b, u, i, ol, ul, li, form, label
{
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	vertical-align: baseline;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size:1em;
	display:inline;
}
html {
	height:100%;
}
table{
	border-collapse:collapse;
}
.fixComments {
	white-space:pre-wrap;

	/* These are technically the same, but use both */
        overflow-wrap: break-word;
        word-wrap: break-word;

        -ms-word-break: break-all;
        /* This is the dangerous one in WebKit, as it breaks things wherever */
        word-break: break-all;
        /* Instead use this non-standard one: */
        word-break: break-word;

        /* Adds a hyphen where the word breaks, if supported (No Blink) */
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
}
.halfWidth{
	width: 50%;
}

.maxWidth{
	width:100%;
}
.maxWidth.top{
	vertical-align:top;
}
.maxHeight{
	height:100%;
}
.width70{
	width:70%;
}
.width80{
	width:80%;
}
.width90{
	width:90%;
}
.third{
	width:33%;
}
.fourth{
	width:25%;
}
.vmiddle{
	vertical-align:middle;
}
.taleft{
	text-align:left;
}
.taright{
	text-align:right;
}
.fleft{
	float:left;
}
.tacenter{
	text-align:center;
}
.taright{
	text-align:right;
}
.fright{
	float:right;
}
.colFigure {
	text-align: right !important;
	padding-right: 18px !important;
}
.autoMargin{
	margin-left:auto;
	margin-right:auto;
}
.nowrap{
	white-space: nowrap;
}
.cursorPointer{
	cursor:pointer;
}
.header{
	color:#FFF;
	font-size:1.2em;
}
.footer{
	border-top:1px solid #CCC;
	background-color:#FFF;
	padding:15px 0px;
}
a.footerlink{
	line-height:20px;
	color:#333;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
}
a.footerlink:hover,
a.footerlink:focus-visible{
	text-decoration:underline;
}
.validationBox{
	display:none;
	border:1px solid #B5605A;
	background-color:#EFE0E0;
	color:#B5605A;
	font-size:12px;
	padding:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
	margin-bottom:3px;
}
.table-required-missing {
	outline: 2px solid #B5605A;
	outline-offset: 1px;
	border-radius: 4px;
}
.imageBox{
	background-color:#FFFFFF;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	border:1px solid #E0E0E0;
	-webkit-box-shadow: 0 0 10px #E0E0E0;
	-moz-box-shadow: 0 0 10px #E0E0E0;
	box-shadow: 0 0 10px #E0E0E0;
}

h2{
	line-height:22px;
	color:#333;
	font-size:13px;
	font-weight:700;
}
h4{
	line-height:20px;
	color:#333;
	font-size:12px;
	font-weight:700;
}
h5{
	line-height:20px;
	color:#707070;
	font-size:12px;
	font-weight:normal;
}
h6{
	line-height:20px;
	color:#333;
	font-size:11px;
	font-weight:normal;
}
h7{
	line-height:20px;
	color:#333;
	font-size:8px;
	font-weight:normal;
}
input{
	height:22px;
	padding:2px;
}

input[type="checkbox"]
{
	height:auto;
	margin:5px 5px 5px 1px;
}
input[type="radio"]
{
	height:auto;

}
input.is-negative {
	color: #dc3545;
}
select{
	-webkit-appearance: button;
	-webkit-border-radius: 2px;
	-webkit-box-shadow: none;
	-webkit-padding-end: 20px;
	-webkit-padding-start: 2px;
	color: #555;
	background-color: #fff;
	border:1px solid #aaa;
	font-size: inherit;
	overflow: hidden;
	margin:0px;
	padding: 6px 4px;
	height: 30px; /* padding doesn't work in Chrome on iOS */
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: none;
	border-radius: 4px;
}
.smallSelect{
	-webkit-appearance: button;
	-webkit-border-radius: 2px;
	-webkit-box-shadow: none;
	-webkit-padding-end: 20px;
	-webkit-padding-start: 2px;
	background-color: #fff;
	border:1px solid #ccc;
	color: #555;
	font-size: inherit;
	margin: 0px 0px 0px 2px;
	overflow: hidden;
	padding: 2px 4px;
	height: 22px; /* padding doesn't work in Chrome on iOS */
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: none;
}
.loginBoxContainer{
	width:250px;
	background:url(../images/login_bg.png) repeat-x 0 bottom;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	border:1px solid #9ECAED;
	outline: none;
	-webkit-box-shadow: 0 0 10px #9ECAED;
	-moz-box-shadow: 0 0 10px #9ECAED;
	box-shadow: 0 0 10px #9ECAED;

}
.loginBox{
	padding:20px;
}
.loginBox td{
	padding: 0px;
	margin: 0px;
}
.registerBox td{
	padding: 2px;
}
.ul{
	margin:0px;
}
.progressBarContainer{
	border: 1px solid #007C9C;
	margin:0px;
	padding: 0px;
	height: 30px;
	text-align: left;
}
.progressBar{
	background-color: #007C9C;
	height: 100%;
	padding:0px;
	margin: 0px 0px -4px 0px;
}
.category{
	background: #00B9E8 url("../images/arrow_expand_padding.png") left no-repeat;
	border-right: 1px solid #00B9E8;
	border-bottom: 1px solid #00B9E8;
	border-left: 1px solid #00B9E8;
	cursor: pointer;
}
.category_close{
	background: #00B9E8 url("../images/arrow_collapse_padding.png") left no-repeat;
	border-right: 1px solid #00B9E8;
	border-bottom: 3px solid #00A9D4;
	border-left: 1px solid #00B9E8;
	cursor: pointer;
	padding: 8px;
}
.category td, .category_close td{
	font-size: 13px;
	color: #FFFFFF;
	padding: 8px 0px 8px 30px;
}
.categoryFields{
	border: 1px solid #ADEEFF;
	background-color: #E8FAFF;
}
.categoryFields td{
	padding: 5px;
}

.tblItems {
	border-collapse: separate;
	border-spacing: 0 10px;
	margin-top: -10px; /* correct offset on first border spacing if desired */
}

.vendorItem {
    background-color: #F2F2F2;
}

.vendorItem.updated {
    background-color: #f7debb;
}

.vendorItemHeader td {
	border: 1px solid #CCC;
	text-align: center;
	padding: 15px 10px;
	border-right: 1px;
}
.vendorItemHeader td:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.vendorItemHeader td:last-child {
	border: 1px solid #CCC;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}

.vendorItem td {
	border: solid 1px #D4D4D4;
	border-style: solid none;
	padding: 10px;
	//background-color: #F2F2F2;
	font-size: 13px;
}
.vendorItem td:first-child {
	border-left-style: solid;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.vendorItem td:last-child {
	border-right-style: solid;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
}


.vendorRow{
	background-color:#FFF8E7;
}
.darkVendorRow{
	color: #333;
	font-size: 13px;
	background-color: #FFF5DD;
	padding:10px;
}
.stepsMenu ul {
	list-style: none;
	display: inline-table;
}
.stepsMenu ul li {
	display: block;
	float: left;
	height: 25px;
	background: #3498DB;
	text-align: center;
	padding: 12px 20px 3px 40px;
	position: relative;
	margin: 0 5px 0 0;
	font-size: 14px;
	text-decoration: none;
	color: #fff;
}
.stepsMenu ul li:after {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #3498DB;
	position: absolute; right: -20px; top: 0;
	z-index: 1;
}
.stepsMenu ul li:before {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #FFF;
	position: absolute; left: 0; top: 0;
}
.stepsMenu ul li:first-child {
	border-top-left-radius: 5px; border-bottom-left-radius: 5px;
}
.stepsMenu ul li:first-child:before {
	display: none;
}
.stepsMenu ul li:last-child {
	padding-right: 40px;
	border-top-right-radius: 5px; border-bottom-right-radius: 5px;
}
.stepsMenu ul li:last-child:after {
	display: none;
}
.stepsMenu ul li.stepsOff {
	background: #E9EBED;
	color: #6F6F6F;
}
.stepsMenu ul li.stepsOff:after {
	border-left-color: #E9EBED;
	color: #6F6F6F;
}
.searchSection{
	background-color:#F9F9F9;
	color: #333;
	font-size: 13px;
	border:1px solid #DDD;
	padding: 5px 20px;
}
.searchFa {
	font-size: 15px !important;
	z-index: 2;
	color: #00aad5;
	cursor:pointer;
	position: relative;
	right: 25px;
	top: 4px;
	filter: invert(52%) sepia(59%) saturate(3528%) hue-rotate(158deg) brightness(96%) contrast(101%);
}
.menuContainer{
	padding-left:10px;
}
.menu{
	cursor:pointer;
	background-color:#252525;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
}
.menu:hover,
.menu:focus-visible{
	background-color:#00A5CF;
}
.menuOn{
	background-color:#00B9E8;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
}
.menuOn_roundleft{
	background-color:#00B9E8;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 4px 0px 0px 4px;
	-moz-border-radius: 4px 0px 0px 4px;
	border-radius: 4px 0px 0px 4px;
}
.menu_roundleft{
	cursor:pointer;
	background-color:#252525;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 4px 0px 0px 4px;
	-moz-border-radius: 4px 0px 0px 4px;
	border-radius: 4px 0px 0px 4px;
}
.menu_roundleft:hover,
.menu_roundleft:focus-visible{
	background-color:#00A5CF;
}
.menu_roundright, .menu_roundrightStatic{
	background-color:#252525;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 0px 4px 4px 0px;
	-moz-border-radius: 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px;
}
.menu_roundright:hover,
.menu_roundright:focus-visible{
	cursor:pointer;
	background-color:#00A5CF;
}
.menuOn_roundright{
	background-color:#00B9E8;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 0px 4px 4px 0px;
	-moz-border-radius: 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px;
}
.subMenu{
	cursor:pointer;
	background-color:#00b9e8;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
}
.subMenu:hover,
.subMenu:focus-visible{
	background-color:#00A5CF;
}
.subMenu_roundright:hover,
.subMenu_roundright:focus-visible{
	background-color:#00A5CF;
}
.subMenu_roundleft:hover,
.subMenu_roundleft:focus-visible{
	background-color:#00A5CF;
}
.subMenu_roundright{
	cursor:pointer;
	background-color:#00b9e8;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px;
}
.subMenu_roundleft{
	cursor:pointer;
	background-color:#00b9e8;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
}
.subMenuOn{
	background-color:#009ac1;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
}
.subMenuOn_roundright{
	background-color:#009ac1;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px;
}
.subMenuOn_roundleft{
	cursor:pointer;
	background-color:#009ac1;
	color:#FFF;
	font-size:12px;
	line-height:42px; /* for when the menu wraps on browser resize */
	padding:12px 20px;
	-webkit-border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
}
.subSubMenu{
	border: 1px solid #b4e6f5;
	background-color: #dceff6;
	width: 100%;
	padding:10px;
	text-align:center;
	display:inline;
}
.subSubMenu:hover,
.subSubMenu:focus-visible{
	cursor:pointer;
	background-color: #c1e9f5;
}
.subSubMenuOn{
	border: 1px solid #b4e6f5;
	background-color: #b4e6f5;
	width: 100%;
	padding:10px;
	text-align:center;
	display:inline-block;
}
.subSubMenuContainer{
	margin-top: 20px;
	padding-right: 13px;
	/* background-color: #dceff6; */
	display: flex;
}
.group_container{
	min-width:250px;
	height:200px;
	border: 1px solid #B7B7B7;
	overflow-y:scroll;
}
.group_container tr :hover,
.group_container tr :focus-visible {
	background-color:#F3F3F3;
	cursor:pointer;
}
a.disabled{
	color: #CCC;
	text-decoration:none;
}
a.disabled:hover,
a.disabled:focus-visible{
	color: #CCC;
	text-decoration:none;
	cursor: default;
}
.blueHeader{
	color: #00A5D0;
}
.darkblue{
	color:#007C9C;
}
.blue{
	color:#00B9E8;
}
.red{
	color:#C80000;
}
.lightgrey{
	color:#D3D3D3;
}
.bgGrey{
	background-color: #F3F3F3;
}
.bgBlue{
	background-color: #00B9E8;
}
.bgRed{
	background-color: #C13E2C;
}
.bgOrange{
	background-color: #E8A300;
}
.bgGreen{
	background-color: #a4d8ca;
}
.bgBrightGreen{
	 background-color: #3faf47;
 }

.bgPink{
	background-color: #4aaf92;
}
.divideV{
	height: 100%;
	background-color:#D3D3D3;
	margin:20px 15px;
}
.divideH{
	width: 100%;
	background-color:#D3D3D3;
	margin:10px 0px;
}
.descriptiveText{
	font-size: 13px;
	line-height: 16px;
}
.containerMessage{
	font-size: 13px;
	line-height: 16px;
	padding: 15px;
	display: inline-block;
}
a.blue{
	font-size:12px;
	font-weight: normal;
	text-decoration:none;
}
a.blue:hover,
a.blue:focus-visible{
	font-size:12px;
	text-decoration:underline;
	color: #00A5CF !important;
}
a.smallblue{
	color:#00B9E8;
	font-size:11px;
	text-decoration:none;
}
a.smallblue:hover,
a.smallblue:focus-visible{
	text-decoration:underline;
}
.listRow{
	border-top:1px solid #CCC;
	padding:5px 0px;
}
.listRow:hover,
.listRow:focus-visible{
	background-color:#F3F3F3;
	cursor: pointer;
}
.listRow.noClickThrough {
	cursor: text;
	background-color: white !important;
}
.sideListOdd{
	display:block;
	line-height:22px;
	border-bottom:1px solid #CCC;
	background-color:#F3F3F3;
}
.sideListOdd:hover,
.sideListOdd:focus-visible{
	background-color:#DFDFDF;
	cursor:pointer;
}
.sideListEven{
	display:block;
	line-height:22px;
	border-bottom:1px solid #CCC;
}
.sideListEven:hover,
.sideListEven:focus-visible{
	background-color:#DFDFDF;
	cursor:pointer;
}

.recentListOdd{
	line-height:18px;
	border-bottom:1px solid #CCC;
//	background-color:#edf3f8;
}
.recentListOdd:hover,
.recentListOdd:focus-visible{
	background-color:#f2f2f2;
	cursor:pointer;
}
.recentListEven{
	line-height:18px;
	border-bottom:1px solid #CCC;
}
.recentListEven:hover,
.recentListEven:focus-visible{
	background-color:#f2f2f2;
	cursor:pointer;
}
.btn{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor:pointer;
	padding: 4px 20px;
	border: none;
	height:28px;
	margin:3px;
	white-space:nowrap;
	font-size: 12px;
}
.btn-small-round{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	cursor:pointer;
	padding: -2px 0 2px 0;
	border: none;
	height:26px;
	width:26px;
	margin:0px;
	white-space:nowrap;
	font-weight:bold;
	color:#fff;
	font-size:17px;
	cursor:pointer;
	white-space:nowrap;
}
.btn-small{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor:pointer;
	padding: 4px 10px;
	border: none;
	height:20px;
	margin:1px;
	white-space:nowrap;
}
.btn-smaller{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor:pointer;
	padding: 1px 5px;
	border: none;
	height:20px;
	margin:1px;
	white-space:nowrap;
}
.btn-small-no-pad {
	padding: 0px;
}
.btn-big{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor:pointer;
	padding: 15px 40px;
	border: none;
	height:56px;
	margin:6px;
	white-space:nowrap;
}
.btn-small-round:hover,
.btn-small-round:focus-visible {
	background-color: #00A5CF !important;
}

.btn-circle {
  border-radius: 100%;
  height: 2.5rem;
  width: 2.5rem;
  font-size: 1rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.btn-circle-small {
  border-radius: 100%;
  height: 2rem;
  width: 2rem;
  font-size: .8rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
	padding: 0px;
}

.btnSearch{
	height: 16px;
	background-image: url('../images/icon_search_white.png');
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 5px;
}
.btnAdd{
	height: 20px;
	width: 20px;
	background-image: url('../images/icon_add_white.png');
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 5px;
	padding: 4px;
}
.btn-blue{ /*for all buttons unless applies to criteria outlined beside other button colour classes */
	color: #FFF !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #00B9E8;
}
.btn-blue:hover,
.btn-blue:focus-visible{
	background-color: #00A5CF !important;
}
.btn-red{ /*should be used for buttons that delete information from the system*/
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	background-color: #D14836;
}
.btn-red:hover,
.btn-red:focus-visible{
	color: #FFF !important;
	background: #AD3727 !important;
}
.btn-grey{ /*should be used for buttons that move the user back to the previous page or cancel out of the current task*/
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	background-color: #A3A4A5;
}
.btn-grey:hover,
.btn-grey:focus-visible{
	color: #FFF;
	background: #969798 !important;
}
.btn-lightgrey{ /*should not be used anymore*/
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	background-color: #A3A4A5; //updated colour to same as btn-grey
}
.btn-lightgrey:hover,
.btn-lightgrey:focus-visible{
	background-color: #969798 !important; //updated colour to same as btn-grey
}
.btn-green{ /*buttons related to referrals*/
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	background-color: #a4d8ca;
}
.btn-green:hover,
.btn-green:focus-visible{
	background-color:  #82c9b6 !important;
}
.btn-orange{ /*should be used as a slight warning for the user, just to heighten awareness before clicking. For something that can't be undone very easily or could have bigger consequences if done incorrectly. Should be used sparingly or at least only when clearly needed.*/
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	background-color: #E8A300;
}
.btn-orange:hover,
.btn-orange:focus-visible{
	color: #FFF;
	background: #CF9100 !important;
}
.btn-pink{ /*no idea what this is for?*/
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #4aaf92;
}
.btn-pink:hover,
.btn-pink:focus-visible{
	background-color: #44a187 !important;
}
.btn-createdemo{
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #4aaf92;
        -webkit-animation: glowing 1500ms infinite;
}
.btn-createdemo:hover,
.btn-createdemo:focus-visible{
	background-color: #44a187 !important;
}
.purge{
	width: 50px;
	height: 26px;
}
@-webkit-keyframes glowing {
  0% { background-color: #44a187; -webkit-box-shadow: 0 0 0px #44a187; }
  50% { background-color: #44a187; -webkit-box-shadow: 0 0 15px #44a187; }
  100% { background-color: #44a187; -webkit-box-shadow: 0 0 0px #44a187; }
}
#D7DEAB
.btn-Print{
	vertical-align:top;
	height: 90px;
	background-image: url('../images/btn_Print.png');
	background-repeat: no-repeat;
	background-position: right center;
	text-align: left;
	white-space: pre;
	font-size: 18px;
}
.btn-Sale{
	vertical-align:top;
	height: 90px;
	background-image: url('../images/btn_Sale.png');
	background-repeat: no-repeat;
	background-position: right center;
	text-align: left;
	font-size: 18px;
}
.btn-RepairUpdate{
	vertical-align:top;
	height: 70px;
	background-image: url('../images/icon_update.png');
	width: 250px;
	text-align: left;
	background-repeat: no-repeat;
	background-position: right center;
	font-size: 18px;
}
.btn-RepairSale{
	vertical-align:top;
	height: 70px;
	background-image: url('../images/icon_sales.png');
	width: 250px;
	text-align: left;
	background-repeat: no-repeat;
	background-position: right center;
	font-size: 18px;
}
.btn-RepairBulkActivity{
	vertical-align:top;
	height: 70px;
	background-image: url('../images/icon_addappointment.png');
	width: 250px;
	text-align: left;
	background-repeat: no-repeat;
	background-position: right center;
	font-size: 18px;
}
.btn-Cancel{
	vertical-align:top;
	height: 90px;
	background-image: url('../images/btn_Cancel.png');
	background-repeat: no-repeat;
	background-position: right center;
	text-align: left;
	font-size: 18px;
}
.mainContainer{
	background-color:#E9EBED;
/*    background-color: hsl(210deg 66% 96% / 72%);*/
	border-top:1px solid #CCC;
	height:100%;
	padding:10px;
	vertical-align:top;
}
.lefthandContainer{
	vertical-align:top;
}
.righthandContainer{
	vertical-align:top;
	width:100%;
}
.dataBoxes{
	border:1px solid #CCC;
	min-height: 95px;
    padding: 15px;
	text-align:center;
}
.dataBoxes:hover,
.dataBoxes:focus-visible{
	border:1px solid #666;
	cursor:pointer;
}
.highlightOption{
}
.highlightOption:hover,
.highlightOption:focus-visible{
	background-color: #EEFBFF;
	cursor:pointer;
}
.dashContainer.dashContainer{
	padding: 0 15px;
}
.infoboxHeader{
	border-bottom:1px solid #CCC;
	font-weight:bold;
	font-size:13px;
	padding:8px 6px;
}
.infoboxHeader span{
	float:right;
	height: 10px;
	line-height: 10px;
	margin-top: -2px;
}
.infoboxRow{
	line-height: 18px;
	border-bottom: 1px solid #CCC;
}
.infoboxRow:hover,
.infoboxRow:focus-visible{
	background-color:#f2f2f2;
	cursor: pointer;
}
.infoboxRow.infoboxNoLink{
	line-height: 18px;
}
.infoboxRow.infoboxNoLink:hover,
.infoboxRow.infoboxNoLink:focus-visible{
	background-color: #fff;
	cursor: default;
}
.infoboxRow td:first-child{
	padding: 6px;
	width: 36px;
}
.infoboxRow td:nth-child(2){
	color: #777;
}
.infoboxRow td:last-child{
	padding-right: 2px;
}

.infoboxRow p:first-child{
    color: white;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11px;
}
.infobox1{
    background-color: #407cb3;
}
.infobox2{
    background-color: #68c7c8;
}
.infobox3{
    background-color: #59aa8a;
}
.infobox4{
    background-color: #995D81;
}
.infobox5{
    background-color: #00A5CF;
}

.custom-btn-group button{
	background-color: transparent !important;
	border: none !important;
	padding: 0px !important;
}
.custom-btn-group button > i{
	color: #a4a4a4 !important;
	font-size: 15px;
	padding: 4px;
}
.custom-btn-group button > i.fa-ellipsis-v{
	padding: 4px 6px;
}
.custom-btn-group button > i:hover,
.custom-btn-group button > i:focus-visible{
	color: #2e2e2e !important;
}
.custom-fa18{
	font-size: 18px;
	padding: 0px 4px !important;
}

.dropdown-item{
	font-size:13px;
	padding: .25rem 1rem;
}
.boxContainer{
	background-color:#FFF;
	border:1px solid #CCC;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:#CCC 2px 2px 3px;
	-moz-box-shadow:#CCC 2px 2px 3px;
	box-shadow:#CCC 2px 2px 3px;
}

.boxHeaderNew{
	padding:10px;
	border-bottom:1px solid #DDD;
	-webkit-border-top-left-radius:5px;
	-moz-border-top-left-radius:5px;
	-ms-border-top-left-radius:5px;
	-o-border-top-left-radius:5px;
	border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-top-right-radius:5px;
	-ms-border-top-right-radius:5px;
	-o-border-top-right-radius:5px;
	border-top-right-radius:5px;
	color:white;
	font-size: 13px;
	font-weight: bold;
}
.boxHeader{
	border-bottom:1px solid #CCC;
	font-weight:normal;
	font-size:13px;
	padding:8px;
}
.boxHeader a{
	color:#00B9E8;
	cursor:pointer;
	text-decoration:none;
}
.boxHeader a:hover,
.boxHeader a:focus-visible{
	text-decoration:underline;
}
.boxHeader a.underline{
	text-decoration:underline;
}
.boxHeaderRight{
	text-align:right;
	float:right;
	color:#A0A0A0;
	font-size:12px;
}
.box{
	padding: 8px;
	font-size:12px;
	line-height: 16px;
	font-weight:normal;
}
.surveyBox{
	width: 600px;
	max-width: 90%;
	padding:30px;
	font-size:12px;
	font-weight:normal;
	font-family: Calibri, Helvetica,Arial,sans-serif;
}
.surveyBox h1{
	line-height:20px;
	color:#000;
	font-size:13px;
	font-weight:700;
}
.surveyBox h2{
	line-height:20px;
	color:#000;
	font-size:12px;
	font-weight: normal;
}
.nounderline{
	text-decoration:none;
}
.nounderline:hover,
.nounderline:focus-visible{
	text-decoration:underline;
}
.underline{
	text-decoration:underline;
}
.dispNone{
	display:none;
}
.dispInline{
	display: inline;
}
.vhidden{
	visibility: hidden;
}
.vtop{
	vertical-align:top;
}
.vbottom{
	vertical-align:bottom;
}
.noPadding{
	padding:0px;
}
.noMargin{
	margin:0px;
}
label.tab{
	padding-left:50px;
}
.icon_calendar{
	cursor: pointer;
	padding-left:4px;
}
.fa-2point5x { /* font-awesome size 2.5 */
    font-size: 2.5em;
}
.far.fa-envelope {
    font-weight: 300; /* Adjust as needed */
}
i.fontawesomeicon {
    font-size: 70px;
    background: -webkit-gradient(linear, left top, left bottom, from(#84dfff), to(#30b4e8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 5px;
}
i.fa.fa-plus-circle {
	font-size: 24px;
	padding: 6px !important;
	//background-color: #f0f8ffbd;
	border: 1px solid #b4e6f5;
	border-left: solid 2px white;
	color: #2c5b67c9;
}

li.subSubMenu.clear {
	background-color: white;
	border-top: none;
	border-bottom: none;
	border-right: none;
	width: 50%
}
li.subSubMenu.clear:hover{
	cursor:default;
}
li.rh-option {
	background-color: #f0f8ffbd;
}

li.rh-option:hover,
li.rh-option:focus-visible {
	cursor:pointer;
	background-color: #d0e1ef;
}
.activityMenuIcon{
	width: 100px;
	border: 1px solid #b4e6f5;
	background-color: #dceff6;
	padding: 10px;
	text-align: center;
	display: inline;
}
.mandatoryLabel{
	padding-left:4px;
	color:#D80000;
	font-size:14px;
}
.mandatory{
	background-color:#F0F0F0;
}
input[type="text"].mandatory{ /* fix chrome styling */
	border-width:1px;
}
.fullAlert{
	width:300px;
	height:200px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
	background-color:#FFF;
	font-size:12px;
}
.fullAlertFluid{
	width:500px;
	height:300px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
	background-color:#FFF;
	font-size:12px;
}
.fullAlertFluid td{
	padding: 13px;
}
.modalbox {
	margin: 0px; /* Set margin to 0px on all sides for the container */
	padding: 10px; /* Set padding to 10px on all sides for the container */
	box-sizing: border-box; /* Include padding and border in the width calculation for the container */
}
.modalbox div {
	margin: 5px; /* Set margin to 5px on all sides for the nested divs */
	padding: 5px; /* Set padding to 5px on all sides for the nested divs (optional) */
	box-sizing: border-box; /* Include padding and border in the width calculation for the nested divs */
}
.modalbox div:first-child {
    margin-top: 0px; /* Set top margin to 0px for the first nested div */
}
.modalbox div:last-child {
    margin-bottom: 0px; /* Set bottom margin to 0px for the last nested div */
}
.modalbox label:not(.switch) {
	display: inline-block;
	margin: 0px 0px 5px 0px;
}

.buttonContainer{
	padding:5px;
	border-top:1px solid #DDD;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-bottom-left-radius:5px;
	-ms-border-bottom-left-radius:5px;
	-o-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-bottom-right-radius:5px;
	-ms-border-bottom-right-radius:5px;
	-o-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
	background-color:#F5F5F5;
	text-align:right;
}

.fullAlertModal {
	width:300px;
	max-height: 100%;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
	background-color:#FFF;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	font-size:12px;
}

.boxHeaderModal {
	background-color: #007bff;
	color: white;
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

.fieldContainerModal {
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
}

.labelModal {
	font-weight: bold;
	margin-bottom: 5px;
}
.boxFormModal {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #f9f9f9;
	min-height: 12px;
}

.dateField{
	color: #555;
	font-size: inherit;
	width:70px;
}
.monthField{
	color: #555;
	font-size: inherit;
	width:55px;
}
.numberField{
	font-size: inherit;
	width: 50px;
}
.fixField{
	margin-left: 0px;
}
.helpContainer td{
	text-align: center;
}
.helpContainer img{
	padding: 5px;
	border: 0;
}
.text12{
	font-size: 12px;
}
.text13{
	font-size: 13px;
}
.text14{
	font-size: 14px !important;
}
.text15{
	font-size: 15px !important;
}
.text16{
	font-size: 16px !important;
}
.text17{
	font-size: 17px !important;
}
.text18{
	font-size: 18px;
}
.loggedInUser{
        font-size: 13px;
        font-weight: 600;
}
.logoHeight{
        height: 37px;
        margin-bottom: -5px;
        margin-top: 2px;

}
.lineHeightMyAccount{
        line-height: 12px;
}
table.tblBox{
}
table.tblBox thead tr{
	background-color: #00B9E8;
	color: #FFF;
}
table.tblBoxGrey thead tr th, table.tblBoxGrey tbody tr td{
	padding: 4px;
	border: 1px solid #000;
}
table.tblBoxGrey thead tr{
	background-color: #CCC;
	color: #000;
	text-align: left;
}
table.tblBoxGrey thead:not(:first-child):before {
	line-height:2em;
	content:"\200C";
	display:block;
}
table.tblBoxGrey tbody tr td:last-child{
	padding-right: 10px;
	text-align:right;
}
table.tblBoxGrey tbody tr td.noBorder{
	padding: 10px 10px 10px 0px;
	border-bottom: 0px !important;
	border-left: 0px !important;
	border-right: 0px !important;
}

table.tblBoxGrey tbody tr td.noBorder:last-child{
	border-top: 0px !important;
}
input.inputLonger{
	width: 200px;
}
select.selSmall{
	width: 95px;
}
select.selLonger{
	width: 200px;
}
select.selLongest{
	width: 300px;
}
input.inputLongest{
	width: 300px;
}
input.inputShorter{
	width: 80px;
}
input.inputSmall{
	width: 95px;
}
.showOnPrint{
	display:none;
}
.alert-box {
	color:#555;
	border-radius:10px;
	font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
	padding:10px 10px 10px 36px;
	margin:10px;
}
.alert-box span {
	font-weight:bold;
	text-transform:uppercase;
}
.notice {
	background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
	border:1px solid #8ed9f6;
}
#rcorners1 {
	border-radius: 3px;
	background: #709A34;
	padding: 6px 5px 5px 5px;
	height: 16px;
	color: #fff;
	font:12px;
	text-align: center;
}
.receiptContainer{
	display:none;
}
.greenText{
	color: #4acb2f;
}
.greyText{
	color: #969798;
}
.errorMessage{
    border: 1px solid #eacccd;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #f2dede;
	color: #a74544;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 5px 10px;
}
.successMessage{
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #CCEBC9;
	color: #36771C;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 5px 10px;
}
.successMessageVendorContacts{
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #CCEBC9;
	color: #36771C;
	font-size: 12px;
	text-align: center;
	padding: 5px;
	width:35%;
	font-weight: 700;
}
.eventItemRow{
	border-bottom: 1px solid #ADEEFF;
	padding: 5px;
}
.eventItemRow.updated{
	background-color: #f7debb;
}
.eventItemRow.updatedAndVendorRow{
	background: repeating-linear-gradient(
		45deg,
		#f7debb,
		#FFF5DD 1%,
		#f7debb 1%
	);
}
.eventItemRow td{
	padding: 5px;
}
.eventItemRow td:first-child{
	border-left: 1px solid #ADEEFF;
}
.eventItemRow td:last-child{
	border-right: 1px solid #ADEEFF;
}
.updateNotificationRow{
	color: #333;
	font-size: 13px;
	background-color: #f7debb;
	padding:10px;
}
.tdSingleLabel{
	background-image: url("../images/label.png");
	background-repeat: no-repeat;
	height: 45px;
	width: 85px;
	padding: 2px;
	cursor: pointer;
}
.tdSingleLabel:hover,
.tdSingleLabel:focus-visible{
	background-image: url("../images/labelOn.png");
}
.infoBox{
	display: inline-block;
	padding: 10px;
	color:#32718e;
	background-color: #d8edf8;
	border-collapse: separate !important;
	border-radius: 4px;
	border: 1px solid #bce8f1;
}
.warningBox{
	display: inline-block;
	padding: 10px;
	color:#771930;
	font-size: 12px;
	background-color: #F2DEDE;
	border-collapse: separate !important;
	border-radius: 4px;
	border: 1px solid #EBCCCC;
}
.MessageBox{
    display: inline-block;
    width: 100%;
    padding: 20px;
    font-size: 14px;
    border-collapse: separate !important;
    border-radius: 4px;
}
.MessageBoxClickable.MessageBox:hover,
.MessageBoxClickable.MessageBox:focus-visible{
    cursor: pointer;
}

.MessageBox-green a{
	text-decoration: underline;
    color:#398771 !important;
}
.MessageBox-green{
    color:#398771;
    background-color: #b6e0d4;
    border: 1px solid #80c9b5;
}

.MessageBox-amber a{
	text-decoration: underline;
	color:#585858 !important;
}

.MessageBox-amber {
	color: #474444;
	background-color: #ecb101bd;
	border: 1px solid #585858;
	padding: 16px;
}

.MessageBoxClickable.MessageBox-green:hover,
.MessageBoxClickable.MessageBox-green:focus-visible{
    background-color: #a4d8ca;
}

.MessageBox-red{
    color:#FFF;
    background-color: #D14836;
    border: 1px solid #80c9b5;
}

.MessageBox-red:hover,
.MessageBox-red:focus-visible{
    background-color: #C13E2C !important;
}

.bsAlertInformation{ /* blue */
    display: block;
    margin: 15px 0px !important;
    padding: 15px;
    color: #357093;
    background-color: #DAEDF7;
    border-collapse: separate !important;
    border-radius: 4px;
    border: 1px solid #BEE8F0;
}
.bsAlertWarning{ /* yellow */
    display: block;
    margin: 15px 0px !important;
    padding: 15px;
    color: #896c3f;
    background-color: #fcf8e4;
    border-collapse: separate !important;
    border-radius: 4px;
    border: 1px solid #faf2ce;
}
.bsAlertDanger{ /* red - similar (maybe identical without hover?) to mandatoryError */
    display: block;
    margin: 15px 0px !important;
    padding: 15px;
    color: #a74544;
    background-color: #f2dede;
    border-collapse: separate !important;
    border-radius: 4px;
    border: 1px solid #eacccd;
}
.bsAlertSuccess{ /* green */
    display: block;
    margin: 15px 0px !important;
    padding: 15px;
    color: #3e753f;
    background-color: #e0f0d9;
    border-collapse: separate !important;
    border-radius: 4px;
    border: 1px solid #d1e9c7;
}
.dash{
	font-size: 12px;
	padding: 10px;
	margin: 10px!important;
}
.noborder{
	border: none!important;
}
.topborderonly{
	border-top: 1px solid #CCC!important;
	border-bottom: none!important;
}





div.orgTemplates{
    color:#000;
    background-color:#f9f9f9;
    border: 1px solid #ddd;
    max-height: 115px;
    overflow: scroll;
    padding: 5px 5px 5px 10px !important;
}
.orgTemplates ul li{
  display: block;
  list-style:none;
  background-color:transparent;
  padding: 0px !important;
  cursor:pointer;
  font-size:12px;
}
.orgTemplates li > ul{
  padding-left:15px !important;
    display: block;
}
.expandFolderBtn i{
    color:#00a6cf;
    font-size:18px;
    margin-right:5px;
}
.expandTemplateBtn i{
    color:#777;
    font-size:18px;
    margin-right:5px;
}
.expandFolderBtn:hover, .expandTemplateBtn:hover,
.expandFolderBtn:focus-visible, .expandTemplateBtn:focus-visible{
  background-color: #F3F3F3;
}


.circliful{
	margin-bottom: 10px;
	padding-bottom: 25px;
	float: left;
	width:130px;
}
.circliful:hover,
.circliful:focus-visible{
	background-color: #f7fbfc;
	cursor: pointer;
}
.graphButton{
	width:130px;
	height:150px;
	vertical-align:top;
	text-align:center;
	color: #666;
}
.graphButton img{
	height: 81px;
	margin: 26px 5px 5px 5px;
	padding: 0px 20px;
}
.graphButton:hover,
.graphButton:focus-visible{
	background-color: #f7fbfc;
	cursor: pointer;
}

.profile-box{
	color: #565656;

}
.profile-box .fa{
	color: #565656;
	font-size: 14px;
	margin: 8px 8px 8px 0px;
}
.btn-fa-edit{
	color: #00aad5;
	font-size: 16px;
	margin:0px;
	cursor:pointer;
}
.btn-fa-edit:hover,
.btn-fa-edit:focus-visible{
	color: #008aad;
}

.list_head{
	font-size: 14px;
	line-height: 21px;
	padding: 5px 0px 15px 0px;
}
ul.list_main{
	list-style: none;
	display: block;
}
li.list_item{
	font-size: 14px;
	line-height: 21px;
	display: list-item;
}
li.list-item a{
	padding: 6px 50px 6px 10px;
	display: block;
	font-size: 16px;
	line-height: 24px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	outline: 0;
}

.flex-container-items{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.yt-thumb {
	overflow: hidden;
	position: relative; border: 1px solid black; background: black;
}
.yt-thumb:before {
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	font-family: 'Font Awesome 5 Brands';
	content: "\f167";
	font-size: 70px;
	color: #fff;
	opacity: .8;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.yt-thumb:hover:before,
.yt-thumb:focus-visible:before{
	color: #eee;
}
.yt-thumb img {
	margin: -10.5% 0 -11.5% 0;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	opacity: .3;
	cursor:pointer;
}
.videoBorder{
	border: 7px solid #00B9E8;
	transition: .5s ease;
	transform: scale(.97, .97)
}

[tooltip]{
	position:relative;
	display:inline-block;
}
[tooltip]::before {
	content: "";
	position: absolute;
	top:-6px;
	left:50%;
	transform: translateX(-50%);
	border-width: 4px 6px 0 6px;
	border-style: solid;
	border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
	z-index: 99;
	opacity:0;
}

[tooltip-position='left']::before{
	left:0%;
	top:50%;
	margin-left:-12px;
	transform:translatey(-50%) rotate(-90deg)
}
[tooltip-position='top']::before{
	left:50%;
}
[tooltip-position='buttom']::before{
	top:100%;
	margin-top:8px;
	transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
	left:100%;
	top:50%;
	margin-left:1px;
	transform:translatey(-50%) rotate(90deg)
}

[tooltip]::after {
	content: attr(tooltip);
	position: absolute;
	left:50%;
	top:-6px;
	transform: translateX(-50%)   translateY(-100%);
	background: rgba(0,0,0,0.7);
	text-align: center;
	color: #fff;
	padding:4px 2px;
	font-size: 12px;
	min-width: 80px;
	border-radius: 5px;
	pointer-events: none;
	padding: 4px 4px;
	z-index:99;
	opacity:0;
}

[tooltip-position='left']::after{
	left:0%;
	top:50%;
	margin-left:-8px;
	transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
	left:50%;
}
[tooltip-position='buttom']::after{
	top:100%;
	margin-top:8px;
	transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
	left:100%;
	top:50%;
	margin-left:8px;
	transform: translateX(0%)   translateY(-50%);
}
[tooltip]:hover::after,[tooltip]:hover::before,
[tooltip]:focus-visible::after,[tooltip]:focus-visible::before{
	opacity:1
}
.latooltip{
	font-size:10px!important;
	color:black!important;
	background: white!important;
	width:50px!important;
backdrop-filter:none!important;}
/* START accordion menu CSS */
.accordion_container{
	vertical-align: top;
	width: 280px;
	padding-right: 20px;
	padding-top:20px;
}
.accordion_container #dSticky{
	bottom: 10px;
	overflow: auto;
}
.accordion,
.accordion ul,
.accordion li,
.accordion a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}
.accordion li {
	list-style: none;
}
.accordion li > a {
	display: block;
	position: relative;
	width: 270px;
	padding: 5px;
	height: 32px;

	color: black;
	font: normal 12px/32px Arial, sans-serif;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid #ccc;
}
.accordion > li:hover > a,
.accordion > li:focus-visible > a {
	background-color: #f3f3f3;
	font-weight: bold;
}
.accordion > li:target > a,
.accordion > li > a.active {
	background-color: #fff;
	font-weight: bold;
}
.accord_sub li a {
	color: #00B9E8;
	font-weight: normal;
	border-bottom: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.accord_sub li:hover a, .accord_sub li:focus-visible a { text-decoration: underline; }
.accord_sub li:last-child a { border: none; }

/* Functionality */
.accordion li > .accord_sub {
	display: none;
}
.accordion li:target > .accord_sub {
	display: block;
}
/* END accordion menu CSS */


/* START breadcrumb nav CSS */
ul.breadcrumb {
}
ul.breadcrumb li {
  display: inline;
}
ul.breadcrumb li+li:before {
  color: black;
  content: " > ";
}
ul.breadcrumb li a {
  color: #00B9E8;
}
ul.breadcrumb li a:hover,
ul.breadcrumb li a:focus-visible {
  color: #01447e;
}
/* END breadcrumb nav CSS */

/* START DataTables CSS */
/* Font color */
.dataTable thead th {
    color: #333; /* Dark grey or slightly lighter shade of black */
    border: 1px solid #CCC;
}

/* Background color */
.dataTable thead th {
    background-color: #E9E9E9; /* Light grey or off-white */
}

/* Hover effect */
.dataTable thead th:hover,
.dataTable thead th:focus-visible {
    background-color: #DCDCDC; /* Lighter shade for hover effect */
}
/* END DataTables CSS */

/* START tablesort CSS */
table.tablesorter {
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #FFF;
	text-align:left;
	font-size: 8pt;
	padding: 6px 16px 6px 4px; /* 2 6's were 4px */
}
table.tsNew thead tr th, table.tsNew tfoot tr th { /* deal with different versions of tableSorter */
	background-image: url(../images/sort_bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	background-color:#E9E9E9;
	border:1px solid #CCC;
	cursor: pointer;
	color:#00B9E8;
}
table.tablesorter thead tr .header {
	background-image: url(../images/sort_bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	background-color:#E9E9E9;
	border:1px solid #CCC;
	cursor: pointer;
	color:#00B9E8;
}
table.tablesorter thead tr .header:hover,
table.tablesorter thead tr .header:focus-visible {
	background-color:#DCDCDC;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 6px 4px; /* WAS JUST 4px */
	vertical-align: top;
}
table.tablesorter tfoot td {
	color: #3D3D3D;
	padding: 4px;
	border-top:2px solid #CCC;
	font-weight: bold;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../images/sort_asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../images/sort_desc.gif);
}
table.tablesorter thead tr th.tablesorter-headerAsc {/* deal with different versions of tableSorter */
	background-image: url(../images/sort_asc.gif);
}
table.tablesorter thead tr th.tablesorter-headerDesc {
	background-image: url(../images/sort_desc.gif);
}
table.tablesorter tbody tr {
	border-bottom: 1px solid #CCC;
}
table.tablesorter tbody tr.noPointerWColour:hover {
	cursor: auto;
}
table.tablesorter tbody tr.noPointer:hover,
table.tablesorter tbody tr.noPointer:focus-visible {
	background-color: #FFFFFF !important;
	cursor: auto;
}
table.tablesorter tbody tr:hover,
table.tablesorter tbody tr:focus-visible {
	background: #F3F3F3;
}
input.tablesorter-filter,
select.tablesorter-filter,
table.tablesorter thead .filter {
	width: 95%;
	height: inherit;
	margin: 0px;
	padding: 2px;
	background-color: #fff;
	border: 1px solid #bbb;
	color: #333;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: height 0.1s ease;
	-moz-transition: height 0.1s ease;
	-o-transition: height 0.1s ease;
	transition: height 0.1s ease;
}
.nosort{
	background-color: #e9e9e9!important;
	border: 1px #cccccc solid!important;
}
/* updates for latest tablesorter version */

/* needed for filter row when sticky headers used */
.tablesorter-filter-row {
    background-color: white;
    border-bottom: 1px solid lightgrey;
}
/* optional disabled input styling */
.tablesorter-filter-row .disabled {
	display: none;
}

/* hidden filter row */
.tablesorter-filter-row.hideme td {
	/*** *********************************************** ***/
	/*** change this padding to modify the thickness     ***/
	/*** of the closed filter row (height = padding x 2) ***/
	padding: 2px;
	/*** *********************************************** ***/
	margin: 0;
	line-height: 0;
	cursor: pointer;
}
.tablesorter-filter-row.hideme * {
	height: 1px;
	min-height: 0;
	border: 0;
	padding: 0;
	margin: 0;
	/* don't use visibility: hidden because it disables tabbing */
	opacity: 0;
	filter: alpha(opacity=0);
}
/* filters */

/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
	display: none;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
	text-align: center;
	cursor: pointer;
	background-color: #e6bf99;
}

/* END tablesort CSS */



/* START Modal Box CSS */
#lean_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
	background: #000;
	display: none;
}
/* END Modal Box CSS */



div.table-wrapper{
	width: 80em;
	height: 10em;
	overflow: auto;
}

/* START CUSTOM Date or Month Picker CSS */
.ui-datepicker {
	width:auto;
    z-index:1000!important;
}
#ui-datepicker-div {
	font-size:11px;
}
#ui-monthpicker-div {
	min-width:180px;
}
.ui-datepicker-trigger {
	margin-left:5px;
	vertical-align: middle;
	cursor:pointer;
    height:16px; /* changing back to original height, was set to 12px but appearing too small on screen */
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
	height: 2.1em;
	min-width: 2.1em;
	line-height: 2.1em;
}
/* END CUSTOM DatePicker CSS */

/*START DRAGGABLE ROW CSS */
.ui-state-highlight {
	height: 2.1em;
	min-width: 2.1em;
	line-height: 2.1em;
	background-color: #eefbff !important;
}
/*END DRAGGABLE ROW CSS */

/*START AUTOCOMPLETE DROPDOWN CSS (Add appointment from dashboard) */
.ui-widget-content .ui-state-focus {
	border:1px solid #F3F3F3;
	background-image:none;
	font-size:12px;
	background-color:#F3F3F3;
	cursor: pointer;
	font-weight: normal;
	color: #000;
}
.ui-widget-content {
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
}
.automatch{ // in dsp_help.php
	color: #63283e;
	font-weight: 700;
}
/*END AUTOCOMPLETE DROPDOWN CSS */

/* STYLE SIDETABS */
.supportTab {
	padding: 20px;
	width: 370px;
	background: #FFF;
	border: 1px solid #ccc;
}
.feedbackTab {
	padding: 20px;
	width: 370px;
	background: #FFF;
	border: 1px solid #ccc;
}
.referralsTab {
	padding: 20px;
	width: 370px;
	background: #FFF;
	border: 1px solid #ccc;
}
/* END STYLE SIDETABS */


/*START zClip CSS */
.zClipContainer{
	position: relative;
	display: inline-block;
}
/* END zClip CSS */



/*START MultiSelect CSS */
.ui-multiselect { padding:2px 0 2px 4px; text-align:left;overflow:hidden; }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover, .ui-multiselect-header a:focus-visible { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:12000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:auto }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; font-size:1em !important; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }

.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

.custom-multiselect .ui-state-default{
	background-color: #FFFFFF !important;
	background-image: none !important;
	height: 27px;
}
.custom-multiselect .ui-corner-all{
	border-radius: 2px;
}

/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label { border:none }

@media print{
	.ui-multiselect-menu {display: none;}
}
/* END MultiSelect CSS */





@media print {
	.hideOnPrint{
		display: none;
	}
	.showOnPrint{
		display: table-row;
	}
	.maxWidthOnPrint{
		width: 100%;
	}
	.receiptContainer{
		display: block;
		width: 255px;
		padding: 5px;
	}
	.invoiceContainer{
		display:block;
		width:100%;
		padding: 5px;
	}
}




/* START FRONT END WEBSITE */
.fb-like{
	width: 175px;
	margin: 0px;
	padding:8px 0px 0px 0px;
}

.fb_edge_widget_with_comment>span,.fb_edge_widget_with_comment>span>iframe { width:50px !important; height:24px !important; }

.fb_link{
	width: 22px;
}

a.home_menu{
	color:#00B9E8;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	white-space: nowrap;
	font-size: 18px;
	font-weight: 300;
	margin:3px 15px 2px 15px;
	padding-bottom:4px;
	text-decoration: none;
}
a.home_menu:hover,
a.home_menu:focus-visible{
	border-bottom:3px solid #CBF1FB;
}
a.home_menuOn{
	color:#00B9E8;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	white-space: nowrap;
	font-size: 18px;
	font-weight: 300;
	margin:3px 15px 2px 15px;
	padding-bottom:4px;
	text-decoration: none;
	border-bottom:3px solid #CBF1FB;
}
#home_background{
	min-width:1000px;
	height:550px;
	background-image: url('../images/home_bg_blurred2.jpg');
	background-repeat: no-repeat;
	position: relative;
	background-size:100% 700px;
	width: 100%;
	vertical-align: bottom;
}
#home_shortlisted{
	padding: 10px 0px;
	min-width:1000px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 2px solid #333A45;
}
#home_shortlisted img{
	width: 60%;
	max-width: 900px;
	cursor: pointer;
}
#home_background_inner{
	position: relative;
	width:100%;
	height:100%;
}
#floating_device{
	position: absolute;
	right:50px;
	top: 350px;
}
#floating_socialmedia{
	position: absolute;
	top: 10px;
	right: 92px;
}
#floating_socialmedia2{
	position: absolute;
	top: 10px;
	right: 10px;
}
#socialmedia img{
	cursor: pointer;
}
#socialmedia img:hover,
#socialmedia img:focus-visible{
	opacity: 0.9;
}
.home_maincontainer{
	width: 75%;
	margin-top: 20px;
	color: #FFF;
}
.home_maincontainer h1{
	font-size: 36px;
	font-family: Calibri, 'Helvetica Neue',Helvetica,Arial,sans-serif;
	line-height: 42px;
	text-shadow: #000000 0 1px 2px;
}
.home_maincontainer h2{
	font-size: 30px;
	font-family: Calibri, Helvetica,Arial,sans-serif;
	line-height: 36px;
	text-shadow: #000000 0 1px 2px;
	color: #FFF;
}
.home_maincontainer h3{
	font-size: 18px;
	font-family: Calibri, 'Helvetica Neue',Helvetica,Arial,sans-serif;
	line-height: 24px;
	text-shadow: #000000 0 1px 2px;
}
.home_maincontainer h4{
	font-size: 18px;
	font-weight:300;
	letter-spacing:1px;
	font-family: Calibri, 'Helvetica Neue',Helvetica,Arial,sans-serif;
	line-height: 24px;
	color: #FFF;
	text-shadow: #000000 0 1px 2px;
}
.home_blackcontainer{
	background:rgba(0, 0, 0, 0.5);
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-ms-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}
.home_blackcontainer td {
	padding: 10px;
	margin: 0px;
}
.home_innerblackcontainer{
	padding: 20px;
}
.home_innerblackcontainer td {
	padding: 0px;
	margin: 0px;
}
.home_blackcontainer .whitetext{
	font-size: 16px;
	font-weight:300;
	font-family: Calibri, 'Helvetica Neue',Helvetica,Arial,sans-serif;
	line-height: 24px;
	color: #FFF;
}
.home_btn-blue{
	font-size:16px;
	width: 250px;
	height: 60px;
	color: #FFF;
	border: none;
	cursor: pointer;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #00B9E8;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.home_btn-blue:hover,
.home_btn-blue:focus-visible{
	background: #00A5CF !important;
}
.home_btn-drkblue{
	font-size:16px;
	width: 250px;
	height: 60px;
	color: #FFF;
	border: none;
	cursor: pointer;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #4f62af;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.home_btn-drkblue:hover,
.home_btn-drkblue:focus-visible{
	background: #0b1850 !important;
}
#home_infocontainer{
	position: relative;
	width: 100%;
}
.home_info{
	width: 70%;
}
.home_info h1{
	font-family: 'PT Sans', Helvetica, Arial,sans-serif;
	font-size: 16px;
	font-weight: lighter;
	line-height: 24px;
	color: #000;
	border-bottom:3px solid #CBF1FB;
}
.home_info h2{
	font-family: 'PT Sans', Helvetica,Arial,sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #A3A4A5;
	font-weight:400;
}
.help_header h1{
	font-size: 18px;
	font-weight: lighter;
}
.help_header h2{
	font-size: 14px;
	font-weight:400;
}
.help-link {
	color: #056cb6;
}
.padTop2{
	padding-top: 2px;
}
.padTop5{
	padding-top: 5px;
}
.padBot5{
	padding-bottom: 5px;
}
.padTop10{
	padding-top: 10px;
}
.padRight10{
	padding-right: 10px;
}
.padTop30{
	padding-top: 30px;
}
.padRight30{
	padding-right: 30px;
}
.padLeft30{
	padding-left: 30px;
}
.pad10{
	padding: 10px;
}
.pad15{
	 padding: 15px;
 }
.padLeft15{
    padding-left: 15px;
}
.padLeft17{
    padding-left: 17px;
}
.left{
	text-align: left;
}
a.home_footer_menu{
	color:#FFF;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	white-space: nowrap;
	font-size: 18px;
	font-weight: 300;
	margin:3px 15px 2px 15px;
	padding-bottom:4px;
	text-decoration: none;
}
a.home_footer_menu:hover,
a.home_footer_menu:focus-visible{
	border-bottom:3px solid #CBF1FB;
}
a.home_footer_menuOn{
	color:#FFF;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	white-space: nowrap;
	font-size: 18px;
	font-weight: 300;
	margin:3px 15px 2px 15px;
	padding-bottom:4px;
	text-decoration: none;
	border-bottom:3px solid #CBF1FB;
}
.home_footer{
	background-color: #303A44;
	height: 230px;
}
.home_footer_text{
	color: #FFF;
	font-size:13px;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
a.home_footer_link{
	color: #FFF;
	font-size:13px;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	text-decoration: none;
}
a.home_footer_link:hover,
a.home_footer_link:focus-visible{
	text-decoration: underline;
}
.home_footer_whitetext{
	color: white;
	font-size: 14px;
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	font-weight:400;
}
.home_footer_small_links{
	position: absolute;
	top: 0px;
	right: 0px;
	margin-right: 20px;
	margin-top: -170px;
	white-space: nowrap;
}
.home_footer_contact{
	position: absolute;
	bottom: 0px;
	right: 0px;
	margin-right: 20px;
	margin-bottom: -35px;
}
.home_footer_contact td{
	padding: 1px;
}
.home_footer_hrspacer{
	padding:30px 0px;
}
.imageBox{
	border-collapse: separate;
	padding:7px;
	-webkit-box-shadow: 0 0 12px #C8C8C8;
	-moz-box-shadow: 0 0 12px #C8C8C8;
	box-shadow: 0 0 12px #C8C8C8;
}
.team h1{
	color: black;
	font-size:20px;
	font-weight:300;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
	border: none;
}
.team h2{
	color: black;
	font-size:14px;
	font-weight:bold;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.team h3{
	color: black;
	font-size:14px;
	font-weight:300;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.team a.blue{
	font-size:14px;
	font-weight:300;
	font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.team img{
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
	//filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
.team img:hover,
.team img:focus-visible{
	filter: none;
	-webkit-filter: grayscale(0); /* Google Chrome & Safari 6+ */
}

.my-error-class {
display: block;
padding-top: 4px;
color:#de553e;  /* red */
}

.validationBoxVendor {
	font-size: 13px;
	margin: 10px 0px;
	padding:6px;
	color: #D8000C;
	background-color: #FFBABA;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
}
.text-total {
	font-size: 15px;
	font-weight: 700;
	padding-right: 10px;
	padding-top: 10px;
}
.tenderDetailsHeader {
	display: block;
	height: 25px;
	background: #e8e1e1;
	text-align: center;
	padding: 12px 20px 3px 10px;
	position: relative;
	margin: 0 5px 0 0;
	font-size: 14px;
	text-decoration: none;
	color: #000;
        border: 1px solid #CCC;
        border-radius: 3px
}
.tenderDetailsHeader.updated{

        background: #f7debb;
        }

.awardsTxtArea{
        width: 195px;
        height: 4em;
}
.awardDetails{
        padding: 5px;
        /* width: 200px; */
        margin: 10px;
        margin-left:1px;
}
.noborder {
	border: none;
}

@media screen and (min-device-width: 600px) and (max-device-width: 1155px) {
	#floating_device{
		top: 390px;
	}
}@media screen and (max-device-width: 320px) and (orientation: portrait) {
	.home_maincontainer{
		width: 88%;
	}
	.home_maincontainer h1{
		font-size: 46px;
		line-height: 52px;
	}
	.home_maincontainer h2{
		font-size: 40px;
		line-height: 46px;
	}
	.home_maincontainer h3{
		font-size: 26px;
		line-height: 30px;
	}
	#floating_device{
		top:400px;
	}
	.home_blackcontainer{
		display:none;
	}
	.home_btn-blue{
		font-size:24px;
		width: 270px;
		height: 90px;
	}
}
@media screen and (max-device-width: 320px) and (orientation: landscape) {
	.home_maincontainer{
		width: 82%;
	}
	.home_footer{
		height: 140px;
	}
	.home_blackcontainer{
		display:none;
	}
	.home_footer_contact{
		margin-bottom: 0px;
	}
	.home_footer_hrspacer{
		padding:15px 0px;
	}
}
.green_square {
	width: 8px;
	height: 8px;
	background: #6FBFB6;
}
.orange_square {
	width: 8px;
	height: 8px;
	background: #E8590C;
}
.purple_square {
	width: 8px;
	height: 8px;
	background: #638CDC;
}
.job_notcomplete_square {
	width: 8px;
	height: 8px;
	background: #497c49;
}
.newsBoxContainer{
	font-family: Arial, Helvetica, Verdana, sans-serif;
	margin: 10 0 0 ;
	color: #455c9e;
	font-size: 15px;
	width:450px;
	background:url(../images/login_bg.png) repeat-x 0 bottom;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	-o-border-radius:5px;
	border:1px solid #9ECAED;
	outline: none;
	-webkit-box-shadow: 0 0 10px #9ECAED;
	-moz-box-shadow: 0 0 10px #9ECAED;
	box-shadow: 0 0 10px #9ECAED;
}
.newsTable{
	width:100%;
	valign: center;
	margin-left: 20px
}
.newsTable td{
	padding: 6px;
}
tr.showborder {
	border-bottom: 1px solid #455c9e;
	height: 60px;
}
a.updates:link {
	color: #00B9E8;
}
a.updates:visited {
	color: #00B9E8;
}
a.updates:hover,
a.updates:focus-visible {
	color: #455c9e;
}
.invoice-box{
	background-color: #F3F3F3;
	border: 1px solid #CCC;
	padding: 5px;
}
@media all {
	.page-break	{ display: none; }
}

@media print {
	.page-break	{ display: block; page-break-before: always; }
}

div.lessmore-text-container {
	/*margin: 0 auto;
	width: 75%; */
}
.lessmore-text-content{
	line-height: 1em;
}
.lessmore-short-text {
	overflow: hidden;
	height: 10em;
}
.lessmore-full-text{
	height: auto !important;
}
.lessmore-show-more {
	padding: 10px 0;
	text-align: left;
}
a.lessmore-link{
	color: #455c9e;
}
        /*less-more jQuery*/
.morecontent span {
        display: none;
}
.morelink {
        display: block;
}

/* validate*/
.error {
	color: #ff0000;
}

/*Flex */
 .flex tbody{
     display: flex;
     flex-direction: column;
     x-justify-content: space-around;
     x-align-items: stretch;
     flex-wrap: wrap;
 }

 .firsttd{
    width: 150px;
 }

 .secondtd{
    width:1000px;
 }
.backgroundgrey{
    background-color: #F4F6F6;
 }

 .ui-tooltip {
    width: 200px;
    text-align: center;
    border: 1px solid lightgrey;
    box-shadow: none;
    //box-shadow: 5px 10px 18px #888888;
    background-size: 100% 100%;
    padding: 10;
    color: white;
    background: #00B9E8;
    opacity: 1.9;

}
 body .ui-tooltip {
	 border: 1px solid lightgrey;
 }

.bgLavender{
	/*border:1px solid #B5605A;*/
	background-color:#E4F2FA;
}

.fw-600{
	font-weight: 600;
}

/***********CSSGRID APPLICATIONS**********/
.grid-container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(5%, 1fr) );
  padding: 1em;
  padding-left: 0;
  padding-right: 20px;
  align-content: space-evenly;
}
.grid-container > div {
  padding: 10px 0px 10px 10px;
}
.grid-container > div.appheader {
  background-color: #D3D3D3;!important
}
div.grid-container label{ /*specifying grid-container here to stop  other labels in the system changing from font-weight normal to bold.*/
	font-weight: bold;
}


.grid-container-jobs > div {
	padding: 5px 0px;
}
.grid-container-jobs > div.appheader {
	background-color: #D3D3D3;!important
}

/***********SELECT2**********/

.select2-results ul li {
	display: block !important;
}
.select2-results__option  {
	font-family: Arial !important;
	font-size:12px !important;
	padding: 2px 0 2px 5px !important;
}
.select2-container {
	min-width:50px;
}
.select2-results__options {
	display: block !important;
}
.select2-container--default .select2-selection--single{
	text-align: left;
}

	.editorDisplayText{
		line-height: 1.5;
	}
	.editorDisplayText p{
		display: block;
/*		margin-block-start: 1em;*/
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}
	.editorDisplayText ul, .editorDisplayText ol{
		padding: 0 40px;
		display: block;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 40px;
	}
	.editorDisplayText li{
		display: list-item;
	}
	.modalScrollBody{
		padding:0 13px;
		max-height:calc(100vh - 280px);
		min-height: 200px;
		overflow-y:scroll;
		overflow-x:hidden;
		box-shadow: inset 0 -2px 5px -4px black;
	}

	/* prevent dropdowns from opening upwards */
	.ck.ck-dropdown__panel {
		bottom: auto !important;  /* Reset any calculated "bottom" value */
		transform: none !important;  /* Disable any transform that might push the menu upwards */
	}

div#dSendEmail { /******** Allow CKEditor to pop up over modal in sendemailtoclient ******/
	z-index: 10000!important;
}

button.ck.ck-button.ck-fontsize-option.ck-off.ck-button_with-text {
	height: 30px;
}

/********Appointments******/
.accordion {
  background-color: #eee;
  cursor: pointer;
  padding: 3px 3px 3px 0px;
  width: 100%;
  text-align: left;
  transition: 0.1s;
}

.active, .accordion:hover, .accordion:focus-visible {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
}

.active:after {
  content: "\2212";
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
}

.form-label{
  display: inline-block;
  width: 100px;
  text-align: right;
  margin: 0px 10px 0px 5px;
}
.form-label-view{
	display: inline-block;
	width: 100px;
	text-align: left;
	margin: 0px 10px 0px 5px;
}
.form-textarea-view{
	display: inline-block;
	width:80%;
	text-align: left;
}
.form-label-150{
  display: inline-block;
  width: 150px;
  text-align: right;
  margin: 0px 10px 0px 5px;
}
.form-label-left-150{
  display: inline-block;
  width: 150px;
  text-align: left;
  margin: 0px 5px 0px 0px;
}
.form-label-left-100{
  display: inline-block;
  width: 100px;
  text-align: left;
  margin: 0px 5px 0px 0px;
}

.form-label-reporting-150{
	width: 150px;
	text-align: left;
	margin: 0px 10px 0px 5px;
}

input,textarea{vertical-align: middle;}

.row {
  margin: 7px 0px 7px 0px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
}
/********END Appointments******/

/***County Code Dropdown***/
.shortPhone{
  width: 102px
}
.longPhone{
  width: 180px;
}

.dividerHeader {
	background-color: #eee;
	padding: 3px;
	width: 100%;
	text-align: left;
	transition: 0.1s;
}

/************ Chrome v. 83 style fixes ********/
input[type="text"], input[type="tel"], input[type="number"],input[type="email"], input[type="search"], input[type="password"],input[type="image"], textarea, button{
	border:1px solid #aaa;
	border-radius: 4px;
	font-size: 12px;
	padding-left: 6px;
	padding-top:
	color: #444;
	font-family: Arial;
}
select:focus, textarea:focus {
	outline: none !important;
	border:1px solid #00aad5 !important;
	border-radius: 4px;
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="button"]:focus, input[type="password"]:focus, input[type="image"]:focus, input[type="search"]:focus{
	outline:none;
	border:1px solid #00aad5 !important;
	border-radius: 4px;
}
textarea{
	padding-top: 6px;
}

.custom-multiselect .ui-corner-all{
	border-radius: 4px;
	border: 1px solid #aaa;
}
.ui-multiselect-checkboxes label input {position:relative;top: -1px;}
.ui-multiselect { padding:0 0 4px 4px; text-align:left;overflow:hidden; }

.select2-container--default .select2-selection--single {
	outline: none;
	border: 1px solid #aaa !important;
	border-radius: 4px;
}

.select2-container--default:focus .select2-selection--single:focus {
	outline: none;
	outline: 1px solid #00aad5 !important;
}
button:focus{
	outline:none;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
	border:1px #00aad5 solid !important;

}
.iti__selected-flag:focus{
	outline:none!important;
}
#selPhonePrefix, #selMobilePrefix{
	width:76px;
	height: 28px;
	margin-right: -2px;
}
.prefix:focus{
	border:1px #00aad5 solid !important;
}
   .intl-tel-input {
	   display: table-cell;
   }
.intl-tel-input .selected-flag {
	z-index: 4;
}
.intl-tel-input .country-list {
	z-index: 5;
}
.input-group .intl-tel-input .form-control {
	border-top-left-radius: 4px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 0;
}
.templateValidate {
	padding: 5px;
	margin-left: 4px;
	background-color: #EFE0E0;
	border: 1px solid #B5605A;
	color: #B5605A;
}

.ck-editor__editable {
	min-height: 160px;
	max-height: 400px;
	max-width: 860px;
	font-size: 13px;
	line-height: 1.6;
	word-wrap: break-word;
}

/*Toolbar*/
.ck-editor__top {
	max-width: 860px;
}

div.ck.ck-editor__editable_inline p,
div.ck.ck-editor__editable_inline li,
div.ck.ck-editor__editable_inline ul,
div.ck.ck-editor__editable_inline ol,
div.ck.ck-editor__editable_inline margin,
div.ck.ck-editor__editable_inline padding {
	all: revert;
}


/* Switch Checkbox */
.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 20px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	left: 3px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .slider {
	background-color: #1abc9c;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}
.bolder {
	font-weight: bolder;
	}
.boxlightgrey {
	border: 1px solid #80808070;
}
.padding5px {
	padding: 5px;
}
.margin5px {
	margin: 5px;
}
.radius4 {
	border-radius: 4px
}

/* Start Pinned client */


.btn-fa-favourite {
    font-size: 14px;
    padding-left: -5px;
}

.btn-fa-favourite.fas.fa-star {
    color: #f5c518; /* gold */
}

.btn-fa-favourite.fa-star {
    color: #f5c518; /* gold */
}

.btn-fa-favourite:hover,
.btn-fa-favourite:focus-visible {
    opacity: 0.8;
    cursor: pointer;
}

.btn-pin {
    padding-left: 4px!important;
    padding-right: 4px!important;
    width: 25px;
    display: inline-block;
    margin-right: 0; /* remove default spacing */
    margin-left: 3px;
    height: 27px;
}
.btn-print
{
	background-color: #00B9E8;
	color: white;
    width: 120px!important;
    padding: 4px;
    display: inline-block;
    margin-right: 0; /* remove default spacing */
}

/* Base pin icon */
.btn-pin-icon {
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
    color: #999;          /* unpinned: grey */
    opacity: 0.6;
    font-size: 18px;
    position: relative;
    top: 0;
    right: 0;

}

/* Hover */
.btn-pin-icon:hover,
.btn-pin-icon:focus-visible {
    opacity: 1;
}

/* Pinned state */
.btn-pin-icon.is-pinned {
    color: #f5c518;       /* gold */
    opacity: 1;
    //transform: rotate(-20deg); /* optional: looks like a real pinned note */
}

/* 1. Float the icon so it sits to the left */
.boxHeader .btn-pin-icon {
    float: left;
    margin-right: 8px; /* Adjust spacing between icon and text */
    margin-top: 3px;   /* Optional: nudge down to align with text center */
}

/* 2. Force the H2 to act as a distinct block next to the float */
.boxHeader .text13 {
    display: flow-root; /* Modern way to prevent wrapping under floats */
    /* If you need support for very old browsers, use 'overflow: hidden;' instead of flow-root */
}

/* Colour variants */
.fab-avatar-20  { background-color: var(--colour-surface-content-avatar-20,  #cb203d); }
.fab-avatar-56  { background-color: var(--colour-surface-content-avatar-56,  #a65605); }
.fab-avatar-92  { background-color: var(--colour-surface-content-avatar-92,  #846a07); }
.fab-avatar-128 { background-color: var(--colour-surface-content-avatar-128, #527702); }
.fab-avatar-164 { background-color: var(--colour-surface-content-avatar-164, #007b56); }
.fab-avatar-200 { background-color: var(--colour-surface-content-avatar-200, #0b777c); }
.fab-avatar-236 { background-color: var(--colour-surface-content-avatar-236, #0173a2); }
.fab-avatar-272 { background-color: var(--colour-surface-content-avatar-272, #4c5de5); }
.fab-avatar-308 { background-color: var(--colour-surface-content-avatar-308, #9936d9); }
.fab-avatar-344 { background-color: var(--colour-surface-content-avatar-344, #c1098f); }

/* End Pinned client */