#body{
    background-color: #eeeeee;
    /* padding-top: 75px; */
}
#body-auth{
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    background-color: #dcdcdc;
}

.auth-absolute{ 
  border-radius: 1em;
  padding: 1em;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.header-auth-modal-theme{  /* CARD YAH BUKAN MODAL */
  position: relative;
  width: 100%;
  background-color: #2196F3;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: white;
  border-radius: 0.5rem !important;
}

.header-card{
  position: relative;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 0.5rem;
  color: white;
  border-radius: 0.5rem !important;
}

.footer-modal-relative{
  position: relative;
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .hr-start {
    border-left: 1px solid #2196F3;
  }
  .hr-end {
    border-right: 1px solid #2196F3;
  }
}

.bg-theme-light{
  background:#64B5F6;

}

.bg-theme{
    background:#2196F3;
}

.bg-theme-dark {
  background:#1976D2;
}

.text-primary-dark {
  color: #134074!important
}

.rounded-15 {
    border-radius: 1.5rem !important;
}

.rounded-10 {
   border-radius: 1rem !important;

}

.rounded-7{
    border-radius: 0.7rem !important;
}

.rounded-5{
    border-radius: 0.5rem !important;
}

.rounded-top-7{
  border-top-left-radius: 0.7rem !important;
  border-top-right-radius: 0.7rem !important;
}

.rounded-bottom-7{
  border-bottom-right-radius: 0.7rem !important;
  border-bottom-left-radius: 0.7rem !important;
}

.gradient-custom {
    /* fallback for old browsers */
    background: #2196F3;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to bottom, #42A5F5, #2196F3, #1976D2);
    
    background: linear-gradient(to bottom, #42A5F5, #2196F3, #1976D2);
}

.icon-success{
    color: #198754;
}

.icon-exlam{
    font-size:80px;
    color: #ffc107;
}

.icon-not-calendar{
  font-size:80px;
  color: #dc3545;
}

.icon-swap{
  color: #ffffff;
}

.toast{
    position: static;
    bottom: 0 !important;
    right: 0 !important;
}

.toast-border{
  border-left: 10px solid #198754;
}

.toast-icon{
  font-size: 30px;
  color: #198754;
}

.bg-toast-top{
  position: absolute;
  width: 100%;
  top: 0;
  height: 10px;
  background: #2196F3;
}

@media (min-width: 768px) {
    .text-md-end-center {
        text-align: right !important;
    }
}

@media (max-width: 767px) {
    .text-md-end-center {
        text-align: center !important;
    }
}

/* SIDEBAR */
  .sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    margin-left: -300px;
    transition: 0.4s;
  }

  .active-main-content {
    margin-left: 250px;
  }

  .active-sidebar {
    margin-left: 0;
  }

  #main-content {
    transition: 0.4s;
  }
  #footer {
    padding: 15px;
    color: #f4f6fd;
    font-size: 14px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 9999;
    background: #040b14;
  }
  
/* END SIDEBAR */

/* TEXT */
.text-info-dark {
    color: #0d8af0 !important;
  }

/* END TEXT */

/* BUTTON */
.btn-gray-dark {
    color: #fff;
    background-color: #3f464c;
    border-color: #3f464c;
  }
