/*
html, body {
    background-color: #fff;
    color: #636b6f;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 100vh;
    margin: 0;
}
*/

:root {
  --active_color: #0a2cad;
  --active_element_color: #2D67D1;
  --alert_button_back_color: red;
  --artificial_group_color: #d85808;
  --base_hover_background_color: #305B9C;
  --border_color: #AAA;
  --change_field_background_color: transparent;
  --change_field_text_color: orange;
  --company_page_width: 964px;
  --disabled_text_color: #CCC;
  --error_field_background_color: orange;
  --error_field_text_color: #000;
  --field_background_color: #F8F8F8;
  --field_label_color: #D8E3F3;
  --hover_cancel_color: orange;
  --hover_color:  #D8E3F3;
  --hover_danger_color: red;
  --hover_positive_color: green;
  --inputfilelabel_background_color: #F8F8F8;
  --inputfilelabel_text_color: #555;
  --issue_field_text_color: orange;
  --jo_closed_color: #636B6F;
  --jo_exclusive_color: blue;
  --jo_expired_color: #636B6F;
  --jo_open_color: #636B6F;
  --jo_replacement_color: red;
  --odd_tr_color: #f1f4f9;
  --page_width: 1130px;
  --place_holder: #D0D0D0;
  --popup_corner_radius: 0.8rem;
  --progress_bar_color: green;
  --progress_bar_empty_color: #DDD;
  --readonly_field_label_color: #D8E3F3;
  --search_active: #f7e16f;
  --stand_alone_text_color: #636B6F;
  --tab_color_highlighted: #fff;
  --table_header_color: #afc4de;
  --thumb_color: #416b9f;
  --title_color: #638ecf;
  --warning_button_back_color: #F5D7A8;

}

@media(max-width: 420px ) {

  /* html.webmax-html {  this is the base of rem */

/*    font-size: 30px; */ /* 1 rem is now 30 pixels */

/* } */

}

html,body {

  color: var(--stand_alone_text_color);

}

