* {
	margin: 0;
	padding: 0;
    border: 0;
    outline: 0;
    font-size:inherit;
    box-sizing:border-box;
    font-family: Roboto, sans-serif;
}

/* Colors are temporary until we decide on a color strategy */

body
{
	text-align:center;
	font-family: "Roboto", sans-serif;
	font-size:12px;
    color: #222222;
}

a {
    text-decoration: none;
    color:rgba(0,122,193,1);
    cursor: pointer;
}
a:not(.icon-only):hover {
    text-decoration: underline;
}

a:not(.icon-only) i { /* we assume that the fontawesome icon is ALWAYS used before the text in the link */
    margin-right: 5px;
    vertical-align: text-bottom;
}
a.icon-right:not(.icon-only) i {
    margin-right:0;
    margin-left:5px;
}
a.bubble-link {
	box-sizing: border-box;
	padding: 0 0.3em;
	border-radius: 1em;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none !important;
	text-align: center;
	background-color: #eee;
	color: #fff;
}

.full-width {
    width: 100%;
}

.fa, .fab, .fal, .far, .fas { /* default font awesome icons to 16px */
    font-size:16px;
}
i.small {
    font-size:12px !important;
}
i.large {
    font-size:20px !important;
}
i.xlarge {
    font-size:24px !important;
}

p {
    line-height: 1.25;
}

p.tight {
    line-height: 1;
}

.page-container {
	margin:0px auto auto auto;
	width:800px;
	text-align:left;
}

.page-header {
    height:80px;
    background-color:#fff;
    border-bottom:solid 2px #e4e4e4;
    padding-left:10px;
    padding-right:10px;
}

.page-heading {
}

.main-heading {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height:30px; /* control height */
}

.sub-heading {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    /*margin-top: 5px;*/
}
    .sub-heading i {
        vertical-align:text-top;
    }


.page-content {
    padding:20px;
	text-align:left;
	background-color:White;
    position:relative;
}

.section.alt {
    background-color:#f2f2f2;
}

.section .content {
    padding:0px;
    box-sizing:border-box;
}

.section.panel > .content, .section.alt > .content {
    padding:20px;
}
.section.panel.slim > .content, .section.alt.slim > .content {
    padding:10px;
}

.section + .section {
    margin-top:20px;
}

.section.breadcrumb + .section.page-heading {
    margin-top:15px;
}

.section.page-heading + .section.blah-text {
    margin-top: 10px;
}

.content .section {
}
.content.grouped > .section + .section {
    margin-top: 10px;
}
.content.tight > .section + .section,
.content .section.accessory + .section,
.section.accessory + .section {
    margin-top: 5px;
}

.content .section.footnote {
    margin-top: 10px;
}
.section + .section.footnote {
    margin-top: 10px;
}

.content.user-input {
/*    line-height: 28px;*/
}
.content.user-input.condensed {
 /*   line-height: 25px;*/
    font-size:11px;
}

.content.user-input .footnote {
    line-height: normal;
    margin-top:5px;
}

.user-input .label, .user-input .values {
    display: inline-block;
}

.user-input .label {
    width: 100px;
    margin-top:8px;
    margin-bottom:8px;
    line-height:1.2;
    vertical-align: top;
}
.user-input.condensed .label, user-input.short .values {
    margin-top:6px;
    margin-bottom:6px;
}
.user-input .section.checkbox-height .label {
    margin-top:0;
    margin-bottom:0;
}

.user-input .values {
    line-height: 28px;
    vertical-align:top;
}
.user-input.condensed .values, .user-input.short .values {
    line-height: 25px;
}
    .user-input.short input, .user-input.short select, .user-input.short button, .user-input.short .listbox select, .user-input.short .listbox .button, .user-input.short .input-with-icon,
    .user-input.condensed input, .user-input.condensed select, .user-input.condensed button, .user-input.condensed .listbox select, .user-input.condensed .listbox .button, .user-input.condensed .input-with-icon
     {
        height: 25px;
        line-height: 25px;
    }
    .user-input.condensed input, .user-input.condensed select, .user-input.condensed button, .user-input.condensed .listbox select, .user-input.condensed .listbox .button {
        font-size:11px;
    }
    
.user-input .section.checkbox-height .values {
    line-height: normal;
}

.user-input .values > * {
    vertical-align:top;
}

.user-info .label {
    width: 100px; /* default: override based on situation */
}
.user-info .section > div {
    display:inline-block;
}

.user-input .normalized-group {
    line-height:normal;
    display:inline-block;
    margin-top:6px;
    margin-bottom:6px;
}
.user-input .content.normalized-group > .section {
    display:block;
    margin-left:0;
    margin-right:0;
}

.panel {
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0,122,193,1);
}

.title-bar {
	background-color: rgba(0,122,193,1);
	color:#fff;
	font-size:14px;
	border-radius: 4px;
    padding-left:10px;
    padding-right:10px;
    line-height:38px;
}

    .title-bar.short {
        line-height:30px;
    }