.btn-gray-dark:hover {
    color: #fff;
    background-color: #24282c;
    border-color: #24282c;
}
.btn-check:focus + .btn-gray-dark, .btn-gray-dark:focus {
    color: #fff;
    background-color: #24282c;
    border-color: #24282c;
    box-shadow: 0 0 0 0.25rem rgba(121, 129, 135, 0.5);
}
.btn-check:checked + .btn-gray-dark, .btn-check:active + .btn-gray-dark, .btn-gray-dark:active, .btn-gray-dark.active, .show > .btn-gray-dark.dropdown-toggle {
    color: #fff;
    background-color: #24282c;
    border-color: #2f353a;
}
.btn-check:checked + .btn-gray-dark:focus, .btn-check:active + .btn-gray-dark:focus, .btn-gray-dark:active:focus, .btn-gray-dark.active:focus, .show > .btn-gray-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(121, 129, 135, 0.5);
}
.btn-gray-dark:disabled, .btn-gray-dark.disabled {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

/*  */

.btn-toggle {
  color: #fff;
  background-color: #2196F3;
  border-color: #ffffff;
}
.btn-toggle:hover {
  color: #1976D2;
  background-color: #fff;
  border-color: #1976D2;
}
.btn-check:focus + .btn-toggle, .btn-toggle:focus {
  color: #1976D2;
  background-color: #fff;
  border-color: #1976D2;
  box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.5);
}
.btn-check:checked + .btn-toggle, .btn-check:active + .btn-toggle, .btn-toggle:active, .btn-toggle.active, .show > .btn-toggle.dropdown-toggle {
  color: #1976D2;
  background-color: #fff;
  border-color: #1976D2;
}
.btn-check:checked + .btn-toggle:focus, .btn-check:active + .btn-toggle:focus, .btn-toggle:active:focus, .btn-toggle.active:focus, .show > .btn-toggle.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.502)
}
.btn-toggle:disabled, .btn-toggle.disabled {
  color: #fff;
  background-color: #2196F3;
  border-color: #fff;
}

/*  */

.btn-gray {
    color: #fff;
    background-color: #3e5569;
    border-color: #3e5569;
  }
.btn-gray:hover {
    color: #fff;
    background-color: #233a4e;
    border-color: #233a4e;
}
.btn-check:focus + .btn-gray, .btn-gray:focus {
    color: #fff;
    background-color: #233a4e;
    border-color: #233a4e;
    box-shadow: 0 0 0 0.25rem rgba(71, 100, 121, 0.5);
}
.btn-check:checked + .btn-gray, .btn-check:active + .btn-gray, .btn-gray:active, .btn-gray.active, .show > .btn-gray.dropdown-toggle {
    color: #fff;
    background-color: #2b3f51;
    border-color: #434e57;
}
.btn-check:checked + .btn-gray:focus, .btn-check:active + .btn-gray:focus, .btn-gray:active:focus, .btn-gray.active:focus, .show > .btn-gray.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(71, 100, 121, 0.5);
}
.btn-gray:disabled, .btn-gray.disabled {
    color: #fff;
    background-color: #3e5569;
    border-color: #3e5569;
}

.btn-info-dark {
  color: #ffffff;
  background-color: #0d8af0;
  border-color: rgb(13, 138, 240);
}
.btn-info-dark:hover {
  color: #ffffff;
  background-color: #2695f0;
  border-color: #2d99f1;
}
.btn-check:focus + .btn-info-dark, .btn-info-dark:focus {
  color: #ffffff;
  background-color: #2695f0;
  border-color: #2d99f1;
  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
.btn-check:checked + .btn-info-dark, .btn-check:active + .btn-info-dark, .btn-info-dark:active, .btn-info-dark.active, .show > .btn-info-dark.dropdown-toggle {
  color: #ffffff;
  background-color: #2695f0;
  border-color: #2d99f1;
}
.btn-check:checked + .btn-info-dark:focus, .btn-check:active + .btn-info-dark:focus, .btn-info-dark:active:focus, .btn-info-dark.active:focus, .show > .btn-info-dark.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(11, 101, 204, 0.5);
}
.btn-info-dark:disabled, .btn-info-dark.disabled {
  color: #ffffff;
  background-color: #0d8af0;
  border-color: #0d8af0;
}


