/* CSS Document */
/* Copyright Paul G Skillen 2023 */

/* ####################################################
    Naming conventions::after
    For Classnames use name_underscore_char between chars so that it is not like bootstrap-convention-style
    Framework classes use saas_  prefiz for class names
    App specific classes use app_  prefix
    If doing any boostrap class overrides there is a section below. Be sure to put them there.
    All colors paramets must use variables and they must be defined in the color section
----------------------------------------------------- */

/*@impo-container url("/bootstrap/5/css/bootstrap.min.css");*/

/* ####################################################
    Start color definitions
----------------------------------------------------- */

:root {
  /* App color palette */

  /*  monochromatic versions of main color */
  --main_base_color: #16c0ff;
  --monochromatic_-2: #f5fcff;
  --monochromatic_-1: #f3fafe;
  --monochromatic_1: #f1fbff;
  --monochromatic_2: #baedff;
  --monochromatic_3: #84deff;
  --monochromatic_4: #4bcfff;
  --monochromatic_5: #16c0ff;
  --monochromatic_6: #04a1db;
  --monochromatic_7: #0279a5;
  --monochromatic_8: #00516e;
  --monochromatic_9: #002837;

  /*  colors to use */
  --app_body_bg_color: var(--monochromatic_2);
  --app_purple_p: #424372;
  --app_orange_p: rgb(238, 130, 41);
  --app_orange_p2: rgb(248, 140, 51);
  --app_body_color_text: var(--monochromatic_9);

  /* App UX colors assignments */
  --appHeaderBig_bg: var(--monochromatic_8);
  --appHeaderSmall_bg: var(--monochromatic_8);
  --appHeaderBig_text: white;
  --appHeaderSmall_text: white;
  --app_bs_link_color: var(--bs-dark);
  --app_hover_link_color_bg: rgba(var(--palette-neutral-100, 0, 0, 0), 0.03);
  --app_success_color_text: var(--bs-success);
  --app_danger_color_text: orangered;
  --app_warning_color_text: orange;
  --app_required_text: red;
  --app_card_small_fade_text: rgba(var(--palette-neutral-100, 0, 0, 0), 0.5);
  --app_sa_act_primary_btn_bg: var(--bs-yellow);
  --app_sa_act_primary_btn_hover: #fed016;
  --app_inline_edit_form_bg: #fffae6;
  --app_dropdown_menu_bg: var(--bs-gray-100);
  --app_dropdown_menu_border: thistle;


  --app_user_card_footer_bg: white;
  --app_user_view_edit_card_border_top: var(--monochromatic_6);
  --app_view_card_border_top: var(--monochromatic_6);
  --app_user_card_bg: white;
  --app_user_card_hdr_bg: white;
  --app_user_card_hdr_border_top: var(--monochromatic_6);
  --app_user_card_hdr_text: rgb(95, 2, 95);
  --app_user_card_body_text: rgba(var(--palette-neutral-100, 0, 0, 0), 1);
  --app_user_card_footer_text: var(--bs-gray-800);
  --app_card_border_color: var(--monochromatic_2);
  --app_pg_content_panel_border_color: var(--monochromatic_2);
  --app_sa_invalid_feedback_text: var(--bs-danger);
  --app_form-label_text: var(--monochromatic_7);
  --app_col-form-label_text: var(--app_purple_p);
  --app_user_name_text: var(--monochromatic_8);
  --app_progress_bar_bg: var(--bs-gray-300);
  --app_progress_bar_color: var(--bs-info);
  --app_progress_bar_border: var(--bs-info);
  --app_progress_bar_text: var(--bs-blue);
  --app_table_slim_row_tr_text: rgba(var(--palette-neutral-100, 0, 0, 0), 1);
  --app_table_list_hover: var(--bs-gray-100);
  --app_list_table_row_highlight: var(--monochromatic_1);
  --app_list_table_row_border: var(--monochromatic_3);
  --app_numberCircle_text: var(--bs-gray-600);
  --app_numberCircle_border: var(--bs-gray-300);

  --app_modal_header_bg: var(--monochromatic_-2);
  --app_modal_title_text: var(--monochromatic_9);
  --app_modal_header_icon: var(--monochromatic_7);
  --app_modal_border: var(--app_purple_p);
  --modal_backdrop: var(--bs-gray-700);

  --app_click2edit_hover: var(--bs-gray-100);
  --app_sidebar_bg: #42437210;
  --app_sidebar_menu_text: rgba(0, 0, 0, 0.65);
  --app_sidebar_menu_text_hover: rgba(0, 0, 0, 0.85);
  --app_sidebar_menu_bg_hover: #d2f4ea;

  --app_wizard_icon_text: black;
  --app_smile_icon_text: rgb(129, 182, 6);
  --app_checked_icon_text: rgb(129, 182, 6);
  --app_frown_icon_text: rgb(238, 130, 41);
  --app_secret_icon_text: var(--bs-gray-400);
  --app_help_icon_text: var(--sb_main_color_med);
  --app_success_icon_text: rgb(129, 182, 6);
  --app_fail_icon_text: rgb(238, 57, 33);
  --app_edit_icon_text: rgb(129, 182, 6);
  --app_edit_icon_text_hover: var(--bs-gray-500);
  --app_ban_icon_text: rgb(238, 130, 41);
  --app_warning_icon_text: rgb(238, 130, 41);
  --app_locked_icon_text: rgb(1, 212, 149);
  --app_archived_icon_text: var(--bs-gray-400);
  --app_root_team_icon_text: var(--bs-purple);
  --app_locked_icon_text: rgb(1, 212, 149);
  --app_obj_status_badge_text: white;
  --app_donut_label_text: var(--monochromatic_8);

  --app_badge_success_text_color: var(--bs-gray-700);
  --app_badge_warning_text_color: var(--bs-gray-700);
  --app_badge_danger_text_color: white;
  --app_searchbox_bg: var(--monochromatic_-2);

  --app_card_title_text: var(--monochromatic_8);
  --app_btn_hover_bg: orange;
  --app_btn_hover_border: orange;

  --app_btn_hover_text: white;

  --app_breadcrumb_text: rgb(225, 225, 225);
  --app_breadcrumb_divider_text: rgb(160, 160, 160);
  --app_breadcrumb_active_text: white;

  /* App Instance specific */
  --ts_score_below_color_text: red;
  --ts_score_above_color_text: green;
  --ts_score_middle_color_text: orange;
}
.bg_gray_100 {
  background-color: var(--bs-gray-100);
}
.bg_gray_200 {
  background-color: var(--bs-gray-200);
}
.bg_gray_300 {
  background-color: var(--bs-gray-300);
}
.bg_gray_400 {
  background-color: var(--bs-gray-400);
}
.bg_gray_500 {
  background-color: var(--bs-gray-500);
}
.bg_gray_600 {
  background-color: var(--bs-gray-600);
}
.bg_gray_700 {
  background-color: var(--bs-gray-700);
}
.bg_gray_800 {
  background-color: var(--bs-gray-800);
}
.bg_gray_900 {
  background-color: var(--bs-gray-900);
}
.bg_light {
  background-color: var(--bs-gray-100);
}

