@font-face {
  font-family: "SegoeUI";
  src: url("fonts/SegoeUI.eot");
  src: url("fonts/SegoeUI.eot") format("embedded-opentype"), url("fonts/SegoeUI.woff2") format("woff2"), url("fonts/SegoeUI.woff") format("woff"), url("fonts/SegoeUI.ttf") format("truetype"), url("fonts/SegoeUI.svg#SegoeUI") format("svg");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html, body {
  background: url("./../img/background_master.png") left top/cover no-repeat;
  background-attachment: fixed;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif!important;
}

.roboto {
    font-family: 'Roboto', sans-serif!important;
}

.mt-45 {
    margin-top: 40px;
    color: #dddddd;
    
}

h4.roboto.caption-logo.fs-3 {
    line-height: 30px;
}
.card-title {
    font-family: 'Roboto', sans-serif!important;
    /*font-weight: 700!important;*/
}

.b-hand {
  position: fixed;
  bottom: 0;
  left: 25%;
}

.b-hand > img {
    width: 90%!important;
}
.col-3.v-filter-white > img {
    margin-left: -6px!important;
}
.f-login {
    
  position: fixed;
  bottom:0px;
  top:0px;
  right: 100px;
  z-index: 9;
  background: #ddd;
  max-width: 350px;
  /*overflow: hidden;*/
}

.v-filter-white {
  filter: grayscale(100%) sepia(100%) brightness(200%) saturate(0%) contrast(1000%);
  -webkit-filter: grayscale(100%) sepia(100%) brightness(200%) saturate(0%) contrast(1000%);
  -moz-filter: grayscale(100%) sepia(100%) brightness(200%) saturate(0%) contrast(1000%);
}
.v-filter-black {
    filter: contrast(0);
    -webkit-filter: contrast(0);
    -moz-filter: contrast(0);
}

.b-yellow {
  background: url("./../img/button_orange.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /*box-shadow: 7px 3px 15px 2px rgba(0, 0, 0, 0.36);*/
  /*-webkit-box-shadow: 7px 3px 15px 2px rgba(0, 0, 0, 0.36);*/
  /*-moz-box-shadow: 7px 3px 15px 2px rgba(0, 0, 0, 0.36);*/
  /*transition: all ease 0.4s;*/
}

.b-yellow:hover {
  transition: all ease 0.4s;
  color: white;
  /*box-shadow: 7px 3px 15px 2px rgba(255, 255, 0, 0.36);*/
  /*-webkit-box-shadow: 7px 3px 15px 2px rgba(255, 255, 0, 0.36);*/
  /*-moz-box-shadow: 7px 3px 15px 2px rgba(255, 255, 0, 0.36);*/
}

.c-shaddow {
  box-shadow: 1px -1px 145px 0px rgba(0, 0, 0, 0.87);
  -webkit-box-shadow: 1px -1px 145px 0px rgba(0, 0, 0, 0.87);
  -moz-box-shadow: 1px -1px 145px 0px rgba(0, 0, 0, 0.87);
}

.fs-small {
  font-size: 0.7rem;
}
.fw-700 {
    font-weight: 700!important;
}
.fw-500 {
    font-weight: 500!important;
}
.fw-900 {
  font-weight: 900!important;
}

.h-100vw {
  height: 100vw;
}

.t-no-underline {
  text-decoration: none !important;
}

.no-pading {
  padding: 0px;
}

.app-menu.navbar-menu {
    background: transparent!important;
    border: 0px!important;
    box-shadow: 0 0px 0px rgb(15 34 58 / 0%)!important;
}
.page-content {
  background: #ddd;
  margin-right: 60px;
  /*padding: calc(0px + 1.5rem) calc(1.5rem * .5) 30px calc(1.5rem * .5);*/
  padding: 50px;
}

.hamburger-icon.open span:nth-child(2) {
  left: -2px;
  top: 10px;
  width: 15px;
}

.hamburger-icon.open span:nth-child(2) {
  left: 0px;
  top: 10px;
  width: 14px;
}

.hamburger-icon.open span:nth-child(3) {
  left: 10px;
  top: 10px;
  width: 14px !important;
}
.hamburger-icon.open span:nth-child(1) {
  left: 2px;
  top: 4px;
  width: 20px !important;
}
.navbar-menu .navbar-nav .nav-link {
    padding: 0.625rem 40px;
}
.nav-item.active {
    
}
.navbar-menu {
  width: 215px;
}
.main-content {
  margin-left: 215px;
}

#page-topbar {
  right: 75px;
  left: 215px;
  background: #d1d1d2;
}
.padding-panjang {
  padding-left: 0px !important;
}
/*.simplebar-content {*/
/*  margin-top: 60px;*/
/*}*/
.i-menu {
    max-width: 15px;
    /*filter: grayscale(100%) sepia(100%) brightness(200%) saturate(0%) contrast(1000%);*/
    /*-webkit-filter: grayscale(100%) sepia(100%) brightness(200%) saturate(0%) contrast(1000%);*/
    /*-moz-filter: grayscale(100%) sepia(100%) brightness(200%) saturate(0%) contrast(1000%);*/
}
.footer {
    right: 75px!important;
    left: 215px;
    position: fixed;
    bottom: 0px;
}

.simplebar-content {
  width: 350px;
}

[data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm"] .navbar-brand-box {
  background: transparent!important;
}

.customizer-setting.d-none.d-md-block {
  display: none !important;
}
.app-menu.navbar-menu {
  margin-top: 75px;
}
.hamburger-icon span:nth-child(1) {
    width: 100%!important;
}
.hamburger-icon span:nth-child(3) {
    width: 100%!important;
}
.w-40 {
    width: 40%;
}

#scrollbar {
  margin-top: 60px;
}
.nav-item {
    width: 215px;
}
.active {
  background: rgba(0,0,0,0.2);
    /*background: -moz-linear-gradient(left, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.22) 100%); */
    /*background: -webkit-linear-gradient(left, rgba(255,255,255,0.02) 0%,rgba(0,0,0,0.22) 100%); */
    /*background: linear-gradient(to right, rgba(255,255,255,0.02) 0%,rgba(0,0,0,0.22) 100%);*/
}