.btn-swap {
  color: #ffffff;
  background-color: #1c1b1f96;
  border-color: #1c1b1f83;
}
.btn-swap:hover {
  color: #ffffff;
  background-color: #1c1b1f9c;
  border-color: #1c1b1f83;
}
.btn-check:focus + .btn-swap, .btn-swap:focus {
  color: #ffffff;
  background-color: #1c1b1f83;
  border-color: #1c1b1f83;
  box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
.btn-check:checked + .btn-swap, .btn-check:active + .btn-swap, .btn-swap:active, .btn-swap.active, .show > .btn-swap.dropdown-toggle {
  color: #ffffff;
  background-color: #1c1b1f83;
  border-color: #1c1b1f83;
}
.btn-check:checked + .btn-swap:focus, .btn-check:active + .btn-swap:focus, .btn-swap:active:focus, .btn-swap.active:focus, .show > .btn-swap.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(11, 101, 204, 0.5);
}
.btn-swap:disabled, .btn-swap.disabled {
  color: #ffffff;
  background-color: #1c1b1f83;
  border-color: #1c1b1f83;
}

.btn.btn-primary-dark {
  color: #ffffff;
  border-color: #1B84FF;
  background-color: #134074;
}

.btn.btn-primary-dark .svg-icon,.btn.btn-primary-dark i {
  color: #ffffff;
}

.btn.btn-primary-dark.dropdown-toggle:after {
  color: #ffffff;
}

.btn-check:active+.btn.btn-primary-dark,.btn-check:checked+.btn.btn-primary-dark,.btn.btn-primary-dark.active,.btn.btn-primary-dark.show,.btn.btn-primary-dark:active:not(.btn-active),.btn.btn-primary-dark:focus:not(.btn-active),.btn.btn-primary-dark:hover:not(.btn-active),.show>.btn.btn-primary-dark {
  color: #ffffff;
  border-color: #107EFF;
  background-color: #003a7c!important;
}

.btn-check:active+.btn.btn-primary-dark .svg-icon,.btn-check:active+.btn.btn-primary-dark i,.btn-check:checked+.btn.btn-primary-dark .svg-icon,.btn-check:checked+.btn.btn-primary-dark i,.btn.btn-primary-dark.active .svg-icon,.btn.btn-primary-dark.active i,.btn.btn-primary-dark.show .svg-icon,.btn.btn-primary-dark.show i,.btn.btn-primary-dark:active:not(.btn-active) .svg-icon,.btn.btn-primary-dark:active:not(.btn-active) i,.btn.btn-primary-dark:focus:not(.btn-active) .svg-icon,.btn.btn-primary-dark:focus:not(.btn-active) i,.btn.btn-primary-dark:hover:not(.btn-active) .svg-icon,.btn.btn-primary-dark:hover:not(.btn-active) i,.show>.btn.btn-primary-dark .svg-icon,.show>.btn.btn-primary-dark i {
  color: #ffffff;
}

.btn-check:active+.btn.btn-primary-dark.dropdown-toggle:after,.btn-check:checked+.btn.btn-primary-dark.dropdown-toggle:after,.btn.btn-primary-dark.active.dropdown-toggle:after,.btn.btn-primary-dark.show.dropdown-toggle:after,.btn.btn-primary-dark:active:not(.btn-active).dropdown-toggle:after,.btn.btn-primary-dark:focus:not(.btn-active).dropdown-toggle:after,.btn.btn-primary-dark:hover:not(.btn-active).dropdown-toggle:after,.show>.btn.btn-primary-dark.dropdown-toggle:after {
  color: #ffffff;
}

.btn.btn-success-dark {
  color: #ffffff;
  border-color: #00613a;
  background-color: #00613a;
}

.btn.btn-success-dark .svg-icon,.btn.btn-success-dark i {
  color: #ffffff;
}

.btn.btn-success-dark.dropdown-toggle:after {
  color: #ffffff;
}

.btn-check:active+.btn.btn-success-dark,.btn-check:checked+.btn.btn-success-dark,.btn.btn-success-dark.active,.btn.btn-success-dark.show,.btn.btn-success-dark:active:not(.btn-active),.btn.btn-success-dark:focus:not(.btn-active),.btn.btn-success-dark:hover:not(.btn-active),.show>.btn.btn-success-dark {
  color: #ffffff;
  border-color: #00814e;
  background-color: #00814e!important;
}

