/*
$headingBGColorPurple = #6A56A6;
$inputBottomBorderMidiumLogo = #A12C6C;
$borderColorDarkLogo = #70156B;
$labelColorPurple = #6A56A6;
$textColor = #7A7A7A;
$subTitleColorGrey = #7A7A7A;
$subTitleColorFooterLogo = #7A7A7A2E;
$buttonColorDarkBlue = #242F65;
$buttonColorLightBlue = #6EC1E4;
*/

.calculatorHeader {
  background-color: #242F65;
  padding: 3px;
}

.calculatorFooter {
  margin-top: 7px;
  padding: 4px;
  background-color: #70156B;
}

.calculatorHeader img {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-left: 10px;
}

.calculatorHeader h1,h2 {
  position: relative;
  color: white;
  left: 10px;
  top: 5px;
}

.calculatorHeader h3,h4,h5 {
  position: relative;
  color: white;
  left: 12px;
  top: 2px;
  bottom: 2px;
}

.autosearchHeader {
  background-color: #242F65;
  padding: 2px;
  width: 50%;
}
.autosearchHeader img {
  float: left;
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-left: 10px;
}

.autosearchHeader h1,h2 {
  position: relative;
  color: white;
  left: 10px;
  top: 1px;
}

.autosearchHeader h3,h4,h5 {
  position: relative;
  color: white;
  left: 12px;
  top: 2px;
  bottom: 2px;
}

.autosearchFooter {
  margin-top: 2px;
  padding: 4px;
  background-color: #70156B;
  width: 100%;
}


body {
  background: #7A7A7A0D;
}

fieldset {
  border: 2px solid #A12C6C;
  border-top: 2px solid #A12C6C;
  border-bottom: 2px solid #A12C6C;
  background: white;
  padding: 5px;
  margin: 0.4rem;
}

legend {
  background-color: lightgray;
  color: #6A56A6;
  padding: 5px;
  font-weight: bold;
  position: relative;
}

label {
  color: #6A56A6;
  /*font-weight: bold;*/
  float: left;

}
small {
  color:white;
}

.calculatorInputTable {
  width: 100%;
  border-collapse: collapse;
  padding: 5px;
}

.calculatorInputTable tr {
  padding: 10px;
  vertical-align: middle;
}

.calculatorInputTable td {
  vertical-align: middle;
  padding: 5px;
  float: left;
}

.calculatorInputTable th {
  background-color: #6A56A6;
  color:white;
  vertical-align: "middle";
  text-align: center;
  padding: 5px;
}

.calculatorInputTable input[type="text"] {
  border-bottom: solid;
  outline: 0;
  border-width: 0 0 3px;
  border-color: #A12C6C;
  padding: 10px;
  text-align: left;
}

.calculatorInputTable input[type="text"]:focus {
  background: #7A7A7A0D;
  border-color: #61CE70;
}

.calculatorInputTable input[type=button] {
  background-color: #242F65;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 16px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.19);
}

.calculatorInputTable input[type=button]:hover {
  background-color: #4c9ed9;
  color: #ffffff;
}

.iconBoxTable {
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  padding: 5px;
}

.iconBoxTable td {
  width: 33%;
  display: inline-block;
  text-align: center;
  background-color: white;
  border: 2px solid #6A56A6;
  box-shadow: 2px 2px 8px #ccc;
  margin: 20px;
}

.iconBoxTable h3 {
  position: relative;
  color: #6A56A6;
  left: 12px;
  bottom: 5px;
  font-size: 24px;
}

.iconBoxTable a {
  display: block;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #70156B;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

i.fas.fa-calculator {
    font-size: 36px;
    color: #70156B;
    margin-top: 30px;
  }
  
i.fas.fa-chart-line {
    font-size: 36px;
    color: #70156B;
    margin-top: 30px;
  }
.adminMenuTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;

  }
.adminMenuTable h3 {
    position: relative;
    color: white;
   font-size: 24px;
  }
  
.adminMenuTable th {
    background-color: #6A56A6;
    color: white;
    font-size: 20px;
  }
  
.adminMenuTable td, th {
    border: 1px solid #6A56A6;
  }
  
.adminMenuTable tr, td {
    padding: 2px;
    text-align: center;
  }

.autocomplete-search-parent-container {
    display: block;   
  }
  
.autocomplete-searchbox-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 55px;
    border: none;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
    position: relative;
    background-color: white;
    margin-bottom: 10px;
  }

  
  