.bg_blue {
  background-color: var(--bs-blue) !important;
}
.bg_indigo {
  background-color: var(--bs-indigo) !important;
}
.bg_purple {
  background-color: var(--bs-purple) !important;
}
.bg_pink {
  background-color: var(--bs-pink) !important;
}
.bg_red {
  background-color: var(--bs-red) !important;
}
.bg_orange {
  background-color: var(--bs-orange) !important;
}
.bg_yellow {
  background-color: var(--bs-yellow) !important;
}
.bg_green {
  background-color: var(--bs-green) !important;
}
.bg_teal {
  background-color: var(--bs-teal) !important;
}
.bg_cyan {
  background-color: var(--bs-cyan) !important;
}

.text_blue {
  color: var(--bs-blue) !important;
}
.text_green {
  color: var(--bs-green) !important;
}
.text_indigo {
  color: var(--bs-indigo) !important;
}
.text_purple {
  color: var(--bs-purple) !important;
}
.text_pink {
  color: var(--bs-pink) !important;
}
.text_red {
  color: var(--bs-red) !important;
}
.text_orange {
  color: var(--bs-orange) !important;
}
.text_yellow {
  color: var(--bs-yellow) !important;
}
.text_green {
  olor: var(--bs-green) !important;
}
.text_teal {
  color: var(--bs-teal) !important;
}
.text_cyan {
  color: var(--bs-cyan) !important;
}
.saas_text_orange {
  color: var(--app_orange_p);
}
/* ----- End of Colors ------ */

