/**
* Body CSS
*/

body {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;
}
	
html,
body {
	height: 100%;
	background-color: #eee;
}

html,
body,
input,
buttons {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

textarea {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

select, .mui-panel {
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
}

/*ul.nav-tabs.nav + div.tab-content > div.tab-pane > div.mui-panel {*/
/*	border-radius: 0px 5px 5px 5px !important;*/

/*}*/

.nav>li>a.tighter {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 28px !important;
}
.nav-tabs > li.active > a.tighter, .nav-tabs > li.active > a.tighter:focus, .nav-tabs > li.active > a.tighter:hover {
    color: var(--accent_color1);
    font-weight: bold;
}

/* used for a tab-panel inside another tab-panel */
.subpanel, .mui-panel.subpanel {
    padding-bottom: 0; /*!important;*/
    padding-left: 0; /*!important;*/
    padding-right: 0; /*!important;*/
    padding-bottom: 0; /*!important;*/
    margin-bottom: 0;
}

ul.nav-tabs.nav {
	border-bottom-color: transparent;
	margin-left: 5px;
	margin-right: 5px;
}

ul.nav-tabs.nav > li {
	border-bottom-color: transparent;

}

.mui-panel {
	z-index: 98;
}

h1.plain {
	font-size: medium;
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: normal;
}

h2.plain {
	font-size: medium;
	font-weight: bold;
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: normal;
}

h3.plain {
	font-size: medium;
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: normal;
}

h4.plain {
	font-size: medium;
	margin-top: 2px;
	margin-bottom: 2px;
	line-height: normal;
}



/*
 use notinmodal to never show when inside a modal
*/
.modal-dialog .notinmodal  {
	display: none;
}



/**
* Layout CSS
*/

/*

*/


/*
 * 
 * Side drawer styles
 * 
 */
 
/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden;
}

.slide-active * li a {
	font-size: 150%; /* my addition for bigger text, especially on hand helds. when the slide nav is active*/
}


/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 50px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 10px 0 0 0;
    border: 0;
    background: transparent;
    text-align: center;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: white
}
.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
/* screw writing importants, just stick it in max width since these classes are not shared between sizes */
@media (max-width:1067px) { /* was 767 */
	#slide-nav .container {
	    margin: 0;
	    padding: 0!important;
	}
	#slide-nav .navbar-header {
	    margin: 0 auto;
	    padding: 0 15px;
	}
	#slide-nav .navbar.slide-active {
	    position: absolute;
	    width: 80%;
	    top: -1px;
	    z-index: 1000;
	}
	#slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: calc(80% - 20px);
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 2;
	    top: -8px;
	    margin: 0;
	}
	#slide-nav #slidemenu .navbar-nav {
	    min-width: 0;
	    width: calc(100% - 20px);
	    margin: 0;
	}

	/* my override so on phone the menus are away from edge of screen */
	.slide-active * ul {
			margin-top: 20px !important;
			margin-left: 20px !important;
	}


	#slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
	    min-width: 0;
	    width: calc(80% - 20px);
	    white-space: normal;
	}
	#slide-nav {
	    border-top: 0
	}
	/* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
	#slide-nav #navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
	    width: 80%;
	    left: -80%;
	    background: #eee;
	}

	#slide-nav.navbar-inverse #navbar-height-col {
	    z-index: 1;
	    border: 0;
	}

	#slide-nav .navbar-form {
	    width: 100%;
	    margin: 8px 0;
	    text-align: center;
	    overflow: hidden;
	    /*fast clearfixer*/
	}
	#slide-nav .navbar-form .form-control {
	    text-align: center
	}
	#slide-nav .navbar-form .btn {
	    width: 100%
	}

	#page-content {
	    padding-top: 15px;
	}
}

@media (min-width:1068px) {
	#page-content {
	    left: 0!important
	}
	.navbar.navbar-fixed-top.slide-active {
	    position: fixed
	}
	.navbar-header {
	    left: 0!important
	}
}

.headBlock {
	/* place area to move content down below fixed header */
	width: 100%;
	height: 70px;
}
.subheader {
	position: absolute;
	top: 51px;
	padding: 0px 20px 0px 20px;
	width: 100%;
	height: 20px;
}

/* fadeout overlay style for entry closes */
#foverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter:alpha(opacity=0.25);
    -moz-opacity:0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
 	z-index: 10000;
 }

#foverlay:hover {
  -moz-opacity:1;
   -khtml-opacity: 1;
   opacity: 1;
}


/* this overlay div is for fading in */
#foverlay2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    filter:alpha(opacity=1);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
    
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
 	z-index: 10000;
 }

#foverlay2:hover {
  -moz-opacity:0.25;
   -khtml-opacity: 0.25;
   opacity: 0.25;
}