@font-face {
    font-family: "DejaVu Sans";
    src: url("/fonts/DejaVu/DejaVuSans.ttf");
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("/fonts/DejaVu/DejaVuSans-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("/fonts/DejaVu/DejaVuSans-Oblique.ttf");
    font-style: italic;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("/fonts/DejaVu/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("/fonts/DejaVu/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}

@font-face {
    font-family: "DejaVu Sans";
    src: url("/fonts/DejaVu/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

.webmax-block-header {

  background-color: #638ecf;
  border: 1px solid #638ecf;
  padding-bottom: .6rem;
  padding-top:    .6rem;
  padding-left:   1rem;
  padding-right:  1rem;
  margin-bottom: 0;
  color:white;
  font-size: 1.6rem;

}

.webmax-downarrow {

  /* used in our dropdowns */
  margin-right: .5em;
  font-size: .8em;

}

.webmax-dropdown-container {

  border: 1px solid var(--border_color);
  padding-top: .4em;
  padding-left: .4em;
  height: 2.5em;
  background-color: rgb(248,248,248);

}

.webmax-dropdown-container input {

  padding-left: 0;

}

.active_tab {

  background-color: var(--tab_color_highlighted);
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;

}

.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.content {
    text-align: center;
}

.title {
    font-size: 84px;
}

.popup_title {

  color: var(--stand_alone_text_color);
  display:inline-block;
  margin-left:2em;

}

.links > a {
    color: var(--stand_alone_text_color);
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.m-b-md {
    margin-bottom: 30px;
}

td.field-label {
  vertical-align:top;
  text-align:left;
  padding:.4rem 0 .4rem .4rem;
  white-space: nowrap;
  position: relative;
  color: var(--stand_alone_text_color);
}

div.field-label {
  background-color: var(--field_label_color);
  border-bottom-left-radius: .5em;
  border-top-left-radius: .5em;
  border: 1px solid var(--border_color);
  border-right: none;
  height: 2.5em;
  padding: .4em 3em .4em .4em;
  color: var(--stand_alone_text_color);

}

td.field-input {
  vertical-align:top;
  text-align:left;
  padding:.4rem 0 .4rem 0;
  white-space: nowrap;
  color: var(--stand_alone_text_color);
}

.input-field {
  width:100%;
  border: 1px solid var(--border_color);
  padding:.4em;
  background-color: rgb(248,248,248);
  height: 2.5em;
  border-radius: 0 .5em .5em 0;

  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  color: var(--stand_alone_text_color);
}

select.select-field {
  height: 2.5em;
  width:100%;
  border: 1px solid var(--border_color);
  background-color: rgb(248,248,248);
  padding: .4em;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  -webkit-appearance:none;
  border-radius: 0 .5em .5em 0;
  color: var(--stand_alone_text_color);
}

textarea.textarea-field {
    width:100%;
    border: 1px solid var(--border_color);
    background-color: rgb(248,248,248);
    border-radius: 0 .5em .5em 0;
    padding: .5em;

    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    color: var(--stand_alone_text_color);
}

div.change_field {
  background-color: var(--change_field_background_color);
  color: var(--change_field_text_color);
  font-weight:normal;
  padding-left:.5em;
  margin-top:.3rem;
}

div.error_field {

    background-color: var(--error_field_background_color);
    color: var(--error_field_text_color);
    font-weight:normal;
    padding:.4em;
    margin-top:.5rem;
    margin-bottom: .4rem;

}

.issue_field {

    white-space: normal;
    background-color: transparent;
    color: var(--issue_field_text_color);
    font-weight:normal;
    padding:.4em;
    margin-top:.5rem;
    margin-bottom: .4rem;

}

.error-border {
  border-color: var(--error_field_background_color);
  box-shadow: var(--error_field_background_color) 0px 0px 5px 0px;
}

.our-focus, .input-field:focus, textarea.textarea-field:focus, select.select-field:focus, .mid-field:focus, .action-field:focus {

  box-shadow: 0px 0px 5px rgba(81, 203, 238, 1)!important;
  border: 1px solid rgba(81, 203, 238, 1)!important;

}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfilelabel {

  width: 100%!important;

  border-radius: 0 .5em .5em 0;
  background-color: var(--inputfilelabel_background_color);

  font-weight:300;
  line-height: inherit;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  text-align:center;
  margin:0;
  color: #CCC;
}

.inputfilelabel svg {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    fill: var(--inputfilelabel_text_color);
    margin-top: 0em;
    margin-right: 0.25em;
}

.inputfilelabel:focus {
  /*background-color: #722040;
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px; */
  outline: none;
  box-shadow:none;
}


.inputfilelabel * {
	/* pointer-events: none; */
}

.file-selected {

    color: rgb(99,107,111)!important;

}

.action-row td {

  padding: .5rem;

}

.action-button {

  width:8rem;
  background-color: #ccc;
  color:#444;
  border: none;
  border-radius: .5em;
  padding-top: .5em;
  padding-bottom: .5em;
  text-align:center;
  text-decoration:none;

  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}

.action-button:hover {

   background-color: var(--base_hover_background_color);
   color: #fff;
   text-decoration:none;

}

.action-button:focus {

   text-decoration:none;

}

.action-button:disabled, .action-button.disabled {

  background-color: #eee!important;
  color:#fff!important;

}

.navigation-button {

  display: inline-block;
  min-width:4em;
  background-color: #ccc;
  color:#444;
  border: none;
  border-radius: .5em;
  text-align: center;
  padding-top:.5em;
  padding-bottom:.5em;
  padding-left:1em;
  padding-right:1em;
  text-decoration: none;
  cursor: pointer;

  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;

}

.navigation-button:hover {

  background-color: #0a2cad;
  color: #fff;
  text-decoration: none;
  cursor:pointer;

}

.navigation-button.disabled,.navigation-button.disabled:hover {

  cursor: default;
  background-color: #eee;
  color:#fff;
  text-decoration: none;

}

.required_field {
	background-color: orange;
	width: 2px!important;
	height: 1.5em!important;
	margin:0;
	top:.8em;
  right: .2em;
  position: absolute;
  z-index: 998;
}

.required_field .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #666;
  color: #fff;
  text-align: center;
  padding: .5em;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  white-space: nowrap;
  position: relative;
  top: -2em;
  left: unset;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.required_field:hover .tooltiptext {
  visibility: visible;
}

.split-field {
  background-color: #00a4ff;
	width: 2px!important;
	height: 1.5em!important;
	margin:0;
	top:.8em;
  right: .2em;
  position: absolute;
  z-index: 998;
}

.split-field .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #666;
  color: #fff;
  text-align: center;
  padding: .5em;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  white-space: nowrap;
  position: relative;
  top: -2em;
  left: unset;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.split-field:hover .tooltiptext {
  visibility: visible;
}

.popup-action-button {

    min-width:5em;
    padding-left: 1em;
    padding-right:1em;
    border: 1px solid transparent;
    border-radius: .3em;
    margin-right:1em;

    background-color: #ccc; /* temp test */
    color: #444;            /* temp test */

    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

.popup-action-cancel {

  background-color: #ccc;
  color: #444;

}

.popup-action-cancel:hover {

   background-color: orange;
   color: #fff;
}

.popup-action-confirm {

  background-color: #ccc;
  color: #444;

}

.popup-action-confirm:hover {

   background-color: green;
   color: #fff;
}

.popup-action-yes:hover {

   background-color: green;
   color: #fff;
}

.popup-action-no:hover {

   background-color: #0a2cad;
   color: #fff;
}

.popup-action-delete:hover {

  background-color: red;
  color:#fff;

}

.popup-action-confirm-delete:hover {

  background-color: red;
  color:#fff;

}

.popup-action-cancel-delete:hover {

  background-color: orange;
  color: #fff;

}

.popup-action-delete:disabled, .popup-action-yes:disabled, .popup-action-no:disabled, .popup-action-confirm:disabled, .popup-action-cancel:disabled {

  background-color: #eee;
  color: #ccc;

}

::-webkit-input-placeholder { /* Chrome */
  color: var(--place_holder)!important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--place_holder)!important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--place_holder)!important;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: var(--place_holder)!important;
  opacity: 1;
}

span.glyphicon:hover, i.fa:hover, div.glyphicon:hover {
   color: #0a2cad;
   cursor: pointer;
 }

 .webmax-toggle li input {

   margin-right: .5em;

 }

.webmax-toggle span.caret {

   cursor: pointer;
   outline: none;

 }

 .webmax-toggle span.caret.disabled {

    cursor: default;
    color: #ccc;

  }

/*
  div.dropdown-menu {

    padding: .5em;
    width: 100%;

  }

  div.dropdown-menu ul {

    list-style: none;
    padding:0;

  }

  div.dropdown-menu li {

    cursor: pointer;
    padding: .4em;

   }

 div.dropdown-menu li.highlite {

   background-color: #c3e0f3;

 }

 div.dropdown-menu li.active, div.dropdown-menu li.active.highlite {

    background-color: #0a2cad;
    color:#fff;

  }

 div.dropdown-menu.dont-select li.active, div.dropdown-menu.dont-select li:hover {

    background-color: #fff!important;
    color:#aaa!important;

  }
*/

div.webmax-dropdown-menu {

  padding: .5em;
  width: fit-content;

}

div.webmax-dropdown-menu ul {

  list-style: none;
  padding:0;

}

div.webmax-dropdown-menu li {

  cursor: pointer;
  padding: .4em;
  white-space: nowrap;

 }

div.webmax-dropdown-menu li.highlite, div.webmax-dropdown-menu li.highlite2 {

 background-color: #c3e0f3;

}

div.webmax-dropdown-menu li.active, div.webmax-dropdown-menu li.active.highlite {

  background-color: #0a2cad;
  color:#fff;

}

div.webmax-dropdown-menu.dont-select li.active, div.webmax-dropdown-menu.dont-select li:hover {

  background-color: #fff!important;
  color:#aaa!important;

}

  div.upload_file_name, span.upload_file_name {
    text-overflow: ellipsis;
    overflow:hidden;
    display:inline-block;
    white-space:nowrap;
    width:20em;
  }

  td.company-link, td.contact-link {
    text-align:left;
  }

  h1.page {
    font-size: 2.5rem;
    text-align: left;
    margin-top: 0;
    color: #1b9bda;
  }

  #referrals_table th {

    background-color: lightgray;
    padding-left: .5em;

  }

  #referrals_table td {

    padding-top:.3em;
    padding-bottom:.3em;
    padding-right:. 5em;
    padding-left: .5em;

  }

  #referrals_table .referral_tr:hover {

    background-color: var(--hover_color);
    color: var(--stand_alone_text_color);
    cursor:pointer;

  }

.paging-button {

    width:3em;
    border-radius:.3em;
    margin-left: 1em;
    border-radius: .2em;
    background-color: white;
    border: 1px solid var(--border_color);
}

.paging-button:hover:enabled {

  background-color: #d1e3f3;

}

.paging-button:disabled {

  color: #ddd;
  border: 1px solid #ddd;

}

.screen_title {
  color: var(--title_color);
  margin-bottom: .7em;
  font-size: 1.6rem;
}

#app-users-name {

  cursor: pointer;
  color: var(--title_color);
}

