body {
   font:8pt;
   margin-bottom: 10px;
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.page-pre-loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
   background: #fff;
}

/*
 * standard typographic stuff
 */

.align-left {
   text-align: left;
}
.align-right {
   text-align: right;
}
.float-right {
   float: right;
}

#snackbar {
   visibility: hidden;
   font-size: 17px;
   z-index: 999;
   position: fixed;
   top: 30px;
   left: 0;
   right: 0;
   _bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   pointer-events: none; /* Makes elements that the snackbar overlays clickable */
}
#snackbar .snackbar-content {
   max-width: 100%;
   padding: 15px;
   font-size: 9pt;
   box-shadow: 0px 0px 6px 0px #888;
}
#snackbar.show {
   visibility: visible;
   -webkit-animation: fadeintop 0.5s;
   animation: fadeintop 0.5s;
}

@-webkit-keyframes fadeintop {
   from {top: 0; opacity: 0;}
   to {top: 30px; opacity: 1;}
}
@keyframes fadeintop {
   from {top: 0; opacity: 0;}
   to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeouttop {
   from {top: 30px; opacity: 1;}
   to {top: 0; opacity: 0;}
}
@keyframes fadeouttop {
   from {top: 30px; opacity: 1;}
   to {top: 0; opacity: 0;}
}

/* bootsrap look-alike spinner */
@-webkit-keyframes spinner-border {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
   }
}
@keyframes spinner-border {
   from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
   }
}
.spinner-border {
   display: inline-block;
   width: 2rem;
   height: 2rem;
   vertical-align: -.125em;
   border: .25em solid;
   border-right-color: transparent;
   border-radius: 50%;
   -webkit-animation: .75s linear infinite spinner-border;
   animation: .75s linear infinite spinner-border;
   color: #0d6efd !important;
}
.spinner-border-sm {
   width: 1rem;
   height: 1rem;
   border-width: .2em;
}
.spinner-div {
   position: fixed;
   display: none;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   text-align: center;
   background-color: rgba(255, 255, 255, 0.8);
   z-index: 2;
 }

.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #3068a4;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 905px;
  margin-bottom: 75px;
}
.modal-label {
   color: white;
   font-size: 15px;
}
.modal .close {
  color: #FF3F3F;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.modal .close:hover,
.modal .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
table.vertical-align-middle tr td {
   vertical-align: middle;
}
table.nowrap tr td {
   white-space: nowrap;
}
/*
   W3css modal stuff
*/
.w3-sidebar.w3-card,
.w3-modal-content,
.w3-modal-content footer{
   border-radius: 15px;
}
.w3-modal-content footer {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
}
.w3-modal-content.rounded {
   border-radius:10px;
}
.w3-modal header,
.w3-modal-content .title-container {
   height: 50px;
   background-color: #f0f0f0;
   color: inherit;
   border-radius: 15px 15px 0px 0px;
}
.w3-modal-content.rounded header,
.w3-modal-content.rounded header .title-container {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}
.w3-modal header .close-modal,
.w3-modal-content > header > span.w3-button {
   height: 50px;
   border-radius: 0 15px 0 0;
}
.w3-modal-content.rounded > header > span.w3-button {
   border-top-right-radius: 8px;
}
.w3-modal-content.rounded footer {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}
.w3-modal-content .content-container {
   overflow:auto;
   padding:10px;
   _padding-top: 0;
}
.rounded_border_bl .w3-modal-content {
    border-bottom-left-radius: 15px;
}
.rounded_border_br .w3-modal-content {
    border-bottom-right-radius: 15px;
}
.rounded_border_tl .w3-modal-content {
    border-top-left-radius: 15px;
}
.rounded_border_tr .w3-modal-content {
    border-top-right-radius: 15px;
}
/* Set in w3.css
h1 {
   font-size:12pt;
}
h2 {
   font-size:10pt;
}
*/
ul {
   padding-left: 2em;
   margin-top:0;
}

.anchor {
   text-decoration: underline;
   cursor: pointer;
}
.anchor:hover {
   color:#AA0000;
}

.popup-menu {
   position:absolute;
   margin-top:3px;
   padding:5px;
   padding-left:10px;
   padding-right:10px;
   border:0px #3057A4 solid;
   background-color:#DADADA;
   background-color:white;
   display:none;
   box-shadow: 0px 0px 10px 0px #888888;
   border-radius:5px;
}
.toggle-popup-menu {
   cursor: pointer;
   color:#0b95ff;
}

fieldset {
   padding:0;
   border:0;
   _margin-top:25px;
}

.float-right {
   float: right;
}
.float-left {
   float: left;
}
.width-50 {
   width: 50%;
}

div.cpanel p {
   cursor:pointer;
   line-height:50%;
}

div.cpanel.admin {
   _border:3px solid #D0D0D0;
   border-top:0px;
   _background-color:white;
   padding:10px;
   margin:0px;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
   _width:50%;
   margin:auto;
   _box-shadow: 0px 5px 10px 0px #888888;
   text-align:center;
   display:table;
}
div.cpanel.close {
   background-image: url('images/cpanel_close.svg');
   height:25px;
   background-repeat: no-repeat;
   background-position: right;
   cursor: pointer;
}
div.cpanel.entity_details {
   height:400px;
   overflow:auto;
}

/*
 * left/right slide menu
 */
.slide-menu {
   position:absolute;
   z-index:10;
}
.slide-menu-content {
   background-color:white;
   width: 300px;
   width:0;
   height:500px;
   overflow:auto;
   box-shadow: 0px 0px 10px 0px #888888;
}
.slide-menu-content > h1 {
   background-color: #0b95ff;
   color: white;
   padding: 3px;
   margin-left: 5px;
   margin-right: 5px;
}
.slide-menu-handle {
   height:60px;
   width:40px;
   background-repeat: no-repeat;
   background-position: center center;
   box-shadow: 0px 0px 10px 0px #AAA;
   top: 0px;
   background-color: white;
   opacity: 70%;
   cursor:pointer;
   transition: opacity .25s ease-in-out;
   position:relative;
}
.slide-menu.left {
   left:0;
}
.slide-menu.left .slide-menu-content {
   float:left;
}
.slide-menu.left .slide-menu-handle {
   float: right;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
}
.slide-menu.right {
   right:0;
}
.slide-menu.right .slide-menu-content {
   float:right;
}
.slide-menu.right .slide-menu-handle {
   float: left;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
}
.slide-menu.open .slide-menu-handle,
.slide-menu-handle:hover {
   opacity:100%;
}
.slide-menu.right.open .slide-menu-handle {
   box-shadow: -4px 2px 5px 0px #BBB;
}
.slide-menu.left.open .slide-menu-handle {
   box-shadow: 4px 2px 5px 0px #BBB;
}

.button.loading,
button.loading {
   background-image: url('images/lightbox/loading.gif');
   background-repeat: no-repeat;
   background-position: 5px center;
   background-color: lightgray !important;
   background-size: 22px;
   color: white !important;
   padding-left: 32px;
}

/*
 * dialog styling
 */
.dialog.container {
   position: absolute;
   right: 0;
   left: 0;
   top:10px;
   margin-right: auto;
   margin-left: auto;
   _width: 1420px;
   _height: 90%;
   background-color:white;
   box-shadow: 0px 0px 5px 0px #555;
   border-radius: 5px;
   _border: 3px solid #CCC;
   z-index:1000; /* must be larger than 10 for the overlay */
   padding: 10px;
}
.dialog.close {
   background-image: url('images/cpanel_close.svg');
   height:25px;
   width:25px;
   background-repeat: no-repeat;
   background-position: right;
   cursor: pointer;
   float:right;
}
.dialog.title {
   width:90%;
   display:inline-block;
   line-height:25px;
}
.dialog.header {
   height: fit-content;
   background:#F0F0F0;
   padding:5px;
   font-weight:bold;
   padding: 0.3em 1em 0.3em 1em;
}
.dialog.content {
   padding:5px;
}
.dialog.backdrop {
   width:100%;
   height:100%;
   margin:0;
   background-color:black;
}
.dialog.body {
   min-height:40px;
}
.dialog.logout {
   text-align:center;
   padding:20px;
   position:fixed;
   top:30%;
   left:50%;
   margin-left: -150px;
   _margin-right: auto;
   _margin-left: auto;
   width: 300px;
   background-color:white;
   box-shadow: 0px 0px 5px 0px #555;
   border-radius: 5px;
   border: 3px solid #CCC;
   padding-bottom:10px;
   z-index:1000; /* must be larger than any other popup */
}
.small-bold {
   font-size:8pt;
   font-weight:bold;
}
.small {
   font-size:8pt;
}
.bold {
   font-weight:bold;
}
.underline {
   text-decoration: underline;
}
.shadow {
   box-shadow: 0px 5px 10px 0px #888888;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: white; /*dim the background*/
  opacity: 0.75;
}
.overlay_page_loading {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   background-color: rgba(0,0,0,0.5); /*dim the background*/
   background-repeat: no-repeat;
   background-position: center 300px;
   background-attachment: fixed;
}
.overlay .spinner-border {
   width: 100px;
   height: 100px;
   border-width: 0.4em;
   left: 50%;
   top: 100px;
   position: fixed;
   margin-left: -50px;
}
.ellipsis { text-overflow: ellipsis; }

div.mvc-report {
   border: 2px solid #D0D0D0;
   border-radius:10px;
   padding:10px;
   display:inline-block;
   background:white;
}

div.cpanel_button {
   display: inline-block;
   height: 30px;
   width: 30px;
   background-image: url('images/cpanel_button.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor:pointer;
}

div.edit {
   display: inline-block;
   height: 30px;
   width: 30px;
   background-image: url('images/edit.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor:pointer;
}

div.delete_button,
div.edit_button {
   display: inline-block;
   height: 30px;
   width: 30px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   cursor:pointer;
}
div.edit_button {
   background-image: url('images/cpanel_widget_edit.svg');
}
div.delete_button {
   background-image: url('images/cpanel_widget_delete.svg');
}

#cpanel_container {
   position:fixed;
   background-color:white;
   right:0px;
   top:-300px;
   display:inline-block;
   border-top-left-radius:10px;
   border-bottom-left-radius:10px;
   box-shadow: 0px 5px 10px 0px #888888;
   padding:10px;
   min-width:470px;
   max-width: 800px;
   overflow: auto;
   max-height:500px;
   z-index: 10;
}
#cpanel_container.open {
   top:52px;
}
#cpanel_container table.mvc-report td,
#cpanel_container table.mvc-report th {
   padding:3px;
   font-size:8pt;
}