.btn-check:active+.btn.btn-success-dark .svg-icon,.btn-check:active+.btn.btn-success-dark i,.btn-check:checked+.btn.btn-success-dark .svg-icon,.btn-check:checked+.btn.btn-success-dark i,.btn.btn-success-dark.active .svg-icon,.btn.btn-success-dark.active i,.btn.btn-success-dark.show .svg-icon,.btn.btn-success-dark.show i,.btn.btn-success-dark:active:not(.btn-active) .svg-icon,.btn.btn-success-dark:active:not(.btn-active) i,.btn.btn-success-dark:focus:not(.btn-active) .svg-icon,.btn.btn-success-dark:focus:not(.btn-active) i,.btn.btn-success-dark:hover:not(.btn-active) .svg-icon,.btn.btn-success-dark:hover:not(.btn-active) i,.show>.btn.btn-success-dark .svg-icon,.show>.btn.btn-success-dark i {
  color: #ffffff;
}

.btn-check:active+.btn.btn-success-dark.dropdown-toggle:after,.btn-check:checked+.btn.btn-success-dark.dropdown-toggle:after,.btn.btn-success-dark.active.dropdown-toggle:after,.btn.btn-success-dark.show.dropdown-toggle:after,.btn.btn-success-dark:active:not(.btn-active).dropdown-toggle:after,.btn.btn-success-dark:focus:not(.btn-active).dropdown-toggle:after,.btn.btn-success-dark:hover:not(.btn-active).dropdown-toggle:after,.show>.btn.btn-success-dark.dropdown-toggle:after {
  color: #ffffff;
}


.btn.btn-gray-900 {
  color: #ffffff;
  border-color: #071437;
  background-color: #071437;
}

.btn.btn-gray-900 .svg-icon,.btn.btn-gray-900 i {
  color: #ffffff;
}

.btn.btn-gray-900.dropdown-toggle:after {
  color: #ffffff;
}

.btn-check:active+.btn.btn-gray-900,.btn-check:checked+.btn.btn-gray-900,.btn.btn-gray-900.active,.btn.btn-gray-900.show,.btn.btn-gray-900:active:not(.btn-active),.btn.btn-gray-900:focus:not(.btn-active),.btn.btn-gray-900:hover:not(.btn-active),.show>.btn.btn-gray-900 {
  color: #ffffff;
  border-color: #252F4A;
  background-color: #252F4A!important;
}

.btn-check:active+.btn.btn-gray-900 .svg-icon,.btn-check:active+.btn.btn-gray-900 i,.btn-check:checked+.btn.btn-gray-900 .svg-icon,.btn-check:checked+.btn.btn-gray-900 i,.btn.btn-gray-900.active .svg-icon,.btn.btn-gray-900.active i,.btn.btn-gray-900.show .svg-icon,.btn.btn-gray-900.show i,.btn.btn-gray-900:active:not(.btn-active) .svg-icon,.btn.btn-gray-900:active:not(.btn-active) i,.btn.btn-gray-900:focus:not(.btn-active) .svg-icon,.btn.btn-gray-900:focus:not(.btn-active) i,.btn.btn-gray-900:hover:not(.btn-active) .svg-icon,.btn.btn-gray-900:hover:not(.btn-active) i,.show>.btn.btn-gray-900 .svg-icon,.show>.btn.btn-gray-900 i {
  color: #ffffff;
}

.btn-check:active+.btn.btn-gray-900.dropdown-toggle:after,.btn-check:checked+.btn.btn-gray-900.dropdown-toggle:after,.btn.btn-gray-900.active.dropdown-toggle:after,.btn.btn-gray-900.show.dropdown-toggle:after,.btn.btn-gray-900:active:not(.btn-active).dropdown-toggle:after,.btn.btn-gray-900:focus:not(.btn-active).dropdown-toggle:after,.btn.btn-gray-900:hover:not(.btn-active).dropdown-toggle:after,.show>.btn.btn-gray-900.dropdown-toggle:after {
  color: #ffffff;
}
/* END BUTTON */

