: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: #303436;
--tab_color_highlighted: #fff;
--table_header_color: #afc4de;
--thumb_color: #416b9f;
--title_color: #638ecf;
--warning_button_back_color: #F5D7A8;

}

@font-face {
    font-family: "Glyphicons Halflings";
    src: url(/webmax-comms-pwa/fonts/glyphicons/glyphicons-halflings-regular.eot?5be1347c682810f199c7f486f40c5974);
    src: url(/webmax-comms-pwa/fonts/glyphicons/glyphicons-halflings-regular.eot?5be1347c682810f199c7f486f40c5974?#iefix) format("embedded-opentype"), 
    url(/webmax-comms-pwa/fonts/glyphicons/glyphicons-halflings-regular.woff2?be810be3a3e14c682a257d6eff341fe4) format("woff2"), 
    url(/webmax-comms-pwa/fonts/glyphicons/glyphicons-halflings-regular.woff?82b1212e45a2bc35dd731913b27ad813) format("woff"), 
    url(/webmax-comms-pwa/fonts/glyphicons/glyphicons-halflings-regular.ttf?4692b9ec53fd5972caa2f2372ae20d16) format("truetype"), 
    url(/webmax-comms-pwa/fonts/glyphicons/glyphicons-halflings-regular.svg?060b2710bdbbe3dfe48b58d59bd5f1fb#glyphicons_halflingsregular) format("svg");
}


body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-size: 14px;
line-height: 1.42857143; */

color: var(--stand_alone_text_color);

}

h2 {

margin-top: 20px;
font-weight: 500;
line-height: 1.1;

}

p {

font-size: 1.6rem;

}

#voicemail_list {
  width: 1140px;
  margin: 0 auto;
}

#listener_list, #recent_calls_list {

font-size: 1.6rem;

}

/* the new tab stuff */
.tab-bar {
display: flex;
border-bottom: 1px solid #ccc;
}

.tab-button {
padding: 10px 20px;
margin: 0;
background: #f1f1f1;
border: none;
cursor: pointer;
position: relative;
}

.tab-button.active {
background: #ffffff;
border-bottom: 2px solid #007bff;
}

.close-button {
position: absolute;
right: 5px;
top: 5px;
font-size: 12px;
cursor: pointer;
}

.tab-panel {
display: none;
padding: 20px;
background: #ffffff;
}

/*********************************** *************/

  .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);
  
  }
  
  #app {

    display:flex;
    flex-direction: column;
  
  }
  
  #app_content {
  
    height: calc(100vh - 9.4rem);
  
  }
  
  span.webmax_link {
  
    text-decoration:underline;
    color: #337ab7;
  
  }
  
  button.link_button {
  
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
  
  }