/* HTML */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

html{
  min-width:415px;
  height: initial;
  width: initial;
  


}

/* BODY */
  body {

      max-width: initial !important;
      width: initial;
      min-width: 415px;
      height: initial;
  
  

  }

  /* SCROL FUNCTIONl */

  #page-content-wrapper > div.row{
    padding: 10px;
  }

  #page-background{
    background-image: url("https://tooltrack.co.za/icons/bootstrap-icons/background-man.svg");
    height: 100%;
    width: 100%;
    background-position-x:right;
    background-repeat: no-repeat;
  }

/* NAVBAR AND SIDEBAR */
#top-navbar > a{
    font-family: 'Libre Barcode 39 Text', Arial, Helvetica, sans-serif;
    font-size: 35px;
    letter-spacing: 4px;
    margin-right: 0px;
    padding: 5px 16px;
    color:#d1d1d1 ;
  
  }

  /* Logged in user Styles */
  #user_logged_in{
    color:#d1d1d1 ;
    padding-right: 23px;
  }

  #navbarTogglerDemo01 > ul > li > ul{
    width: 10%;
    
  }


  #user-dropdown > div {
    margin-top: -2px;
  }

  #user-dropdown > div > a{
  font-size: 15px;
  }

  div.dropdown-menu.dropdown-menu-right.dropdown-menu-lg-right.show{
  max-width: 120px !important;
  min-width: 120px !important;
  }

  #user-dropdown > div > a{
   padding-left:22px ; 
  }

  
  #top-navbar{
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    max-height: 61px;
    min-height: 61px;

    background-color:  rgba(29, 29, 29, 1)!important;
    background-image: url("https://tooltrack.co.za/icons/bootstrap-icons/danger-tape.svg");
    min-width:100%;
      height:100%;
      width:100%;
    

  }

  .dropdown-toggle::after{
    bottom: 29px;
    position: absolute;
    right: 21px;

  }
  #dropdownMenuLink{

    padding: 16px;
    margin: auto;

  }


  /* The side navigation menu */
  #navbarTogglerDemo01 {
    
      height: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      overflow-y: hidden;
      transition: 0.3s;
      padding-top: 60px;
    }
    @media screen and (max-height: 450px) {
      html{font-size: xx-small;}
      #navbarTogglerDemo01 {padding-top: 15px;}
      #navbarTogglerDemo01 a {font-size: 18px;}
      #book_in_tabel > div{font-size: x-small;}
    }

    #navbarTogglerDemo01 > ul {
    min-height: 654px;
    }

    /* Hamburger icon */

    .menu-btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      cursor: pointer;
      transition: all .5s ease-in-out;
      /* border: 3px solid #fff; */
    }
    .menu-btn__burger {
      width: 25px;
      height: 3px;
      background: #fff;
      transition: all .5s ease-in-out;
    }
    .menu-btn__burger::before,
    .menu-btn__burger::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 3px;
      background: #fff;

      transition: all .5s ease-in-out;
    }
    .menu-btn__burger::before {
      transform: translateY(-10px);
    }
    .menu-btn__burger::after {
      transform: translateY(10px);
    }
    /* ANIMATION */
    .menu-btn.open .menu-btn__burger {
      transform: translateX(-50px);
      background: transparent;
      box-shadow: none;
    }
    .menu-btn.open .menu-btn__burger::before {
      transform: rotate(45deg) translate(35px, -35px);
    }
    .menu-btn.open .menu-btn__burger::after {
      transform: rotate(-45deg) translate(35px, 35px);
    }

/* BODY CONTENT    */



#wrapper {
    
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}


#wrapper.toggled #menu-toggle span:before {content:'\2212'

}
#menu-toggle{
  border: none;
}


/* SIDEBAR CONTENT */

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0; /* disini agar ketika di kecilkan tidak hilang semua default 0*/
  height: 100%;
  margin-left: -250px;
  overflow-x: hidden;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  padding: 0px;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  overflow-x: hidden;
  z-index: 1000;
  /* background-image: url("https://tooltrack.co.za/tooltrack/icons/bootstrap-icons/background-man.svg"); */

  
}




#wrapper.toggled #page-content-wrapper {
  position: fixed;
  margin-right: -250px;
}
.fixed-brand{
  width: auto;
}
/* SIDEBAR STYLES */

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

.sidebar-nav li {
  text-indent: 15px;
  line-height: 40px;
}

