@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
/* body{ margin: 20px; } */
body {
    font-family: system-ui;
  }
h1 { font-size: 1.5em; margin: 10px; }


 /* Initially, set the background size to 'auto' to keep the original size */
 .col-md-12 {
  background-size: 650px;
}

@media (max-width: 700px) {
  .col-md-12 {
    background-size: 100% !important;
  }    
}

@media (max-width: 400px) {
#important-row {
    height: 475px !important;
  }
}

::selection {
background-color: rgb(49, 49, 49); /* Replace with your desired highlight color */
color: #FFF; /* Replace with your desired text color when selected */
}

  .custom-row {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
  }

  .custom-col {
    padding-left: 10px;
    padding-right: 10px;
  }

  .tooltip {
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */

  }
  
  /* Tooltip text */

  .tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    width: 100px;
    color: rgb(228, 169, 73);
    font-size: 10px;
    background-color: none;
    padding: 8px 10px 8px 10px;
    top: 95%;
    right: 50%;
    font-weight: bold;
  }

  #right{
    top: 95%;
    left: 50%;
    color: rgb(108, 107, 107);
  }
  
  .hover-text:hover .tooltip-text {
    visibility: visible;
  }