/**
Blockquote and blockquote footer (sim to materialize)
**/
blockquote{margin:20px 0;padding-left:1.5rem;border-left:5px solid #ee6e73}
blockquote > footer:before{content:"–";}
blockquote > footer{font-size:80%;color:grey;text-align:right;}



/* when a column is sorted */
a.sorted {
	text-decoration: underline;
}

div.sortable {
	cursor: pointer;
}

div.sorted {
	text-decoration: underline;
	cursor: pointer;
}

/*
 * My UI Widget overrides
 */

/* tracmenu */

.tracmenu-showall {
	float: right;
	position: relative;
	bottom: 25px;
	padding: 4px;
}

.add-on {
	float: right;
	position: relative;
	bottom: 25px;
	padding: 4px;
}

.mui-select__menu.tracmenu {
	z-index: 2001;
}

input.loading {
	background: url('../images/loader.gif') no-repeat right center;
}


/**
 **
 * MY MUI ADDITIONS
 *  
 */
.mui-btn--xsmall {
  height: 15.3px;
  line-height: 15.3px;
  padding: 0 4px;
  font-size: 8px;
}

/* my adjustment with tighter bottom margin */
.mui-textfield.tight {
    display: block;
    padding-top: 15px;
    margin-bottom: 10px;
    position: relative;
}

.nopad {
	padding: 0 !important;
}

.nomarge {
	margin:0 !important;
}

.nomargintop {
	margin-top: 0 !important;
}
.nomarginbottom {
	margin-bottom: 0 !important;
}

/*
 * Listing formats
 */
.listCell {
	padding-left: 12px !important;
}


/* default cursor to pointer for listings using lrow */
tbody>tr.lrow {
	cursor: pointer;
}

/* search field formats
*/
input.search-query {
    padding-left:26px;
}
form.form-search, div.form-search {
    position: relative;
}
form.form-search:before, div.form-search:before {
	/*  magnifying glass  */
    display: block;
    width: 14px;
    height: 14px;
    content: "\f002";
	font-weight: 900;
    font-family: "Font Awesome 5 Pro";
	/*font-style: normal;
	font-variant: normal;
	text-rendering: auto;*/
    background-position: -48px 0;
    position: absolute;
    top:8px;
    left:8px;
    opacity: .5;
    z-index: 1000;
}


/* a way to make any div feel like hover like a button */
.myBtn {
	background-color: #FCFCFC;
	padding: 9px;
	padding-left:19px;
	margin: 10px;
	cursor:pointer;
	font-weight: bolder;
}

.myBtn > div > h3, .myBtn > h3 {
	margin: 10px;
	font-weight: bolder;
}

.myBtn.disabled {
	color: grey;
}

.myBtn.selected {
	background-color: #A5A5A5;

}

a.well.myBtn:focus,a.well.myBtn:hover {
	background-color: #F0F0F0;
	cursor: pointer;
}

a.well.myBtn {
	line-height: 2;
}

.myBtn:hover {
	background-color: #F0F0F0;
	cursor: pointer;
}
.myBtn.disabled:hover {
	background-color: #FCFCFC;
}

.topright {
	position: absolute; top: 0; right: 0;margin: 10px;
}

.hiddenlink {
	cursor: pointer;
}

.crop {overflow:hidden;}


.listNoButton {
	width: 25px;
	color: grey;
	font-size:120%;
	text-align:center;
	margin: 5px;
}

.greyButton {
	cursor: pointer;
	color: grey;
	margin: 5px;
}

.greyButton:hover {
	color: black;
}

.listButton {
	width: 25px;
	cursor: pointer;
	color: grey;
	font-size:120%;
	text-align:center;
	margin: 5px;
}

.listButton:hover {
	filter: brightness(50%);
}

.listButton.disabled {
	color: WhiteSmoke;
}

.listButton.disabled:hover {
	filter: brightness(100%);
}

a.diabled .listButton {
	color: WhiteSmoke;
}

a.disabled .listButton:hover {
	filter: brightness(100%);
}


.tight {
	padding: 0px;
	margin: 0px;
}


/* entry screen top bars are fixed using this */
.barfix {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3;
}


/* when I need a popover but dont want to use a button */
.greylink {
	cursor: pointer;
	border-bottom: 1px dotted grey;
}
.greylink:hover {
     border-bottom: 1px solid grey;
}	
.x {
	cursor: pointer;
	color: grey;
	font-size: 150%;
}
.x:hover {
	color: black;
}

/* placeholder for sortable tables */

/* line 94, /Users/jonasvonandrian/jquery-sortable/source/css/application.css.sass */
.sorted_table tr {
  cursor: pointer; }
/* line 96, /Users/jonasvonandrian/jquery-sortable/source/css/application.css.sass */
.sorted_table tr.placeholder {
  display: block;
  background: red;
  position: relative;
  margin: 0;
  padding: 0;
  border: none; }
  /* line 103, /Users/jonasvonandrian/jquery-sortable/source/css/application.css.sass */
 .sorted_table tr.placeholder:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: red;
    margin-top: -5px;
    left: -5px;
    border-right: none; }

