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
  */

#snackbar {
   visibility: hidden;
   font-size: 17px;
   z-index: 1000;
   position: fixed;
   top: 50px;
   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: opac 0.8s;
   animation: opac 0.8s;
}

/* Style for when the snackbar is clickable */
#snackbar.clickable {
   cursor: pointer;
   transition: background-color 0.2s ease-in-out;
}

/* Add a hover effect for better user feedback on desktop */
#snackbar.clickable:hover {
   background-color: rgba(0, 0, 0, 0.1);
   /* Slight darkening effect */
}

/* Add a visual indicator (a chevron arrow) to the content */
#snackbar.clickable .snackbar-content::after {
   content: '›';
   /* This is a right-pointing single angle quotation mark */
   font-weight: bold;
   font-size: 1.5em;
   /* Make it slightly larger */
   padding-left: 10px;
   opacity: 0.7;
   position: relative;
   top: 1px;
}

@-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;
}

/*
    W3css modal stuff
 */
.w3-sidebar.w3-card,
.w3-modal-content,
.w3-modal-content footer {
   border-radius: 15px;
}

.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: var(--primary);
}

.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;
   width: clamp(350px, 100%, 600px);
   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: 10pt;
   padding: 0.5rem 1rem;
}

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;
}

.pager select,
.page_number select {
   padding: 5px 20px 5px 10px;
   margin: auto;
   width: auto;
}

.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;
   text-decoration: none;
   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');
}

/*
  * 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_menu .bulk_import a {
   background-image: url('images/page_menu-bulk_import.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: var(--primary);
}

.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;
}

/*
  * 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;
   padding-bottom: 1rem;
}

div.tabular-form>.tr>.td:first-child {
   white-space: nowrap;
   padding-bottom: 1rem;
}

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 {
   padding: 5px;
   margin: 5px;
   background-color: var(--primary);
   border: 0;
   color: #FFF;
   border-radius: 20px;
   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-decoration: none;
   text-align: center;
   font-weight: bold;
}

button.risky,
.button.risky,
a.button.risky,
span.button.risky {
   background-color: white;
   color: #A00 !important;
   border: solid 1px;
}

button.risky:hover,
.button.risky:hover,
a.button.risky:hover,
span.button.risky:hover {
   background-color: #FEE;
   border-color: #FEE;
}

button.danger,
.button.danger,
a.button.danger,
span.button.danger {
   background-color: #A00;
   color: white !important;
}

button.danger:hover,
.button.danger:hover,
a.button.danger:hover,
span.button.danger:hover {
   background-color: #FCC;
   border-color: #A00;
   color: #A00 !important;
}

button.secondary,
.button.secondary,
a.button.secondary,
span.button.secondary {
   background-color: var(--white);
   color: var(--primary);
   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;
}

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;
}

.switch-label {
   display: block;
   text-align: center;
}

/* 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;
   border-radius: 15px;
}

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

input:checked+.slider {
   background-color: var(--secondaryDarkBlue);
}

input:focus+.slider {
   box-shadow: 0 0 1px var(--secondaryDarkBlue);
}

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;
   font-size: 12pt;
}

/*
  * 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;
}

.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: 1rem 0.5rem;
   padding: 10px 20px 10px 50px !important;
   background-repeat: no-repeat;
   background-position: 10px center;
   border-radius: 2rem;
   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: 7px center;
}

.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');
}

.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 30px !important;
   font-size: 90%;
   background-image: url('images/feedback_error.svg');
   background-size: 15px 15px;
   display: block;
   margin: 5px;
}

tr label.warning,
tr span.warning,
tr div.warning {
   padding: 5px 2px 5px 30px !important;
   font-size: 90%;
   background-size: 15px 15px;
}

textarea.success,
input.success,
select.success,
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%;
}

.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: 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;
}

/*
  * 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');
}

#filtered_fields ul,
#selected_search_fields ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: inline-block;
   margin-left: 0.5ex;
}

#filtered_fields ul li,
#selected_search_fields ul li {
   display: inline-block;
   padding-right: 0.8ex;
}

#filtered_fields>ul>li>ul>li,
#selected_search_fields>ul>li>ul>li {
   white-space: nowrap;
   font-weight: bold;
}

#filtered_fields>ul>li>ul>li:last-child,
#selected_search_fields>ul>li>ul>li:last-child {
   color: sienna;
}

#filtered_fields.active,
#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;
}

#filtered_fields .clear_search,
#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;
}

#filtered_fields .tooltip_popup_button,
#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;
   _float: right;
   position: absolute;
}

.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;
}

/**
 * animated labels
*/
.animated-labels label {
   transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
   position: absolute;
   color: #999;
   padding: 5px 10px;
   top: 10px;
   /* bottom: 0; */
   z-index: -1;
   left: 10px;
}

#role_form .animated-labels input:focus+label {
   font-size: 80%;
   top: -5px;
}

.animated-labels input:focus+label {
   background: var(--secondaryGreen);
   color: white;
   font-size: 80%;
   padding: 1px 10px;
   z-index: 2;
   top: -5px;
   left: 10px;
   border-radius: 5px;
}

/*
  * 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;
}

@media only screen and (max-width: 860px) {

   button,
   .button,
   a.button,
   span.button {
      font-weight: bold;
      margin: 0.5rem 0.1rem;
      width: clamp(8rem, 40%, 15rem);
      padding: 10px 10px;
   }

   /*
     * 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 {
      font-weight: bold;
      padding-bottom: 0.5rem;
      font-size: 9pt;
   }

   table.tabular-form>tbody>tr.section>td.form_field_label {
      font-size: 10pt;
   }

   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%;
   }
}