.nav-fixed {
  position: fixed;
}

.main-outer {
margin: 0px 0px;
}

.main-header {
position: fixed;
}

.main-inner {
margin: 40px 80px;
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 1px;
}

.search-input {
  width: 100%;
  border-color: #00000022;
  font-size: 16pt;
}

.sort-button {
  width: 10%;
  /*
  margin-top: 0px;
  margin-left: 15px;
  */
  margin-right: 15px;
  float: center;
  background-color:white;
  font-size: 12pt;
  border-color: #00000022;
  /*
  border-radius: 5px;
  border-width: 1px;
  */
}

.note-input {
  width: 50%;
  font-size: 12pt;
}

.detail-input {
  width: 100%;
  font-size: 12pt;
  border-color: #cccccc
}

.tag-input {
  width: 50%;
  font-size: 12pt;
}

.add-note-submit {
  width: 50%;
  font-size: 12pt;
}

.card-outline {
  /* box-shadow 0px 5px 10px 0px rgba(0, 0, 0, 0.2); */
  border-color: black;
  border-radius: 5px;
  float: left;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  text-align: left;
}

.card {
  /* box-shadow 0px 5px 10px 0px rgba(0, 0, 0, 0.2); */
  /* border-radius: 5px; */
  border: none;
  border-color: black;
  border-radius: 5px;
  border-top: 5px solid #00000011;
  float: left;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  text-align: left;
}

.card-highlight {
  border-color: black;
  border-radius: 5px;
  border-top: 5px solid #bb7b52;
}

@keyframes anim-card-img {
  from {
    -webkit-filter: grayscale(95%);
    filter: grayscale(95%);
  }
  to {
    -webkit-filter: grayscale(5%);
    filter: grayscale(5%);
  }
}

.card-img-background {
  -webkit-filter: grayscale(95%);
  filter: grayscale(95%);
}

.card-img-foreground {
  -webkit-filter: grayscale(5%);
  filter: grayscale(5%);
  animation-name: anim-card-img;
  animation-duration: 0.75s;
}

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 4px;
}

.card-image {
  position: relative;
  bottom: 0;
}

.main-top {
}

.topic-tags {
}

.topic-tag {
  border-radius: 5px;
  border-width: 1px;
  float: left;
  margin-bottom: 3px;
  margin-top: 3px;
  margin-right: 5px;
  padding: 5px;
  text-align: left;
  background-color: white;
  border-style: solid;
  /* border-color: #cccccc; */
  border-color: #cccccc00;
  /* width: 140px; */
  /* font-size: 10pt; */
}

.topic-tag-addnote {
  border-radius: 5px;
  border-width: 1px;
  float: left;
  margin-bottom: 3px;
  margin-top: 3px;
  margin-right: 5px;
  padding: 5px;
  text-align: left;
  background-color: white;
  border-style: solid;
  border-color: #cccccc;
}

.tags-list-div {
  height: 60px;
  width: 100%;
}

@keyframes anim-hover-color {
  from {background-color: #ffffff;}
  to {background-color: #bb7b5244; /* #ccccff; */}
}

@keyframes anim-select-color {
  from {background-color: #bb7b5244; /* #ccccff; */}
  to {background-color: #bb7b5288;}
}

@keyframes anim-deselect-color {
  from {background-color: #bb7b5288;}
  to {background-color: #ffffff;}
}

.topic-tag-hover {
  border-radius: 5px;
  border-width: 1px;
  float: left;
  margin-bottom: 3px;
  margin-top: 3px;
  margin-right: 5px;
  padding: 5px;
  text-align: left;
  /* background-color: #ccccff; */
  background-color: #bb7b5244;
  animation-name: anim-hover-color;
  animation-duration: .2s;
  border-style: solid;
  border-color: #cccccc;
  /* width: 140px; */
  /* font-size: 10pt; */
}

.topic-tag-selected {
  border-radius: 5px;
  border-width: 1px;
  float: left;
  margin-bottom: 3px;
  margin-top: 3px;
  margin-right: 5px;
  padding: 5px;
  text-align: left;
  background-color: #bb7b5288;
  animation-name: anim-select-color;
  animation-duration: .2s;
  border-style: solid;
  border-color: #cccccc;
  color: #ffffff
  /* width: 140px; */
  /* font-size: 10pt; */
}

.topic-tag-deselect {
  border-radius: 5px;
  border-width: 1px;
  float: left;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-right: 5px;
  padding: 10px;
  text-align: left;
  background-color: #ffffff;
  animation-name: anim-deselect-color;
  animation-duration: .2s;
  border-style: solid;
  border-color: #cccccc;
  width: 140px;
  /* font-size: 10pt; */
}

.twocol {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-column-gap: 4px;
}

.twocol-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 4px;
}


.twocol-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 4px;
}

.picker {
  width=100%;
  font-size= 20pt;
}

.btn-group button {
  float: left; /* Float the buttons side by side */
}

.big-title {
  font-size: 30pt;
  font-family: "arial";
}

.container {
  border: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 85vh;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.editor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

a {
  color: #cccccc;
  /* text-decoration: underline; */
  text-decoration: none;
}

div.tooltip {
  visibility: visible;
  width: 100px;
  /*
  position: relative;
  display: inline-block;
  border-bottomhidden: 1px dotted black;
  */
}

div.tooltip > span.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
}

div.tooltip:hover > span.tooltiptext  {
  visibility: visible;
}