div.delete_record {
   display: inline-block;
   border:0;
   height:25px;
   width:25px;
   background:none;
   background-image: url('images/delete_row.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor:pointer;
}

#container_search_form,
#container_report_filters_form {
   border:0px solid #444444;
   border-top:0px;
   background-color:white;
   padding:10px;
   margin:0px;
   _border-bottom-left-radius:10px;
   _border-bottom-right-radius:10px;
   _width:80%;
   margin:auto;
   margin-bottom: 10px;
   box-shadow: 0px 0px 10px 0px #e1e1e1;
   display:none;
}
#search_form input, #search_form select {
   font-size: 8pt;
   padding: 3px;
}

div.items_number {
   line-height: 22pt;
   float: left;
}
div.pager .page_controls {
   display:inline-block;
   margin-right:10px;
}
div.pager .page_controls .page_selector {
   height: 16px;
   width: 16px;
   border: 1px solid #e0e0e0;
   background-color: #fafafa;
   background-repeat: no-repeat;
   background-position: center center;
   vertical-align: sub;
}
div.pager .page_controls .page_selector.page_first {
   background-image: url('images/page_first.svg');
}
div.pager .page_controls .page_selector.page_prev {
   background-image: url('images/page_previous.svg');
}
div.pager .page_controls .page_selector.page_next {
   background-image: url('images/page_next.svg');
}
div.pager .page_controls .page_selector.page_last {
   background-image: url('images/page_last.svg');
}
.page_selector {
   cursor:pointer;
   display:inline-block;
   height:10px;
   width:10px;
}
.page_number select {
   padding:0;
}

.toggle_menu {
   cursor:pointer;
   text-decoration: underline;
   color:blue;
}

#nav_menu_container ul {
   list-style-type: none;
   margin:0;
   padding:0;
   _height:30px;
   color:black;
}
#nav_menu_container ul li {
   display: inline-block;
   padding:0;
   margin:0;
   cursor:pointer;
   vertical-align: middle;
}
#nav_menu_container ul li a {
   padding:0;
   height:30px;
   width:30px;
   display:inline-block;
}
#nav_menu_container ul li ul {
   display:none;
   background:white;
   position:fixed;
   _right:20px;
   top:52px;
   height:auto;
   padding:5px;
   z-index:9999;
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   box-shadow: 0px 5px 10px 0px #888888;
   min-width: 200px;
}
#nav_menu_container ul li ul li {
   display:block;
   text-align:left;
   line-height: 30px;
   padding-left:4px;
}
#nav_menu_container ul li ul li:hover {
   background-color:#EEE;
}
#nav_menu_container ul li ul a {
   color:black;
   white-space: nowrap;
   text-decoration:none;
   font-size:10pt;
   display:block;
   width:100%;
   height:30px;
}
#nav_menu_container ul li ul a:hover {
   _text-decoration:underline;
}
#nav_menu > li {
   text-align:center;
   width:30px;
   height:30px;
   display: inline-block;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
}
div.menu_list.inline {
   background-color:#E8E8E8;
   padding:5px;
   margin-top:10px;
   margin-bottom:10px;
   border:1px solid #CCCCCC;
}
ul.menu_list {
   list-style-type: none;
   padding: 0;
   margin:0;
}
ul.menu_list li {
   cursor:pointer;
}
ul.menu_list li:hover {
   text-decoration: underline;
}
ul.menu_list {
}
ul.menu_list.inline {
   display: inline;
}
ul.menu_list.inline li {
   display: inline;
   padding-right: 8px;
}
div.header {
   overflow:auto;
   background-color:#E8E8E8;
   padding:5px;
   margin-top:10px;
   margin-bottom:10px;
   border:1px solid #CCCCCC;
}
div.header > h1 {
   float:left;
   margin: 0;
}
div.header > .menu_list {
   float:right;
}
#nav_menu #nav_menu_page_settings  {
   display:none;
   background-image: url('images/navbar_page_settings.svg');
}
#nav_menu #nav_menu_notifications  {
   background-image: url('images/navbar_notifications.svg');
}
#nav_menu #nav_menu_bundle_products_purchased_balance  {
   background-image: url('images/navbar_bundle_products_purchased_balance.svg');
}
#nav_menu #nav_menu_bundle_products_purchased_balance.warn_low,
#nav_menu #nav_menu_bundle_products_purchased_balance.warn_expired  {
   background-image: url('images/navbar_bundle_products_purchased_balance_warn1.svg');
}
#nav_menu #nav_menu_bundle_products_purchased_balance.warn_zero  {
   background-image: url('images/navbar_bundle_products_purchased_balance_warn2.svg');
}
#nav_menu #nav_menu_bundle_products_purchased_balance.ok  {
   background-image: url('images/navbar_bundle_products_purchased_balance_ok.svg');
}
#nav_menu #nav_menu_bundle_products_purchased_balance.zero  {
   background-image: url('images/navbar_bundle_products_purchased_balance_zero.svg');
}