/* line 114, /Users/jonasvonandrian/jquery-sortable/source/css/application.css.sass */
.sorted_head th {
  cursor: pointer; }
/* line 116, /Users/jonasvonandrian/jquery-sortable/source/css/application.css.sass */
.sorted_head th.placeholder {
  display: block;
  background: red;
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0; }
  /* line 124, /Users/jonasvonandrian/jquery-sortable/source/css/application.css.sass */
  .sorted_head th.placeholder:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: red;
    top: -6px;
    margin-left: -5px;
    border-bottom: none;
    }


/*
	schedule drawing classes 
*/

.daySchedBlock {
	/* margin-bottom: 50px; */
}

.daySched {
	width: 100%;
	max-width: 700px;
	float: left;
}
.innerDay {
	padding: 4px;
}

.weekSched {
	width: 100%;
}
.weekSched > .daySched {
	width: 14.2%;
}

.dayHeader {
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 15px;
}
.dayList {
	clear: both;
}

.leftSched {
	float: left;
	cursor: pointer;
	
}
.rightSched {
	float: right;
	cursor: pointer;
}

.weekSched > .daySched > .innerDay > .dayHeader > .leftSched {
	display: none;
}

.weekSched > .daySched > .innerDay > .dayHeader > .rightSched {
	display: none;
}




.tb {
	background-color: #e5f2ff; /* light blue */
	/*opacity: 0.5;*/
	float: left;
	width: 100%;
	margin-bottom:6px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 3px;
	margin-right: 3px;
	/*border-bottom: thin dotted grey;*/
	border-bottom: thin solid white;
}

.tb.empty {
	background: transparent;
	border-bottom: none;
}

.tb_time {
	clear: both;
	float: left;
}
.tb_class {
	float: right;
}
.tb_room {
	float: none;
}
.classRow {
	text-align: center;
}

/*
 * 
 * Password validations
 * 
 */

.bar {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;

    /*width:100%;*/
}
.error-list {
	font-size: 75%;
}
#passInstruction {
	font-size: 75%;
}


/* blink an entry field on validation */
.blinkRed {
	background-color:#F6CECE !important;
	animation: flash 2s ease infinite;
}
.blinkWhite {
	background-color: white !important;
	animation: flash 2s ease infinite;
}

/*Pulse opacity*/
  .pulsing{
	  animation:pulsingText 1.5s infinite;
  }
@keyframes pulsingText{
	0%{     opacity: 0.0; }
	10%{    opacity: 0.4; }
	20%{    opacity: 0.6; }
	30%{    opacity: 0.8; }
	40%{    opacity: 1.0; }
	50%{    opacity: 1.0; }
	60%{   opacity: 0.8; }
	80%{   opacity: 0.6; }
	100%{   opacity: 0.4; }
}


/*disabled conditional survey questions*/
.srvyqdisabled {
	color: #B0B0B0;
}
.srvyqdisabled label {
	color: #B0B0B0;
}


/**/

.bgblack {
	background-color: black;
}

.bgred {
	background-color: red;
}

.bgltred{
	background-color: #F6CECE;
}

.bggreen {
	background-color: green;
}

.bgltgreen {
	background-color: #A9F5A9;
}

.bgorange {
	background-color: orange;
}

.bgblue {
	background-color: blue;
}

.bgltblue {
	background-color: #d0eaff;
}

.bgltorange {
	background-color:  #ffd280;
}

.bgcream {
	background-color: #fffdd0;
}

.bggrey {
	background-color: grey;
}

.bgaliceblue {
	background-color: AliceBlue;
}

.bgltgrey {
	background-color: #E0E0E0;
}

.bglightgrey {
	background-color: lightgrey;
}

.bggoldenrod {
	background-color-color: #DAA520;
}

.bgwhite {
	background-color: white;
}
/**/

.pointer {
	cursor: pointer;
}

.move {
	cursor: move;
}

.bold {
	font-weight: bold;
}