/* ####################################################
    Start Bootstrap class overrides
----------------------------------------------------- */

.modal-title {
  /*bootstrap class override */
  color: var(--app_modal_title_text);
  font-weight: 400;
  font-size: var(--step-2) !important;
}
.modal-title i {
  color: var(--app_modal_header_icon);
}

.modal-content {
  border: 1px solid var(--app_modal_border);
}

.modal-header {
  /*bootstrap class override */
  background-color: var(--app_modal_header_bg);
}

.modal-body {
  /*bootstrap class override */
}

div.modal-header,
div.modal-body,
div.modal-footer {
  padding-left: 2rem;
  padding-right: 2rem;
}

.card {
  border: 1px solid var(--app_card_border_color);
}

.card-title {
  color: var(--app_card_title_text);
}

.modal-backdrop {
  background-color: var(--modal_backdrop);
}

.badge.bg-success {
  color: var(--app_badge_success_text_color) !important;
}
.badge.bg-warning {
  color: var(--app_badge_warning_text_color) !important;
}
.badge.bg-danger {
  color: var(--app_badge_danger_text_color) !important;
}

.btn:hover {
  background-color: var(--app_btn_hover_bg);
  border-color: var(--app_btn_hover_border);
  color: var(--app_btn_hover_text);
}

.form-control,
.form-select {
  background-color: white !important;
}
.form_group {
  margin-top: 0.2rem !important;
}
.breadcrumb a,
.breadcrumb li {
  color: var(--app_breadcrumb_text);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--app_breadcrumb_active_text);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--app_breadcrumb_divider_text);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, " > ");
}

.form-control {
  border: 2px solid var(--bs-gray-200) !important;
  /*padding: 0.5rem;*/
}
.form-group button {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
}

.form-label, form label {
  color: var(--app_form-label_text); 
  font-weight: 400;
  margin-bottom: 0.1rem !important;

}

.form-label,
.col-form-label {
  //font-size: 0.9rem;
  color: var(--app_form-label_text);
}

.form-group {
  margin-bottom: 0.4rem;
}

/* ####################################################
    Start responsice font calulcations and classes
    Created by James Gilyead & Trys Mudford
----------------------------------------------------- */
/* @link https://utopia.fyi/type/calculator?c=320,14,1.067,1500,16,1.125,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Step -2: 12.30px → 12.64px */
  --step--2: clamp(0.77rem, calc(0.76rem + 0.03vw), 0.79rem);

  /* Step -1: 13.12px → 14.22px */
  --step--1: clamp(0.82rem, calc(0.8rem + 0.09vw), 0.89rem);

  /* Step 0: 14.00px → 16.00px */
  --step-0: clamp(0.88rem, calc(0.84rem + 0.17vw), 1rem);

  /* Step 1: 14.94px → 18.00px */
  --step-1: clamp(0.93rem, calc(0.88rem + 0.26vw), 1.13rem);

  /* Step 2: 15.94px → 20.25px */
  --step-2: clamp(1rem, calc(0.92rem + 0.37vw), 1.27rem);

  /* Step 3: 17.01px → 22.78px */
  --step-3: clamp(1.06rem, calc(0.97rem + 0.49vw), 1.42rem);

  /* Step 4: 18.15px → 25.63px */
  --step-4: clamp(1.13rem, calc(1.01rem + 0.63vw), 1.6rem);

  /* Step 5: 19.36px → 28.83px */
  --step-5: clamp(1.21rem, calc(1.05rem + 0.8vw), 1.8rem);
}