.section .title-bar {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.title-bar + .content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.title-bar.alt {
    font-size:14px;
    font-weight:bold;
    background-color: inherit;
    color: #000;
    border-bottom: solid 3px rgba(0,122,193,1);
    line-height: 30px;
    padding: 0;
}

.title-bar.segmented .section {
    display: inline-block;
    padding: 0;
    margin: 0;
}
    .title-bar.segmented > .section + .section {
        border-left: solid 1px #fff;
        padding-left:10px;
    }

.title-bar a {
    color: #eee; /* TODO client colors */
}

.title-bar a:hover {
    color: #fff; /* TODO client colors */
}

.title-bar i {
    font-size:16px;
}

/* #region tabs */
.content.tabs, .section.panel > .content.tabs {
    padding:0;
}
.section.panel > .content.tabs {
    padding-top:20px;
}

.section.tabs {
    border-bottom: solid 1px #d7d7d7;
    padding-left: 20px;
    margin-left:-20px;
    margin-right:-20px;
	position: relative;
}

.section.tabs > .decorator {
	position: absolute;
	right: 20px;
	top: 0px;
	line-height: 28px;
}

.panel .section.tabs {
    margin-left:0;
    margin-right:0;
}


.section.tabs .tab {
    border: solid 1px #d7d7d7;
    background-color: #f2f2f2;
    display: inline-block;
    padding-left:10px;
    padding-right:10px;
    padding-top:6px;
    padding-bottom: 5px;
    height: 28px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: -1px;
    text-align:center;
    min-width: 100px;
    cursor: pointer;
	position: relative;
}

	.section.tabs .tab:after {
		content: attr(data-count);
		box-sizing: border-box;
		display: inline-block;
		position: absolute;
		padding: 0 0.3em;
		border-radius: 1em;
		font-size: 10px;
		line-height: 1.5em;
		min-width: 1.5em;
		text-align: center;
		right: 12px;
		top: -0.8em;
		transform: translateX(25%);
		background: #888;
		color: #fff;
	}

.section.tabs.fit .tab {
    min-width:0;
    width:auto;
}

.section.tabs.small .tab {
    min-width: 75px;
}

.section.tabs.large .tab {
    min-width: 125px;
}

.section.tabs.xlarge .tab {
    min-width: 150px;
}

.section.tabs .tab.selected {
    padding-bottom: 6px;
    border-bottom: solid 1px #fff;
    background-color:#fff;
}

.section.tab {
    margin-top: 20px;
    margin-bottom: 20px;
    display: none;
}

.section.panel > .content.tabs > .section.tab {
    margin-left:20px;
    margin-right:20px;
}

.section.tab.selected {
    display: block;
}

/* #endregion*/


.data-container .row {
	line-height: 28px;
	border-bottom: solid 1px #ccc;
	padding-left:5px;
}

.data-container .row:first-child {
	border-top: solid 1px #ccc;
}

.data-container:not(.no-shade) .row:nth-child(2n) {
	background-color:#f2f2f2;
}

hr {
    height:1px;
    background-color:rgba(0,122,193,1);
}

/* Table Style - instead of table-container we need concepts to use to differentiate how different tables work */
.table-container > table {
	border-spacing: 4px;
	border-collapse: collapse;
	width:100%;
}
.dynamic-table > .table-container > table {
    width:auto;
    min-width:100%;
}
td:empty:after, th:empty:after {
    content: '\a0';
}
td, th, .ehrTableHeader div {
    text-align:left; /* default for text-align in tables, but easy to override */
}


.table-container > table > * > tr > *,
.ehrTableHeader div {
	height: 32px;
	padding:5px;
}
.ehrTableHeader div {
    padding-top:0px;
    padding-bottom:0px;
}

td > .table-container { background-color: #fff; margin:5px; }


.ehrTableHeader {
    height: 32px;
    font-weight:bold;
    border-top:solid 1px #ccc;
}
.table-normal-height {
    height: 32px;
}
.ehrTableHeader,
.table-container > table > thead  {
   background-color:#fff;
}
.ehrTableFixed .fixed-cell {
    position:absolute;
    padding-left:5px;
    padding-right:5px;
}
.table-container .ehrTableHeader {
    line-height:32px;
}
.ehrTableHeader .ehrtable_fixedheader {
    padding:0;
}

.table-container.compact > table > * > tr > *,
.table-container.compact .ehrTableHeader,
.table-container.compact .ehrTableHeader div,
.table-compact-height {
    height: 20px;
    padding-top:3px;
    padding-bottom:3px;
}
.table-container.compact .ehrTableHeader div {
    line-height: 20px;
    padding-top:0px;
    padding-bottom:0px;
}

.table-container.tall > table > * > tr > *,
.table-container.tall .ehrTableHeader,
.table-container.tall .ehrTableHeader div,
.table-tall-height {
    height: 40px;
}

.table-container.double > table > * > tr > td,
.table-container.double .ehrTableHeader,
.table-container.double .ehrTableHeader div,
.table-double-height {
    height: 45px;
}

.table-container.double > table > * > tr > th {
    height:30px;
}

.table-container.dense > table > * > tr > * {
    font-size: 11px;
    padding-left:3px;
    padding-right:3px;
}

.table-container.xdense > table > * > tr > * {
    font-size: 10px;
    padding-left:2px;
    padding-right:2px;
}

.table-container.fit > table > * > tr > * {
    height:auto;
    padding-top:5px;
    padding-bottom:5px;
    vertical-align:top;
}

.table-container > table > tbody > tr {
	border-bottom: solid 1px #ccc;
}
.table-container.rows-selectable > table > tbody > tr {
	cursor: pointer;
}

.table-container > table > tbody > tr:first-child > td, .table-container > table > thead > tr  {
	border-top: solid 1px #ccc;
}

.table-container:not(.no-shade) > table > tbody > tr:nth-child(2n+1) {
	background-color:#f2f2f2;
}
.table-container:not(.no-shade):not(.grouped) > table > tbody > tr:nth-child(2n) {
	background-color:#fff;
}

.table-container.stacked > table > * > tr > * {
    border: solid 1px #ccc;
}

.table-container.stacked th[colspan] {
    text-align:center;
}

.table-container > table > tfoot {
	font-weight:bold;
    background-color:#d7d7d7;
}
.table-container > table > tfoot.alt {
    background-color: rgba(0,122,193,1);
    color:#fff;
}
	.table-container > table > tfoot a,
	.table-container > table > tfoot i.fa,
	.table-container > table > tfoot i.fas,
	.table-container > table > tfoot i.far,
	.table-container > table > tfoot i.fao,
	.table-container > table > tfoot i.fab {
		color: inherit;
	}

.table-container i.fa,
.table-container i.fas,
.table-container i.far,
.table-container i.fao,
.table-container i.fab {
    line-height:12px;
    vertical-align:middle;
}

.table-container.dense i.fa,
.table-container.dense i.fas,
.table-container.dense i.far,
.table-container.dense i.fao,
.table-container.dense i.fab {
/*    line-height:11px;*/
}


.table-container.tall .fa,
.table-container.tall .fas,
.table-container.tall .far,
.table-container.tall .fao,
.table-container.tall .fab,
.table-container.double tbody .fa,
.table-container.double tbody .fas,
.table-container.double tbody .far,
.table-container.double tbody .fao,
.table-container.double tbody .fab {
    font-size:20px;
}
.table-container .fa-asterisk {
    font-size:8px !important;
    vertical-align:text-top !important;
}

.table-container.compact .fa,
.table-container.compact .fas,
.table-container.compact .far,
.table-container.compact .fao,
.table-container.compact .fab {
    font-size:12px;
}

.table-container a.icon-only + a.icon-only {
    margin-left:5px;
}

.table-container .paging-controls {
    line-height:32px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #e8e8e8;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}

.table-container .paging-controls {
    line-height: 32px;
}

.table-container.compact .paging-controls {
    line-height: 20px;
}

.table-container.tall .paging-controls {
    line-height: 40px;
}

.table-container.double .paging-controls {
    line-height: 30px;
}

.table-container .paging-controls .page-link {
    display: inline-block;
    width: 25px;
    text-align: center;
    cursor:pointer;
}

.table-container .paging-controls i {
    margin:0px;
    font-size:12px;
    vertical-align: inherit;
}

td > .section, .overflow-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

td > .section + .section {
   margin: 0;
}

.table-container:not(.no-shade) > table > tbody > tr.group-header,
.table-container:not(.no-shade) > table > tbody > tr.group-footer {
    font-weight:bold;
    background-color:#e5e5e5;
}

tr.group-header.alt {
    background-color: #fff !important;
    border-bottom-width: 2px;
}
tr.alt.group-header > * {
    padding-bottom: 0px;
}

tr.group-header .collapser {
    width:20px;
    font-size:12px;
    text-align:center;
}
tbody.collapsed > tr:not(.group-header) {
    display:none;
}

tbody tr.group-header .controls {
    width: 20px;
}
tbody .hide-when-open {
    display:none;
}
tbody.collapsed .hide-when-open {
    display:inline-block;
}

tbody:not(.collapsed) .hide-when-collapsed {
    display:inline-block;
}
tbody.collapsed .hide-when-collapsed {
    display:none;
}


.table-container .empty-spacer {
    background-color:#fff !important;
    color:#fff !important;
}
.table-container .empty-spacer.clean {
    border: none !important;
}


.table-container.multi-line:not(.no-shade):not(.grouped) > table > tbody > tr:nth-child(2n+1),
.table-container.multi-line:not(.no-shade):not(.grouped) > table > tbody > tr:nth-child(2n) {
    background-color:transparent;
}
.table-container.multi-line > table > tbody:nth-child(2n) {
	background-color:#f2f2f2;
}
.table-container.multi-line > table > tbody:nth-child(2n+1) {
	background-color:#fff;
}
.table-container.multi-line > table > tbody > tr {
    border-width:0;
}
.table-container.multi-line > table > tbody {
	border-bottom: solid 1px #ccc;
}
.table-container.multi-line > table > tbody:last-child {
	border-width:0px;
}
tr.inline-note td {
    width: 100px;
    overflow: visible;
    white-space: nowrap;
    height: 16px;
    font-size: 11px;
    font-style:italic;
}
.table-container tr.inline-note td i {
    font-size: 12px;
    margin-top:1px;
    vertical-align:top;
    margin-right:5px;
}
.table-container tr.inline-note td p {
    display:inline-block;
    white-space:normal;
    margin-right:16px;
}

.section.panel > .table-container:not(.content) > table > :last-child, .section.panel > .table-container:not(.content) > table > :last-child tr:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom:none;
}
.section.panel > .table-container:not(.content) > table > :last-child tr:last-child td:first-child, .section.panel > .table-container:not(.content) > table > :last-child tr:last-child th:first-child {
    border-bottom-left-radius: 4px;
}
.section.panel > .table-container:not(.content) > table > :last-child tr:last-child td:last-child, .section.panel > .table-container:not(.content) > table > :last-child tr:last-child th:last-child {
    border-bottom-right-radius: 4px;
}

.section.dynamic-table {
    position:relative;
    display:inline-block;
    width:100%;
}

.section.dynamic-table > .table-container > table {
    table-layout:fixed;
}

.dynamic-table > .table-container.fixed-headers {
    overflow-y:auto;
}

.dynamic-table > .table-container > .fixed-table {
    position:absolute;
    top:0px;
    left:0;
    width:auto;
}
.dynamic-table > .table-container > .fixed-header-table {
	background-image: linear-gradient(to bottom, #ccc 1px, transparent 1px);
}
.dynamic-table > .title-bar + .table-container .fixed-table {
    top:38px;
}
.dynamic-table > .table-container.stacked > .table-container.stacked.fixed-header-table {
    background-image:
        linear-gradient(to bottom, #ccc 1px, transparent 1px),
        linear-gradient(to left, #ccc 1px, transparent 1px),
        linear-gradient(to top, #ccc 1px, transparent 1px);
}
.dynamic-table > .table-container.stacked .fixed-header-table > table > thead > tr > :last-child {
	border-right-color: transparent;
}

ul.standard {
    margin-left: 20px;
}


.horizontal-2 {
   overflow: visible;
}
.horizontal-2::after {
   content: "";
   clear:both;
   display:table;
}

    .horizontal-2 > .section {
       display: inline-block;
       width: 50%;
       float:left;
       clear: none;
       margin-top: 0;
    }
    .horizontal-2 > .section.right {
        text-align:right;
    }

.content.horizontal-2 > .section {
   width: 49%;
   margin-left:2%;
   vertical-align: top;
}

    .horizontal-2.cells > .section {
        display: table-cell;
        width:1%;
        float:none;
    }

.title-bar.horizontal-2 > .section {
   width: 50%;
}

.title-bar.horizontal-2 > .section:last-child {
   text-align:right;
   font-size:12px;
}

.horizontal-2 > .section:first-child {
   margin-left:0;
}
.horizontal-2 > .section:first-child:empty:after {
    content: '\a0';
}

.control-row {
    display:block;
    display:flex;
    flex-direction: row;
}

.control-item {
    vertical-align: top;
    display:inline-block;
    display:flex;
    flex-direction: column;
    width: 200px;
    flex:1;
}
.control-item .label {
    margin:0;
    margin-bottom:5px;
}
.control-item + .control-item {
    margin-left: 10px;
}
.control-item > input, .control-item > label, .control-item > select, .control-item > .is-control {
    width: 100%;
}
.control-item .section {
    white-space:nowrap;
}
.control-item .section + .section {
    margin-top: 5px;
}

/* #region flex */
.flex-enabled .flex-row {
    display: flex;
    flex-direction: row;
}

.flex-item {
    display: inline-block;
}

.flex-enabled .flex-row > .flex-item {
    flex: initial;
    display: flex;
}

.flex-enabled .flex-row > .flex-item:last-child {
    flex: auto;
}

/* #endregion*/


/* #region Controls */
.control-height {
    line-height: 28px;
}

.control-height.short {
    line-height: 25px;
}

input, select, button, textarea {
	height:28px;
	/*line-height:28px;*/
    line-height:normal;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(0,122,193,1);
	padding-left:6px;
	padding-right:6px;
    font-size:12px;
}

    input.condensed, select.condensed, button.condensed {
        height: 25px;
        line-height: 23px;
        font-size: 11px;
        padding-left: 3px;
        padding-right: 3px;
    }

    input.short, select.short, button.short {
        height: 25px;
        line-height:23px;
    }

.select2-container .select2-selection, .select2-dropdown, .select2-search {
	border-color: rgba(0,122,193,1);
}

textarea {
    height: auto;
    line-height:normal;
    padding-top:6px;
    padding-bottom:6px;
    font-family: Roboto, Arial;
}

textarea.condensed {
    font-size: 11px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top:3px;
    padding-bottom:3px;
}

label.wrappable, .user-input .content.normalized-group > label.section.wrappable {
    text-indent:-16px;
    margin-left: 16px;
}

input[type="checkbox"], input[type="radio"] {
    line-height: normal !important;
    height: auto !important;
    vertical-align: text-top;
    padding:0;
}

label input[type="checkbox"], label input[type="radio"] {
    margin-right:3px;
}

input, button, textarea {
	margin:0px;
}

input + input, input + select, input + button, select + select, select + input, select + label, input + label, label + label, button + input,
a + a, a + input, a + select, a +  label, input + a, select + a,  .is-control + a, a + .is-control,
.is-control + input, .is-control + select, .is-control + label, .is-control + button, input + .is-control, select + .is-control, button + .is-control, .is-control + .is-control {
    margin-left: 10px;
}
label + select,
label + input,
label + a,
label + .is-control,
button + button,
button + .menu-button-wrap,
.menu-button-wrap + button,
.menu-button-wrap + .menu-button-wrap,
a.icon-only + a.icon-only  {
    margin-left:5px;
}

.grouped-items > * + * {
    margin-left: 5px !important;
}

button, input[type="button"] {
	background-color: rgba(0, 122,193,1);
	color: white;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 100px;
}

.buttons.right {
    text-align:right;
}

.buttons.short button, button.short {
    height: 25px;
    line-height:25px;
}

.buttons.small button, .button.small, button.small {
    min-width: 75px;
}

.buttons.large button, .button.large, button.large {
    min-width: 125px;
}

.buttons.xlarge button, .button.xlarge, button.xlarge {
    min-width: 150px;
}
.buttons.fit button, .button.fit, button.fit {
    width: auto;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
}

input:focus, select:focus {
    border-color: rgba(0, 80,100,1);
}

button:hover:not(.no-hover), input[type="button"]:hover:not(.no-hover) {
	background-color: rgba(0, 154,213,1);
    border-color: rgba(0, 154,213,1);
}

/* when a button is clicked */
button:active, input[type="button"]:active {
	background-color: rgba(0, 154,213,0.5);
    border-color: rgba(0, 74,124,0.5);
	color: #eee;
}

.listbox select {
	/*border:none;*/
	padding-left:4px;
	padding-right:20px;
	margin:0px;
	/*border-radius: 4px;*/
	-webkit-appearance: none;
    -moz-appearance: none;
    /*height:28px;*/
    line-height:28px;
}

.listbox select::-ms-expand { /* IE 10 remove arrow*/
    display: none;
}

.listbox {
	display:inline-block;
/*	border-style: solid;
	border-radius: 4px;
	border-width: 1px;*/
	border-color: rgba(0,122,193,1);
	position:relative;
/*    line-height:normal;*/
}

.listbox.short {
    height:25px;
}

.listbox.selected {
    border-color: rgba(0, 80,100,1);
}

.listbox.condensed select {
    height:25px;
    line-height:25px;
    font-size:11px;
}

.listbox.short select {
    height:25px;
    line-height:25px;
}

.listbox .button {
	position:absolute;
	right: 0;
	top: 0;
	bottom:0;
	width: 25px;
	height:28px;
	line-height:28px;
    color: rgba(0,122,193,1);
	pointer-events: none;
	text-align:center;
}

    .listbox .button i {
        line-height:inherit;
        font-size:16px !important;
    }

select[size] {
    padding:0;
    overflow-y: auto;
}
select[size] option {
    padding-top:2px;
    padding-bottom:2px;
    padding-left:6px;
    padding-right:6px;
}
select[size] option:first-child {
    padding-top:6px;
}
select[size] option:last-child {
    padding-bottom:6px;
}

.listbox.condensed .button {
    width:25px;
    height:25px;
    line-height:25px;
}

.listbox.short .button {
    height:25px;
    line-height:25px;
}

.listbox.selected .button {
    color: rgba(0, 80,100,1);
}

.title-bar .listbox {
    line-height:normal;
}

.input-with-icon {
    position:relative;
    display:inline-block;
    line-height:28px;
}

.input-with-icon i {
    line-height: inherit;
}

.input-with-icon.condensed {
    line-height:25px;
    height:25px;
    font-size:11px;
}
    .input-with-icon.condensed input {
        font-size: 11px;
        height: 25px;
        line-height:25px;
    }
.input-with-icon .icon {
    position:absolute;
    top:0px;
    right:5px;
    color: rgba(0,122,193,1);
    font-size:18px;
    line-height: inherit;
}
    .input-with-icon .icon i {
        font-size:18px !important;
    }
    .input-with-icon .icon i.fa-caret-down {
        font-size:16px !important;
    }

    .input-with-icon.condensed .icon {
        font-size: 15px;
    }
        .input-with-icon.condensed .icon i {
            font-size: 15px !important;
        }
    .input-with-icon.condensed i, .input-with-icon.short i  {
        line-height:25px
    }
.input-with-icon.searchbox .icon {
    right:8px;
}
.input-with-icon input {
    padding-right: 18px;
    text-overflow: ellipsis;
}

.icon-merged-input {
    position:relative;
}
.icon-merged-input .input-image {
   position:absolute;
   height:26px;
   padding: 5px;
   background-color:#f2f2f2;
   margin:1px;
   border-radius:0px;
   border-top-left-radius:3px;
   border-bottom-left-radius:3px;
   border-right: solid 1px rgba(0, 122, 193, 1);
   color: rgba(0, 122, 193, 1);
}
    .icon-merged-input .input-image i {
        color: rgba(0, 122, 193, 1);
        text-align:center;
        width:16px;
    }
.icon-merged-input input {
   padding-left: 34px;
}

.searchbox em {
	font-style:normal;
	font-weight:bold;
	text-decoration:none;
}

.searchbox .child-spacer {
	display:inline-block;
	width:10px;
}

.searchbox input::-ms-clear, .input-with-icon input::-ms-clear { /* IE remove X option*/
    display: none;
    width:0px;
    height:0px;
}

.searchbox .searchbox-input {
	position:absolute;
	left: 0;
	top: 0;
	margin-left: 0;
	background-color:transparent;
}

.input-with-icon.selected .icon {
    color: rgba(0, 80,100,1);
}

input.datepicker, input.small, input.currency, input.numeric, select.small, textarea.small {
    width:100px;
}
input.medium, select.medium, textarea.medium {
    width:200px;
}
input.large, select.large, textarea.large {
    width:400px;
}

input.currency, input.numeric {
    text-align:right;
}
input.currency {
    padding-left: 1em;
}
.currency-input-icon {
    display:inline;
    position:relative;
    color:#555;
}
.currency-input-icon + input.currency {
    margin-left:0;
}
.currency-input-icon::after {
    content: '$';
    left:4px;
    position:absolute;
    line-height:28px;
	align-content: center;
}
    .currency-input-icon.short::after, .currency-input-icon.condensed::after {
        line-height:26px;
    }

/* menu button */
button i {
    margin-left:5px;
    vertical-align: text-bottom;
}

button i.left {
    margin-left:0;
    margin-right:5px;
}

.menu-button-wrap {
    display:inline-block;
    position:relative;
    line-height: normal;
}

.menu-button + ul {
	top: 28px;
}

.menu-button-wrap ul {
    position:absolute;
    background-color:#f2f2f2;
    text-align:left;
    display:none;
    box-shadow: 0px 2px 3px rgba(80, 80, 80, 0.35);
}

.menu-button-wrap.menu-detached ul {
	box-shadow: 0px 4px 8px rgba(80, 80, 80, 0.7)
}

.menu-button-wrap.menu-left > ul {
    right:0;
}
.menu-button-wrap.menu-up > ul {
    bottom: 28px;
    top: auto;
    box-shadow: 0px 0px 3px rgba(80,80,80,0.35);
}

.menu-button-wrap.menu-shown > ul {
    display: block;
}

.menu-button-wrap > ul li {
    list-style-type: none;
    display:block;
    padding-left:10px;
    padding-right:10px;
    line-height:25px;
    height:25px;
    white-space:nowrap;
}

.menu-button-wrap > ul li:hover:not(.spacer) {
    background-color:#fff;
}

.menu-button-wrap > ul li > a {
    display: block;
}
.menu-button-wrap > ul li.spacer {
    padding:5px;
    height:0;
    line-height:0;
}
.menu-button-wrap > ul li.spacer > hr {
    height:0px;
    border:none;
    border-top:1px solid #aaa;
}

.menu-button-wrap > ul li.option-disabled {
	background: #dddddd;
}

.menu-button-wrap > ul li.checkbox:not(.checked) i.fa-check-square {
	display: none;
}
.menu-button-wrap > ul li.checkbox.checked i.fa-square {
	display: none;
}

.title-bar .hamburger-wrapper ul {
    top:30px;
    left:-9px;
    background-color:rgba(0,122,193,1);
    box-shadow: 1px 1px 5px #888888;
}
.title-bar .hamburger-wrapper.menu-up ul {
    bottom:30px;
    top:auto;
    box-shadow: 1px 0px 5px #888888;
}

.title-bar .hamburger-wrapper ul li {
    min-width:50px;
}


/* #endregion */


/* #region page-header */
.page-header {
    color: rgba(0,122,193,1); /* replace with client colors*/
    position:relative;
}
.page-header .logo {
    margin-left: 10px;
}
.page-header .logo > img, .page-header .logo > a, .page-header .logo > a > img {
    vertical-align: middle;
}
.page-header .logo > a:focus {
    box-shadow: none;
}
.page-header > div, .page-header .menu > div {
    display: inline-block;
    line-height: 80px;
}
.page-header .menu {
    position: absolute;
    right: 10px;
    top: -1px;
}
    .page-header .menu > div {
        margin-left:5px;
        vertical-align: middle;
    }

    .page-header .menu > .separator {
        border-left: 1px solid #ccc;
        height: 40px;
        margin-left: 10px;
    }

    .page-header .menu > .switch,
    .page-header .menu > .emp-photo {
        margin-right: 5px;
    }

    .page-header .menu > .emp-photo,
    .page-header .menu > .separator {
        display: none;
    }

        .page-header .menu > .emp-photo,
        .page-header .menu > .emp-photo > .photo {
            width: 32px;
            height: 32px;
        }

.page-header .menu div i {
    font-size: 20px;
    margin:5px;
    vertical-align: middle;
}

.page-header .menu > .emp-photo > i {
    font-size: 20px;
    width: 32px;
    line-height: 32px;
    margin: 0;
}

.page-header .menu .help .menu-button {
    cursor: pointer;
}

.page-header .menu .notifs > a {
    position: relative;
}

.page-header .menu .notifs > a:before {
    content: attr(data-count);
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    padding: 0 0.3em;
    border-radius: 1em;
    font-size: 10px;
    line-height: 1.5em;
    min-width: 1.5em;
    text-align: center;
    right: 0;
    top: -0.8em;
    transform: translateX(25%);
    background: red;    /* Color: Message Count */
    color: #fff;        /* Color: Menu Text */
}

.use-top-nav .page-header .menu > .emp-photo,
.use-top-nav .page-header .menu > .separator {
    display: inline-block;
}
/* #endregion */

.heading-buttons {
    position:absolute;
    top:0;
    right:20px;
}

.breadcrumb ~ .heading-buttons {
    top:20px;
}
.secondary-page .breadcrumb ~ .heading-buttons {
    top:0px;
}

/* #region hover content */
.has-hover-section{
    position:relative;
    cursor:pointer;
}
.has-hover-section .hover {
    display: none;
}

.has-hover-section.hover-shown .hover, .has-hover-section:hover .hover {
    display: inline-block;
}
.hover.section {
    font-size:12px;
    font-weight:normal;
    line-height:normal;
    font-family:Roboto;
    border-radius:10px;
    padding:10px;
    position:absolute;
    bottom: 0;
    left: 0;
    max-width:400px;
    margin-bottom:20px;
    background-color:#fff;
    color:#444;
    box-shadow: 1px 1px 5px #cccccc;
}
.main-heading .hover.section, .hover.section.down  {
    bottom: auto;
    top: 1rem;
}
.hover.section.left {
    left: auto;
    right: 0;
}
.hover.section .title {
    font-weight:bold;
    font-size:12px;
}
.hover.section .title + .content {
    margin-top: 10px;
}
.hover.section .close-hover,
.personal-preferences-dialog .close-hover {
    display:none;
    position:absolute;
    top:-6px;
    right:-6px;
    font-size:16px;
    color: #990000;
    background-color: #fff;
    border-radius: 8px;
    border: solid 2px #fff;
}
.personal-preferences-dialog .close-hover {
    display:inline-block;
    top:-12px;
    right:-12px;
}

.has-hover-section.hover-shown .close-hover {
    display:inline-block;
}
.hover-shown .hover.section.zlayer {
    box-shadow: rgb(187, 187, 187) 1px 1px 10px;
}
/* #endregion */

input.has-error, select.has-error, textarea.has-error {
	background-color: #f2001d48;
	border-color: #f2001d48;
}
label.has-error {
	color: #c2000b;
}

.highlight-text {
   color: #FF0000 !important;
}
.highlight-text-bold {
   color: #FF0000;
   font-weight:bold;
}
.highlight-text-light {
   color: #FFFF00;
}
.highlight-text-light-bold {
   color: #FFFF00;
   font-weight:bold;
}

.section.panel.highlight-panel {
	border-color: red;
}
.section.panel.highlight-panel * {
	color: red !important;
}


/* #region calendar */
.section.calendar {
    display:inline-block;
    position:relative;
}
.calendar i {
    line-height:normal;
}
.calendar .title-bar {
    height: 30px;
    line-height: 30px;
    text-align:center;
}
.calendar .table-container tbody tr {
    border: none !important;
}

.calendar .table-container td {
    background-color:#fff;
    position:relative;
    width: 14.28%;
    width: 30px;
    border: none;
    text-align:center;
    height:25px;
    line-height:normal;
}
.calendar .table-container td {
    padding-top:0px;
    padding-bottom:0;
}
.calendar .table-container table {
    table-layout:fixed;
    border: solid 1px #999;
    border-collapse: separate;
    border-spacing:0px;
}
.calendar .table-container thead td {
    background-color:#d7d7d7;
}
.calendar .table-container tbody td {
    cursor: pointer;
}
.calendar .outside-month {
    color: #aaa;
}
.calendar.hide-outside .outside-month > * {
    display:none;
}
.calendar.hide-outside .outside-month {
    background-color:#fff !important;
}
.calendar td.selected {
    font-weight:bold;
}
.calendar .title-bar .text {
    display:inline-block;
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.calendar .title-bar i {
    vertical-align:middle;
    line-height:30px;
}
.calendar i.month-back {
    float:left;
}
.calendar i.month-forward {
    float:right;
}
.calendar .title-bar .year {
    cursor:pointer;
}
.calendar .year-picker {
    position:absolute;
    width:100%;
    top:30px;
    color:#fff;
    background-color:rgba(0,122,193,1);
    user-select: none;
    line-height:25px;
    -ms-user-select: none;
    -moz-user-select: none;
}
    .calendar .year-picker table {
        width: 100%;
    }
.calendar .year-picker td {
    text-align:center;
    width:25%;
}
.calendar .year-picker td.current {
    background-color:#fff;
    color:#000;
}
.calendar .year-picker td:hover {
    font-weight:bold;
    cursor:pointer;
}

.calendar td.HoursWorked, .swatch.HoursWorked {
    background-color:#FF7F27;
}
.calendar td.PTO1, .swatch.PTO1 {
    background-color:#76C85E;
}
.calendar td.PTO2, .swatch.PTO2 {
    background-color:#CCCC33;
}
.calendar td.PTO3, .swatch.PTO3 {
    background-color:#00838F;
}
.calendar td.OtherMultiple, .swatch.OtherMultiple {
    background-color:#5D4037;
}
.calendar td.CompanyHoliday, .swatch.CompanyHoliday {
    background-color:#868686;
}
.calendar td.BankHoliday, .swatch.BankHoliday {
    background-color:#CCCC33;
}
.calendar td.PayDate, .swatch.PayDate {
    background-color:#76C85E;
}
.calendar td.LeaveReqApproved, .swatch.LeaveReqApproved {
    background-color: #76C85E;
}
.calendar td.LeaveRequested, .swatch.LeaveRequested {
   background-color: #76C85E;
}
.calendar td.LeaveRequested, .swatch.LeaveRequested {
    background-color:#CCCC33;
}
.calendar td.Weekend, .swatch.Weekend {
    background-color:#F2F2F2;
}
.calendar td.CurrentDate, .swatch.CurrentDate {
    background-color:#FFFFFF;
    font-weight:bold;
}
.calendar td.CurrentPayPeriod, .swatch.CurrentPayPeriod {
    background-color:#F2F2F2;
}
.calendar td.selected {
/* primary color */
}
.calendar td .day-number {
    line-height:24px;
}
.calendar td .day-highlight {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
.calendar td.HoursWorkedBorder .day-highlight {
    border-color:#FF7F27;
    border-style:solid;
    border-width:3px;
}
.calendar td.PTO1Border .day-highlight {
    border-color:#76C85E;
    border-style:solid;
    border-width:3px;
}
.calendar td.PTO2Border .day-highlight {
    border-color:#CCCC33;
    border-style:solid;
    border-width:3px;
}
.calendar td.PTO3Border .day-highlight {
    border-color:#00838F;
    border-style:solid;
    border-width:3px;
}
.calendar td.OtherMultipleBorder .day-highlight {
    border-color:#5D4037;
    border-style:solid;
    border-width:3px;
}
.calendar td.CurrentPayPeriodBorder .day-highlight {
    border-color:#F2F2F2;
    border-style:solid;
    border-width:3px;
}
.calendar td.CompanyHolidayBorder .day-highlight {
    border-color:#868686;
    border-style:solid;
    border-width:3px;
}
.calendar td.BankHolidayBorder .day-highlight {
    border-color:#CCCC33;
    border-style:solid;
    border-width:3px;
}
.calendar td.PayDateBorder .day-highlight {
    border-color:#76C85E;
    border-style:solid;
    border-width:3px;
}
.calendar td.LeaveRequestedBorder .day-highlight  {
    border-color: #76C85E;
    border-style:solid;
    border-width:3px;
}
.calendar td.LeaveRequestedBorder .day-highlight  {
    border-color:#CCCC33;
    border-style:solid;
    border-width:3px;
}
.calendar td.selectedBorder .day-highlight {
    border-style:solid;
    border-width:3px;
}
.calendar td.HalfDay .day-number:after {
	content: '*';
	position: absolute;
}

.calendar .controls {
    display:none;
}
.calendar.has-controls .controls {
    display:block;
    background-color: #fff;
    text-align:center;
    border-width:1px;
    border-style: solid;
    border-top-style:none;
    border-top-width:0px;
    border-color:#999;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
}

.datepicker .section.calendar {
    display:none;
    position:absolute;
    top:28px;
    left:0px;
}
.datepicker.calendar-left .section.calendar {
    right:0px;
    left:auto;
}
.datepicker.calendar-up .section.calendar {
    bottom:28px;
    top:auto;
}
.datepicker.calendar-shown .section.calendar {
    display:inline-block;
}

.swatch {
    display:inline-block;
    width:15px;
    height:15px;
    border-radius:4px;
    vertical-align:bottom;
    margin-right:5px;
}
/* #endregion */

/* #region employee photo */
.employee-photo {
    text-align:center;
    position:relative;
    width: 48px;
    height:48px;
    display:inline-block;
    background-color:#d7d7d7;
    border-radius:10%;
    overflow:hidden;
}
.employee-photo > i {
    position: absolute;
    font-size: 32px;
    width:48px;
    left: 0px;
    line-height:48px;
    color: #fff !important;
}
.employee-photo > .photo {
    position: absolute;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    background-size: contain !important;
	background-position: center;
    background-repeat: no-repeat !important;
}
.employee-photo.small, .employee-photo.small > .photo {
    width:38px;
    height:38px;
}
    .employee-photo.small > i {
        font-size:24px;
        width:38px;
        line-height:38px;
    }
.employee-photo.large, .employee-photo.large > .photo {
    width:66px;
    height:66px;
}
    .employee-photo.large > i {
        font-size:48px;
        width:66px;
        line-height:66px;
    }
/* #endregion */

/* #region accordion */
.accordion > .accordion-bar {
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.accordion.accordion-hidden > :not(.accordion-bar) {
    display:none;
}

.accordion .accordion-bar .hide-when-accordion-shown {
    display:none;
}
.accordion.accordion-hidden .accordion-bar .hide-when-accordion-hidden {
    display:none;
}
.accordion.accordion-hidden .accordion-bar .hide-when-accordion-shown {
    display:inline-block;
    display:initial;
}
.section.accordion-exclusive + .section.accordion-exclusive {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: #fff;
}

.section.accordion-exclusive + .section.accordion-exclusive > .title-bar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.section.accordion-exclusive {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.section.accordion-exclusive:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
/* #endregion */

/* #region dialogs */
.ehr-dialog {
    border-radius:4px;
}
.ehr-dialog > .title-bar {
    background-color:rgba(0,122,193,1);
    color: #fff;
    font-weight:bold;
    text-align:left;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ehr-dialog > .content {
    background-color: #f2f2f2;
    padding:20px;
    text-align:left;
    max-height:90vh;
    max-height:calc(100vh - 100px);
}

.ehr-dialog .ehrpopup-button-area {
    background-color: #999999;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.dlg-fading button {
	pointer-events: none;
}
/* #endregion */

.zlayer {
    z-index: 1;
}
.zlayer .zlayer {
    z-index: 2;
}
.zlayer .zlayer .zlayer {
    z-index: 3;
}

.indent {
    padding-left:20px;
}

/* #region icon specifics */
i.fa-asterisk {
    color: #cc3300 !important;
    font-size:8px;
    vertical-align:text-top;
}
.fa-asterisk.super {/* you probably should not use this anymore*/
    vertical-align:super; 
}
/* #endregion */

.json-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 16px;
    display: table-cell;
    vertical-align: middle;
}
.json-overlay .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #555;
    opacity: 0.5;
    text-align: center;
}
.json-overlay .loading {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #eee;
    padding: 10px;
    border: solid 1px #888;
    border-radius: 4px;
    max-width:400px;
    transform: translate(-50%, -50%);
}
    .json-overlay .loading i {
        font-size:inherit;
    }

.flex-enabled .transfer-list {
    display:flex;
    flex-direction:row;
}
.transfer-list > .list-segment {
    display: table-cell;
    width: 50%;
    vertical-align:top;
}
.flex-enabled .transfer-list > .list-segment {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.transfer-list .title {
    white-space: nowrap;
}
.transfer-list .title > * {
    display: inline-block;
    width: 60%;
}
.transfer-list .title + * {
    margin-top:5px;
}
.transfer-list .title > a.filters {
    text-align:right;
    width:38%;
}
.transfer-list .title > a.filters i {
    font-size:12px;
    margin:0;
    vertical-align: baseline;
}
.transfer-list.no-filters .filters {
    display:none;
}
.transfer-list > .controls {
    width: auto;
    display:table-cell;
    padding: 10px;
    padding-top:29px;
    vertical-align:middle;
}
.flex-enabled .transfer-list > .controls {
    display:flex;
    margin-top:20px;
    padding-top:10px;
    flex-direction:column;
    align-self:center;
}
.transfer-list > .controls i {
    margin: 0;
    vertical-align: text-bottom;
}

.transfer-list .controls button {
    width: 50px;
    margin: 0;
    min-width:auto;
    display:block;
}
    .transfer-list .controls button + button {
        margin-top: 5px;
    }

.transfer-list .controls.ordering {
    padding:5px;
    padding-top:24px;
}
.flex-enabled .transfer-list .controls.ordering {
    padding-top:5px;
}


.transfer-list .controls.ordering a {
    margin:0;
}

.transfer-list select {
    width:100%;
    margin:0;
}
.transfer-list select[size] {
    height: 200px;
}

/* #region Panel Menu */
.panel-menu {
    position:relative;
    padding-left:125px;
}
.panel-menu > ul {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    width:125px;
    flex-direction:column;
    overflow:auto;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;

    background-color: #d7d7d7;
    color: #000;
}


.panel-menu > ul .panel-menu-item {
    height: 40px;
    display:flex;
    align-items: center;
    padding-left:10px;
    padding-right:10px;
    width:100%;
    vertical-align:middle;
    list-style: none;
    cursor:pointer;

    border-bottom:solid 1px #fff;
}
.panel-menu > ul .panel-menu-item.selected {
    background-color: #e7e7e7;
}
.panel-menu >  ul .panel-menu-item:hover {
    background-color: #fff;
}

.section.panel-menu > .content {
    padding: 0px;
}
.section.panel-menu > .content > .section > .title-bar {
    border-top-left-radius: 0px;
}
.section.panel-menu > .content > .section > .content {
    padding: 20px;
    overflow:auto;
    height: 100%;
}
.section.panel-menu > .content > .section > .title-bar + .content {
    border-top-left-radius: 0px;
    height: calc(100% - 38px);
}
.panel-menu > .content {
    border-left: solid 1px #333;
    height: 100%;
}
    .panel-menu > .content > .section {
        margin-top:0px;
        height:100%;
        overflow:auto;
    }
.panel-menu > .content > .section:not(.selected) {
    display:none;
}
/* #endregion*/

/* #region survey */
.section.panel.survey {

}

.section.panel.survey > .title-bar {
    height: 80px;
    line-height:80px;
    font-size: 18px;
    font-weight:bold;
    font-family: 'Open Sans', sans-serif;
    padding-left:30px;
    padding-right:15px;
}

.section.panel.survey > .content {
    padding:40px;
    font-size:16px;
}
.section.panel.survey > .content .footnote {
    font-size:10px;
}
.section.panel.survey > .content .question {
    font-size:16px;
}
.section.panel.survey > .content .answer {
    font-size:13px;
}

.section.panel.survey > .survey-footer {
    padding:5px;
    padding-left:10px;
}
/* #endregion*/


.unselectable {
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    -o-user-select:none;
}

ol {
    margin-left:1em;
}


ol li + li {
    margin-top:10px;
}

/* #region toggle control */
.toggle-control {
    background-color:#fff;
    border: solid 1px;
    border-radius: 12px;
    position: relative;
    width: 100px;
    height: 30px;
    overflow: hidden;
    cursor:pointer;
    transition: 0.4s;
    user-select:none;
    display:inline-block;
}

.toggle-control input { display:none; }

.title-bar .toggle-control {
    line-height: 28px;
    vertical-align: middle;
    border-width: 0;
    height: 28px;
    margin-top: -2px;
}

.toggle-control .check-circle {
    width: 24px;
    height: 24px;
    background-color: #888;
    border-radius: 12px;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: 0.4s;
}

.toggle-control input:checked ~ .check-circle {
    left:calc(100% - 26px);
    right:2px;
}

.toggle-control .unchecked-value {
    display: inline-block;
    position: absolute;
    width: 100%;
    right: calc(100% - 30px);
    text-align: center;
    padding-right: 26px;
    transition: 0.4s;
}
.toggle-control input:checked ~ .unchecked-value {
    right:0px;
}

.toggle-control .checked-value {
    display: inline-block;
    position: absolute;
    width: 100%;
    text-align: center;
    padding-left: 26px;
    transition: 0.4s;
    left:0px;
}
.toggle-control input:checked ~ .checked-value {
    left:calc(100% - 38px);
}

/* default colors */
.toggle-control {
    border-color: rgba(0,122,193,1);
}
.toggle-control .check-circle {
    background-color: rgba(0,122,193,1);
}

.title-bar .toggle-control {
    color: rgba(0,122,193,1);
}
.title-bar .toggle-control .check-circle {
    background-color: rgba(0,122,193,1);
}

/* #endregion*/

/* yes-no-switch-control */
	.yes-no-switch-control
	{
		background-color: #fff;
		border: solid 1px;
		border-radius: 12px;
		position: relative;
		width: 100px;
		height: 30px;
		overflow: hidden;
		cursor: pointer;
		transition: 0.4s;
		user-select: none;
		display: inline-block;
	}

	.yes-no-switch-control input
	{
		display: none;
	}

	.yes-no-switch-control
	{
		width: 55px;
	}
	.yes-no-switch-control .checked-value i, div.yes-no-switch-control .unchecked-value i
	{
		font-size: 26px;
		vertical-align: middle;
	}

	.yes-no-switch-control .unchecked-value
	{
		right: 0px;
		left: auto;
		text-align: right;
		padding-right: 26px;
		padding-left: 0px;
		display: inline-block;
		position: absolute;
		width: 100%;
		transition: 0.4s;
		transform: translateX(0);
	}

	.yes-no-switch-control input:checked ~ .unchecked-value
	{
		transform: translateX(100%);
	}

	.yes-no-switch-control .checked-value
	{
		text-align: left;
		left: 0px;
		padding-left: 26px;
		padding-right: 0px;
		display: inline-block;
		position: absolute;
		width: 100%;
		transition: 0.4s;
		transform: translateX(-100%);
	}

	.yes-no-switch-control input:checked ~ .checked-value
	{
		transform: translateX(0);
	}

/* #endregion */

/* #region section-filters */
.section-filters {
	border-bottom: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.section.section-filters + .section {
	margin-top: 0;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.section.section-filters + .section > .title-bar {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.section-filters .filter-details {
	padding: 10px;
	border-top: solid 1px #ddd;
}

.section-filters:not(.expanded) .filter-details {
	display:none;
}

.section-filters > .filter-summary {
	background-color: #eee;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;

	cursor: pointer;

	display:block;
	padding:5px;
	border-bottom:0;
}
	.section-filters > .filter-summary > .summary {
		font-family: inherit;

		/*text-shadow: 1px 1px 2px #ddd;*/
		line-height: 16px;
		letter-spacing: -0.3px;
		width: calc(100% - 70px);
	}

		.section-filters > .filter-summary > .summary .filter-value {
			margin:1px;
			background-color: #ddd;
			padding: 1px;
			border-radius: 3px;
			margin-right: 4px;
			padding-left: 5px;
			padding-right: 5px;
			border: solid 1px #ccc;
			white-space: nowrap;
			display:inline-block;
		}

		.section-filters > .filter-summary > .section.right {
			width: 70px;
			padding-top: 2px;
		}

	.section-filters > .filter-summary a.show-filters {
		font-size: 12px;
		font-family: inherit;
		line-height: 16px;
	}
		.section-filters > .filter-summary a.show-filters > i {
			vertical-align: baseline;
			line-height:16px;
		}
			.section-filters > .filter-summary a.show-filters > i:after {
				font-family:Roboto;
				margin-left:.5em;
				font-weight:normal;
			}
			.section-filters.expanded > .filter-summary a.show-filters > i:after {
				content:'Hide';
			}
			.section-filters:not(.expanded) > .filter-summary a.show-filters > i:after {
				content: 'Show';
			}
/* #endregion */


/* #region TinyMCE content rendered outside of the editor */
.tinymce-content {
	text-align: left;
	overflow: auto;
	overflow-wrap: break-word;
}

/* Doc Search */
#doclist:not(.item-grid) {
	table-layout: fixed;
}

/* Doc Mgmt */
.item-grid td.tinymce-content,
.global-grid td.tinymce-content {
	max-width: 390px;
}

/* Company > Job Opp, Company > Forms & Resources, Benefits > General Info, Benefits > Retirement Resources, Benefits > Plan Info */
td.desc.tinymce-content,
td.det-desc.tinymce-content {
	max-width: 450px;
}

.tinymce-content * {
	line-height: normal;
	font-family: inherit;
}

.tinymce-content p,
.tinymce-content ul,
.tinymce-content ol,
.tinymce-content blockquote {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0px;
    margin-right: 0px;
}

.tinymce-content :first-child {
    margin-top: inherit;
}

.tinymce-content :last-child {
    margin-bottom: inherit;
}

.tinymce-content ul,
.tinymce-content ol {
    padding-left: 40px;
}

.tinymce-content blockquote {
    margin-left: 40px;
    margin-right: 40px;
}

.tinymce-content ol li + li {
    margin: 0;
}

.tinymce-content table {
    text-align: left;
}

.tinymce-content a {
    text-decoration: underline;
}
/* #endregion */

/* select2 customization */
.select2-selection__arrow {
	display:none;
}

.select2-results__option {
	text-align: left;
	padding: 2px;
}

@media screen {
	.printonly {
        display:none !important;
    }
}

@media print {
    * {
        background-color: none;
    }

    .panel.section {
        border:0;
    }

    .title-bar {
        color: #000;
        padding:0;
        font-weight:bold;
        line-height:normal;
        border-bottom:3px solid #cccccc;
    }

    .tab.selected {
        font-weight:bold;
    }

    .noprint {
        display:none !important;
    }

    .page-content > .section {
        page-break-inside: avoid;
    }

    .page-content > .page-heading + .section,
    .page-content > .page-heading + .heading-buttons + .section,
    .page-content > .section.allow-break {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
    }


    button {
        display:none;
    }

	.table-container tfoot {
		display: table-row-group;
	}
}