.fixed-pitch {

  font-family: "Courier New";
  font-size: 1.25rem;
  font-style: normal;

}

.jo_exclusive_color {

  color: var(--jo_exclusive_color)!important;

}

.jo_open_color {

  color: var(--jo_open_color)!important;

}

.jo_closed_color {

  color: var(--jo_closed_color)!important;

}

.jo_expired_color {

  color: var(--jo_expired_color)!important;

}

.jo_replacement_color {
  color: var(--jo_replacement_color)!important;
}

.no-select {

-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                               supported by Chrome and Opera */

}

.file_attachments .file_progress_bar {

    height: inherit;

}

.file_attachments .attachment_list {

  position: relative;
  height: 100%;
  list-style:none;
  padding:0;

}

.file_attachments .progress_bar_container {

   position:absolute;
   background-color: var(--progress_bar_empty_color);
   top: 0;
   left: 0;
   width: 100%;
   height: inherit;
   opacity: 0.9;;
}

.file_attachments .progress_bar {

  height: inherit;
  background-color: var(--progress_bar_color);
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
  position: relative;

}

.file_attachments .contact_notes_attachment-view {

   position:absolute;
   right:.3em;
   top:.2em;
   font-size:1.5em;

}

.file_attachments .add_attachment-container {

  display: flex;
  margin: .8em auto 0 auto;
  padding: .3em .2em 0 .2em;
  border: 1px solid gray;
  border-radius: .3em;
  background-color: lightgray;
  align-items: center;
  color: var(--stand_alone_text_color);
  fill: var(--stand_alone_text_color);
  cursor: pointer;

}

