nav{
  background-color: white;
  padding: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav img{
  display: inline-block;
  width: 48px;
  height: 48px;
  padding: 4px;
  margin-left: 5%;
}

.content{
  margin-left: 0%;
  margin-right: 0%;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  padding: 8px;
}

.text-max-width{
  width: 100%;
}

.ismall{
  font-size: 0.6em;
  color: rgb(75, 75, 75);
  font-family: 'roboto-thin';
}

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;

  /* Instead use this non-standard one: */
  word-break: normal;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

  width: 90%;
}


.search-btn{
  margin-left: 16px;
}

.gone{
  display: none;
}

.input-container{
  width: 256px;
  display: inline-block;
  margin: 16px;
}

.active{
  color: rgb(0, 2, 164)!important;
}

.no-entries {
  margin: 0 auto;
  font-size: 2em;
  color: dimgrey;
  font-family: 'roboto-thin';
}

.data-view{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 0.2;
  justify-content: flex-start;
}

.load-more-element{
  position: relative;
  width: 350px;
  min-height: 300px;
  height: auto;
  margin: 16px;
}

.load-more-element p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: inline-block;
  padding: 0.5em 0.6em;
}

.load-more-element p:hover{
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.data-element{
  position: relative;
  width: 350px;
  min-height: 300px;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 16px;
}

.data-element-text{
    overflow: hidden;
    padding: 8px;
    display: block;
    max-height: 60%;
}

.data-element-text small{
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.itemcover-event{
  max-width: 100%;
  height: 8px;
}

.data-element-event{
  position: relative;
  width: 100%;
  /* min-height: 200px; */
  height: auto;
  padding: 16px;
}

.shadow-box{
  position: relative;
  width: 100%;
  /* min-height: 200px; */
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.data-element-event .dataDetails, .data-element-event .dataHeader{
  padding: 8px;
  display: block;
}

.data-element-text-event{
    overflow: hidden;
    padding: 8px;
    display: block;
    max-height: 60%;
}

.data-element-text-event small{
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}


.itemcover{
  max-width: 100%;
  height: 40%;
  background: url("/res/img.jpeg");
  background-size: cover;
}

.btnContainer{
  vertical-align: bottom;
}

.btnMore{
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.dataTable{
  width: 100%;
  height: 60%;
  margin-bottom: 8px;
}

.dataTable h4{
  margin: 0px;
}

.dataTable td{
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  position: relative;
  height: auto;
}

.dataHeader td{
  height: 10%;
  padding-top: 8px;
}

.dataDetails td{
  vertical-align: top;
}

.dataDetails p{
  vertical-align: top;
  font-family: 'roboto';
  color: rgb(96, 96, 96);
  font-size: 1em;
}

.dataType{
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 4px;
  background-color: rgba(107, 107, 107, 0.8);
  color: white;
}


/*

  Modals

 */

 /* The Modal (background) */
.mymodal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.mymodal-content {
   position: relative;
   background-color: #fefefe;
   margin: 8% auto; /* 15% from the top and centered */
   padding: 20px;
   border: 1px solid #888;
   width: 98%; /* Could be more or less, depending on screen size */
}

.large-modal-content{
  margin: 8% auto; /* 15% from the top and centered */
  /* width: 98%; /* Could be more or less, depending on screen size */ */
  width: auto;
  /* height: 70%; */
}

.normal-input{
  width: 100%;
}

.modal-inner{
  padding: 16px;
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .mymodal-content {
     margin: 15% auto; /* 15% from the top and centered */
     width: 40%; /* Could be more or less, depending on screen size */
  }

  .large-modal-content{
    margin: 5% auto; /* 15% from the top and centered */
    /* width: 70%; /* Could be more or less, depending on screen size */ */
      width: auto;
    /* height: 60%; */
  }

  .normal-input{
    width: 20%;
  }
}

.modal-body{
  display: none;
}

/* The Close Button */
.cclose {
   color: #aaa;
   font-size: 28px;
   font-weight: bold;
   display: block;
   position: absolute;
   right: 16px;
   top: 8px;
   cursor: pointer;
}

#modal-data{
  padding-top: 32px;
  /* padding-right: 32px; */
  height: 100%;
}

.ciframe{
  border: 0px;
}

.item-desc{
  /* width: 70%; */
  font-family: 'roboto';
  /* color: rgb(117, 117, 117); */
  /* color: rgba(0, 97, 24, 1); */
  color: #6E012A;
  font-size: 1.2em;
  padding-left: 8px;
  border-left: 3px solid  #6E012A;
}

#loadingGif{
  display: block;
  margin: 0 auto;
  vertical-align: middle;
}

#moreFrame{
  overflow: hidden;
}

/*
  Overwriting default colors
 */

.active{
  color: #6E012A!important;
}

.btn-outline-primary{
  color: #6E012A;
  border-color: #6E012A;
}

.btn-outline-primary:hover{
  background-color: #6E012A;
}

.btn-outline-info{
  color: #A2184C;
  border-color: #A2184C;
}

.btn-outline-info:hover{
  background-color: #A2184C;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .content{
    margin-left: 5%;
    margin-right: 5%;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    padding: 32px;
  }
  .text-max-width{
    width: 50%;
  }
  .data-element-event{
    width: 50%;
  }
}