/*
 * page_menu styling
 */
 #page_menu {
   margin-left: 10px;
   margin-top:10px;
}
#page_menu ul.menu_list {
   display:inline-block;
   vertical-align:middle;
}
#page_menu ul.menu_list > li {
   display: inline-block;
   padding-right:5px;
}
#page_menu ul.menu_list > li,
#page_menu ul.menu_list a {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   display:inline-block;
   width:30px;
   height: 30px;
   font-size: 0;
   vertical-align: middle;
   margin-right:5px;
}
#page_menu ul.menu_list a:hover {
   opacity: .50;
   filter: Alpha(Opacity=50);
}
#page_menu_container {
   display:inline-block;
   margin-bottom:10px;
}
#page_menu #download_excel a {
   background-image: url('images/export_excel.svg');
}
#page_menu #download_csv a {
   background-image: url('images/export_csv.svg');
}
#page_menu #download_pdf a {
   background-image: url('images/export_pdf.svg');
}
#page_menu li.search_entity {
   background-image: url('images/page_menu-search.svg');
}
#page_menu .add_entity a {
   background-image: url('images/page_menu-add_entity.svg');
}

/*
 * page_context_menu
 */

#page_context_menu {
   display:inline-block;
   vertical-align: middle;
}

#page_context_menu .toggle {
   display:inline-block;
   width:20px;
   height:20px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url('images/page_context_menu_toggle.svg');
   cursor: pointer;
}

#page_context_menu ul {
   display:none;
   list-style-type: none;
   background:white;
   position:fixed;
   height:auto;
   padding:5px;
   z-index:9999;
   box-shadow: 0px 0px 10px 0px #888888;
   min-width: 10em;
}
#page_context_menu ul li {
   display:block;
   padding:5px;
   text-align:left;
}
#page_context_menu ul li:hover {
   background-color:#EEE;
}
#page_context_menu ul li a {
   color:black;
   padding:2px;
   white-space: nowrap;
   text-decoration:none;
   font-size:12pt;
   display:inline-block;
   width:100%;
}

/*
 * admin_menu styling
 */
