/* ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~ */
/* Header Overrides */
body {
	/* background-color:#eeeeee; */
	background-color:#ffffff;
}

#piHeaderHost {
	display: none;
}

#piHeaderHost.show {
	display: block;
}

/*
.dg .dgLoader {
	background-color: #ffffff;
}
*/

/*.dg .dgBody .dgOptionsPanel,*/
/*.dg .dgBody .dgContentPanel .dgContentPanelInner .dgContentPanelHead .dgRecordsCommands,*/
/*.dg .dgBody .dgContentPanel .dgContentPanelMaskRight,*/
.twbs,
.pageTabs.ui-widget-content {
	background-color: transparent;
}

/* adjust dg height to accomodate header height */
#dg.contentBox {
	top:141px;
}

@media screen and (min-width: 768px) {
	#dg.contentBox {
		top:102px;
	}
}



/* panel shadows */
main header.main,
main .pfBox.pfSection.panel,
li.ui-tabs-tab,
dl.dgOptionsList,
table.dgTable{
	box-shadow: 2px 2px 5px rgba(0,0,0,0.075);
}


.dg .dgBody .dgOptionsPanel .dgOptionsPanelInner .dgOptionsPanelInnerInner .dgOptionsPanelBody .dgOptionsList {
border-radius:0 0 4px 4px;
}

dl.dgOptionsList {
	width:calc(100% - 5px);
}



.piSiteTitle > a > img {
	height: 28px;
	vertical-align: middle;
	margin-right: 0.8em;
	margin-bottom: 0.2em;
}

.piSiteTitle > a:hover {
	color:#ffffff;
}

.piSiteNav {
background-color:#2f638e;
}

.piNavMenu {
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.12);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.12);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.12);
}


.piSiteNavItem > a  {
	border-color:#44739a;
	color:rgba(255, 255, 255, 0.75);
}

/* table general widths */
.table .width5 { width:5%;}
.table .width10 { width:10%;}
.table .width15 { width:15%;}
.table .width18 { width:18%;}
.table .width20 { width:20%;}
.table .width25 { width:25%;}
.table .width30 { width:30%;}
.table .width35 { width:35%;}
.table .width40 { width:40%;}
.table .width45 { width:45%;}
.table .width50 { width:50%;}
.table .width55 { width:55%;}
.table .width60 { width:60%;}
.table .width65 { width:65%;}
.table .width70 { width:70%;}
.table .width75 { width:75%;}
.table .width80 { width:80%;}
.table .width85 { width:85%;}
.table .width90 { width:90%;}
.table .width95 { width:95%;}


/* ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~ */
/* General */


.pfHiddenField,
.invisible {
	display: none !important;
}

.pfField a {
	color:#2169a5;
	text-decoration:none;
}

.pfLabelGroup .pfIcon {
	position:relative;
	top:1px;
}
	

a,  .pfIcon, .ui-widget-content a {
	color:#2169a5;
	text-decoration:none;
}

a:hover, a:hover .pfIcon, .pfIcon:hover {
	color:#154268;
}


.pfActual.pfButton {
	background-color:#2169a5;
}

.pfActual.pfButton:hover {
	background-color:#154268;
}

.pfActual.pfButton.pfCancel {
	color:#2169a5;
	border:#2169a5 solid 2px;
}

.pfActual.pfButton.pfCancel:hover {
	color:#ffffff;
	background-color:#154268;
	border:#154268 solid 2px;
}


span.warning {
	color: #ff0505;
	font-weight: bold;
}





/* section title */
label.pfSection, label.pfRepeaterTable, label.pfRepeaterList {
	font-size:16px;
}

legend.pfLabelGroup.pfRepeaterList,
legend.pfLabelGroup.pfRepeaterTable {
	margin-bottom:10px;
}


/* side nav bg color */
.ui-tabs-nav.ui-widget-header {
	background-color:transparent;
}


/* override old table charts */
table.piRegular > * > * > th {
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:1px;
}


div.table div.header {
	font-size: 11px !important;
	text-transform:uppercase;
	letter-spacing:1px;
}

div.table div.tr {
	display:table-row;
}

div.table div.td  {
	display:table-cell;
	float:none !important;
	vertical-align: middle;
}

div.table.chart div.td.item_name {
	width:auto !important;
}


div.table.chart.cluster{

    width: 80%;
    float: right;
    border-left: solid #80808045;


}
div.table .pfBox {
	margin-bottom:0;
}


/* fix piRegular tables with left padding */
table.piRegular, .table {
	padding-left:0 !important;
}


/* fix negative margin */
.pfBox.pfSection.panel > fieldset.pfSection.panel > fieldset.pfPayload > .table,
.pfBox.pfSection.panel > fieldset.pfSection.panel > fieldset.pfPayload > table{
	width:calc(100% - 8px);
	margin-left:8px;
	margin-top:5px;
}

table.piRegular {
	margin-top:5px;
}