.arrow-left {
  background-image: url('../img/button_greyarrow_left.png');
  background-repeat: no-repeat;
  background-position: 101% 50%;
  background-size: 15px 25px;
  filter: contrast(4);
  -webkit-filter: contrast(4);
  -moz-filter: contrast(4);
}
.breadcrumb-item.active {
  background: #fff;
}

[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item {
  position: relative;
  width: 70px;
  
}

[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link {
    background: rgba(0,0,0,0.3);
}

[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu {
    display:none!important;
}
.nav-item:hover {
  background: rgba(0,0,0,0.1);
}


 .page-title-box {
     background: transparent!important;
     box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
     padding: 0rem 1.5rem;
     margin: -23px -1.5rem 10px -1.5rem;
 }
 .breadcrumb-item.active {
     background: transparent;
 }
 .sub-header-perpage {
    margin-top:70px;
    margin-right: 60px;
    margin-left: 0px;
    /*padding: 25px 25px 15px 25px;*/
    padding: 35px 70px 15px 60px;
 }
 
.filter-white {
    filter: contrast(9);
    -webkit-filter: contrast(9);
    -moz-filter: contrast(9);
 }
.breadcrumb-item + .breadcrumb-item::before {
      font-family: "Material Design Icons";
      /*font-family: "SegoeUI" !important;*/
      font-size: 15px;
      line-height: 23px;
      color:#9f9f9f!important;
}
.fs-kecil {
    font-size: 9px;
}
.h-100px {
    height: 150px;
}
 
 .dashboard {
    /*background: rgb(253,117,29);*/
    /*background: linear-gradient(90deg, rgba(253,117,29,1) 50%, rgba(252,69,69,1) 100%);*/
    background: #142038;
 }
 .tyre {
     background: url('../img/IAM_header_tyre.png');
     background-position: center;
     background-size: 100% 100%;
 }
 .undercarriage {
    background: url('../img/IAM_header_undercarriage.png'); 
    background-position: center;
    background-size: 100% 100%;
 }
 
[data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown {
  background: rgba(0,0,0,0.3);
  width: 200px;
}
 
.close {
  background: #405189;
  color: #fff;
  border: 0px;
  padding: 5px 10px 8px;
}

.btn.btn-warning {
  margin-right: 5px;
}
 
.fs-13 {
    font-size: 13px!important;
}
.fs-15 {
    font-size: 15px!important;
}

.fs-13.ms-3 {
    color: #dddddd;
}
.hr {
    border-bottom: 1px solid #888888;;
}
.m-40 {
    margin-left: 40px;
    padding-right: 140px!important;
    /*padding-bottom: 40px;*/
    
}
.c-e6 {
    background: #eeeeee!important;
}

.navbar-header {
    padding-inline: 50px;
}

.mdi-magnify::before {
  content: "\f0349";
  font-size: 20px!important;
  color: #8d8d8d;
  margin-top:-3px;
  background: transparent!important;
}
.form-control.border.border-0.border-light.c-e6 {
  height: 40px !important;
  overflow-x:hidden;
}
.btn.btn-primary.bg-white.border.border-0.c-e6 {
    padding:0px 10px 0px 10px !important;
}

.text-f4 {
    color: #f4f4f4!important;
}
.fs-kecil {
    font-size: 15px!important;
}
.breadcrumb-item.active.text-white {
  color: #ddd!important;
}
.c-9f {
    color:#9f9f9f!important;
}
.chartjs-chart {
    max-height: 180px;
}
.c-333 {
    color: #333333;
}
.fc-777 {
    color: #777777;
}
.bg-f4 {
    background: #f4f4f4!important;
}

.bg-d6 {
    background: #dddddd!important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link::before {
    display: none;
}

.fw-100 {
    font-weight: 100;
}
.bg-ed3 {
  background: #ededed !important;
}
.table-blue-dark {
    --vz-table-color: #ddd;
    --vz-table-bg: #142038;
    --vz-table-border-color: #373b3e;
    --vz-table-striped-bg: #25292d;
    --vz-table-striped-color: #fff;
    --vz-table-active-bg: white;
    --vz-table-active-color: #000;
    --vz-table-hover-bg: white;
    --vz-table-hover-color: #000;
    color: var(--vz-table-color);
    border-color: var(--vz-table-border-color);
}

.table.table-nowrap.mb-0 > tbody > tr {
  background: #fff;
  border-bottom: 4px solid #ddd;
}
.bg-cd3 {
    background: #cdcdcd!important;
}
.bg-a73 {
    background: #a7a7a7!important;
}

@media only screen and (max-width: 1024px) {
  html, body {
    background-color: #ddd;
    height: auto;
  }
  .hidden-onmobile {
    display: none;
  }
  .col-7 {
    display: none;
  }
  .col-4 {
    width: 100%;
  }
  .f-login {
    height: 100%;
    background: #ddd;
    overflow: scroll;
    width: 100%;
    right: 0px;
    max-width: 100vw;
  }
  #page-topbar {
      right: 0px;
      left: 0px;
      background: #d1d1d2;
  }
  .page-content {
      margin-right: 0px;
      
  }
  .main-content {
    margin-left: 0px;
  }
  .footer {
    right: 0px!important;
    left: 0px;
  }
  .padding-panjang {
      /*padding-left: 0px;*/
      display: none!important;
  }
  .sub-header-perpage {
      margin-right: 0px;
  }
  .sidebar-background {
    opacity: 0.7;
    background: #000;
    width: 100vw !important;
  }
}

@media screen and (min-height: 700px) {
    
    .m-40 {
      margin-left: 40px;
      padding-right: 0px !important;
      padding-bottom: 0px;
      padding-left: 140px !important;
    }
    
    .logo_master.p-4.m-5 {
        margin-top: 10rem !important;
    }
    
    #page-topbar {
        right: 60px!important;
    }
    .footer {
        right: 60px!important;
    }
}


@media screen and (min-height: 900px) {
    .logo_master.p-4.m-5 {
        margin-top: 250px !important;
    }
    .b-hand > img {
        width: 110% !important;
        max-width: 200%;
    }
    .login-logo.w-50.m-auto.mt-4 {
        margin-top: 125px !important;
    }
    
    .f-login.p-5 {
        max-width: 400px;
    }
    .fs-small {
        font-size: 1rem;
    }
    /*.page-content {*/
    /*    margin-right: 75px;*/
    /*}*/
    /*.sub-header-perpage {*/
    /*    margin-right: 75px;*/
    /*}*/
    .h-100px {
        height: 200px;
    }
}