/*
1. GENERAL
2. SLIDEOUT
3. LAYOUT
4. TIMECARDS
5. LOGIN
-------------------------------------------------- */

/* GENERAL
-------------------------------------------------- */



/* SLIDEOUT
-------------------------------------------------- */

/*.side-slider*/
nav#actions-sidebar
 {
  width: 0;
}

.side-slider a {
  /* Box-model */
  display: block;
  margin-left: 1.25em;
  padding-top: .375em;
  padding-bottom: .375em;

  /* Typography */
  font-family: 'Rubik', sans-serif;
  font-size: 1.75em;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
}

.side-nav {
  display:none;
}

.mobile-top {
  margin-top: 1em;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.mobile-top h1 {
  font-size: 2.5rem;
  line-height: .75;
  margin-top: 0;
  margin-bottom: 0;
}

img.logo {
  margin-bottom: 0;
  margin-top: 0;
}

/* The side navigation menu */
/*.side-slider*/
nav#actions-sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 35px;
    transition: 0.5s;
}

nav.columns {
    padding-left: 0;
    padding-right: 0;
}

.columns {
    margin-right: 0;
}

.side-slider ul {
  list-style: none;
}

span#open-button {
    background: rgba(8,77,140,.9);
}

span#close-button {
    background: #fff;
    display: none;
}

span#open-button,
span#close-button {
    position: fixed;
    bottom: 25px;
    left: 0;
    height: 45px;
    width: 75px;
    border-radius: 0 30px 30px 0;
    box-shadow: 1px 2px 2px #888888;
    z-index: 101;
}

span#open-button img,
span#close-button img {
  margin-left: 15px;
  height: 45px;
  width: auto;

}

/* TIMECARDS
-------------------------------------------------- */

td.tc-shrink,
th.tc-shrink {
    width: 8%
}

th.tc-expand,
td.tc-expand {
    width: 46%;
}

/* LOGIN
-------------------------------------------------- */

.form button[type="submit"] {
    margin-right: 1.25rem;
}

/* USERS
-------------------------------------------------- */

/* right column - text align right */
td.users-right {
    text-align: right;
}