:root{
  /* https://www.w3schools.com/css/css3_variables.asp */
  /* color: var(--dark_blue); */

  --blue_prime:  var(--blue_dark5);  /*  --steel_blue var(--blue_prime); */


  --cobalt:       #0047ab;
  --dark_blue:    #3f48cc; /* #043cb5; */
  --dark_blue2:   #3f4079;         /* profile menu , etc. from Ansonika profile */
  --dark_blue3:   #2557A7;
  --dark_blue4:   #0056b3;
  --blue_dark5:   #003DA5;         /* centerwellcareers.com */
  --blue_medium1: #428bca;      /* layout buttons on dci_list */
  --blue_medium2: #00A3D7;      /* dci_index features border */
  --blue_dodge:   #1e90ff;
  --steel_blue:   #4682b4;      /* profile bar meet the dentist, etc. */
  --vividsky_blue:#00ccff;   /* https://html-color.codes/blue */
  --cbabd_blue:   #F2F2F2;
  --chabd_dark_blue: #1E73BE;
  --darkblue: #0431B4;
  --blue_blog: #007BFF;


  --black:black;
  --light_grey: lightgrey;
  --light_grey_2: #e1e8ed; /* border in profile */
  --grey_light_3:#F3F3F3;
  --grey_light_4:#F4F4F4;
  --grey_light_5:#f0f0f0; /* very light shade of gray */
  --grey_light_6:#F5F8FA; /* profile from Ansonika */
  --grey_light_7:#F7F7F7;
  --grey_medium_1:#b4b4b4;
  --grey_medium_2:#979aaa; /*Manatee*/
  --grey_medium_3:#414042; /* centerwellcareers.com */
  --grey_gainsboro:gainsboro;
  --grey_dark:#666666;
  --grey_dark1: var(--grey_dark);
  --grey_dark2:#a9a9a9;
  --grey_dark3:#537087;
  --grey_dark4:#333333;
  --grey_dark_html: darkgrey;

  --light_blue_green: #74d1c6; /* business hours in profile */
  --very_light_blue:#f8f8f8;

  --darkcyan0: #029B9B;
  --darkcyan: #009e9e;


  --turquoise_dark1:#00a399;
  --turquoise_med1: #008B8B;
  --turquoise_light1: #40E0D0;

  --darkgreen:#298A08;
  --green_dark1: var(--darkgreen);
  --green1:#00FF00;
  --dark_green2:#1B4636;
  --dark_green3:#006161;


  --gray94:#f0f0f0;
  --bluelight1:#e1fcf9;
  --dark_red1:#8B0000;
  --button_red:#dc3545; /* orange #fd7e14; reds #dc3545; #E52B4F; */
  --red_prime:#dc3545;

  --white_soft:#faf0e6;
  --light: #f8f9fa;

  --photo_border_color:#EDECEB;

/* font-family: */
  --font_Arial: 'Arial',sans-serif;
  --font_Times: 'Times New Roman',serif;
  --font_Courier:'Courier New', monospace;
  --font_Noto: 'Noto', Serif;
  --font_Roboto: 'Roboto', arial, serif;
  --font_Palatino: 'Palatino Linotype, serif';
  --font_Poppins:  'Poppins', sans-serif;

  --font_title_1: var(--font_Roboto);


  /* --font_Museo: 'Museo Sans Bold';     centerwellcareers.com - NOT USED Needs to use URL for source*/


  /* dci_index.html */
  --space_before_section_title:10px;
  --space_after_section_title:30px;
  --space_inside_section:60px;
  /* dci_provider.html */
  --srv_letter_space:10px;
  }

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,300&display=swap" rel="stylesheet">

  _comment_begin_FOR_COMMON_USE{
  // It is used in dci_base and other
  }

    .dot {
            height: 7px;
            width: 6px;
            background-color: var(--red_prime); /* #bbb; */
            border-radius: 50%;
            display: inline-block;
            valign: top;
            margin-bottom:3px;
            margin-right:4px;
    }


    .title_background {
      padding-top:10px;
      background:var(--grey_light_4);
      height:140px;
  /*    box-shadow: 0 20px 20px -20px #333; */
    }

    .title {
      color:var(--blue_prime);
      font-size:2.2rem;
      font-family: var(--font_Noto);
      font-weight: 500;
      text-align: center;
      border: 0px solid black;
    }

    .subtitle{
      color:var(--grey_dark);
      font-size:1.5rem;
      font-family:
      var(--font_Noto);
      font-weight: 500;
      text-align: center;
      display: block;
    }


    .submit_button {
      border: 0px solid #999;
      font-size: 30px;
      font-size: 1.2rem;
      color: white; /* #1c87c9; */
      font-weight: 500;
      background-color:var(--button_red); /* color-bgr-submit-btn #80ff00; #eee;*/
      border-radius: 25px;
      box-shadow: 2px 2px var(--blue_prime);
      padding:10px 20px;
    }

    .submit_button:hover {
      background-color: var(--blue_prime);
    }



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

      .submit_button {
        width: 50%;
        margin-top: 10px;
        font-size:16px;
      }

      .title_background {
        height:100px;
      }
      .title{
        font-size:16px;
      }

      .subtitle{
        font-size:16px;
      }
  }

  _comment_end_FOR_COMMON_USE{
  // It is used in dci_base and other
  }