.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
  font-variant: small-caps;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.2);
  border-left: white 2px solid;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}
.no-margin{
  margin:0;
}

/* Sidebar annimation */
@media(max-width:415px) {
  html{font-size: x-small;
    overflow: scroll;}
  
  #dropdown-menu{
    font-size: 15px;
  }
  #page-background > div.login-form > form{
   
    width: 271px;
    height: 287px;
  
  }
  #page-background > div.login-form > form > button{
    margin-left: 0px !important;
    font-size: medium;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px;
  }
  #page-background > div.login-form > form > h4{
    font-size: xx-large;

  }
  #username{font-size: medium;}
  #password{font-size: medium;}
  #menu{
    font-size: medium;
  }

  #book_in_tabel > div{font-size: x-small;}
  
}

@media(max-width:510px) {
  #book_in_tabel > div{font-size: x-small;}
}


@media(min-width:768px) {

  .menu-btn {
      visibility: hidden;
  }
  .menu-btn__burger {
      visibility: hidden;
  }

  #wrapper {
      padding-left: 250px;
  }
  .fixed-brand{
      width: 250px;
  }
  #wrapper.toggled {
      padding-left: 0;
  }

  #sidebar-wrapper {
      width: 250px;
  }

  #wrapper.toggled #sidebar-wrapper {
      width: 250px;
  }
  #wrapper.toggled-2 #sidebar-wrapper {
      width: 50px;
  }
  #wrapper.toggled-2 #sidebar-wrapper:hover {
      width: 250px;
  }

  #wrapper.toggled #page-content-wrapper {
      position: relative;
      margin-right: 0;
      padding-left: 250px;

  }

  
  #wrapper.toggled-2 #page-content-wrapper {
      position: relative;
      margin-right: 0;
      margin-left: -200px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  


}

/* 
.user-info-navbar .user-info-menu>li {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
 
  border-bottom: 0;
  display: block;
  float: left;
} */


/* TABLE ON DASHBOARD PAGE STYLES */



/* Search bar styles */
#search-bar{
    max-width: 203px;
    border-radius: 4px;
    border: solid 1px grey;
    display: flex;    
    margin: 10px 10px 10px 0px;
    height: 32px;
  
}

/* TABLE BORDER STYLE*/
td ,th{
  border-color: #b4b4b4 !important;
}


#myInput , #myInput:focus,#outstanding-tools-search,#outstanding-tools-search:focus,#current-stock-search,#current-stock-search:focus{
border: none;
border-radius: 15px;
padding: 0px 0px 0px 13px;
box-shadow: none;
font-size: 13px;
height: 29px;
}

#search-bar > img{
    padding: 8px;
  }

/* page headings */
#page-content-wrapper > div.row > div > h1{
padding: 10px;
white-space: nowrap;
}

#page-content-wrapper > div > div{
display: inline-table;
padding-top: 30px;
font: -webkit-mini-control;

}

#page-content-wrapper > div > div:nth-child(3){
  padding-right: 2%;
}


/* Tool report table styles */
/* tool report table heading styles */

/* tool page export drop down styles */
#fileDropdown > div{
  padding: 0px;
}

#fileDropdown > div > a{
  width: -webkit-fill-available;
}
#tool-report-table > div.tabe-dropdown{
  display: flex;
  white-space: nowrap;
}

#tool-report-table-dropdown{
  right: 17PX;
  position: absolute;
  height:40px;
}

#tool-report-table-dropdown > button{
  background-color: white;
  color: rgb(39, 39, 39);
}

#tool-report-table-dropdown > ul > li > a{
  padding: 2px 20px 0px 30px;
  letter-spacing: 1px;
}

/* Table dashboard date dropdown */

/* Dashboard hidden style */

#content > div {display:none;}
#current_stock_btn,#tool_report_btn,#outstanding_btn{padding: 20px;
margin: 5px;
}
#outstanding_btn{
background-color: #ea0000;
border-color: #ea0000;
box-shadow: rgba(240, 0, 0, 0.685) !important;
font-variant-caps: small-caps;
}
#tool_report_btn{
  background-color: #068106;
  border-color: #068106;
  box-shadow: #068a06bd !important;
  font-variant-caps: small-caps;
}
#current_stock_btn{
    background-color: #ff8000;
    border-color: #ff8000;
    box-shadow:  #ff8000b4 !important;
    color: white !important;
    font-variant-caps: small-caps;
}




