// Variables
$_titleBarHeight: 32px;

* {
  margin: 0;
  padding: 0;
}

body{
  display: flex;
  max-height: 100vh;
  flex-direction: column;
}

#application-container{
  flex: 1 0 auto;
  display: flex;
  max-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.inline-input-group{
  width: 100%;
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
  align-content: space-between;

  > *{
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
}

#initializing {
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
}

#initializing > div{
  width: 100%;
}

.tab-wrapper {
  margin: 25px 0 25px 0;
}

#btn_scrollToTop {
  z-index: 1;
  display: none;
}

thead {
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}

.jumbotron{
  width: 100%;
  display: block;
  background: url(../img/bg.jpg) center center no-repeat;
  background-size: cover;
  overflow: auto;
  position: relative;
  top: -1px;
  margin-top: $_titleBarHeight;
  padding-bottom: 30px;

  .text{
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    padding: 23px 0;

    &:after{
      content: "";
      display: block;
      width: 20%;
      position: relative;
      height: 2px;
      background-color: #fff;
      text-align: center;
      margin: 0 auto;
      top: 6px;
    }

    @media #{$small-and-down} {
      font-size: 16px;
    }
  }
}

.clear-nav{
  display: flex;
  flex-flow: row nowrap;
  align-content: space-between;
  justify-content: space-between;
  padding: 20px 0;

  > .navigation{
    flex: 1 0 auto;

    ul{
      li{
        display: inline-block;
        margin-left: 15px;

        @media #{$small-and-down} {
          margin-left: 0;
        }

        a{
          color: #fff;
          padding: 5px 12px;
          border-radius: 3px;

          @media #{$small-and-down} {
            text-indent: -9999px;
            font-size: 0;

            i{
              text-indent: initial;
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  > .logo{
    a{
      font-size: 26px;
      color: #fff;
    }
  }
}

#title-bar {
  -webkit-user-select: none;
  -webkit-app-region: drag;

  overflow: hidden !important;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  z-index: 99;
  height: $_titleBarHeight;
  line-height: $_titleBarHeight;
  background-color: #3a3a3a;
  padding: 0;
  margin: 0;
  box-shadow: 0 1px 3px rgba(#000, 0.3);

  #title{
    position: absolute;
    top: 0px;
    left: 6px;
    color: #fff;
  }

  #title-bar-btns {
    -webkit-user-select: none;
    -webkit-app-region: no-drag;

    position: absolute;
    top: 0px;
    right: 6px;

    button{
      line-height: 0px;
      height: 32px;
      background-color: transparent;
      border: none;
      color: #F1F1F1;
      font-size: 14px;
      padding: 0 3px;
      transition: 0.2s;

      &:hover{
        background: rgba(#fff, 0.1);
      }
    }
  }
}

// Overwrite default scrollbar
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #3a3a3a;
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: color('indigo', 'base');
}