/* ####################################################
    Fixes to keep boostrap worling for Print
----------------------------------------------------- */
@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
  }
  a:not(.btn) {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  @page {
    size: a3;
  }
  body {
    min-width: 992px !important;
  }
  .container {
    min-width: 992px !important;
  }
  .badge {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6 !important;
  }
  .table-dark {
    color: inherit;
  }
  .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
    border-color: #dee2e6;
  }
}

/* ####################################################
    Start top level classes
----------------------------------------------------- */

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding-top: 55px;
  margin: 0;
  font-family: "Segoe UI VSS (Regular)", "Segoe UI", "-apple-system",
    BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--app_body_color_text);
  /*background-color: rgba(251, 253, 255, 1);*/
  background-color: var(--app_body_bg_color);
  font-size: var(--step-0);
}

.saas_body_color_text {
  color: var(--app_body_color_text);
}

html {
  height: -webkit-fill-available;
  font-size: var(--step-0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--monochromatic_8);
}

h1,
.h1 {
  font-size: var(--step-5) !important;
}

h2,
.h2 {
  font-size: var(--step-4) !important;
}

h3,
.h3 {
  font-size: var(--step-3) !important;
}

h4,
h4 {
  font-size: var(--step-2) !important;
}

h5,
.h5 {
  font-size: var(--step-1) !important;
}

h6,
.h6 {
  font-size: var(--step-0) !important;
}

p {
  font-size: var(--step-0);
}

.font_small_1 {
  font-size: var(--step--1) !important;
}

.font_small_2 {
  font-size: var(--step--2) !important;
}

.u-step-2 {
  font-size: var(--step-2);
}

.ps_f1 {
  font-weight: 500;
  font-size: 250%;
  line-height: 48px;
}
.ps_f2 {
  font-weight: 500;
  font-size: 200%;
  line-height: 38.399px;
}
.ps_f3 {
  font-weight: 500;
  font-size: 175%;
  line-height: 33.6px;
}
.ps_f4 {
  font-weight: 500;
  font-size: 150%;
  line-height: 28.8px;
}
.ps_f5 {
  font-weight: 500;
  font-size: 125%;
  line-height: 24px;
}
.ps_f6 {
  font-weight: 500;
  font-size: 67%;
  line-height: 19.199px;
}
.ps_fp {
  font-weight: 300;
  font-size: 100%;
  line-height: 19.199px;
}
.ps_fa {
  font-weight: 300;
  font-size: 100%;
  line-height: 29.333px;
}

/* Enable google autocomplete address for modal */
.pac-container { z-index: 2000 !important; }

.sa_dropzone:hover {
  border-color: orange !important;
}

/* ####################################################
    Start logo definitions
----------------------------------------------------- */

.app_logo_box {
  height: 48px;
}
.app_logo_name {
  color: #31326f;
  font-weight: 700;
  margin-left: 0.25rem;
}

.app_convert_image-white {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* ####################################################
    Start of app and spa page layout blocks
----------------------------------------------------- */
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding: 0;
}

.app_header_big {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  margin: 0;
  background-color: var(--appHeaderBig_bg);
  color: var(--appHeaderBig_text);
}
.app_header_big svg {
  color: var(--appHeaderBig_text);
}

.app_header_big .dropdown-toggle {
  color: var(--appHeaderBig_text);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(256,256,256)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/*
.app_header_small .app_hamburger .btn-toggle:not(.collapsed)::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(256,256,256)'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
/*
.app_header_small app_hamburger .btn-toggle.collapsed::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(256,256,256)'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
} */

.app_header_small {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  background-color: var(--appHeaderSmall_bg);
  color: var(--appHeaderSmall_text);
}

.app_header_small #navbar1_collapse {
  background-color: var(--monochromatic_2);
  color: var(--app_body_color_text);
}

.app_header_small .dropdown-toggle {
  color: var(--appHeaderSmall_text);
}