.dollar::before {
	content: "$";
	font-size: 75%;
}
.dollar {
	white-space:nowrap;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.linethrough {
	text-decoration: line-through;
}

.noclicks {
	pointer-events: none;
}

.borderthick {
	border-width: 3px;
}
.borderthick_x {
	border-width: 6px;
}
.borderthick_xx {
	border-width: 9px;
}

.watermark {
	pointer-events: none;
	position: fixed;
	bottom: 0;
	right: 0;
	opacity: .1;
	max-width: 100px;
}
.watermark2 {
	pointer-events: none;
}

.nowrap {
	white-space: nowrap;
}
.helpTip {
	font-size: 110%;
	position: relative;
	display: none;/* default visibility is none */
}

.helpTip:hover {
	font-size: 170%;
	top: -4px;
	left: -4px;
}

.tipHighlight {
	border-color: red;
	border-style: dotted;
	border-width: thin;
	z-index: 20000;
	pointer-events: none;
}
.popover {
	color: rgba(0, 0, 0, 0.87);
	min-width: 300px;
	z-index: 20001;
}

.pop-warning.popover {
    /** from text-warning and bg-warning */
    color: #8a6d3b;
    background-color: #fcf8e3;
}

.pop-success.popover {
    color: #3c763d;
    background-color: #dff0d8;
}

.pop-danger.popover {
    color: #a94442;
    background-color: #f2dede;
}

.pop-info.popover {
    background-color: #afd9ee;
    color: #31708f;
}

.pop-border {
    box-shadow: 0 0 10px 10px lightgray;
}

.bigger {
	font-size: 110%;
}

.bigger15 {
	font-size: 150%;
}

.bigger2 {
	font-size: 200% !important;
}

.smallish {
    font-size: 85%;
}

.smaller {
	font-size: 75%;
}

.halfsize {
	font-size: 50%;
}

.tinysize {
	font-size: 25%;
}
.padTop {
	padding-top: 12px;
}

.lrpad4 {
	padding: 0 4px;
}
.tbpad4 {
	padding: 4px 0;
}
.pad4 {
	padding: 4px;
}
.lrpad3 {
	padding: 0 3px;
}
.tbpad3 {
	 padding: 3px 0;
}
.pad3 {
	padding: 3px;
}
.lrpad10 {
	padding: 0 10px;
}
.tbpad10 {
	padding: 10px 0;
}
.pad10 {
	padding: 10px;
}

/*
 * These next styles are for wrapping a field and displaying a remove button
 */
 .rem_wrap {
	background-color: #f2f2f2;
	border: 1px solid transparent;
	border-radius: 8px;
	border-color: #d1d3d3;
	padding: 3px;
	 line-height: 1.9;
}

.rem_field {
	border: none;
	margin: 4px;
}
.rem_btn {
	color: #5f6060;
	padding: 3px;
}
.rem_btn:hover {
	background-color: #F0F0F0;
	color: black;
}

.rem_wrap.wrapAssign {
	white-space: nowrap;
}

/**
 * A style for hiding stuff when printing
 * 
 */
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }

	.border-no-print, .border-no-print *
	{
		border: none !important;
	}
}

.jqstooltip {
	padding: 8px;
	height: 45px;
	width: 100px;
	vertical-align: middle; 
	background-color: rgba(0,0,0,0.5);
	font-size: 14pt;
	font-weight: bold;
}

/*  adjustments for printing our reports as tables (reduce the padding)  */
.report {
	background-color: white;
}