#videoCam {
  width: 630px;
  height: 300px;
  margin-left: 0px;
  border: 3px solid #ccc;
  background: black;
}
#startBtn {
  margin-left: 280px;
  width: 120px;
  height: 45px;
  cursor: pointer;
  font-weight: bold;
}
#startBtn:hover{
  background-color: #647C90;
  color: red;
}

.video-show {
  background:#000000;
  width: 100%;
  height: auto;
  max-height:200px;
  object-fit:cover;
}


/* INTERVIEW */
.vid {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* min-width: 100%;
  min-height: 100%; */
  object-fit:cover;
}

/* Add some content at the bottom of the video/page */


.nav-index {
  z-index: 1030;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

footer {
  position: fixed;
  height: 60px;
  bottom: 0;
  width: 100%;
}

.text-secondary-dark {
  color: #596066 !important;
}

.fs-custom-1 {
  font-size: 1.25rem !important;
}

.loc-interview-mic {
  position: fixed;
  width: 100%;
  bottom: 80px;
}

.loc-interview-name {
  position: fixed;
  width: 100%;
  bottom: 80px;
}

.loc-interview-view {
  position:fixed;
  top: 20px;
  width: 100%;
  /* background-color: #007579; */
}

.loc-interview-live {
  position:fixed;
  top: 25px;
  width: 100%;
}

/* .loc-interview-text {
  position: fixed;
  max-height: 100px;
  width: 35%;
  right: 50px;
  bottom: 200px;
} */

.loc-interview-text {
  position: fixed;
  right: 25px;
  bottom :80px;
  width: 35%;
  max-height: 300px;

}


.bg-interview {
  background-color: #ffffff71;
}

.bg-interview-result {
  background-color: #000000a9;
}

.portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: #ffffff71;
  max-height: 200px;
  max-width:250px;
}








/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  background: #fff;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #272829;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #0563bb;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* background: rgba(69, 80, 91, 0.8); */
}

.portfolio .portfolio-wrap::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom-right-radius: 0.7rem !important;
  border-bottom-left-radius: 0.7rem !important;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 35px;
  left: 35px;
  /* border-top: 3px solid #d7dce1;
  border-left: 3px solid #d7dce1; */
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  /* border-bottom: 3px solid #d7dce1;
  border-right: 3px solid #d7dce1; */
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #45505b;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #45505b;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #45505b;
  margin: 0 2px;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #148af9;
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
  top: 15px;
  left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
  bottom: 15px;
  right: 15px;
}

.swap{
  font-size: 20px;
  cursor: pointer;
  user-select: none;
}

@media (min-width: 576px) {
  .swap{
    font-size: 30px;
    cursor: pointer;
    user-select: none;
  }

}

@media (min-width: 768px) {
  .swap{
    font-size: 40px;
    cursor: pointer;
    user-select: none;
  }
}

@media (min-width: 992px) {
  .swap{
    font-size: 50px;
    cursor: pointer;
    user-select: none;
  }
}

.swap:hover{
  color: #cecece;
}
/* #video-view */


.bg-chat-bot {
  background-color: hsla(152, 69%, 31%, 0.30) !important;

}

.bg-chat-pelamar {
  background-color: hsla(216, 98%, 52%, 0.30) !important;
}

.pe-custom-2-5 {
  padding-right: 2.5rem;
}

.ps-custom-2-5 {
  padding-left: 2.5rem;
}

@media (min-width: 992px) {
  .modal-custom-lg {
    max-width: 600px;
  }
}