.app_header_small .app_hamburger .btn-toggle {
  font-size: var(--step-0);
}

.app_spa_main_page_content_block {
  width: 100%;
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

#sidebar {
  min-width: 210px;
  max-width: 210px;
  background-color: var(--app_sidebar_bg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.app_spa_panel_content {
  margin: 0;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0;
  padding-bottom: 0;
}

.app_footer {
  margin-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* sps Page content classes */
.app_main {
  /* can insert page color here */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.app_pg {
  background-color: transparent;
}

.app_pg_hdr .app_pg_hdr_item {
  padding: 0px;
  padding-left: 2px;
  padding-right: 2px;
}

.app_pg_hdr .app_pg_hdr_title {
  padding: 0px;
  padding-left: 2px;
  padding-right: 0.8rem;
}

.app_pg_hdr .app_pg_hdr_item .form-select {
  background-color: transparent;
}

.app_pg_hdr .app_pg_hdr_item #name_search {
  background-color: var(--app_searchbox_bg) !important;
}

.app_pg_hdr {
  padding: 0px;
  padding-left: 2px;
  padding-right: 2px;
  margin-top: 1.5rem;
}

.app_pg_content_panel {
  margin: 0;
  margin-left: 0;
  margin-bottom: 0;
  margin-top: 2rem;
  padding: 0px;
}
.app_pg_content_panel_title {
}

.app_pg_body {
  /* Wraps all content on the page withing the page container */
}

.app_pg_body_content {
  padding: 0;
}

.app_pg_footer {
  margin: 0;
  background-color: var(--monochromatic_-2);
  padding: 0px;
}

/ * Panel classes */ .panel_title_bar {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.app_sub_panel_title_bar {
  min-height: 56px;
  margin-bottom: 0;
}

.panel_title_bar .app_pg_hdr_item .form-select {
  background-color: transparent;
}

.app_sub_panel_body {
  border: 1px solid var(--bs-gray-200);
  background-color: white;
  padding-left: 2rem;
  padding-right: 2rem;
}

.tab_panel_body {
  border-right: 1px solid var(--bs-gray-200);
  border-left: 1px solid var(--bs-gray-200);
  border-bottom: 1px solid var(--bs-gray-200);
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: white;
}



.app_sub_panel_card_group {
  background-color: transparent !important;
}

.no_pad_margin {
  margin: 0 !important;
  padding: 0 !important;
}

/* component classes */

.app_tab_content {
  padding-top: 1rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  padding-bottom: 1rem;
  border: 1px solid var(--app_pg_content_panel_border_color);
}

.table-responsive {
  /*prevent dropdown clipping */
  overflow: visible !important;
}
.saas_list_table {
  /*prevent dropdown clipping */
  overflow: visible !important;
}

.saas_list_table td {
  /*font-size: 0.875rem;*/
  font-weight: 400;
  text-decoration: none !important;
  vertical-align: middle;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  vertical-align: text-top;
}
.saas_list_table td:hover {
  /*text-decoration: underline !important ;*/
}

.saas_list_table tr:hover:not(.sub_detail) > td {
  background-color: var(--app_table_list_hover);
}
.saas_list_table_row_highlight {
  background-color: var(--app_list_table_row_highlight);
  /*border-bottom: 1px solid var(--app_list_table_row_border);*/
}
.saas_list_table td.app_fit,
.saas_list_table th.app_fit {
  /* make width of content */
  white-space: nowrap;
  width: 1%;
}

.saas_list_table th {
  font-weight: 500;
  color: var(--monochromatic_6);
}

.account_mgmt_form .page_heading {
}

#page-header {
  padding-top: 120px;
  background: linear-gradient(135deg, #35b8b0 0%, #1c799d 100%);
}

#header-img > img {
  -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
}
section {
  padding: 40px 0;
  position: relative;
}
h3.section-title {
  margin-bottom: 30px;
  font-weight: 400;
}

.account_mgmt_form {
  /* for all account signup, login, reset pwd type forms */
}

.pagination_bar .page-item {
  border: 1px solid rgba(var(--palette-neutral-100, 0, 0, 0), 0.015);
}

.pagination_bar {
  margin: 0;
  padding: 0;
}

.pagination_control {
  margin: 0;
  padding: 0;
}

.disable_link {
  pointer-events: none;
  font-weight: 200 !important;
}

.saas_required {
  color: var(--app_required_text);
}

.saas_form_hint {
  font-weight: 300 !important;
  font-size: var(--step--1);
  margin-bottom: 0.15rem;
}

.saas_form_hint_small {
  font-weight: 300 !important;
  font-size: var(--step--2);
  margin-bottom: 0.15rem;
}

/* ####################################################
    Start visual status/decoration classes
----------------------------------------------------- */

.sa_alert {
  color: var(--app_danger_color_text);
}

.sa_change_alert {
  color: darkorange;
}



.sa_changed {
  border: 2px solid orange !important ;
}

.sa_invalid_feedback {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--app_sa_invalid_feedback_text);
}


.sa_invalid_feedback {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--app_sa_invalid_feedback_text);
}

.customLink {
  cursor: pointer;
  color: var(--app_bs_link_color);
}

.customLink_no_ul {
  cursor: pointer;
}

.show_pwd_help {
  font-size: 0.9rem;
  background-color: var(--bs-gray-100);
  padding-top: 0.5rem;
}

.sa_act_primary_btn {
  background-color: var(--app_sa_act_primary_btn_bg);
}
.sa_act_primary_btn:hover {
  background-color: var(--app_sa_act_primary_btn_hover);
}

.sa_act_primary_btn:focus {
  background-color: var(--app_sa_act_primary_btn_bg);
}

#form_filter {
  width: 400px;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  padding-bottom: 0.7rem;
}