body.report .table>tbody>tr>td, body.report .table>tbody>tr>th, body.report .table>tfoot>tr>td, body.report .table>tfoot>tr>th, body.report .table>thead>tr>td, body.report .table>thead>tr>th {
    padding: 2px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.noborder {
	border: none !important;
    box-shadow: none !important;
}

.wlcircle {
	background: #3DB374;
	border: 1px solid white;
	width: 4px;
	height: 4px;
	float: right;
	margin-left: 2px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.listTotal {
	background-color: white;
	font-weight: bold;
}
.listTotal.v-sum {
	text-decoration: underline;
}
.listTotal.v-sum:before {
	content: "Total: ";
	text-decoration: underline;
	margin-left: 1em;
}


.brightWhite {
	color: white;
	opacity: 1;
}

.italic {
	font-style: italic;
}


/*
	toggleButton 3-state
*/

.tri-range-field{
	display: inline-block;
	width:100px;
	margin: 0px;
	border-radius: 2px;
}

input.tri[type=range] {
	-webkit-appearance: none;
	margin: 0;
	width: 100%;
	padding: 0px;
	outline: none;
	border: none;
}

input.tri[type=range]:focus {
	outline: none;
}
input.tri[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 10px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #aaa;
	border-radius: 6px;
	border: 0px solid #000000;
}
input.tri[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #aaa;
	height: 20px;
	width: 19px;
	border-radius: 6px;
	background: #FFFFFF;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 0px;
}
input.tri[type=range]:focus::-webkit-slider-runnable-track {
	background: #aaa;
}
input.tri[type=range]::-moz-range-track {
	width: 100%;
	height: 30px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #aaa;
	border-radius: 6px;
	border: 0px solid #000000;
}
input.tri[type=range]::-moz-range-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #aaa;
	height: 20px;
	width: 19px;
	border-radius: 6px;
	background: #FFFFFF;
	cursor: pointer;
}
input.tri[type=range]::-ms-track {
	width: 100%;
	height: 10px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input.tri[type=range]::-ms-fill-lower {
	background: #aaa;
	border: 0px solid #000000;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000;
}
input.tri[type=range]::-ms-fill-upper {
	background: #aaa;
	border: 0px solid #000000;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000;
}
input.tri[type=range]::-ms-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 1px solid #aaa;
	height: 20px;
	width: 19px;
	border-radius: 6px;
	background: #FFFFFF;
	cursor: pointer;
}
input.tri[type=range]:focus::-ms-fill-lower {
	background: #F5F6CE;
}
input.tri[type=range]:focus::-ms-fill-upper {
	background: #F5F6CE;
}


input.tri.triRangeFalse[type=range]::-webkit-slider-runnable-track {
	background: #F6CECE !important;
}

input.tri.triRangeFalse[type=range]::-moz-range-track {
	background: #F6CECE !important;
}

input.tri.triRangeOther[type=range]::-webkit-slider-runnable-track {
	background: lightskyblue !important;
}

input.tri.triRangeOther[type=range]::-moz-range-track {
	background: lightskyblue !important;
}

input.tri.triRangeTrue[type=range]::-webkit-slider-runnable-track {
	background: #A9F5A9 !important;
}

input.tri.triRangeTrue[type=range]::-moz-range-track {
	background: #A9F5A9 !important;
}

input.tri.triRangeNeutral[type=range]::-webkit-slider-runnable-track {
	background: #F5F6CE !important;
}

input.tri.triRangeNeutral[type=range]::-moz-range-track {
	background: #F5F6CE !important;
}

.triRangeFalse::-webkit-slider-thumb {
	background: white !important;
}

.triRangeNeutral::-webkit-slider-thumb {
	background: white !important;
}

.triRangeOther::-webkit-slider-thumb {
	background: white !important;
}

.triRangeTrue::-webkit-slider-thumb {
	background: white !important;
}

.triFalseColor {
	color: #F6CECE;
}

.triTrueColor {
	color: #A9F5A9;
}

.triNeutralColor {
	color: #F5F6CE;
}

.triOtherColor {
	color: lightskyblue;
}

.triWhiteColor {
	color: white;
}

.strokeWhite {
	text-stroke-width: 1px;
	text-stroke-color: white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;
}

.strokeGrey {
	text-stroke-width: 1px;
	text-stroke-color: grey;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: grey;
}

.strokeLightGrey {
	text-stroke-width: 1px;
	text-stroke-color: grey;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: lightgrey;
}

.strokeLighterGrey {
	text-stroke-width: 1px;
	text-stroke-color: #e6e6e6 ;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #e6e6e6;
}

.strokeLightRed {
	text-stroke-width: 1px;
	text-stroke-color: #F6CECE;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #F6CECE;
}

.strokeRed {
	text-stroke-width: 1px;
	text-stroke-color: red;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: red;
}

.strokeLightGreen {
	text-stroke-width: 1px;
	text-stroke-color: #A9F5A9;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #A9F5A9;
}

.strokeGreen {
	text-stroke-width: 1px;
	text-stroke-color: green;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: green;
}

.strokeBlack {
	text-stroke-width: 1px;
	text-stroke-color: black;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}

.strokeThin {
	text-stroke-width: .1px;
	stroke-width: .1px;
	-webkit-text-stroke-width: .1px;
}

/*
	editable divs need a little feedback as to where they can click to edit, shw a light border
 */
div.text.editable {
	border: dotted lightgrey 1px;
}

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

/* for addons where the field is hidden and we need full bordering
	for example the icon picker
 */
.addon-override {
	background-color: white !important;
	border-left: 1px !important;
	border-left-color: rgb(204, 204, 204) !important;
	border-left-style: solid !important;
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
	border-right: 1px !important;
	border-right-color: rgb(204, 204, 204) !important;
	border-right-style: solid !important;
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
	background-color: white;
}

.modeGreenBG {
	background-color: #7aba7b;
}
.modeGreen {
	color: #7aba7b;
}

.modeYellowBG {
	background-color: #ebdb8d;
}
.modeYellow {
	color: #ebdb8d;
}

.hidden {
	display: none;
}


/* 	tighten is all about smaller text in some of the popentry objects that are smaller and
		have too much info to diplay
	these style definitions make the text smaller in form elements children to smaller div
	the surrounding div would use the class tighten_fontsize and possibly tighten_horiz
*/

.tighten_fontsize {
	font-size: 75%;
}

.tighten_horiz .mui-textfield {
	padding-left: 5px;
	padding-right: 5px;
}

.tighten_fontsize label {
	font-size: 10px !important;
	margin-bottom: 2px;
}

.tighten_fontsize .mui-textfield--float-label > label {
	transform: translate(0px, 10px);
}

.tighten_fontsize .mui-textfield > input {
	margin-top: -4px;
}

.tighten_fontsize .mui-textfield.static {
	margin-top: -4px;
}

.tighten_fontsize .mui-textfield.static > label {
	margin-top: 4px;
}

tighten_fontsize mui-textfield > label  {
	top: 4px;
}

.tighten_fontsize .mui-select > select, .tighten_fontsize .mui-textfield > input, .tighten_fontsize .mui-textfield > textarea, .tighten_fontsize .mui-textfield {
	font-size: 14px;
	height: 24px;
}

.tighten_fontsize .mui-textfield--float-label {
	font-size: 10px !important;
}

.tighten_fontsize .mui-select > select {
	margin-top: 3px;
}

.tighten_fontsize .mui-select {
	padding-top: 8px;
	margin-bottom: 8px;
}

.mui-panel.tighten {
	padding: 5px;
}

.noHeight {
	height: inherit !important;
}

.noWidth {
	width: inherit !important;
}

.inline {
	display: inline;
}

.tighten .mui-radio, .tighten .mui-checkbox {
	margin-bottom: 3px;
}

.spaceRight {
	margin-left: 3px;
	margin-right: 3px;
}

.mui-select:focus > label, .mui-select > select:focus ~ label {
    color: var(--accent_color1);
}

/*
	bootstrap 4 stuff
 */
.font-weight-bold {
	font-weight: bold;
}
.ml-half {
	margin-left: .5em;
}
.mr-half {
	margin-right: .5em;
}
.mb-half {
	margin-bottom: .5em;
}
.mt-half {
	margin-top: .5em;
}
.mb-2 {
	margin-bottom: 2em;
}
.mt-2 {
	margin-top: 2em;
}
.ml-2 {
	margin-left: 2em;
}
.mr-2 {
	margin-right: 2em;
}
.mb-1 {
	margin-bottom: 1em;
}
.mt-1 {
	margin-top: 1em;
}
.ml-1 {
	margin-left: 1em;
}
.mr-1 {
	margin-right: 1em;
}
.mb-0 {
	margin-bottom: 0;
}
.mt-0 {
	margin-top: 0;
}
.ml-0 {
	margin-left: 0;
}
.mr-0 {
	margin-right: 0;
}


.pl-half {
	padding-left: .5em;
}
.pr-half {
	padding-right: .5em;
}
.pb-half {
	padding-bottom: .5em;
}
.pt-half {
	padding-top: .5em;
}
.pb-1 {
	padding-bottom: 1em;
}
.pt-1 {
	padding-top: 1em;
}
.pl-1 {
	padding-left: 1em;
}
.pr-1 {
	padding-right: 1em;
}
.pb-0 {
	padding-bottom: 0;
}
.pt-0 {
	padding-top: 0;
}
.pl-0 {
	padding-left: 0;
}
.pr-0 {
	padding-right: 0;
}


/* show menus in front of app bar */
.mui-select__menu {
	z-index: 101;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
}

.panel-primary.bordered, fieldset.panel-primary.bordered {
	border-width: thin;
	border-style: solid;
}

input[type="search"], .searchfield {
	-webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button, .searchfield::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}


.dropSearch {
	z-index: 2000;
	cursor: default;
	position: absolute;
	left:0; top:0;
	background: #f9f9f9;
	border:1px solid #c5d1e4;
	/*overflow: auto;*/
	/*width: 200px; height: 250px;*/
	min-height: 100px;
	max-height: 500px;
	display: none;
	padding: 4px;
	-moz-opacity: 0.90;
	opacity:.90;
	filter: alpha(opacity=90);
	min-width: 100px;
}

.dropSearchList {
	overflow: auto;
	height: 220px;
	padding: 4px;
	min-width: 200px;
}

#dropSearchInput {
	z-index: 2001;
	width: 90%;
}