div.admin_menu {
   background-color:white;
   border-radius:10px;
   padding:20px;
   display:table;
   margin:auto;
   margin-top:20px;
}
ul.admin_menu {
   _list-style-type: none;
   _padding: 2px;
   margin: 0px;
   display:inline-block;
}
ul.admin_menu li {
   cursor:pointer;
   padding: 3px;
   _background-color: #555;
   _height: 60px;
   _width: 110px;
   _border-radius: 10px;
   _float: left;
   color: #CCC;
   font-size: 14pt;
   font-weight: bold;
   _background:linear-gradient(#999,#666);
   _border:4px solid #DDD;
   _text-align:left;
}
ul.admin_menu li:hover {
   color:#555;
}
ul.admin_menu li a {
   text-decoration: none;
   color:#555;
}
ul.admin_menu li a:hover {
   _text-decoration: underline;
   color:#AA0000;
}

.app-icon-inline {
   cursor:pointer;
   display: inline-block !important;
   vertical-align:middle;
}

input,
select,
textarea {
   background-color: white;
   border: 1px solid #C8C8C8;
   color: #000000;
   font-size: 8pt;
   font-weight: normal;
   padding: 4px;
}
input.datepicker {
   min-width:6em;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}
input[type="number"] {
   -moz-appearance: textfield;
}
input::placeholder {
   color: unset;
   opacity: 80%;
   font-weight: normal;
}

/*
 * general table styling
 */
table thead th {
   text-align:left;
}
table th {
   text-align:left;
   padding:5px;
}
table td {
   padding:5px;
}

/*
 * tabular form table styling
 */
table.tabular-form {
   border-collapse: collapse;
   _border-radius:10px;
   _margin:auto;
}
table.tabular-form,
div.tabular-form {
   background-color:#F7F7F7;
}
div.tabular-form .td {
   display: inline-block;
}
div.tabular-form.flex .tr {
   display: inline;
}
table.tabular-form td,
div.tabular-form .td {
   padding:5px;
}
table.tabular-form tr.section,
div.tabular-form .tr.section {
   _background:#E0EFFD;
   font-weight: bold;
}
table.tabular-form tr.section > td,
div.tabular-form .tr.section > .td {
   padding-top:10px;
   font-size:10pt !important;
}
table.tabular-form tr td.form_field_label.required::after {
   content:"*";
   color: #A82A05;
   margin-left: 5px;
}
/* the form_input_title_below is only displayed for small screen sizes, i.e. for mobile devices where the hover does not work well */
table.tabular-form tr td .form_input_title_below {
   font-size: 8pt;
   _font-style: italic;
   display: none;
}
/* the tooltip_popup_button is only displayed for small screen sizes, i.e. for mobile devices where the hover does not work well */
table.tabular-form tr td .tooltip_popup_button {
   margin-left:10px;
   height: 20px;
   width: 20px;
   vertical-align: middle;
   background-size: contain;
   display: none;
}
table.tabular-form tr td.readonly input,input.readonly,
table.tabular-form tr td.readonly select,select.readonly,
table.tabular-form tr td.readonly textarea,textarea.readonly,
div.tabular-form .tr .td.readonly input,input.readonly,
div.tabular-form .tr .td.readonly select,select.readonly,
div.tabular-form .tr .td.readonly textarea,textarea.readonly {
   background:#e0e0e0;
   _border:0;
   _border: 1px solid #B0B0B0;
   color:#999;
}
table.tabular-form td .help,
div.tabular-form .td .help {
   margin:10px;
   display:inline-block;
   background: url("images/info.svg") no-repeat center;
   height: 18px;
   width: 18px;
   vertical-align: middle;
   background-size: contain;
   position: absolute;
}
.input_required_indicator {
   color: #A82A05;
   font-size: 18pt;
   _vertical-align: middle;
   margin-left: 5px;
   margin-right: 5px;
   _line-height:10px;
}
table.tabular-form td .input_pre_text,
div.tabular-form .td .input_pre_text {
   margin-right:0.5em;
}
table.tabular-form td .input_post_text,
div.tabular-form .td .input_post_text {
   margin-left:0.5em;
}
table.tabular-form td.label_top,
div.tabular-form .td.label_top {
   vertical-align:top;
   padding-top:17px;
}
table.tabular-form > tbody > tr > td:first-child {
   _width:1px;
   white-space:nowrap;
}
div.tabular-form > .tr > .td:first-child {
   white-space:nowrap;
}
table.tabular-form > tbody > tr.field_instructions > td,
div.tabular-form > .tr.field_instructions > .td {
   width:auto;
   white-space:normal;
}
table.tabular-form > tbody > tr.field_heading > td,
div.tabular-form > .tr.field_heading > .td {
   width:auto;
   white-space:normal;
}
table.tabular-form.one-col > tbody > tr > td {
   display:block;
}
table.tabular-form.one-col > tbody > tr > td.form_field_label {
   padding-bottom:0;
   font-size: 8pt;
}
table.tabular-form.one-col > tbody > tr.section > td.form_field_label {
   font-size: 9pt;
}
table.tabular-form.one-col > tbody > tr > td.form_field_input {
   padding-top: 2px;
}
table.tabular-form.one-col.tr-inline > tbody > tr {
   display: inline-block;
   vertical-align: top;
}
table.tabular-form.one-col input[type="text"],
table.tabular-form.one-col input[type="password"],
table.tabular-form.one-col input[type="email"],
table.tabular-form.one-col select,
table.tabular-form.one-col textarea {
   width:100%;
}
/*
 * report table styling
 */
table.mvc-report {
   border-collapse: collapse;
   _width:95%;
}
table.mvc-report tr {
   border-bottom:1px solid #EEE;
}
table.mvc-report th {
   text-align:left;
   white-space:nowrap;
}
table.mvc-report th,table.mvc-report td {
   padding:5px;
   padding-right:15px;
   padding-bottom: 10px;
   padding-top: 10px;
}
table.mvc-report td {
   _vertical-align:top;
}
table.mvc-report td.selected {
  background:#D0D0D0;
}
table.mvc-report.nowrap th,table.mvc-report.nowrap td {
   white-space:nowrap;
}
table.mvc-report-attr-value {
   border-collapse: collapse;
}
table.mvc-report-attr-value td:first-child {
   font-weight:bold;
   white-space: nowrap;
   text-transform: uppercase;
}
table.mvc-report-attr-value td:last-child {
   white-space:normal;
}
table.mvc-report-attr-value > tbody > tr:hover {
   background-color:#E8E8E8;
}
table.mvc-report.nowrap th,table.mvc-report.nowrap td {
   white-space: nowrap;
}
table.mvc-report-attr-value.v2 {
   border-collapse: initial;
}
table.mvc-report-attr-value.v2 td {
   margin:3px;
}
table.mvc-report-attr-value.v2 td:first-child {
   font-weight:bold;
   white-space: nowrap;
   text-transform: none;
   _background-color:#E8E8E8;
   _border-right:1px solid #D0D0D0;
}
table.mvc-report-attr-value.v2 > tbody > tr:hover {
   background-color:initial;
}

/*
 * mvc-report-attr-value-1col
 */
table.mvc-report-attr-value-1col {
   border-collapse:collapse;
}
table.mvc-report-attr-value-1col td {
   padding:0;
}
table.mvc-report-attr-value-1col tr:nth-child(odd) {
   font-weight:bold;
}
table.mvc-report-attr-value-1col tr:nth-child(even) {
   border-bottom:1px solid #CCC;
}

/*
 * styling for table td content editable via double-click
 */
.td_input {
   _background:#E0E0E0;
   padding-top:5px;
   padding-bottom:5px;
   cursor:text;
   _padding-left:10px;
   _padding-right:10px;
   _border-radius:5px;
}
.td_input.empty {
   color:#DA9998;
}
.td_input.empty.required {
   color:#AA0000;
}
.td_input.alert {
   box-shadow: 0px 0px 4px 0px #AA0000;
   padding:6px;
   border-radius:5px;
   background-color:white;
   border: 1px solid #AA0000;
   display:inline-block;
   white-space:nowrap;
}
.td_input_active {
   box-shadow: 0px 0px 10px 0px #888888;
   border-bottom-left-radius:5px;
   border-top-left-radius:5px;
   background-color:white;
   padding:0;
   padding-left:3px;
   height:28px;
   _width:230px;
   white-space:nowrap;
   position:relative;
   display:inline-block;
   z-index:1;
}
.td_input_close {
   _float:right;
   height:28px;
   width:15px;
   cursor:pointer;
   background-image: url('images/td_input_close.svg');
   background-position: center center;
   background-repeat:no-repeat;
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;
   position:absolute;
   _right:0;
}
.td_input_active input,
.td_input_active select {
   border:0;
   height: 27px;
   padding: 4px;
   font-size: 8pt;
   background-color: transparent;
}
.td_input_active input:focus,
.td_input_active select:focus {
   outline: none;
   box-shadow: none;
}
.td_input_active .error {
   border:0;
   background:none;
   padding: 3px;
   line-height: 25px;
}
/*
 * styling for table with rows selected by click
 */
table.select_by_row {
   border-collapse: collapse;
   _margin:5px;
}
table.select_by_row tbody tr:hover {
   background:#FBE9E9;
   cursor:pointer;
}

.min_balance_set {
   color:red;
}

span.link {
   text-decoration: underline;
   color:blue;
   cursor: pointer;
}

div.pager {
   background-color:whitesmoke;
   padding:5px;
   margin-top:10px;
   margin-bottom:10px;
   border: 0;
   border-radius: 4px;
}

button,
.button,
a.button,
span.button {
   margin:5px;
   background-color: #002B5C;
   border: 0;
   color: #FFF;
   border-radius: 4px;
   font-weight: 400;
   padding: .5rem 2rem;
   transition: background-color .5s,color .5s,border-color .5s;
   cursor:pointer;
   font-family: 'Open Sans', sans-serif;
   font-size: 10pt;
   text-transform: uppercase;
   text-decoration:none;
   text-align: center;
}
button.secondary,
.button.secondary,
a.button.secondary,
span.button.secondary {
   background-color: #fff;
   color: #324F7B !important;
   border: solid 1px;
}
button.secondary.inactive,
.button.secondary.inactive,
a.button.secondary.inactive,
span.button.secondary.inactive {
   color: #777 !important;
}
button.secondary.shadow,
.button.secondary.shadow,
a.button.secondary.shadow,
span.button.secondary.shadow {
   box-shadow: 0px 0px 5px 0px;
}
button.secondary.shadow.inactive,
.button.secondary.shadow.inactive,
a.button.secondary.shadow.inactive,
span.button.secondary.shadow.inactive {
   box-shadow: none;
}
button.small,
.button.small,
a.button.small,
span.button.small {
   font-size: 8pt;
   padding: .2rem .5rem;
   _border-radius: 15px;
}
button:hover,
.button:hover{
   background-color:#4E7BBF;
   border-color:#4E7BBF;
   color:#FFF
}
button.secondary:hover,
.button.secondary:hover,
a.button.secondary:hover,
span.button.secondary:hover {
   background-color: #D4E5FF;
}
a.button,
span.button {
   display:inline-block;
}
a.button.disabled,
span.button.disabled,
button.disabled,
.button.disabled {
   border-color: #C0C0C0;
   background-color: lightgray;
   color: #777 !important;
}
a.number {
   line-height: 20px;
   background-color: #E0E0E0;
   padding: 5px;
   min-width: 2em;
   display: inline-block;
   text-align: center;
   _border-radius: 5px;
}
a.number:hover {
   background-color:#C0C0C0;
}
a.page_back {
   display: block;
   margin: 10px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url('images/page_back.svg');
   height:40px;
   width:40px;
}
a.page_back.above_pager {
   display: inline-block;
   position: absolute;
   _margin-top: -5px;
   margin:0;
}
a.button.back.above_pager {
   /* position: relative;
   top: 5px;
   left: 10px;
   display: inline; */
}
a.page_back.inline {
   display: inline-block;
   vertical-align:middle;
}
a.page_back:hover {
   opacity: 0.8;
}
span.action {
   text-decoration:underline;
   cursor:pointer;
   margin-left:8px;
}
span.action:hover {
   color:#AA0000;
}

div.pager button {
   margin: 0px;
}

.text_message {
   background:#F0F0F0;
   border: 1px solid #E0E0E0;
   padding:5px;
}

#reset_pin_instructions {
   background:#F0F0F0;
   border: 1px solid #E0E0E0;
   padding:5px;
}