.filter_dropdown {
  padding-left: 0.7rem !important;
  padding-right: 0.7rem !important;
  padding-bottom: 0.7rem !important;
  background-color: var(--bs-light) !important;
  border: 1px !important;
}

.filter_dropdown #filter_btn {
}

.dropdown-menu {
  border: 1px solid var(--app_dropdown_menu_border) !important;
  background-color: var(--app_dropdown_menu_bg) !important;
}

.saas_action_btn {
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 6px;
  padding-left: 6px;
}

/* ####################################################
    Start of dashboard classes
----------------------------------------------------- */
.dashboard-indicator {
  width: 120px;
  height: 120px;
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.08);
          box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.indicator-count {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
}
.indicator-label {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}



 .box_clickable { cursor: pointer !important; }

/* ####################################################
    Start of Portal classes
----------------------------------------------------- */

.saas_view_card {
  border: 1px solid var(--app_view_card_border_top);
  border-top: 5px solid var(--app_view_card_border_top) !important;
  border-radius: 1rem;
}

.user_view_edit_card {
  border: 1px solid var(--app_user_view_edit_card_border_top);
  border-top: 5px solid var(--app_user_view_edit_card_border_top) !important;
  font-size: 1rem !important;
}

.saas_user_card {
  background-color: white !important;
  /* border-radius: 0.5rem !important; */
  margin-bottom: 1rem;
}

.saas_user_card_hdr {
  background-color: var(--app_user_card_hdr-bg) !important;
  border-top: 3px solid var(--app_user_card_hdr_border_top) !important;
  color: var(--app_user_card_hdr_text);
}

.saas_user_card_body {
  /*font-size: 0.8375rem !important;*/
  font-weight: 400;
  padding-bottom: 1px;
  margin-bottom: 0;
  color: var(--app_user_card_body_text);
}

.saas_user_card_footer {
  font-size: 0.75rem !important;
  font-weight: 400;
  color: var(--app_user_card_footer_text);
  background-color: var(--app_user_card_footer_bg) !important;
}

.saas_user_name {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--app_user_name_text);
}

.saas_card_small_fade_text {
  font-size: 0.75rem !important;
  font-weight: 400;
  color: var(--app_card_small_fade_text);
}