.dropSearchPop {
	position: absolute;
	background-color: white;
	border: thin solid grey;
}


.ds_id {
	float: left;
	margin-right: 10px;
}
.ds_name {

}
.ds_line {
	clear: both;
}

.qpResults {
	z-index: 2;
	cursor: default;
	position: absolute;
	left:10px; top:20px;
	background: #f9f9f9;
	border:1px solid #c5d1e4;
	overflow: auto;
	/* width: 230px;*/ height: 150px;
	max-width: 400px;
	display: none;
	-moz-opacity: 0.85;
	opacity:.85;
	filter: alpha(opacity=85);
}

.qpResults2 {
	z-index: 2;
	cursor: default;
	position: absolute;
	left:10px; top:20px;
	background: #f9f9f9;
	border:1px solid #c5d1e4;
	overflow: auto;
	width: 340px; height: 150px;
	display: none;
	-moz-opacity: 0.85;
	opacity:.85;
	filter: alpha(opacity=85);
}

.deleted {
	color: red;
	background: white;
	opacity: .5;
	width:100%;
	height:100%;
	font-size: x-large;
	text-align: center;
	padding-top: 50%;
	z-index: 100000;
}

.fixFirstLeftCheckFieldDiv {
	margin-top: 0px;
	top: -5px;
}