/* CHECK ANIMATION */
.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
  
  .check-icon {
      width: 80px;
      height: 80px;
      position: relative;
      border-radius: 50%;
      box-sizing: content-box;
      border: 4px solid #4CAF50;
      
      &::before {
          top: 3px;
          left: -2px;
          width: 30px;
          transform-origin: 100% 50%;
          border-radius: 100px 0 0 100px;
      }
      
      &::after {
          top: 0;
          left: 30px;
          width: 60px;
          transform-origin: 0 50%;
          border-radius: 0 100px 100px 0;
          animation: rotate-circle 4.25s ease-in;
      }
      
      &::before, &::after {
          content: '';
          height: 100px;
          position: absolute;
          background: #FFFFFF;
          transform: rotate(-45deg);
      }
      
      .icon-line {
          height: 5px;
          background-color: #4CAF50;
          display: block;
          border-radius: 2px;
          position: absolute;
          z-index: 10;
          
          &.line-tip {
              top: 46px;
              left: 14px;
              width: 25px;
              transform: rotate(45deg);
              animation: icon-line-tip 0.75s;
          }
          
          &.line-long {
              top: 38px;
              right: 8px;
              width: 47px;
              transform: rotate(-45deg);
              animation: icon-line-long 0.75s;
          }
      }
      
      .icon-circle {
          top: -4px;
          left: -4px;
          z-index: 10;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          position: absolute;
          box-sizing: content-box;
          border: 4px solid rgba(76, 175, 80, .5);
      }
      
      .icon-fix {
          top: 8px;
          width: 5px;
          left: 26px;
          z-index: 1;
          height: 85px;
          position: absolute;
          transform: rotate(-45deg);
          background-color: #FFFFFF;
      }
  }
}

@keyframes rotate-circle {
  0% {
      transform: rotate(-45deg);
  }
  5% {
      transform: rotate(-45deg);
  }
  12% {
      transform: rotate(-405deg);
  }
  100% {
      transform: rotate(-405deg);
  }
}

@keyframes icon-line-tip {
  0% {
      width: 0;
      left: 1px;
      top: 19px;
  }
  54% {
      width: 0;
      left: 1px;
      top: 19px;
  }
  70% {
      width: 50px;
      left: -8px;
      top: 37px;
  }
  84% {
      width: 17px;
      left: 21px;
      top: 48px;
  }
  100% {
      width: 25px;
      left: 14px;
      top: 45px;
  }
}

@keyframes icon-line-long {
  0% {
      width: 0;
      right: 46px;
      top: 54px;
  }
  65% {
      width: 0;
      right: 46px;
      top: 54px;
  }
  84% {
      width: 55px;
      right: 0px;
      top: 35px;
  }
  100% {
      width: 47px;
      right: 8px;
      top: 38px;
  }
}

/* END CHECK ANIMATION */

/* BEGIN FAIL ANIMATION */
.failed-xmark {
  width: 90px;
  height: 115px;
  margin: 0 auto;
  
  .xmark-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #dc3545;
      
    &::before {
        top: 3px;
        left: -2px;
        width: 30px;
        transform-origin: 100% 50%;
        border-radius: 100px 0 0 100px;
    }
    
    &::after {
        top: 0;
        left: 30px;
        width: 60px;
        transform-origin: 0 50%;
        border-radius: 0 100px 100px 0;
        animation: rotate-circle 4.25s ease-in;
    }
      
    &::before, &::after {
        content: '';
        height: 100px;
        position: absolute;
        background: #FFFFFF;
        transform: rotate(-45deg);
    }
      
    .icon-x {
      height: 5px;
      background-color: #dc3545;
      display: block;
      border-radius: 2px;
      position: absolute;
      z-index: 10;
      
      &.line-x-1 {
          top: 40px;
          left: 15px;
          width: 50px;
          transform: rotate(45deg);
          animation: icon-line-x-1 0.75s;
      }
      
      &.line-x-2 {
          width: 50px;
          right: 15px;
          top: 40px;
          transform: rotate(-45deg);
          animation: icon-line-x-2 0.75s;
      }
    }
      
    .icon-circle-x {
        top: -4px;
        left: -4px;
        z-index: 10;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        position: absolute;
        box-sizing: content-box;
        border: 4px solid #dc354679;
    }
    
    .icon-fix-x {
        top: 8px;
        width: 5px;
        left: 26px;
        z-index: 1;
        height: 85px;
        position: absolute;
        transform: rotate(-45deg);
        background-color: #FFFFFF;
    } 
  }
}