.saas_icon_info_row .row {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.saas_icon_info_row .row .col {
  padding: 0;
  margin: 0;
}

/* ####################################################
    Start of widget classes
----------------------------------------------------- */
 .progress_bar_clickable { cursor: pointer !important; }

.saas_progress_bar {
  background-color: var(--app_progress_bar_bg) !important;
  border: 1px solid var(--app_progress_bar_border) !important;
}
.saas_progress_color {
  background-color: var(--app_progress_bar_color);
}

.saas_progress_bar_text {
  color: var(--app_progress_bar_text);
}

.saas_warning_color {
  color: var(--app_warning_color_text);
  font-weight: 600;
}

.saas_danger_color {
  color: var(--app_danger_color_text);
  font-weight: 600;
}
.saas_success_color {
  color: var(--app_success_color_text);
  font-weight: 600;
}
.ts_score_below_color {
  color: var(--ts_score_below_color_text);
}

.ts_score_above_color {
  color: var(--ts_score_above_color_text);
}

.ts_score_middle_color {
  color: var(--ts_score_middle_color_text);
}

.numberCircle_score {
  font-weight: 600;
  width: 42px;
  line-height: 36px;
  border-radius: 50%;
  text-align: center;
  font-size: 14px !important;
  border: 4px solid;
  margin: 0;
  padding: 0;
}

.saas_click2edit {
}

.saas_click2edit:hover {
  background-color: var(--app_click2edit_hover);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  cursor: pointer;
}

.iconCircle {
  color: var(--app_numberCircle_text);
  width: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  border: 1px solid var(--app_numberCircle_border);
  margin: 0;
}

.numberCircle {
  color: var(--app_numberCircle_text);
  width: 32px;
  line-height: 32px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  border: 1px solid var(--app_numberCircle_border);
  margin: 0;
  padding: 0;
}

.numberCircle_small {
  color: var(--app_numberCircle_text);
  width: 20px;
  line-height: 14px;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  border: 1px solid var(--app_numberCircle_border);
  margin: 0;
  padding: 0;
}

.numberCircle_big {
  color: var(--app_numberCircle_text);
  width: 48px;
  line-height: 48px;
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  border: 1px solid var(--app_numberCircle_border);
  margin: 0;
  padding: 0;
}

.app_obj_status_badge {
  width: 80px;
  font-weight: 500;
  vertical-align: middle;
}

.app_obj_status_badge_thin {
  min-height: 8px;
  height: 8px;
  min-width: 53px;
  width: 53px;
  border-radius: 10px;
}

/* ####################################################
    Start of left SIDEBAR css
----------------------------------------------------- */

.bi {
  vertical-align: -0.125em;
  pointer-events: none;
  fill: currentColor;
}

.dropdown-toggle {
  outline: 0;
}

.nav-flush .nav-link {
  border-radius: 0;
}

.btn-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: var(--app_sidebar_menu_text);
  background-color: transparent;
  border: 0;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: var(--app_sidebar_menu_text_hover);
  background-color: var(--app_sidebar_menu_bg_hover);
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
  -webkit-transform-origin: 0.5em 50%;
  transform-origin: 0.5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: var(--app_sidebar_menu_text_hover);
}
.btn-toggle[aria-expanded="true"]::before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 0.25rem;
  text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  background-color: var(--app_sidebar_menu_bg_hover);
}

.scrollarea {
  overflow-y: auto;
}

.fw-semibold {
  font-weight: 600;
}
.lh-tight {
  line-height: 1.25;
}

/* SIDEBAR STYLE  */

#sidebar.active {
  min-width: 0px;
  max-width: 0px;
}

@media (max-width: 768px) {
  #sidebar.active {
    min-width: 0px;
    max-width: 0px;
  }
}

#sidebarContentExpanded {
  padding: 0.5rem;
}

@media (max-width: 768px) {
  #sidebarContentExpanded {
    padding: 0.2rem;
  }
}

sidebarContentCollapsed {
  padding: 0.5rem;
}