_comment_begin_tooltip{
// Begin tooltip styles
// https://www.w3schools.com/css/css_tooltip.asp
// It is used in dci_compare, dci_provider, dci_survey
}
    .tooltip {
      position: relative;
      display: inline-block;
      border: 1px hidden black;
    }
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 200px;
      background-color: navy;
      color: white;
      text-align: left;
      border: 1px solid black;
      border-radius: 4px;
      border-color: lightBlue;
      padding: 5px;
      font-style: italic;
      font-size:18px;
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: -1px;
      left: 100px;
      /*
      bottom: 100%;
       left: 50%;
     */
          margin-left: -60px;
    }
    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
_comment_end_tooltip{
// end tooltip styles
}

_comment_begin_DCI_BASE{
// dci_base building blocks
// no inheritance
}
    .hr_base {
    height:1.2px;
    border-width:0;
    background-color:var(--blue_prime);
    margin-top: 0;
    margin-bottom: 0;
    }

    .base_top_footer_container {
      background-color: white;
      color:var(--blue_prime);
      height:42px;
      margin-top:0;
      margin-bottom: 0;
      font-family: var(--font_Noto);
      padding-right:20px;
    }

    .base_top_footer_container a{
      color: var(--blue_prime);
      text-align: center;
      padding: 5px 16px;
      text-decoration: none;
      font-size: 22px;
    }

    .base_top_footer_container a:hover {
      text-underline-offset: 5px;
      text-decoration: underline red;
      color: var(--blue_prime);
    }

    #ul_base {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #li_base{
      float:right;
      padding-top: 8px;

    }

    #li_base a {
      background-color: white; /* yellow for testing space */
      text-decoration: none;
    }
    #li_base a:hover {
      text-decoration: underline red;
      color:var(--blue_prime);
      text-underline-offset: 5px;
    }

_comment_end_DCI_BASE{
// end dci_base building blocks
}

a {
  cursor: pointer !important;
}

/* Hamburger menu for mobile start */
.dropbtn {
  background-color: white;
  color:var(--blue_prime);
  font-size: 16px;
  height:20px; /* 30px; */
  font-size: 16px; /* 20px; */
  text-align: center;
  padding:0px; /*5px 16px;*/
  text-decoration: none;
  margin-top:4px;
  border: 0;
  cursor: pointer;
}
.dropbtn i {
  /* font-size: 16px; */
  pointer-events: none;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: var(--light);
}

.drop1down {
  position: relative;
  display: inline-block;
}

.drop1down-content {
  display: none;
  position: absolute;
  background-color: var(--blue_prime);
  min-width: 100px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-left:4px;
}

.drop1down-content a {
  color: white;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:16px;
}

.drop1down-content a:hover  {
  color: var(--blue_prime);
  text-decoration: none;
  background-color: white;
}

.show {display: block;}
/* Hamburger menu for mobile end */

/* Scroll up page buttom Start */

#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Position relative to container-outer */
  bottom: 20px; /* Place the button 20px from the bottom */
  right: 20px; /* Place the button 20px from the right */
  z-index: 99; /* Ensure it is above other elements */
  border: none;
  outline: none;
  background-color: var(--blue_prime);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
  font-weight:bold;
}

#scrollTopBtn:hover {
  background-color: #333; /* Darker background on hover */
}

/* Scroll up page buton end */



_comment_begin_DCI_BASE_responsive{
// no inheritance
}
    /* Styles for desktop browsers (screens with a minimum width of 768 pixels) */
    @media only screen and (min-width: 1080px) {
      .base_right_container {
        display: block; /* Show the container */
        padding-top:8px;
      }
      .base_left_container {
        display: none; /* Show the container */
      }
    }
    /* Styles for mobile devices (screens with a maximum width of 767 pixels) */
    @media only screen and (max-width: 1079px) {

      .base_right_container {
        display: none; /* Show the container */
      }
      .base_left_container {
        display: block; /* Show the container */
      }
    }
_comment_end_DCI_BASE_responsive{
// end dci_base building blocks
}