:root {
  --highlight_color: #444444;
  --primary_color: #3777bc;
  --secondary_color: #224b77;
  --main_bg_color: #f2f2f2;
  --main_font_color: #111111;
  --table_bg_color: #eeeeee;
  --table_highlight_color: #ffffff;
}

html, body {
   width: 100%;
   height: 100%;
}

a {
   color: var(--secondary_color);
   text-decoration: none;
}
a:active, a:focus, a:hover {
   color: var(--primary_color);
   text-decoration: underline;
}
a i {
   color: var(--secondary_color);
   text-decoration: none;
}
a i:active, a i:focus, a i:hover {
   color: var(--primary_color);
   text-decoration: underline;
}

.main-body {
   font-family: 'Roboto', 'Courier New', monospace;
   background-color: var(--main_bg_color);
   color: var(--main_font_color);
}
.full-container {
   padding-top:20px;
}
.main-container {
   display: flex;
   flex-direction: row;
   margin-top: 20px;
   width:100%!important;
   text-align:center;
   align-items:center;
}
.main-container div {
   flex: 1;
}
.main-container-options {
   display: flex;
   flex-direction: column;
   text-align:center;
   align-items:center;
}
.main-container-options div {
   flex: 1;
}
.container-category {
   display: flex;
   flex-direction: column;
}
.main-category-title {
   font-size:2rem;
   font-weight: bold;
}

.btn-custom {
  color: var(--primary_color);
  background-color: rgba(0,0,0,0);
  border-color: var(--primary_color);
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 8px;
}
.btn-custom:hover,
.btn-custom.hover,
.btn-custom:focus,
.btn-custom.focus,
.btn-custom:active,
.btn-custom:active:hover,
.btn-custom.active:hover,
.open > .dropdown-toggle.btn-custom,
.open > .dropdown-toggle.btn-custom:hover,
.btn-custom:active:focus,
.btn-custom.active:focus,
.open > .dropdown-toggle.btn-custom:focus,
.btn-custom:active.focus,
.btn-custom.active.focus,
.open > .dropdown-toggle.btn-custom.focus,
.btn-custom .badge,
.btn-custom.active {
  color: var(--highlight_color);
  border-color: var(--highlight_color);
  background-image: none;
}
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled.focus,
.btn-custom[disabled].focus,
fieldset[disabled] .btn-custom.focus {
  background-color: var(--secondary_color);
  border-color: var(--secondary_color);
}

.autocomplete {
  position: relative;
  display: block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid var(--secondary_color);
  color: var(--secondary_color);
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  width: 84%;
  margin-left: 15px;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: var(--table_highlight_color);
  color: var(--secondary_color);
  border-bottom: 1px solid var(--secondary_color);
}
.autocomplete-items div:hover {
  background-color: var(--table_bg_color);
  color: var(--highlight_color);
}
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}