@media (max-width: 1024px) {
  #sidebar {
    max-width: 180px;
    text-align: left;
    /*margin-left: -80px !important;*/
  }
}

@media (max-width: 768px) {
  #sidebar {
    min-width: 140px;
    max-width: 160px;
    text-align: left;
    /*margin-left: -80px !important;*/
  }
  .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
  #sidebar.active {
    margin-left: 0 !important;
  }
  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
    display: none;
  }
  #sidebar .sidebar-header strong {
    display: block;
  }
  #sidebar ul li a {
    padding: 20px 10px;
  }
  #sidebar ul li a span {
    font-size: 0.85em;
  }
  #sidebar ul li a i {
    margin-right: 0;
    display: block;
  }
  #sidebar ul ul a {
    padding: 10px !important;
  }
  #sidebar ul li a i {
    font-size: 1.3em;
  }
  #sidebar {
    margin-left: 0;
  }
  #sidebarCollapse span {
    display: none;
  }
}

/* ####################################################
    START of Icon classes
----------------------------------------------------- */

.saas_wizard_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f0d0";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_wizard_icon_text);
  /*font-size: 20px;*/
  font-weight: 900;
}

.saas_smile_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f118";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_smile_icon_text);
  /*font-size: 20px;*/
}

.saas_smile_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f118";
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  color: var(--app_smile_icon_text);
  /*font-size: 20px;*/
}

.saas_checked_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f058";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_checked_icon_text);
  /*font-size: 20px;*/
}

.saas_checked_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f058";
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  color: var(--app_checked_icon_text);
  /*font-size: 20px;*/
}

.saas_frown_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f119";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_frown_icon_text);
  /*font-size: 20px;*/
}

.saas_frown_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f119";
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  color: var(--app_frown_icon_text);
  /*font-size: 20px;*/
}

.saas_pwd_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f084";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  /*font-size: 20px;*/
}

.saas_pwd_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f084";
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  /*font-size: 20px;*/
}

.saas_picture_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f3e0";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  /*font-size: 20px;*/
}

.saas_picture_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f3e0";
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  /*font-size: 20px;*/
}

.saas_secret_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f21b";
  display: inline-block;
  padding-right: 5px;
  padding-bottom: 3px;
  vertical-align: middle;
  /*font-size: 20px;*/
  color: var(--app_secret_icon_text);
}

.saas_secret_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f21b";
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  /*font-size: 20px;*/
  color: var(--app_secret_icon_text);
}

.saas_help_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f059";
  display: inline-block;
  padding-right: 6px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_help_icon_text);
}

.saas_success_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f058";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_success_icon_text);
}

.saas_success_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f058";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_success_icon_text);
}

.saas_fail_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f057";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_fail_icon_text);
}

.saas_fail_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f057";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_fail_icon_text);
}

.saas_edit_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f303";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_edit_icon_text);
}

.saas_edit_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f303";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_edit_icon_text);
}

.saas_edit_icon_hover_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f303";
  display: inline-block;
  padding-left: 8px;
  padding-bottom: 2px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_edit_icon_text_hover);
  font-size: 14px;
}

.saas_ban_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f05e";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_ban_icon_text);
}

.saas_warning_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f071";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_warning_icon_text);
}

.saas_warning_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f071";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_warning_icon_text);
}

.saas_locked_icon_r:after {
  font-family: "Font Awesome 5 Pro";
  content: "\f023";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_locked_icon_text);
}

.saas_archived_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f187";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_archived_icon_text);
}

.saas_archived_icon_r::after {
  font-family: "Font Awesome 5 Pro";
  content: "\f187";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  color: var(--app_archived_icon_text);
}

.saas_root_team_icon::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f0ac";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_root_team_icon_text);
}

.saas_root_team_icon_r::after {
  font-family: "Font Awesome 5 Pro";
  content: "\f0ac";
  display: inline-block;
  padding-left: 4px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_root_team_icon_text);
}

.saas_locked_icon:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f023";
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  vertical-align: middle;
  font-weight: 900;
  color: var(--app_locked_icon_text);
}