#autocomplete-searchbox {
    flex: 1;
    width: 99%;
    height: 100%;
    font-size: 16px;
    padding: 10px 40px 10px 10px;
    background-color: white;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
    border-radius: 20px;
    margin-top: 3px;
    box-shadow: inset 0 0 2px #70156B;
  }

#autocomplete-searchbox:focus {
    box-shadow: 0 0 15px #6A56A6;;
}
  
.search-icon-button,
.search-close-button {
    position: absolute;
    right: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
  
.search-icon-button i,
.search-close-button i {
    font-size: 16px;
    color: #70156B;
  }

input[type="text"]:focus#autocomplete {
    border: 1px solid #70156B;
    border-top: none;
    box-shadow: 2px 2px 8px #6A56A6;
    outline: none;
  }

.autocomplete-dropdown {
    position: relative;
    background-color: white;
    border: 1px solid #70156B;
    width: 99%;
    display: flex;
    z-index: 1;
    left: 3;
    margin: 0; /* Add this */
    padding: 0; /* Add this */
  }
.dropdown-item {
    padding: 10px;
  }

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #70156B;
  max-height: auto;
  overflow-y: auto;
  list-style-type: none;
  margin: 0; /* Add this */
  padding: 0; /* Add this */
  padding: 0;
  z-index: 1;
  }

.autocomplete-results li {
  padding: 10px;
  cursor: pointer;
  }

.autocomplete-results li:hover {
  background-color: #ddd;
  color: #70156B;
  }

.selected {
  background-color: #ddd;
  color: #70156B
  }

.stock-analysis-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

.stock-overview-parent-container {
    display: flex;
    flex-direction: row;
    align-self: stretch;
  }

.stock-overview-parent-container {
    display: flex;
    flex-direction: row;
    align-self: stretch;
  }
.stock-overview-container {
    flex: 2;
    border: 0.5px solid #70156B;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    margin-top: 10px;
    background-color: white;
    overflow: auto;
    vertical-align: middle;
  }
.stock-quote-container {
    flex: 1;
    border: 0.5px solid #70156B;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
    background-color: white;
    margin-top: 10px;
    overflow: auto;
    vertical-align: middle;
  }

.stock-keyratios-parent-container {
    display: flex;
    flex-direction: row;
    align-self: stretch;
  }
.valuationRatios {
    flex: 1;
    border: 0.5px solid #70156B;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
    background-color: white;
    margin-top: 10px;
    overflow: auto;
    vertical-align: middle;
  }
.profitabilityRatios {
    flex: 1;
    border: 0.5px solid #70156B;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
    background-color: white;
    margin-top: 10px;
    overflow: auto;
    vertical-align: middle;
  }
.growthRatios {
    flex: 1;
    border: 0.5px solid #70156B;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
    background-color: white;
    margin-top: 10px;
    overflow: auto;
    vertical-align: middle;
  }
.dividendKeyRatios {
    flex: 1;
    border: 0.5px solid #70156B;
    border-radius: 5px;
    padding: 5px;
    margin: 3px;
    background-color: white;
    margin-top: 10px;
    overflow: auto;
    vertical-align: middle;
  }
.gdp-parent-container {
    display: flex;
    flex-direction: row;
    align-self: stretch;
  }
.real-gdp-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.real-gdp-per-capita-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.treasury-yield-parent-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.treasury-yield-row-1,
.treasury-yield-row-2,
.treasury-yield-row-3 {
  display: flex;
  flex-direction: row;
  align-self: stretch;
}
.treasury-yield-row-1 {
  justify-content: center;
}

.treasury-yield-row-2 {
  margin-top: 20px;
  justify-content: center;
}
.treasury-yield-row-3 {
  justify-content: center;
}

.treasury-yield-3month-container,
.treasury-yield-2year-container,
.treasury-yield-5year-container,
.treasury-yield-7year-container,
.treasury-yield-10year-container,
.treasury-yield-30year-container {
  margin-right: 10px;
}

.treasury-yield-3month-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.treasury-yield-2year-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.treasury-yield-5year-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.treasury-yield-7year-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.treasury-yield-10year-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
.treasury-yield-30year-container {
  flex: 1;
  border: 0.5px solid #70156B;
  border-radius: 5px;
  padding: 5px;
  margin: 3px;
  background-color: white;
  margin-top: 10px;
  overflow: auto;
  vertical-align: middle;
}
canvas {
  width: 100%;
  height: 100%;
}