.file_attachments .add_attachment-container:hover {

  background-color: #0a2cad;
  color: #fff;
  fill: #fff;

}

.file_attachments .add_attachment-label {

  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;

}

.file_attachments .add_attachment-container.disabled,.file_attachments .add_attachment-container.disabled:hover {

  cursor: default;
  background-color: #eee;
  color:#fff;
  text-decoration: none;
  fill:#fff;

}

.file_attachments li.attachment {

  position:relative;
  cursor: pointer;
  height: 2em;

}

.file_attachments li.attachment:hover {

  background-color: var(--hover_color);

}

.file_attachments .attachment-name {

 display:flex;
 align-items:center;
 height:inherit;
 padding-left:.4em;
 padding-right:.4em;

}

.file_attachments .delete-attachment {

  margin-top:-.05em;
  font-size:1.3em;
  opacity:0;

}

.file_attachments .delete-attachment:hover {

    color:red;

}

.file_attachments .attachment_row {

   display:flex;
   flex-grow:3;

}

.file_attachments .attachment_row div.field-label,
.file_attachments .attachment_row div.field-input {

  height: auto;

}

.allow-focus, .background-focus {

  outline:none;

}

.look-ahead {
    width: 100%;
    text-align: left;
    border: none;
    background-color: transparent;
    outline: none;
    box-shadow: none;
}

div.combobox span.caret {
  right:.35em;
  top:.75em;
  outline:none;
}

img.clear-field-icon {

  width: 1.5rem;
  margin-right:.4rem;
  cursor:pointer;

}

/* for where we need our own radio buttons */

