/* These styles are generated from project.scss. */

a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  /* TODO: use accent color */
  color: black;
  font-weight: bold;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.link {
  cursor: pointer;
}

.text-light-shadow {
  text-shadow: 2px 2px 4px #4b4b4b;
}

.one_line_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.custom-search {
  position: relative;
}

.custom-search .form-control {
  padding-left: 2.5rem; /* Add padding-left to make room for the search icon */
  /*border-radius: 50px; !* Make the input field rounded *!*/
}

.custom-search .input-group-text {
  position: absolute;
  left: 0;
  background-color: transparent;
  border: none;
}

.custom-search .btn-reset {
  position: absolute;
  right: 0;
  background-color: transparent;
  border: none;
  z-index: 1;
}

.clickable {
  cursor: pointer;
}

/* Change the color of the search and reset icons on hover */
/* TODO: user brand colors */
.custom-search .input-group-text:hover i,
.custom-search .btn-reset:hover i {
  color: var(--main-brand-color);
}

/* https://bootsnipp.com/snippets/b2eVW */
/*.nav-tabs { border-bottom: 2px solid #DDD; }*/
/*.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }*/
/*.nav-tabs > li > a { border: none; color: #666; }*/
/*.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }*/
/*.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }*/
/*.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }*/
/*.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }*/
/*.tab-pane { padding: 15px 0; }*/
/*.tab-content{padding:20px}*/

/*.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }*/
/*body{ background: #EDECEC; padding:50px}*/

.dropdown-toggle::after {
  display: none;
}

iframe {
  max-width: 100%;
}

.line {
  overflow-x: scroll;
  white-space: nowrap;
  /*padding: 20px;*/
  /*background: yellow;*/
  /*margin: 30px;*/
}

.smallerDivs {
  /*height: 225px;*/
  width: 285px;
  /*margin: 10px;*/
  display: inline-block;
  vertical-align: middle;
  /*background: blue;*/
}

mark {
  background-color: #686868;
  color: #fff;
  border-radius: 5px;
}

.timeline {
  background-color: #D4D4D4;
  height: 4px;
}

.timeline_marker {
  /* the dot is 8x8, but we need to take the padding into account 4+8+4 */
  width: 16px;
  height: 16px;
  background-color: var(--main-brand-color);
  border-radius: 8px;
  position: relative;
  /* Make the clickable area bigger than the visible one */
  padding: 4px;
  background-clip: content-box;
}

.highlight-me {
  animation: glow 700ms 2;
  border-radius: 5px;
  /*display: inline-block;*/
  /*padding: 2px 5px;*/
}

@keyframes glow {
  /* this is for .highlight-me */
  50% {
    background: var(--main-brand-color);
    /*box-shadow: 0 0 10px var(--main-brand-color);*/
  }
}


.ai_logo::before {
  content: "AI";
}

.ai_logo {
  border: solid 2px;
  border-radius: 5px;

  padding: 5px;

  width: 12px;
  height: 14px;

  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;

  /* identical to box height */

  color: #2A2A2A;


  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.ai_block {
  /* block of information generated by AI */
  background-color: #F5F5F5;
}