/* LightGrey sidebar */
#sidebar-wrapper {
    background-color: #F5F5F5;
}

/* More space in between menu items */
#sidebar-wrapper li {
    padding-top: 10px;
}

/* The 'database' dropdown will appear below the sidebar. Push it a bit on the right so that doesn't happen. */
.push-right {
    margin-left: 25px;
}

.isbn-false {
    text-decoration: line-through;
    color: grey;
}

/* small input in tables  */
.my-table-narrow input {
    width: 50px;
}

.my-narrow {
    width: 250px;
}

.my-number-input {
    width: 50px;
}

.text-left {
    text-align: left;
}

.text-right {
    "text-align: right";
}

.middle {
  height: 50%;
  width: 50%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
}

.myImg {
    height: 150px;
}

.mouse-pointer {
    cursor: pointer;
}

.my-green-bg {
    /* background: #00ff00; */
    background-color: #81f888;
}

.my-red-bg {
    /* background: #ff0000; */
    background: #f7877e;
}

.my-yellow-bg {
    /* background: #ffff00; */
    background: #f8fb3d;
}

.my-strike-through {
    text-decoration: line-through;
}

/* Make anchors appear below the fixed navbar  */
.myanchor {
    padding-top: 75px;
    margin-top: -75px;
}

a.my-black-link {
    color: #37393A;
}

/* On bootstrap 3, badges don't have context classes any more. Use this to use the ones of labels: label-success etc */
.label-as-badge {
    border-radius: 1em;
}

/* Angular animation for ng-repeat */

/*
  We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .my-animated-item
  class
*/
.my-animated-item, .my-animated-item {
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  /* opacity:0; */
}

/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.my-animated-item.ng-enter.ng-enter-active,
.my-animated-item.ng-move.ng-move-active {
  opacity:1;
}

/*
  We're using CSS keyframe animations for when
  the leave event is triggered for the element
  that has the .my-animated-item class
*/
.my-animated-item.ng-leave {
  -webkit-animation:0.5s my_animation;
  -moz-animation:0.5s my_animation;
  -o-animation:0.5s my_animation;
  animation:0.5s my_animation;
}

@keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

/*
  Unfortunately each browser vendor requires
  its own definition of keyframe animation code...
*/
@-webkit-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-moz-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-o-keyframes my_animation {
  from { opacity:1; }
  to { opacity:0; }
}

/* Fixed sidebar */
/* thanks https://stackoverflow.com/questions/20557912/creating-a-fixed-sidebar-alongside-a-centered-bootstrap-3-grid#20558082 */

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  /* background: #CCC; */
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:767px) {

    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

}

.success {
    background-color: LightGreen;
}

.warning {
    background-color: orange;
}

/* The details/summary box, not styled by default. Fuck, compiler, not applied? */
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}