#dropdown-menu {
  min-width: 80px;
  border-left: none;
  border-radius: 0px;
  height: 40px;

}


#dropdown-menu.show{
  transform: translate3d(0px, 40px, 0px)!important;
}


#tool-report-table-dropdown> a{
background-color: white;
border-color:rgba(0,0,0,.15);
font-size:15px ;
width: 80px;
min-width: 80px;
border-left: none;
padding: 8px 5px 10px 0px;
}

#dropdown-menu > option{
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  width: 40px;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  
}
#dropdown-menu > option:focus, #dropdown-menu > option:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
 
}
#tool-report-table-dropdown > div{
  padding: 10px 3px 10px 10px;
  border: solid 1px rgba(0,0,0,.15);
  border-right: none;

}

/* LOGIN PAGE STYLES */

/* login form */
.login-form{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-width:100%;

}

/* password input margin  */
#page-background > div.login-form > form > div:nth-child(3){
  margin-bottom: 36px;
}



body > div > form{
padding: 20px;
/* border: solid 1px #343A40; */
}    

body > div > form > h4{
  width: 209px;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-content: center;
}

body > div > form > div{
margin-bottom: 0px !important;
}



/* submit button style */
body > div > form > button{
  justify-content: center;
    align-content: center;
    display: flex;
    margin: 23px 66px;
    width: 101px;
    background-color: #007985 !important;
    border-color: #007985 !important;

}


/* EMPLOYEES AND USERS PAGE STYLES */

/* style for files dropdown */
#user-dropdown > div > div > button{
  border: none;
  font-size: medium;
  padding: 0px;
  background: white;
  font-size: 15px;
}

#user-dropdown > div > div > button:focus{
  border: none;
  font-size: medium;
  padding: 0px;
  background: white;
  font-size: 15px;
  }

  #page-content-wrapper > div.row > div > table{
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    font: small-caption;
    font: -webkit-mini-control; 
  }

  #page-content-wrapper > div.row > div > div{
  padding: 5px 0px 13px 0px;
  }

  /* add user and employee button  */
  #page-content-wrapper > div.row > div > div > a{
   margin: 0px 10px 0px 10px;
   background-color: #007985 !important;
   border-color: #007985 !important;
  }

  div.action_links{
    display: flex;
    place-content: center;
    max-width: 62px;
  }

  a.action-icons{
    padding-right: 8px;  
  } 

/* ADD USERS AND EMPLOYEE PAGE STYLES */

/* submit button */
#add-button{
  background-color: #007985 !important;
  border-color: #007985 !important;
}

/* TOOL BOOK OUT PAGE STYLES AND BOOK IN PAGE STYLES*/

/* BOOK IN PAGE TABLE LAYOUT */
#book_in_emp{
  display: contents;
}

#book_in_emp > div.row{
  padding: initial;
  padding: 0px;
}
#book_in_emp > div> div > div > input,#book_in_emp > div > form > div > div> input {
  inline-size: -webkit-fill-available;
  height: 40px;
  padding: 3px;
  border: none;
}

#book_in_emp > div > div > div> select,#book_in_emp > div > form > div > div> select{
  height: 40px !important;
}

#book_in_emp > div> div,#book_in_emp > div > form > div{
  padding: 0px;
}
.col{
  padding: 0px;
}

#book_in_tabel .row{
  padding-left: 15px;
  padding-right: 15px;
}
#book_in_tabel .col{
border: solid 1px lightgray;
}
#book_in_tabel > div > div{
  height: 42px;
  width: 100%;
  padding: .75rem;
}

#book_in_emp > div{
  margin: 0px;
}
#book_in_tabel > div:nth-child(1){
  padding-bottom: 0px;
}
#book_in_emp > div{
  padding: 0px !important;
}
#book_in_emp > div:nth-child(1){
  padding: 0px !important;
}

#book_in_tabel > div:nth-child(1) > div:nth-child(2){
  width: 300px;
}
#book_in_emp > div > form > div > div > button ,#book_in_emp > div > div > div> button {
  margin: 11px 0px 0px 14px;
}
#book_in_emp > div > div > div> select

#book_in_emp > div > div > div> select:focus{
  border: none;
}