.colornone {
	opacity: 0;
}

.glowing-border {
	border: 2px solid #dadada;
	border-radius: 7px;
}

.glowing-border:focus {
	outline: none;
	border-color: #9ecaed;
	box-shadow: 0 0 10px #9ecaed;
}

.glowDiv:focus, .listButton:focus {
	outline: none;
	border-color: #0542fc;/*#0542fc;*/
	box-shadow: 0 0 10px #0542fc; /*#0542fc;*/
}

.glowDiv2:focus {
	outline: none;
	border-color: black;
	box-shadow: inset 0 0 0 1px white, inset 0 0 0 2px black;
	padding: 2px;
}

a[disabled].popfield .popfield_search_entry {
	display: none;
}

a[disabled].popfield, a[disabled].popfield:hover, a[disabled].popfield:focus {
	color: grey;
}



/** fixed_header is used for tables where you want the table head to stay still while the table scrolls **/
/** override the max-height locally - you will need to specify widths for every column **/
.fixed_header {
	width: 100%;
	table-layout: fixed;
}
.fixed_header tbody {
	display: block;
	width: 100%;
	overflow: auto;
	max-height: 250px;
}
.fixed_header thead tr {
	display: block;
}

/* crossfield classes */
.crossfield-area {

}

.crossfield-area .crossfield-top .frac-noline {
	display: inline-block;
	position: relative;
	vertical-align: bottom;
	letter-spacing: 0.001em;
	text-align: center;
}

.crossfield-area .crossfield-bottom .frac-noline {
	display: inline-block;
	position: relative;
	vertical-align: top;
	letter-spacing: 0.001em;
	text-align: center;
}


.crossfield-area .crossfield-span {
	/*width: 200px;*/   /* width is optional */
	display: inline-block;
}

.crossfield-area .crossfield-span {
	border-left: 0.1ex solid transparent;
	border-top: 0.1ex solid transparent;
	border-right: 0.1ex solid transparent;
	border-bottom: 0.1ex solid transparent;
}

.crossfield-area .crossfield-span:focus-within {
	border-left: 0.1ex dotted grey;
	border-top: 0.1ex dotted grey;
	border-right: 0.1ex dotted grey;
	border-bottom: 0.1ex dotted grey;
}

.crossfield-area .crossfield-top, .crossfield-area .crossfield-bottom {
	padding: 0 0.5em;
}

.crossfield-area .crossfield-bordered-right {
	border-right: 0.3ex solid black !important;
}

.crossfield-area .crossfield-bordered-left {
	border-left: 0.3ex solid black !important;
	margin-left: -2px;
}

.crossfield-area .frac-top > label, .frac-bottom > label {
	font-size: 75%;
	margin-bottom: 0;
}

.crossfield-area table {
	margin-top: -2em;
	margin-bottom: -2em;
}

/** radio image field classes **/

.radioimage[type=radio] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* IMAGE STYLES */
.radioimage[type=radio] {
	cursor: pointer;
}

.radioimage[type=radio] + .radiooption {
	padding: 6px;
	margin: 4px;
	opacity: 30%;
}

.radioimage[type=radio] + .radiooption:hover {
	opacity: 100%;
}


.radioimage[type=radio] + .radiooption {
	font-size: 200%;
}


.displayone .radioimage[type=radio]:not(:checked) + .radiooption {
	display: none;
}

.displayone label.radiooptionlabel:has(.radioimage:not(:checked)) {
	display: none; /* browsers must have the 'has' pseudo class working, otherwise use JS to hide */
}

label.radiooptionlabel.radioimage {
	padding-left: 0;
}

	/* CHECKED STYLES */
.radioimage[type=radio]:checked + .radiooption {
	outline: 2px solid;
	opacity: 100%;
}

.displayone .radioimage[type=radio]:checked + .radiooption {
	outline: 0px none;
}

.fontawesomestyle {
	font-family: "Font Awesome 6 Pro", "Open Sans";
	font-weight: 900;
}

.imagemenufield.mui-textfield .mui-select__menu {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 200%;
	width: 3em;
	text-align: center;
	min-width: initial;
}

.imagemenufield.mui-textfield .mui-select__menu div {
	width: 3em;
}

select.imagemenufield.fontawesomestyle {
	font-family: "Font Awesome 6 Pro";
	/*font-weight: 900;*/
	font-size: 200%;
	width: 3em;
	text-align: center;
}

