body{
    /* min-height: 200vh; */
  position: relative;
  }
  .text-yellow {
          color: #faff00;
        }
  
        .logo {
          width: 136px;
          position: absolute;
          z-index: 1;
          left: 0;
          right: 0;
          margin-top: -4.4%;
          margin-left: auto;
          margin-right: auto;
          transform: translateX(-5%);
          border-radius: 50%; /* Membuat bentuk bulat */
          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }
        .bg-navy {
          background-color: #004448;
          height: 112px;        
          box-shadow: 0px 12px 32px 0px #082e193d;
        }
        .bg-navy-second {
          background-color: #014F54;
          box-shadow: 0px 12px 32px 0px #082e193d;
        }
        .bg-yellow {
          background-color: #CEDD38;
          height: 96px;        
          box-shadow: 0px 12px 32px 0px #082e193d;
        }
  
        .background-div {
          position: relative;
          width: 100%;
          height: 100vh;
          background-image: url("/assets/img/graphic/hero.png");
          background-size: cover;
          z-index: -1;
        }
  
    
        .card-bg{

          background-size: cover; /* Menyesuaikan ukuran gambar agar menutupi seluruh background card */
          background-position: center; /* Memastikan posisi gambar tetap di tengah card */
          height:100%;
        }
  
        .background-div-2 {
          position: relative;
          width: 100%;
          height: 50vh;
          margin-top: -15%;
          background-image: url("/assets/img/graphic/bg-login-3.png");
          background-size: cover;
        }

        .background-div-3 {
          position: relative;
          width: 100%;
          height: 100%;
          margin-top: -15%;
          background-image: url("/assets/img/graphic/bg-login-3.png");
          background-color: #ecf3fe;
          background-size: cover;
        }
  
        .btn-login{
          background: linear-gradient(
            to bottom,
            rgba(0, 51, 72, 1),
            rgba(38, 127, 165, 1)
          ); /* Gradasi hijau */
          
          box-shadow: 0px 12px 24px 0px rgba(181, 198, 241, 0.8);
          border-radius: 12px;
        }

        .btn-register{
          background: linear-gradient(
            to bottom,
            rgba(173, 209, 0, 1),
            rgba(123, 146, 10, 1)
          ); /* Gradasi hijau */
          
          box-shadow: 0px 12px 24px 0px rgba(181, 198, 241, 0.8);
          border-radius: 12px;
        }

        .btn-green{
          background: linear-gradient(
            to bottom,
            #33c863,
            #33c863
          ); /* Gradasi hijau */
          
          box-shadow: 0px 12px 24px 0px rgba(181, 198, 241, 0.8);
          border-radius: 12px;
        }

        .btn-disabled{
          background: linear-gradient(
            to bottom,
            #dddfe5,
            #dddfe5
          ); /* Gradasi hijau */
          
          box-shadow: 0px 12px 24px 0px rgba(181, 198, 241, 0.8);
          border-radius: 12px;
        }

        
  
        @media (min-width: 300px) and (max-width: 375px) {
          .logo {
            margin-top: -12% !important;
            width: 20%;
          }
          .text-back{
            margin-top: 7%;
          }
          .bg-yellow {
            background-color: #CEDD38;
            height: 15vh;        
            box-shadow: 0px 12px 32px 0px #082e193d;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -80%;
            height: 100vh;
            background-image: url("/assets/img/graphic/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }

          .card-change-password{
            margin-top:-40% !important; 
          }
  
        }
  
        @media (min-width: 280px) and (max-width: 375px) {
          .logo {
            margin-top: -12% !important;
            width: 20%;
          }
          .text-back{
            margin-top: 7%;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -80%;
            height: 100vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }

          .card-change-password{
            margin-top:-40% !important; 
          }
          
        }
  
        @media (min-width: 300px) and (max-width: 376px) {
          .logo {
            margin-top: -8%;
            width: 72px;
          }
          .text-back{
            margin-top: 10%;
          }
          #header-title {
            font-size: 14px !important;
          }
          .bg-navy {
            height: 9vh !important;
          }

          .bg-yellow {
            height: auto !important;
          }

          #image_user {
            width: 72px;
            height: 72px;
          }

          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -80%;
            height: 100vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-25% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }

          .card-change-password{
            margin-top:-40% !important; 
          }

          #workCity {
            padding-left: 56px;
            font-size: 12px !important;
          }
  
        }
  
        @media (min-width: 376px) and (max-width: 430px) {
          .logo {
            margin-top: -8%;
            width: 72px;
          }
          .text-back{
            margin-top: 10%;
          }
          #header-title {
            font-size: 18px !important;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -120%;
            height: 100vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:0% !important;
          }

          #image_user {
            width: 72px;
            height: 72px;
          }

          .bg-navy {
            height: 9vh !important;
          }

          .bg-yellow {
            height: auto !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
                    .card-change-password{
            margin-top:-40% !important; 
          }

          #workCity {
            padding-left: 56px;
            font-size: 12px !important;
          }
  
        }
  
        @media (min-width: 431px) and (max-width: 572px) {
          .logo {
            margin-top: -5%;
          }
          .text-back{
            margin-top: 7%;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -60%;
            height: 120vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
                    .card-change-password{
            margin-top:-40% !important; 
          }
  
        }
  
        @media (min-width: 573px) and (max-width: 600px) {
          .logo {
            margin-top: -5%;
          }
          .text-back{
            margin-top: 7%;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -60%;
            height: 140vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
                    .card-change-password{
            margin-top:-40% !important; 
          }
  
        }
  
        @media (min-width: 600px) and (max-width: 687px) {
          .logo {
            margin-top: -5%;
          }
          .text-back{
            margin-top: 7%;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: 0%;
            height: -120px;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
                    .card-change-password{
            margin-top:-40% !important; 
          }
  
        }
        

        @media (min-width: 688px) and (max-width: 777px) {
          .logo {
            margin-top: -5%;
            width: 10%;
          }

          .text-yellow {
            color: #faff00;
            margin-top: 20px;
          }

          .text-back{
            margin-top: 7%;
          } 
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -110%;
            height: 80vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
                    .card-change-password{
            margin-top:-40% !important; 
          }
  
        }
  
      
        @media (min-width: 801px) and (max-width: 900px) {
          .logo {
            margin-top: -5%;
          }
          .text-back{
            margin-top: 7%;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: 0%;
            height: 200px;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
  
        }
  
        @media (min-width: 901px) and (max-width: 1000px) {
          .logo {
            margin-top: -5%;
          }
          .text-back{
            margin-top: 7%;
          }
          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: -5%;
            height: 100vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
  
        }
  
        @media (min-width: 1001px) and (max-width: 1080px) {
          .logo {
            margin-top: -5%;
          }
          .text-back{
            margin-top: 7%;
          }

          .text-yellow{
            margin-top: 20% !important;
          }

          .background-div-2 {
            position: relative;
            width: 100%;
            margin-top: 0%;
            height: 50vh;
            background-image: url("images/bg-login-3.png");
            background-size: cover;
          }
  
          .card-login {
            margin-top:-10% !important;
          }
  
          .card-register {
            margin-top:0% !important;
          }
  
        }
  
        
        /* enable absolute positioning */
  .inner-addon {
    position: relative;
  }
  
  /* style glyph */
  .inner-addon .icon {
    position: absolute;
    padding: 2%;
    margin-right: 10%;
    pointer-events: none;
  }
  
  /* align glyph */
  .left-addon .icon  { left:  0px;top:5px}
  .right-addon .icon { right: 0px;top:5px}
  
  /* add padding  */
  .left-addon input { padding-left: 40px;}
  .right-addon input { padding-right: 40px;}

  .left-addon-register .icon  { left:  0px;top:-5px}
  .right-addon-register .icon { right: 0px;top:5px}
  
  /* add padding  */
  .left-addon-register input { padding-left: 50px;}
  .right-addon-register input { padding-right: 40px;}
  
  
  .input-icon {
    position: relative;
  }
  
  .input-icon i {
    position: absolute;
    right: 10 !important;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  
  .input-icon i{
    right: 10px; /* Adjust as needed */
  }
        
  .select2-container .select2-selection--single {
    width: 100%; /* Menetapkan lebar 100% untuk dropdown */
}

.select2-container .select2-dropdown--below {
    width: 100%; /* Menetapkan lebar 100% untuk dropdown di bawah */
}

.select2-container .select2-dropdown--above {
    width: 100%; /* Menetapkan lebar 100% untuk dropdown di atas */
}

.select2-container--default .select2-selection--single{
  border-color: #dee2e6;
  height: 40px;
  padding: .250rem .40rem;
  line-height: 1.5;
  width: 100%;
}

/* button */

.btn-success-light:hover {
  background: #d7fddc;
}

.btn-danger-light {
  background: #EB5757;
}

.btn-danger-light:hover {
  background: #d23333;
  transition: all .5s ease;
}

/* button */



.oval-background {
  position: relative;
  width: 100%;
  height: 400px; /* Sesuaikan dengan tinggi yang diinginkan */
  background-image: url('/assets/img/graphic/hero.png'); /* Ganti dengan URL gambar yang diinginkan */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.oval-background:before {
  content: "";
  position: absolute;
  bottom: -56px; /* Sesuaikan dengan tinggi oval yang diinginkan */
  left: 0;
  width: 100%;
  height: 100px; /* Sesuaikan dengan tinggi oval yang diinginkan */
  background: #fff; /* Ganti dengan warna latar belakang yang diinginkan */
  border-radius: 95%;
}

.oval-background2 {
  position: relative;
  width: 100%;
  height: 400px; /* Sesuaikan dengan tinggi yang diinginkan */
  background-image: url('/assets/img/bg_dashboard.png'); /* Ganti dengan URL gambar yang diinginkan */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.oval-background2:before {
  content: "";
  position: absolute;
  bottom: -56px; /* Sesuaikan dengan tinggi oval yang diinginkan */
  left: 0;
  width: 100%;
  height: 100px; /* Sesuaikan dengan tinggi oval yang diinginkan */
  background: #fff; /* Ganti dengan warna latar belakang yang diinginkan */
  border-radius: 95%;
}





.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color: #ffffff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


.select2 .select2-container{
    width: 100% !important;
}

#header-title {
  font-size: 24px;
}

.container-custom {
  max-width: 1140px !important;
}

#image_user {
  width: 104px;
  height: 104px;
}