.radio-item {
  display: inline-block;
  position: relative;
  font-weight:normal;
  display:flex;
  align-items:normal;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: .3rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.8rem;
  border: 1px solid #004c97;
  background-color: transparent;
  margin-right:.8rem;
}

.radio-item label.disabled:before {
  border: 1px solid #ccc;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 0.5rem;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.6rem;
  left: 0.3rem;
  content: " ";
  display: block;
  background: #004c97;
}

.radio-item input[type=radio].disabled:checked + label:after {

  background: #ccc;

}

div.popup-backdrop {

  position: absolute;
  left: 0px;
  top: 4.4rem; /* currently the height of the call bar */
  width: 100%;
  height: calc( 100% - 4.4rem );
/*  display: flex; */
  background-color: rgba(11, 11, 11, 0.7);
   /* overflow: hidden; */
  z-index: 20000;
  padding: 1rem; /* so that popups don't drag to the absolute edge. */

}

div.webmax-popup, dialog.webmax-popup {

  padding: 0;
  border-radius: var(--popup_corner_radius);
  display:none;
  background-color: white;
  position: absolute;
 /* background: #FFF; */
  background: var(--title_color);
 /* overflow:hidden; this will chop off dropdowns in popups - we don't want that to happen*/
  border: 1px solid var(--title_color); /* cleans up the popup when a backdrop is on top of it

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */

}

div.webmax-popup-content {

  background-color: white;
  border-bottom-left-radius: var(--popup_corner_radius);
  border-bottom-right-radius:var(--popup_corner_radius);
  position:relative;

}

div.webmax-popup form, dialog.webmax-popup form {

  padding: 1rem;

}

div.webmax-popup h1, dialog.webmax-popup h1 {

  display:flex;
  font-size: 2rem;
  flex-direction:row;
  justify-content:space-between;
  background-color: var(--title_color);
  color: white;
  padding: 1rem;
  margin-top:0;
  margin-bottom:0;
  border-top-left-radius: var(--popup_corner_radius);
  border-top-right-radius: var(--popup_corner_radius);
  align-items: center;

}

div.webmax-popup h2, dialog.webmax-popup h2 {

  display:flex;
  align-items:center;
  flex-direction:row;
  font-size: .9em;
  margin-top: 0;
  margin-bottom: 0;
  color: white;
  margin-left: 1em;

 }


div.webmax-popup hr, dialog.webmax-popup hr {

  border-top: 1px solid #337ab7;
  margin-top: 1rem;
  margin-bottom:.5rem;

}

div.webmax-popup div.popup-title, dialog.webmax-popup div.popup-title {

  display:flex;
  align-items: center;

}

div.webmax-popup span.popup-title, dialog.webmax-popup span.popup-title {

  display:flex;
  align-items: center;

}

div.disabled-overlay {

  background-color:transparent;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

}

div.slow-network-detected {

  color: orange;
  text-align:center;

}

div.picker.picker-dialog {
  z-index:10000;
}

div.daterangepicker.dropdown-menu {

  z-index: 20000!important; /* needs to be in front of all popups */

}

.sort-arrow-container {

  margin-left: 1rem;

}

.sorting-arrow {

  width: 1rem;
  fill: #666;

}

button.sort-button {

  display:none;
  border:none;
  background-color: transparent;

}

button.sort-button svg {

  width: 1rem;

}

.webmax-selector  {

  display: flex;
  align-items: center;
  background-color: white;
  color: grey;
  flex-direction:row;

}

.webmax-selector:disabled {

  opacity: .25;
}

.webmax-selector label {

  width: 3em;
  border-left: 1px solid var(--border_color);
  border-top: 1px solid var(--border_color);
  border-bottom: 1px solid  var(--border_color);
  text-align:center;
  margin-bottom: 0;
  font-size: .8em;
  cursor: pointer;

}

.webmax-selector :last-child {

  border-right: 1px solid  var(--border_color);

}

.webmax-selector input[type=radio]:checked + label {

  background-color: var(--active_color);
  color: white;

}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #666;
  color: #fff;
  text-align: center;
  padding: .5em;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: relative;
  top: -2em;
  left: unset;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

label.artificial_group {

  color: var(--artificial_group_color);

}