.ui-widget-header {
   border:0;
}
.ui-dialog-content h1 {
   font-size:10pt;
   border-bottom:2px solid;
   padding:2px;
}

div.shuttlebox {
   display: inline-block;
}
div.shuttlebox > div {
   float:left;
   text-align: center;
}
div.shuttlebox select {
   width: 250px;
   margin: 2px;
   height: 200px;
   padding: 2px !important;
   font-size: 8pt;
}
div.shuttlebox.wide select {
   width: 300px;
}
div.shuttlebox span.button {
   display: block;
   text-decoration: none;
   margin: 2px;
   clear:both;
   padding:5px;
   border-radius:5px;
}

.flex-parent {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 .flex-child {
   text-align: center;
   flex: 0 1 150px; /*  Stretching: */
   _height: 40px;
   _margin: 5px;
 }
 .flex-child-100 {
   text-align: center;
   flex: 0 1 100px; /*  Stretching: */
 }
 .grid-parent {
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(150px, 0.5fr));
   margin-bottom: 10px;
}

/*
 * slider switch: https://www.w3schools.com/howto/howto_css_switch.asp
 */
.switch {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 25px;
   vertical-align: middle;
}
/* Hide default HTML checkbox */
.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}
/* The slider */
.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
}
.slider:before {
   position: absolute;
   content: "";
   height: 19px;
   width: 19px;
   left: 4px;
   bottom: 3px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}
input:checked + .slider {
   background-color: #2196F3;
}
input:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
   -webkit-transform: translateX(24px);
   -ms-transform: translateX(24px);
   transform: translateX(24px);
}
/* Rounded sliders */
.slider.round {
   border-radius: 34px;
}
.slider.round:before {
   border-radius: 50%;
}
/* small slider switch */
.switch.small {
   width: 35px;
   height: 20px;
}
.switch.small input:checked + .slider:before {
   transform: translateX(16px);
}
.switch.small .slider:before {
   height: 14px;
   width: 14px;
   left: 3px;
}

.switch-field {
	display: flex;
	margin-bottom: 5px;
	overflow: hidden;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #f4f4f4;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1;
	text-align: center;
	padding: 5px 10px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	/* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); */
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #2196F3;
   color:white;
	box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}

.float_container {
   /* use this to encapsulate floating divs */
   overflow: auto;
   width: 100%
}

/* any container with a background image */
.icon {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   display: inline-block;
}
.icon.pointer {
   cursor: pointer;
}
.icon.info-icon {
   background-image: url('images/feedback_info.svg');
   height: 15px;
   width: 15px;
   margin-left: 5px;
   vertical-align: sub;
}

.cursor_pointer {
   cursor:pointer;
}

.ajax_message {
   position:fixed;
   background:white;
   top:-300px;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   box-shadow: 0px 5px 10px 0px #888888;
   padding:0;
   overflow: none;
   right:0;
   left:0;
   margin:auto;
   z-index:1000;
   display:table;
   width:400px;
}
.close_ajax_message {
   background-image: url("images/close.svg");
   background-repeat: no-repeat;
   background-position: right 5px center;
   background-size: 25px 25px;
   cursor: pointer;
   display: block;
   height: 25px;
   background-color:#CCC;
   padding: 5px;
}

/*
 * show/hide region
 */
.region_open_close {
   background-repeat: no-repeat;
   background-position: 5px center;
   padding-left: 35px !important;
   cursor:pointer;
}
.region_open_close.closed {
   background-image: url('images/region_open.svg');
}
.region_open_close.open {
   background-image: url('images/region_closed.svg');
}
.section.region_open_close:hover {
   box-shadow: 0px 0px 5px 2px #e0e0e0;
}

#all_roles .region_open_close {
   background-color: #ddd;
   border-radius: 20px;
}

/*
 * message types
 */

.help {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   display: inline-block;
   background-image: url('images/help.svg');
   cursor: help;
   height: 20px;
   width:20px;
   margin:7px;
   vertical-align: text-top;
}
.help.small {
   height: 14px;
   width: 14px;
   margin:0;
   margin-left:5px;
   margin-right:5px;
}
.help:hover {
   opacity: 80%;
}
.help:after {
   clear: both;
   content: '';
   display: block;
}
.help.inline{
   float: none;
   margin: 0;
   display: inline-block;
   width: 20px;
   height: 15px;
   background-size: 15px;
   bottom: 0px;
   vertical-align: middle;
}
.feedback {
   width: 50%;
   margin: auto;
   margin-top: 10px;
}
.feedback.success {
   width: 50%;
   margin: auto;
   margin-top: 10px;
   margin-bottom:10px;
}

.loadinginfo {
   background-image: url('images/ajax_loader-indicator-info-32px.gif');
   background-repeat: no-repeat;
   border: 1px solid;
   margin: 10px 0px;
   padding:12px 5px 12px 45px !important;
   background-repeat: no-repeat;
   background-position: 5px center;
   border-radius: 7px;
   text-align:left;
   color: white;
   font-size: 10pt;
   background-color: cornflowerblue;
}

.info, .success, .warning, .error, .validation, .confirm {
   border: 1px solid;
   margin: 10px 0px;
   padding:10px 20px 10px 50px !important;
   background-repeat: no-repeat;
   background-position: 5px 8px;
   border-radius: 4px;
   text-align:left;
   background-size: 25px;
   white-space: normal;
}