.pfActual.pfSection.panel > .pfPayload.pfSection > .pfBox.pfSection.panel {
	padding-left:20px;
}



.pfBox.panel {
	padding:15px 20px 20px 20px;
}

.pfBox.panel.pfLazyLoad  {
	padding:15px 20px;
}


.pfBox:last-child,
.table:last-child, table:last-child {
	margin-bottom:0;
}


table.pfRepeaterTable tbody.pfRepeaterEmptyMarker {
	text-align:left;
}

hr {
	height:1px;
	border:0;
	background-color:#d3d3d3;
}

/* specific override */
#contactMain-box {
	margin-bottom:20px;
}



/* ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~  ~ */
/* Order Summaires */

.priceFormer { 
	text-decoration: line-through;
	padding-right: 1ex;
}

/* This is for substituting the standard "Save" or "Create" buttons on Admin Forms on click
   if the styling for the real buttons (contained in websauce->form.x->resources->css->forms.css)
   gets changed, this will have to change as well
*/ 
.fakeSubmitBtn{
	border:#000000 solid 1px;
	background-color:#444444;
	color:#ffffff;
	display:block; 
	padding:5px 15px;
	cursor:pointer;
}

/* */

.ace-editor {
	width: 100%;
	height: 160px;
}

input[type="number"].hideScroll::-webkit-outer-spin-button,
input[type="number"].hideScroll::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].hideScroll {
    -moz-appearance: textfield;
}




/* Close Button */


button.ui-dialog-titlebar-close {
	right: 0.7em !important;
	border:#000000 solid 1px;
	background-image:url(../images/btn-close-dark.png);
	background-repeat:no-repeat;
	background-size:12px;
	background-position:center center;
}

.templates {
	display:none;
}

#permit-edit-form-box {
	border: none;
}

.tgTags {
	display: block;
}

.pfBox.pfDisabled.disabledAsOutput {
	color: inherit;
}

.pfField audio,
.pfField a,
.pfField img {
	display:inline-block;
	vertical-align:middle;
}

.pfField a {
	margin:0;
}

.pfField img {
	border:#e2e2e2 solid 1px;
}

[id*="e.attendee_photo"]  a,
[id*="e.attendee_pronounce"]  a {
	padding:10px;
}



textarea.pfField.disabledAsOutput {
	background-color: transparent;
}


div.aceEditor {
	border: #e2e2e2 solid 1px;
}

div.aceEditor, textarea.editor {
	height: 120px;
}

div.aceEditor.large, textarea.editor.large {
	height: 240px;
}

div.aceEditor + textarea.editor {
	position: absolute;
	left: -9999px;
}

.flex-columns {
	margin-bottom: 20px;
}

.flex-columns:last-child {
	margin-bottom: 0;
}

@media all and (min-width: 1024px) {
	.flex-columns {
		display: flex;
	}

	.flex-columns > div {
		flex: 1;
		margin-bottom: 0;
		margin-right: 20px;
	}

	.flex-columns > div:last-child {
		margin-right: 0;
	}
}


#codeMenuGroup:hover {
   background-color:#f0f0f0;
}

#codeMenuGroup:hover #codeMenuTrigger {
   color:#000000;
}

#codeMenuGroup:hover #codeMenu {
   display: block;
}


.tox .tox-dialog__footer .tox-dialog__footer-end > button.tox-button[title="Save"] {
	color: #207ab7;
	position: relative;
}

.tox .tox-dialog__footer .tox-dialog__footer-end > button.tox-button[title="Save"]:hover:not(:disabled),
.tox .tox-dialog__footer .tox-dialog__footer-end > button.tox-button[title="Save"]:focus:not(:disabled) {
	color: #1c6ca1;
}

.tox .tox-dialog__footer .tox-dialog__footer-end > button.tox-button[title="Save"]:active:not(:disabled) {
	color: #185d8c;
}

.tox .tox-dialog__footer .tox-dialog__footer-end > button.tox-button[title="Save"]:before {
	color: #fff;
	content: "OK";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
}

select.pfActual.pfField.placeholderSelected {
	color: hsl(0, 0%, 65%);
}

select.pfActual.pfField option {
	color: #666666;
}

/* TODO: Find better place to put this / reconsider approach. */

.pfActual.pfField.compoundColor {
	width: calc(100% - 50px);
}

.pfActual.pfField.compoundColor.hidePicker {
	width: 100%;
}

.pfActual.pfField.compoundColor + label.colorPickerOuter {
	border: #e2e2e2 solid 1px;
	bottom: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	height: 40px;
	position: absolute;
	right: 0;
	width: 40px;
}

.pfActual.pfField.compoundColor.hidePicker + label.colorPickerOuter {
	display: none;
}

.pfActual.pfField.compoundColor + label.colorPickerOuter input[type="color"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	cursor: pointer;
	display: block;
	height: 100%;
	margin: 0;
	visibility: hidden;
	padding: 0;
	width: 100%;
}