.history-nav {
  width: 18vw;
  height: 100vh;
  border: 1px solid black;
  background: rgb(64,64,64);
  color: white;
  position: fixed;
  z-index: 999;
  box-shadow: 0 2px 3px 2px rgba(0,0,0,0.3);
  right: -18vw;
  top: 0px;
  transition: right 0.2s ease-in;
}
.history-nav-ar {
    width: 18vw;
    height: 100vh;
    border: 1px solid black;
    background: rgb(64,64,64);
    color: white;
    position: fixed;
    z-index: 999;
    box-shadow: 0 2px 3px 2px rgba(0,0,0,0.3);
    left: -18vw;
    top: 0px;
    transition: right 0.2s ease-in;
}

.history-nav-open {
  right: 0px;
}
.history-nav-open-ar {
   left: 0px;
}
.history-nav-header {
  height: 7vh;
  overflow: hidden;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
  border-bottom: 1px solid white;
  padding-left: 1vw;
  line-height: 7vh;
  /*color: #222;*/
  color: white;
  position: relative;
}

.history-nav-header-ar {
    height: 7vh;
    overflow: hidden;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
    border-bottom: 1px solid white;
    /*padding-left: 1vw;*/
    padding-right: 1vw;
    line-height: 7vh;
    /*color: #222;*/
    color: white;
    position: relative;
    direction: rtl;
}

.history-nav-header-label {
  width: 100%;
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
}



.history-nav-contents {
  height: 93vh;
  overflow: auto;
}


.history-nav-item {
  width: 100%;
  color: white;
  padding: 1vh 1vw;
  font-weight: 700;
  font-size: 1.6rem;
  cursor: pointer;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);  
}


.history-nav-item-details {
  width: 60%;
  float: left;
}

.history-nav-item-details-ar {
    width: 60%;
    float: right;
}
.history-nav-item-title {
  text-transform: uppercase;
}

.history-nav-item-title-ar {
    text-transform: uppercase;
    float: right;
}

.history-nav-item-contents {
  font-weight: 500;
  font-size: 1.4rem;
}

.history-nav-item-when {
  width: 40%;
  float: left;
  text-align: right;
}

.history-nav-item-when-ar {
    width: 40%;
    float: right;
    text-align: left;
}

.history-nav-item:hover, .history-nav-item-selected {
  color: #fff;
  background: rgba(45,156,219, 0.6);
}