.message .info, .message .success, .message .warning, .message .error, .message .validation, .message .confirm ,
.info.small, .success.small, .warning.small, .error.small, .validation.small, .confirm.small {
   padding: 5px 5px 5px 28px !important;
   font-size: 8pt;
   background-size: 16px;
   background-position: 4px 4px;
}
.message .info > h1, .message .success > h1, .message .warning > h1, .message .error > h1, .message .validation > h1, .message .confirm > h1,
.info.small > h1, .success.small > h1, .warning.small > h1, .error.small > h1, .validation.small > h1, .confirm.small > h1 {
   margin-top:0;
   font-size:12pt;
}
.info.inForm, .success.inForm, .warning.inForm, .error.inForm, .validation.inForm, .confirm.inForm {
   margin: 0 0 0 10px;
   max-width: 400px;
   vertical-align: middle;
   display:inline-block;
/*
   text-overflow: ellipsis;
   width: 300px;
   white-space: nowrap;
   overflow: hidden;
   vertical-align:middle;
*/
}
.info.inForm:hover, .success.inForm:hover, .warning.inForm:hover, .error.inForm:hover, .validation.inForm:hover, .confirm.inForm:hover {
   width:auto;
}
.info.inForm ul, .success.inForm ul, .warning.inForm ul, .error.inForm ul, .validation.inForm ul, .confirm.inForm ul {
   padding-left:1em;
}
.info {
   color: #336fbd;
   background-color: #e5f2ff;
   border-color: #b8daff;
   font-size: 9pt;
   background-image: url('images/feedback_info.svg');
}
.success {
   color: #4F8A10 !important;
   border-color: #A1D06E;
   background-color: #DFF2BF !important;
   background-image:url('images/feedback_success.svg');
}
.warning {
   color: #9F6000  !important;
   border-color:#F7CF94;
   background-color: #FEEFB3 !important;
   background-image: url('images/feedback_warning.svg');
}
.warning hr {
   border-top: 1px solid #9F6000;
}
.error,
.failed {
   color: #D8000C;
   border-color: #f0bebe;
   background-color: seashell;
   background-image: url('images/feedback_error.svg');
}
.confirm {
   color: #2F53D3;
   background-color: #E1EDFF;
   background-image: url('images/feedback_confirm.svg');
   border-color: #A1D1FD;
}
.validation {
   color: #D63301;
   border-color: #F9A187;
   background-color: #FDEAE0;
   background-image: url('images/feedback_validation.svg');
}
.form_field_error {
   color:red;
   margin-bottom:5px;
   white-space: normal;
   display: block;
}
.validation h1, .warning h1 {
   font-size:10pt;
   border:none;
   padding:0px;
}
.warning.inline {
   background-image:none;
   margin:0px;
   padding: 5px 5px 5px 20px !important;
   border:2px solid;
}
.error.inline {
   border: 0;
   margin:0;
   background-color: transparent;
}
tr.error {
   background-image: none;
   border-color: #AA0000;
}
tr label.error,
tr span.error,
tr div.error {
   padding: 5px 2px 5px 25px !important;
   font-size: 90%;
   background-image: url('images/feedback_error.svg');
   background-size: 15px 15px;
   background-position: 4px 5px;
   display: block;
   margin: 5px;
}
tr label.warning,
tr span.warning,
tr div.warning {
   padding: 5px 2px 5px 25px !important;
   font-size: 90%;
   background-size: 15px 15px;
}
textarea.error,
input.error,
select.error {
   background-image: none;
   padding:4px !important;
}

.info a,.info a:hover {
   color:#336fbd;
}
.notification_badge{
   border-radius: 50%;
   height: 15px;
   line-height: 20px;
   width: 15px;
   right: -11px;
   position: relative;
   top: -10px;
   padding: 0;
}
.role_dialog,
.notification_dialog{
   height:60%;
   width:500px;
   max-width: 600px;
   min-width: 250px;
}
.role_dialog{
   min-width: 375px;
}
.role_dialog > div,
.notification_dialog > div{
   width:100%;
   margin: 0;
}
.notification_dialog .app_messages{
   width:100%;
}
#allow-push-notification {
   display: block;
   position: fixed;
   top: 1rem;
   left: 1rem;
   padding: 1rem;
   text-align: center;
   border-radius: 1rem;
   width:30px;
   height:30px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   background-color: #A00;
   -webkit-mask-image: url('images/notification_bell.svg');
   mask-image: url('images/notification_bell.svg');
   mask-size: contain;
   animation: bellshake .5s 2s both;
}
.allow-push-notification-bar {
   display: block;
   position: fixed;
   top: 1rem;
   left: 1rem;
   padding: 1rem;
   text-align: center;
   border-radius: 1rem;
}
@keyframes bellshake {
   0% { transform: rotate(0); }
   15% { transform: rotate(5deg); }
   30% { transform: rotate(-5deg); }
   45% { transform: rotate(4deg); }
   60% { transform: rotate(-4deg); }
   75% { transform: rotate(2deg); }
   85% { transform: rotate(-2deg); }
   92% { transform: rotate(1deg); }
   100% { transform: rotate(0); }
}
.role_dialog #login_select_user_role {
    box-shadow: none;
    background: none;
    border:none;
    padding: 0;
}
.message {
   margin: 5px;
}
.message.popup.toggle {
   background: #3771c8;
   color: white;
   border: 1px solid #E0E0E0;
   padding: 5px;
}
.info.toggle {
   overflow-y: scroll;
   max-height: 250px;
}
.message.toggle .content{
   _overflow-y: scroll;
   _max-height: 150px;
}
.message.toggle.closed,
.info.toggle.closed {
   overflow-y: hidden;
}
.message.toggle .buttons{
   text-align: right;
}
.info.toggle .buttons {
   _text-align: right;
   position: sticky;
   bottom: 0px;
   _right: 0px;
   float:right;
}
.message.toggle .buttons .button,
.info.toggle .buttons .button {
   border: 1px solid aliceblue;
   padding: 0.5em 1em 0.5em 1em;
   background-color:forestgreen;
}
.message.toggle.closed .content,
.info.toggle.closed .content {
   height:20px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
}
.message.toggle.closed .buttons,
.info.toggle.closed .buttons {
   display:none;
}
.info .content {
   border-left: 1px solid white;
   padding-left:5px;
}

#password_strength {
   padding-left:10px;
}

tr.field_instructions {
   background-image: url('images/info.svg');
   background-position: 5px center;
   background-repeat: no-repeat;
   background-size: 20px 20px;
}
tr.field_instructions > td {
   padding: 5px 5px 5px 40px;
   font-style: italic;
}
tr.field_instructions .input_required_indicator,
.form_instructions.input_required_indicator {
   font-size:inherit;
}
tr.field_heading > td {
   font-style: italic;
}
tr.field_heading .input_required_indicator,
.form_instructions.input_required_indicator {
   font-size:inherit;
}
.login_container .form_instructions.input_required_indicator,
#login_select_user_role .form_instructions.input_required_indicator,
#search_form .form_instructions.input_required_indicator,
#report_filters_form .form_instructions.input_required_indicator{
   display:none;
}