.image-solid {
	font-weight: 900;
}

.image-regular {
	font-weight: 400;
}

.image-thin {
	font-weight: 200;
}

.searchablemenufield .entryfield {
	width: calc(100% - 30px);
	margin-left: 30px;
}
.searchablemenufield button.dropdown-toggle {
	position: relative; width: 24px; float: left; top: 4px;
}

.mui-select > .imagemenufieldwrapper > select.imagemenufield {
	height: initial;
	color: default;
}

div[data-originalentitytype="radioimagefield"] label {
	padding-bottom: 4px;
}

div[data-originalentitytype="rangefield"] input {
	cursor: pointer !important;
}

fieldset[data-originalentitytype="headerhtml"] {
	margin-top: 20px;
	margin-bottom: 0;
}
fieldset[data-originalentitytype="headerhtml"] legend {
	margin-top: 0;
	margin-bottom: 0;
}

ul.lfw_menu {
	top: 3em;
}

/** signature field classes */

.signatureparent {
  color:darkblue;
  background-color:lightgrey;
  /*max-width:600px;*/
  padding:20px;
}

/*This is the div within which the signature canvas is fitted*/
.signature {
	border: 2px dotted black;
	background-color:lightgrey;
}

/* Drawing the 'gripper' for touch-enabled devices */
html.touch .signaturecontent {
	float:left;
	width:92%;
}
html.touch .scrollgrabber {
	float:right;
	width:4%;
	margin-right:2%;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAAAAACh79lDAAAAAXNSR0IArs4c6QAAABJJREFUCB1jmMmQxjCT4T/DfwAPLgOXlrt3IwAAAABJRU5ErkJggg==)
}

html.borderradius .scrollgrabber {
	border-radius: 1em;
}

.pulseFade {
	animation: pulseFadeAnim 2s infinite;
	-webkit-animation: pulseFadeAnim 2s infinite;
	-moz-animation: pulseFadeAnim 2s infinite;
	-o-animation: pulseFadeAnim 2s infinite;
	-ms-animation: pulseFadeAnim 2s infinite;
}

@keyframes pulseFadeAnim {
	0% { opacity: 0; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

/* repeating groups */

.customfieldsSubGroup {
	border-radius:  5px;
}

.repeat-group-tools {
	border: thin solid grey;
	padding: 1px 8px;
	box-shadow: 2px 2px lightgrey;
	border-radius:  3px;
}

.repeat-group-tools.modified {
	box-shadow: 2px 2px red;
}


.repeat-group-btn {
	cursor: pointer;
	color: grey;
}

.repeat-group-btn:hover {
	cursor: pointer;
	color: black;
}

.repeat-group-index {
	text-decoration: underline;
}

/* toggle icons styles */
/* this is the link or the element that will contain the two icons we want to toggle between */
/*
	Example use;
	<a href="" class="toggle-icons">
        <span class="icon icon-default"><i class="fa-regular fa-star"></i></span>
        <span class="icon icon-hover"><i class="fa-solid fa-star"></i></span>
    </a>

 */
.toggle-icons {
	display: inline;
	position: relative;
}

/* general styling for both icons - mostly positioning things absolutely to lay over each other */
.toggle-icons .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: opacity .25s ease-in;
}

/* set the icon we want to show by default */
.toggle-icons .icon-default {
	opacity: 1.0;
}

/* set the icon we want to only show on hover or focus to be hidden by default */
.toggle-icons .icon-hover {
	opacity: 0;
}

/* hover states flip the opacity values and thus display our hover-only icon */
.toggle-icons:hover .icon-default,
.toggle-icons:focus .icon-default {
	opacity: 0;
}

.toggle-icons:hover .icon-hover,
.toggle-icons:focus .icon-hover {
	opacity: 1.0;
}

.toggle-icons {
	color: inherit;
}

.toggle-icons:not(:last-child) {
	/*margin-right: 10rem;*/
}



div.sched_appt a.disabled i {
	color: whitesmoke;
}

div.sched_appt a.disabled button {
	color: whitesmoke;
}


/* labels with focusable elements within
	<label class="emulateFieldlabel" >LabelText</label>
	<div class="focusList" > stuff to be focussable </div>
*/
label.emulateFieldlabel {
	font-size: 12px;
	color: gray;
	font-weight: normal;
}

label.emulateFieldlabel:has(+ .focusList:focus-within) {
	color: var(--accent_color1) !important;
}

label.emulateFieldlabel:has(+ input:focus) {
	color: var(--accent_color1) !important;
}
label.emulateFieldlabel:has(+ textarea:focus) {
	color: var(--accent_color1) !important;
}


/* only allow text areas to be resized vertically */
textarea.verticalonly {
    resize: vertical;
}
textarea.horizontalonly {
    resize: horizontal;
}