/* barcode font */
@font-face {
  font-family: 'Barcode';
  src: url('fonts/LibreBarcode39Extended-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}
/* barcode text font */
@font-face {
  font-family: 'BarcodeText';
  src: url('fonts/RussoOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Barcode employee input font style */


/* tool barcode input font style */
#toolid{
  text-transform: uppercase;
}



/* BOOK OUT PAGE STYLES */

#page-content-wrapper > div.row > div > form > div > div.input-headings > div{
  width: 100%;
}
.readonly{
  pointer-events: none;
    user-select: none;
    background: #f9f9f9;
    border: solid 1px lightgrey;
    color: #4c4c4c;
}

#bookininput{
  font-size: 15px;
}
.bookin{
  border:none;
  background-color: white;
}
.bookin:focus{
  background-color: white;
  border: none !important;
}



/* forms styles */
.book-out-form ,.book-in-form {
 padding: 10px; 
}

/* form labels styling */
.book-out-form  label,.book-in-form label{
min-width: 120px;
}

/* form input styles */
.book-out-form  input, .book-in-form  input{
  height: 25px;
  width: 170px;
  }

  #page-content-wrapper > div.row > div > form > div > table > tbody > tr > td > input{
  padding: 0px 0px 0px 4px;
}



/* form row spacing and styles */
.book-out-form .row:nth-child(2){
padding: 20px 0px 0px 0px;
}

.book-out-form .row:nth-child(3){
  padding: 0px 0px 20px 0px;
  }

  .input-headings{
    border: solid 1px #bdb5b5;
    padding: 10px;
  }

/* Table styles */
.book-out-form  table,.book-in-form table{
  font: small-caption;
  padding: 10px;
}


.book-out-form table td ,.book-in-form table td{
  padding: 0px;
}

.book-out-form table input, select ,.book-in-form table input {
  width: 100%;
  height: 42px;
  border: none;
  font-size: 15px;
}

/* Book button styles */
#book-button{
  display: flex;
  justify-content: center;
  
}
#book-button input{
  width: 140px;
  height: 40px;
}

/* BOOKING IN PAGE STYLES */

 /* Booking in table div tags styles  */
 .book-in-form table div{
   padding: 10px;
 }

 /* form row spacing and styles */
.book-in-form div .row{
  padding: 0px 0px 20px 0px;
}

/* ADD TOOL PAGE STYLES */
#tool_condition{
  border: solid 1px rgb(180,180,180);
    border-radius: 4px;
}

/* tool adjustment report styles */
#adjustmentReport{
  margin-left: 29%;
    position: absolute;
    display: inline-grid;
    margin-bottom: 87px;
    top: 49px;
    border: solid 1px grey ;
    padding: 5px;
}

#adjustmentReportButton{
  background-color: #007985 !important;
  border-color: #007985 !important;

}

#adjustmentReportDropdown{
  margin: 5px;
  width: 422px;
  border-radius: 5px;
  border: solid 1px grey;
  
}
@media(max-width:970px) {
#adjustmentReport{
  display: none!important;
}
}
#adjustmentReport{
  display: flex;
}

#fileDropdown{
  margin-top: -5px !important;
}
#fileDropdownToggle{
  margin-top: -5px !important;
}

/* FOOTER STYLES */

/* footer space */

#footer_space{
  height: 50px;
}

 footer{
background-color: rgba(29, 29, 29, 1);
color: #999999;
font-variant: small-caps;
font-size: 16px !important;
min-height: 40px !important;
max-height: 40px !important;

}

 div > div:nth-child(4) > footer{
  padding-left:250px
  
}

#page-content-wrapper > div.container-fluid > footer > div {
  margin: 10px;
  margin-top: 9px !important;
}

#page-content-wrapper > div > div > div > footer > div{
  margin: 10px;
  margin-top: 9px !important;
}

#page-content-wrapper > div > div.container-fluid > footer > div{
  margin-top: 11px !important;
}

#page-content-wrapper > div > div > div > footer > div{
  margin-top: 11px !important;
}

#page-background > footer > div{
  margin-top: 11px !important;
}





/* PRELOADER SPINNER


body{
  width: 100%;

  overflow-x: hidden;
}

.spinner{
  width: 80px;
  height: 80px;
  
  border: 2px solid #f3f3f3;
  border-top:3px solid #f25a41;
  border-radius: 100%;
  
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right: 0;
  margin: auto;
  
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from{
      transform: rotate(0deg);
  }to{
      transform: rotate(360deg);
  }
}

#overlay{
height:100%;
width:100%;
background:rgba(0, 0, 0, 1);
position:fixed;
left:0;
top:0;
} */