/*
 * exception error messages: referenced in views loaded by exceptionController
 */
.exception {
   width: 90%;
   margin: auto;
   margin-top: 50px;
}
.exception h1 {
   font-size:20pt;
   font-weight:bold;
}
.exception h2 {
   font-size:16pt;
}
.exception.error404 .route,
.exception.access_denied .route,
.exception.access_denied .error_message,
.exception.general .error_message
{
   font-family:'Lucida Console',Monaco,monospace;
   font-size:12pt;
   font-weight:bold;
   border: 1px solid #DDD;
   background-color: #EFEFEF;
   padding: 5px;
   padding-left: 5px;
   border-radius: 10px !important;
   line-height: 30px;
   padding-left: 30px;
}
.exception.general .error_message.maintenance {
   background-image: url('images/maintenance.svg');
   background-repeat: no-repeat;
   background-position: 10px center;
   min-height: 70px;
   padding-left: 85px;
   font-family: inherit;
}
.exception.general .error_message.deactivated_role {
   background-image: url('images/user_warning.svg');
   background-repeat: no-repeat;
   background-position: 20px center;
   background-size: 50px;
   min-height: 70px;
   padding-left: 85px;
   font-family: inherit;
}
.small .exception {
   width: auto;
   margin: auto;
   margin-top: auto;
}
.small .small .exception h1 {
   font-size:15pt;
   font-weight:bold;
}
.small .exception h2 {
   font-size:10pt;
}
.small .exception.error404 .route,
.small .exception.access_denied .route,
.small .exception.access_denied .error_message,
.small .exception.general .error_message
{
   font-family:'Lucida Console',Monaco,monospace;
   font-size:10pt;
   font-weight:bold;
   border: 1px solid #DDD;
   background-color: #EFEFEF;
   padding: 5px;
   padding-left: 5px;
   border-radius: 10px !important;
   line-height: 30px;
   padding-left: 5px;
}

/*
 * config/maintenance
 */
form#update_maintenance {
   width:100%;
}

/*
 * template/update
 */
form#update_template {
   min-width: 700px;
}

/*
 * styling for jquery validator plugin
 */
div.form-error {
   background-color: #FFEBDF;
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid #b94a48;
   border-radius: 4px;
   color: #D8000C;
}
label.form_error {
   padding: 3px;
   border-radius: 4px;
   margin-left: 5px;
   font-style: italic;
   color: white;
   background-color: #AA0000;
}

/*
 * speech_bubble
 */
.speech_bubble {
   padding:5px;
   overflow: auto;
   _max-width: 350px;
   _min-width: 250px;
   width:300px;
   white-space:normal;
}
.speech_bubble .speaker {
   background-image: url('images/speaker.svg');
   background-repeat: no-repeat;
   background-position: left 5px;
   background-size: 37px 34px;
   width: 37px;
   height: 40px;
   float: left;
}
.speech_bubble.outgoing .speaker {
   background-image: url('images/speaker2.svg');
   float: right;
}
.speech_bubble .speech {
   background-color: #63a1fd;
   border-radius: 5px;
   padding: 5px;
   float: left;
   _box-shadow: 2px 2px 2px 0px #AAA;
   max-width: 250px;
   min-width: 200px;
   font-style:italic;
   color: white;
}
.speech_bubble.outgoing .speech {
   background-color: #62c162;
   float: right;
   _box-shadow: -2px 2px 2px 0px #AAA;
}
.speech_bubble.incoming.unread{
   background: #FBCFCF;
   border-radius: 5px;
}
.speech_bubble .speech p,
.speech_bubble .speech ul {
   margin:0;
}
.speech_bubble .author,
.speech_bubble .date {
   font-style: normal;
   font-weight: bold;
   font-size: 80%;
   _max-height: 75px;
   _overflow: auto;
}
.speech_bubble .author .firstletter {
   color: #FFF;
   border-radius: 15px;
   width: 15px;
   height: 15px;
   text-align: center;
   line-height: 15px;
   background-color: #555;
   padding: 2px;
   margin-left: 1px;
   margin-right: 1px;
   display: inline-block;
   cursor: default;
   box-sizing: content-box;
}
.speech_bubble .author .unread.firstletter{
   background-color: #f9e9e9;
   color: #D01111;
}
.speech_bubble .author .bcc.firstletter{
   background-color: rgb(81, 81, 81);
}
.speech_bubble .author .unread.bcc.firstletter{
   color: #FFF;
   background-color: rgb(119, 42, 42);
}
.speech_bubble .date {
   padding-top:2px;
   font-weight: normal;
}

#display_sidebar{
   cursor: pointer;
   width: 20px;
   background-color: #e0e0e0;
   border-radius: 10px;
   background-size: 35%;
   background-repeat: no-repeat;
   background-position: center;

   display: inline-flex;
   border: black 1px;
   padding: 5px;
   height: 100%;
   margin-right: 5px;
}

#display_sidebar.open{
   background-image: url('images/toggle_left.svg');
}

#display_sidebar.closed{
   background-image: url('images/toggle_right.svg');
}

#display_sidebar:hover{
   box-shadow: 0px 0px 5px 2px #e0e0e0;
}

#display_sidebar.dynamic_sizing{
   padding-left: 35px !important;
   padding-top: 15px;
   background-size: auto;
   height: auto;
}

#display_sidebar.open.dynamic_sizing{
   background-image: url('images/region_closed.svg');
}

#display_sidebar.closed.dynamic_sizing{
   background-image: url('images/region_open.svg');
}

/*
 * index view
 */
#entity_search_results {
   padding:5px;
}
#entity_search_results .button_container,
form.data_input .button_container {
   border: 1px solid #CCCCCC;
   padding:5px;
   background-color:#E8E8E8;
   margin-top: 10px;
   margin-bottom: 10px;
}
table.mvc-report th.sortable, th.sortable {
   background-image: url('images/sortable.svg');
   background-repeat: no-repeat;
   background-position: 2px center;
   padding-left: 23px;
   white-space:nowrap;
   cursor: pointer;
}
table.mvc-report th.sortable.sort_col.ASC, th.sortable.sort_col.ASC {
   background-image: url('images/sortable_asc.svg');
}
table.mvc-report th.sortable.sort_col.DESC, th.sortable.sort_col.DESC {
   background-image: url('images/sortable_desc.svg');
}
#selected_search_fields ul {
   list-style-type: none;
   padding: 0;
   margin:0;
   display:inline-block;
   margin-left:0.5ex;
}
#selected_search_fields ul li {
   display: inline-block;
   padding-right:0.8ex;
}
#selected_search_fields > ul > li > ul > li {
   white-space:nowrap;
   font-weight:bold;
}
#selected_search_fields > ul > li > ul > li:last-child {
   color: sienna;
}
#selected_search_fields.active {
   margin: 10px;
   padding: 5px;
   background-color: goldenrod;
   color: white;
   overflow: auto;
   line-height: 12pt;
   margin-left: 5px;
   margin-right: 5px;
   border-radius: 13px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 8pt;
}
#selected_search_fields .clear_search {
   background-image: url('images/clear_search.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height:18px;
   width:15px;
   display:inline-block;
   float:right;
   cursor:pointer;
}
#selected_search_fields .tooltip_popup_button {
   display:none;
}
.clear_input_field {
   background-image: url('images/clear_input_field.svg');
   background-repeat: no-repeat;
   background-position: center center;
   height:35px;
   width:22px;
   display:inline-block;
   cursor:pointer;
   position: absolute;
   top: 50%;
   transform: translate(0%, -50%);
   right:7px;
}