@keyframes rotate-circle {
  0% {
      transform: rotate(-45deg);
  }
  5% {
      transform: rotate(-45deg);
  }
  12% {
      transform: rotate(-405deg);
  }
  100% {
      transform: rotate(-405deg);
  }
}

@keyframes icon-line-x-1 {
  0% {
      width: 0px;
      left: 0px;
      top: 0px;
  }
  54% {
      width: 0px;
      left: 0px;
      top: 0px;
  }
}

@keyframes icon-line-x-2 {
  0% {
      width: 0px;
      right: 40px;
      top: 40px;

  }
  65% {
      width: 0px;
      right: 40px;
      top: 40px;

  }
  84% {
      width: 30px;
      right: 25px;
      top: 40px;
  }
  100% {
      width: 50px;
      right: 15px;
      top: 40px;
  }
}
/* END FAIL ANIMATION */

/* LSD SPINNER */
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #2196F3;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* END LSD SPINNER */


/* BEGIN PROGRESS PENILAIAN */

.progress-circular {
  width: 150px;
  height: 150px;
  background: none;
  position: relative;
}

.progress-circular::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}

.progress-circular>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress-circular .progress-circular-left {
  left: 0;
}

.progress-circular .progress-circular-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 6px;
  border-style: solid;
  position: absolute;
  top: 0;
}

.progress-circular .progress-circular-left .progress-circular-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress-circular .progress-circular-right {
  right: 0;
}

.progress-circular .progress-circular-right .progress-circular-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress-circular .progress-circular-value {
  position: absolute;
  top: 0;
  left: 0;
}

/* END PROGRESS PENILAIAN */

.no-decoration{
  text-decoration: none;
}


/* BEGIN PADDING MARGIN */

/* END PADDING MARGIN */

/* Chrome, Safari, Edge, Opera */
input.no_updown::-webkit-outer-spin-button,
input.no_updown::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].no_updown {
  -moz-appearance: textfield;
}



.bg-layer:hover {
  background-color: #00000044 !important;
}

