div{
  font-size: 0.85vw;
}

p{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.btn{
  font-size: 0.85vw;
}

.login-box{
    margin-top: 10vw;
}

.loginCard{
    width: 20vw;
    margin-left: auto;
    margin-right: auto;
}



.loginLogo{
    display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1vw;
}

.loginIcons{
    font-size: 1vw;
}

/* The sidebar menu */
 body{
    background-color: #f1f1f1;
 }
 .sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 15vw; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #343A40; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 6px 8px 6px 0.7vw;
    text-decoration: none;
    font-size: 0.9vw;
    color: #ebebeb;
    display: block;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  /* Style page content */
  .main {
    margin-left: 15vw; /* Same as the width of the sidebar */
    padding: 0 0 0 0;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

  .menuOptionsDiv{
    margin-top: 1vw;
    margin-bottom: 1vw;
  }

  .menuOption{
    margin-right: 0.5vw;
  }

  .menuLogo{
    max-width: 80%;
    display: block;
    margin-left: 0.7vw;
    margin-right: auto;
    padding: 0 0 0 0;
  }

  hr.menuSectionLines{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-top: 0.1vw solid white;
  }

  .menuInfoDiv{
    margin-top: 1vw;
    margin-bottom: 1vw;
  }

  .menuInfo{
    margin: 0 0 0 0.7vw;
    padding: 0 0 0 0;
    color: #ebebeb;
    font-weight: 600;
    font-size: 0.9vw;
  }

  /* Pages title */
  .siteTitle{
    margin-top: 4vh;
    margin-bottom: 2vh;
    text-align: center;
  }

  /* Table of results */
  .cardTable{
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 10vh 0;
    min-height: 50vh;
 }

 .cardTable2{
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 24vh 0;  
 }
 
 .clockin-table{
    width: 60%;
    margin-top: 2vh;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
 }

 .user-table{
  width: 60vw;
  margin-top: 2vh;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}

 .table-bordered{
  border-color: #aeaeae;
 }

 thead {
  position: sticky;
  top: 0;
  z-index: 11;
  background:rgb(255, 255, 255);
 }

 table th{
  outline: 1px solid #969696;
 }



 .tblColumn{
    width: 20%;
 }

 th, td{
    text-align: center;
 }

 .float{
    position: fixed;
    margin-left: 3.6vw;
    z-index:10;
 }

 .float-control-buttons{
    position: fixed;
    margin-top: 7vh;
    margin-left: 7vw;
    z-index:10;
 }

 .float-user-buttons{
  position: fixed;
    margin-top: 7vh;
    margin-left: 4vw;
    z-index:10;
 }

 .btn-circle {
    margin-right: 0.3vw;
    margin-top: 1vw;
    display: inline-block;
    width: 3vw;
    height: 3vw;
    padding: 6px 0px;
    border-radius: 1.5vw;
    text-align: center;
    font-size: 1.2vw;
    line-height: 1.42857;
}

.btn-circle-wrap{
  display: inline-block;
}

.tooltip[data-color=primary] .tooltip-inner {
  background-color: #0d6efd;
}

.tooltip[data-color=primary] .tooltip-arrow:before {
  border-bottom-color: #0d6efd;
}

.tooltip[data-color=secondary] .tooltip-inner {
  background-color: #6c757d;
}

.tooltip[data-color=secondary] .tooltip-arrow:before {
  border-bottom-color: #6c757d;
}

.tooltip[data-color=success] .tooltip-inner {
  background-color: #198754;
}

.tooltip[data-color=success] .tooltip-arrow:before {
  border-bottom-color: #198754;
}

.tooltip[data-color=danger] .tooltip-inner {
  background-color: #dc3545;
}

.tooltip[data-color=danger] .tooltip-arrow:before {
  border-bottom-color: #dc3545;
}

.tooltip[data-color=warning] .tooltip-inner {
  background-color: #ffc107;
  color: #000;
}

.tooltip[data-color=warning] .tooltip-arrow:before {
  border-bottom-color: #ffc107;
}

.tooltip[data-color=info] .tooltip-inner {
  background-color: #0dcaf0;
  color: #000;
}

.tooltip[data-color=info] .tooltip-arrow:before {
  border-bottom-color: #0dcaf0;
}

.findDate{
    margin-top: 0.2vw;
}

.clockInModal{
    width: 15vw;
}

.controlSelectDiv{
    margin-top: 2vh;
    margin-left: auto;
    margin-right: auto;
    width: 20vw;   
    display: flex;
}

.controlSelectBtn{
    width: 8vw;
    margin-left: 0.5vw;
}

.floatControlSummary{
    position: fixed;
    margin-left: 3vw;
    margin-top: 17.5vh;
    z-index:10;
 }

.cardControlSummary{
    width: 15vw;
    display: block;
    border-color: #aeaeae;
}

.cardControlSummaryInfo{
    margin-top: 1.5vh;
    margin-bottom: 1.5vh;
    margin-left: 0.5vw;
}

.newUserBtn{
  margin-top: 2vh;
  display: block;
}

.editUser{
  margin-top: 2vh;
  width:20vw;
  margin-left: auto;
  margin-right: auto;
}

.editUserLabel{
  font-weight: bold;
}

.btn-dark{
  background-color: #c00000;
  border: 0;
}

.weekend{
  background-color: rgb(221, 226, 248);
}

.newPartialUserCard{
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  padding: 1vw 1vw 1vw 1vw;
  width: 15vw;
}

.newPartialUserSubmit{
  margin-top: 1vh;
}



.floating-alert{
  width: 20vw; /* Can be in percentage also. */
  text-align: center;
  position: fixed;
  top: 30%;
  left: 45%;
}

.vacation-card{
  width: 60%;
  margin: 4vh auto 0 auto;  
  padding: 3vh 0 3vh 0;
  border-color: #aeaeae;
  border-radius: 5px;
}

.vacation-request-card{
  width: 80%;
  margin: 4vh auto 0 auto;  
  padding: 3vh 0 3vh 0;
  border-color: #aeaeae;
  border-radius: 5px;
}

.vacation-request{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 4vh;
}

.vacation-card-main-row{
  display: flex;
}

.cl-15{
  width: 15%;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  text-align: center;
  border-right: 1px solid;
  border-color: #aeaeae;
}

.cl-20{
  width: 25%;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  text-align: center;
  border-right: 1px solid;
  border-color: #aeaeae;
}

.cl-20{
  width: 20%;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  text-align: center;
  border-right: 1px solid;
  border-color: #aeaeae;
}

.cl-30{
  width: 30%;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  text-align: center;
  border-right: 1px solid;
  border-color: #aeaeae;
}

.cl-40{
  width: 40%;
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  text-align: center;
  border-color: #aeaeae;
}

.dot {
  height: 0.7vw;
  width: 0.7vw;
  border-radius: 50%;
  display: inline-block;
  border-color: #aeaeae;
}

.approved-dot{
  background-color: #04f800;
}

.declined-dot{
  background-color: #ff0000;
}

.pending-dot{
  background-color: rgb(255, 230, 6);
}

.vacation-card-info{
  width:80%;
}

.vacation-card-row{
  display: table;
  width: 100%;
}

.vacation-card-btn{
  width: 20%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 1vw;
  margin-left: 1vw;
}

.remember-vacation-btn{
  margin-right: 0.5vw;
  
}

.vacation-request-modal{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.vacation-request-row{
  margin-top: 2vh;
}

.center-modal-footer{
  size: 70%;
  margin-left: auto;
  margin-right: auto;
}

.circle-notification{
  display: inline-flex;
  border-radius: 50%;
  width: 1.1vw;
  height: 1.1vw;
  background: rgb(255, 0, 0);
  color: rgb(255, 255, 255);
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 0.7vw;
  font-weight: bold;
  margin: 0;
}

.float-vacation-summary{
    position: fixed;
    margin-left: 4vw;
    margin-top: 12vh;
    z-index:10;
 }

.card-vacation-summary{
    width: 12vw;
    display: block;
    border-color: #aeaeae;
    padding-bottom: 2vh;
}

.card-vacation-summary-info{
    margin-top: 1.5vh;
    margin-left: 0.5vw;
}


.modal-row{
  margin-left:auto;
  margin-right: auto;
  margin-top: 1vh;
  width: 80%;
}


.modal-p{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.cl-15-2{
  width: 20%;
  display: inline;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  
}

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



.vacation-review-buttons{
  margin-top: 2vh;
  margin-left: auto;
  margin-right: auto;
}

.vacation-card-info2{
  width:100%;
  display: flex;
  justify-content: space-around;
}

.vacation-card-info2 > div{
  width: calc(100% / 6);
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  text-align: center;
}

.vacation-card-info2 > div:not(:last-child){
  border-right: 1px solid;
  border-color: #aeaeae;
}

.spacing-1{
  margin-top: 5vh;
}