.button_container.above_form {
   margin:0;
   margin-bottom:10px;
}
.button_container.above_form > button {
   margin:0;
   margin-right:15px;
}

/*
 * custom checkbox
 */
/* Customize the label (the container) */
label.checkbox {
   _display: block;
   position: relative;
   padding-left: 35px;
   /* margin-bottom: 12px; */
   cursor: pointer;
   /* font-size: 22px; */
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
/* Hide the browser's default checkbox */
label.checkbox input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}
/* Create a custom checkbox */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 26px;
   width: 26px;
   background-color: white;
   border-radius: 5px;
   border:2px solid darkgray;
}
/* On mouse-over, add a grey background color */
label.checkbox:hover input ~ .checkmark {
   background-color: #EFDED9;
}
/* When the checkbox is checked, add a blue background */
label.checkbox input:checked ~ .checkmark {
   background-color: #2196F3;
   border:2px solid #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}
/* Show the checkmark when checked */
label.checkbox input:checked ~ .checkmark:after {
   display: block;
}
/* Style the checkmark/indicator */
label.checkbox .checkmark:after {
   left: 8px;
   top: 3px;
   width: 6px;
   height: 13px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

/*
 * Render a checkbox as a button with label text and changing color
 * when selected
 */
label.checkbox-button {
   cursor:pointer;
   white-space: nowrap;
}
label.checkbox-button span {
   color: white;
   background: #a4a4a4;
   padding:3px;
   padding-left:7px;
   padding-right:7px;
   border-radius: 3px;
}
label.checkbox-button input {
   display:none;
}
label.checkbox-button input:checked + span {
   background:#A00;
}

/*
 * recaptcha
 */
div.g-recaptcha {
   margin:10px;
}
div.g-recaptcha > div {
   margin:auto;
}

div.nav_buttons {
   overflow:auto;
}

/*
 * delete confirmation dialog
 */
#dialog_delete .entity_name {
   font-weight:bold;
   font-size:110%;
}

/*
 * app_message search results
 */
 #entity_search_results table.mvc-report.app_message > tbody > tr > td {
   white-space: normal;
 }

/*
 * popperjs tooltip
 */

.tooltip-arrow,
.tooltip-arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
}
.tooltip-arrow {
   visibility: hidden;
}
.tooltip-arrow::before {
   visibility: visible;
   content: '';
   transform: rotate(45deg);
}
.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
   bottom: -4px;
}
.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
   top: -4px;
}
.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
   right: -4px;
}
.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
    left: -4px;
}

/*
 * Collapsible sections
 */

.collapsible-trigger {
   background-color: #888;
   color: white;
   cursor: pointer;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   margin: auto;
}

.collapsible-trigger.active, .collapsible-trigger:hover {
   background-color: #777;
}

.collapsible-trigger:after {
   content: '\002B'; /* + */
   color: white;
   font-weight: bold;
   float: right;
   margin-left: 5px;
}

.collapsible-trigger.active:after {
   content: "\2212"; /* - */
}

.collapsible-content {
   padding: 0 18px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
   background-color: #f1f1f1;
   width: 98%;
   margin: auto auto 10px;
   border-radius: 0px 0px 10px 10px;
}

/*
 * quick-action-dropdown: renders a button with down-arrow and a list of menu options on the hover event
 */
.quick-action-dropdown {
   position: relative;
   display: inline-block;
}
.quick-action-dropdown button {
   background-color: #007bff;
   color: white;
   padding: 5px 10px;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   margin: 0;
}
.quick-action-dropdown button:hover {
   background-color: #0056b3;
}
.quick-action-dropdown button::after {
   content: ' ▼'; /* Down arrow */
   font-size: 12px;
}
.quick-action-dropdown ul {
   display: none;
   position: absolute;
   background-color: white;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   margin-top: 0;
   padding: 0;
   list-style: none;
   z-index: 1000;
   min-width:100%;
}
.quick-action-dropdown ul li {
   padding: 10px 15px;
   border-bottom: 1px solid #ddd;
   cursor: pointer;
}
.quick-action-dropdown ul li:hover {
   background-color: #f0f0f0;
}
.quick-action-dropdown ul li:last-child {
   border-bottom: none;
   border-radius: 0 5px 5px 0;
}
.quick-action-dropdown:hover ul {
   display: block;
}
.quick-action-dropdown ul li a,
.quick-action-dropdown ul li .anchor {
   text-decoration: none;
   width:100%;
   display:inline-block;
}

@media only screen and (max-width: 860px) {
   /*
    * make tabular-form resemble the one-col version
    */
   table.tabular-form > tbody > tr > td {
      display:block;
   }
   table.tabular-form > tbody > tr > td.form_field_label {
      padding-bottom:0;
      font-size: 7pt;
   }
   table.tabular-form > tbody > tr.section > td.form_field_label {
      font-size: 9pt;
   }
   table.tabular-form > tbody > tr > td.form_field_input {
      padding-top: 2px;
   }
   .role_dialog{
      height: 80%;
      width: 100%;
      min-width: none;
   }
   .section.region_open_close {
      font-size: 11pt;
      white-space: normal;
   }
   .help {
      margin: 3px;
   }
}

/*
 * BREAKPOINT 640px
 */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) {
   .feedback {
      margin: auto;
      margin-top: 10px;
      width: auto;
   }
   .feedback.success {
      margin: auto;
      margin-top: 10px;
      width: auto;
   }
   table.tabular-form tr td .form_input_title_below {
      /* display: block; */
   }
   .w3-modal header .close-modal, .w3-modal-content > header > span.w3-button {
      height: 40px;
      font-size: 18px !important;
   }
   .w3-modal header .close-modal, .w3-modal-content > header h2 {
      font-size: 13px !important;
   }
   .w3-modal header, .w3-modal-content .title-container {
      height: 40px;
   }
   table.tabular-form tr td .tooltip_popup_button {
      cursor: pointer;
      display: inline-block;

   }
   .tooltip {
      background: #333;
      color: white;
      font-weight: bold;
      padding: 4px 8px;
      font-size: 8pt;
      border-radius: 4px;
      text-transform: initial;
      font-weight: normal;
      z-index:10;
   }

   .tooltip {
      display: none;
   }

   .tooltip[data-show] {
      display: block;
   }
   .notification_dialog {
      width:100%;
   }

   button.small,
   .button.small,
   a.button.small,
   span.button.small {
      font-size: 7pt;
      font-weight: normal;
      margin:2px;
}
}