.theme-bg {
  background-color: #1976D2;
  background-image: linear-gradient(121deg, #1976D2 1%, #26C6DA 90%);
}

.theme-curve-bg{
  color: #2196F3;
  
}

.curved-bottom {
  /* Curved corners */
  border-bottom-left-radius: 120% 50%;
  border-bottom-right-radius: 120% 50%;
}

.curved-top {
  border-top-left-radius: 120% 50%;
  border-top-right-radius: 120% 50%;
}

.landing-text-white {
  color: #ffffff;
}

[data-kt-sticky-landing-header=on] .landing-text-white {
  color: #000000;
}
[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active {
  color: #ffffff;
  background-image: linear-gradient(121deg, #1976D2 1%, #26C6DA 90%);
}

.octagon {
  width: 50px;
  height: 50px;
  background: #333;
  position: relative;
}
.octagon:before {
  content: "";
  width: 20px;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 15px solid #333;
  border-left: 15px solid #fff;
  border-right: 15px solid #fff;
}
.octagon:after {
  content: "";
  width: 20px;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 15px solid #333;
  border-left: 15px solid #fff;
  border-right: 15px solid #fff;
}

.input-icons i {
  position: absolute;
  top:15%;
}
  
.input-icons {
  width: 100%;
}

.input-field-end {
  width: 100%;
  padding-right: 40px;
  text-align: left;
  /* background-color: #002878; */
}

.icon-end {
  right: 0;
  min-width: 40px;
  padding-top: 7px;
  padding-bottom: 5px;
  padding-left:15px;
  margin-right: 5px;
}

.mt-custom-n20 {
  margin-top: -15rem!important
}

.button-test {
  background-color: #1B84FF;
  color: white;
  text-decoration: none;
  border-radius: 60px;
  height: 41px;
  display: inline-flex;
  align-items: center;
  overflow:hidden;
  width: auto;
  max-width: 42px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
  -webkit-transition: max-width 0.5s;
  transition: max-width 0.5s
}


.button-test:hover {
  max-width: 300px;
  transition: max-width 1s;

}

.fs-manual-1 {
  font-size: 2rem!important
}

.icon-test {
  margin-right: 5px;
  padding: 0px 8px;
  display: flex;
  align-items: center;
}

.text-test {
  white-space: nowrap;
  padding-right: 15px;
}

.spinner-loading {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 3px solid;
  border-color: orange transparent;
  animation: spin 1s infinite ease-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.lds-ring {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.lds-ring-1 {
  /* change color here */
  color: #1c4c5b
}
.lds-ring-1,
.lds-ring-1 div {
  box-sizing: border-box;
}
.lds-ring-1 {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring-1 div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring-1 div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring-1 div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring-1 div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.transparent-button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab {
  display: flex;
  margin-bottom: 10px;
}

.tab button {
  flex: 1;
  padding: 10px;
}

.btn-primary-50{
  background-color: rgba(0, 123, 255, 0.5) !important;
}


/* .CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute; 
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:red;
  padding:3px;
  color:red; 
  top:20px; 
  left:100px;
}

.CellWithComment:hover span.CellComment{
  display:block;
} */

.tooltip-table {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-table .tooltiptext {
  visibility: hidden;
  width: 600px;
  /* max-width: 600px; */
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-table:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.point {
  margin-left: 20px; /* Sesuaikan dengan jarak yang diinginkan */
  display: block;
}

.justify-content-center-md {
  justify-content: center!important
}

@media (min-width: 768px) {
  .justify-content-center-0 {
    justify-content: start!important
  }
}

.spinner-sound {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #333;
  animation: spin-sound 1s ease-in-out infinite;
  -webkit-animation: spin-sound 1s ease-in-out infinite;
}

@keyframes spin-sound {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin-sound {
  to { -webkit-transform: rotate(360deg); }
}


/* WAVE */
.waveContainer{
  display: flex;
  justify-content: space-between;
  height: 18px;
  --boxSize: 5px;
  --gutter: 2px;
  width: calc((var(--boxSize) + var(--gutter)) * 5);
}

.wave{
  transform: scaleY(.4);
  height: 100%;
  width: var(--boxSize);
  background: #000000;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
}

.wave1{
  animation-name: quiet;
}

.wave2{
  animation-name: normal;
}

.wave3{
  animation-name: quiet;
}

.wave4{
  animation-name: loud;
}

.wave5{
  animation-name: quiet;
}

@keyframes quiet {
  25%{
    transform: scaleY(.6);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(.8);
  }
}

@keyframes normal {
  25%{
    transform: scaleY(1);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(.6);
  }
}
@keyframes loud {
  25%{
    transform: scaleY(1);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(1.2);
  }
}

.btn-xsm {
  height: calc(0.5em + 1.1rem + 2px) !important;
  width: calc(0.5em + 1.1rem + 2px) !important;
}

.link-dark-theme{
  text-decoration: underline;
  color: black;
}

.link-dark-theme:hover {
  text-decoration: underline;
  color: #1B84FF;
}
.rounded-custom-card-0 {
  border-bottom-left-radius: 0rem!important;
  border-bottom-right-radius: 0rem!important;
  border-top-left-radius: 1rem!important;
  border-top-right-radius: 1rem!important;
}
.rounded-custom-button-0 {
  border-bottom-left-radius: 1rem!important;
  border-bottom-right-radius: 1rem!important;
  border-top-left-radius: 0rem!important;
  border-top-right-radius: 0rem!important;
}
@media (min-width: 768px) {

  .rounded-custom-card-md-4 {
    border-bottom-left-radius: 1rem!important;
    border-bottom-right-radius: 0rem!important;
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 0rem!important;
  }

  .rounded-custom-button-md-4 {
    border-bottom-left-radius: 0rem!important;
    border-bottom-right-radius: 1rem!important;
    border-top-left-radius: 0rem!important;
    border-top-right-radius: 1rem!important;
  }
}