/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@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");
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital@0;1&display=swap");

* {
  --primary: hsl(203, 94%, 50%);
  --secondary: hsl(180, 92%, 80%);
  --lightest-blue: hsl(203, 100%, 96%);
  --light-blue: hsl(199, 87%, 82%);
  --normal-blue: hsl(209, 57%, 56%);
  --blue-100: hsl(190, 88%, 50%);
  --blue-200: hsl(195, 85%, 64%);
  --blue-300: hsl(229, 60%, 54%);
  --blue-400: hsl(216, 100%, 48%);
  --pale-blue: hsl(206, 90%, 49%);
  --dark-blue: hsl(230, 52%, 38%);
  --black-100: hsl(0, 0%, 0%);
  --yellow-200: hsl(53, 100%, 50%);
  --prime-blue: hsl(203, 89%, 49%);
  --light-gray: hsl(0, 0%, 89%);
  --lightest-gray: hsl(0, 0%, 95%);
  --lightest-green: hsl(122, 45%, 80%);
  --light-green: hsl(122, 45%, 49%);
  --light-red: hsl(0, 90%, 68%);
  --lightest-red: hsl(0, 90%, 95%);
  --dark-red: hsl(0, 85%, 55%);
  --dark-green: hsl(186, 100%, 15%);
  --pink: hsl(332, 72%, 86%);
  --bright-pink: hsl(344, 74%, 58%);
  --purple: hsl(273, 55%, 57%);
  --dark-gold: hsl(39, 64%, 55%);
  --light-gold: hsl(45, 93%, 68%);
  --lightest-gold: hsl(46, 99%, 95%);
  --lime: hsl(82, 85%, 67%);
  --text-primary: hsl(200, 93%, 20%);

  --light-green-opaque: #ABF1BC;
  --light-red-opaque: #fbd9d3;

  --main-gradient: linear-gradient(90deg, var(--primary) 0%, var(--dark-blue) 100%);
  --main-gradient-up: linear-gradient(180deg, var(--primary) 0%, var(--dark-blue) 100%);

  --secondary-gradient: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  --secondary-gradient-reverse: linear-gradient(-90deg, var(--primary) 0%, var(--secondary) 100%);

  font-family: 'Poppins', sans-serif;
  font-size: 14px;

  --scrollbar-width: 5px;
  --scrollbar-track-color: #0d3b97;
  --scrollbar-thumb-color: #008de4;
  --scrollbar-thumb-hover-color: #008de4;

  box-sizing: border-box;

  scrollbar-color: #008de4 #0d3b97 !important;
  scrollbar-width: thin !important;
}

#hours .time-group {
  height: 3em; /* Adjust to your desired height */
}

#hours .segment-overlay__top,
#hours .segment-overlay__bottom {
  font-size: 2em; /* Set your desired font size */
}

#minutes .time-group {
  height: 3em; /* Adjust to your desired height */
}

#minutes .segment-overlay__top,
#minutes .segment-overlay__bottom {
  font-size: 2em; /* Set your desired font size */
}

#seconds .time-group {
  height: 3em; /* Adjust to your desired height */
}

#seconds .segment-overlay__top,
#seconds .segment-overlay__bottom {
  font-size: 2em; /* Set your desired font size */
}

body {
  font-family: "Poppins", sans-serif !important;
  max-width: 1920px;
  min-height: 100dvh;
  margin: 0 auto !important;
  z-index: 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
}

.p-calendar-w-btn {
  height: 31px !important;
}

.p-button {
  border-end-end-radius: 15px !important;
  border-start-end-radius: 15px !important;
}

.p-inputtext {
  padding-left: 1rem !important;
}

.p-icon-wrapper {
  padding-right: 0.25rem !important;
}


::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

body {
  max-width: 1440px;
  min-height: 100dvh;
  margin: 0 auto !important;
  z-index: 0;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow-x: hidden;
}

.flex-even {
  flex: 1;
}

.body-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background/arabic-pattern-blue-large.png');
  background-size: 800%;
  background-position: center;
  background-repeat: repeat-y;
  opacity: 0.1;
  z-index: -10;
}

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

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

.link-prime-blue {
  color: var(--prime-blue);

  &:hover {
    color: var(--text-primary);
  }
}

.sppim-logo {
  width: 14rem;
  height: auto;
}

.btn-blue {
  background-color: var(--normal-blue) !important;

  &:hover {
    background-color: hsl(209, 52%, 43%) !important;
  }
}

.btn-light-blue {
  background-color: var(--prime-blue) !important;
  color: white;

  &:hover {
    background-color: var(--dark-blue) !important;
  }
}

.btn-gradient-secondary {
  border: none !important;
  outline: none !important;
  background-image: var(--secondary-gradient);

  &:hover {
    background-image: var(--secondary-gradient-reverse);
  }
}

.text-yellow-200 {
  color: var(--yellow-200);
}

.text-light-green {
  color: var(--light-green);
}


.bg-glass {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(0.4rem);
}

.bg-ncr {

  background: linear-gradient(to bottom, var(--dark-blue) 1%, var(--primary) 4%, var(--lightest-blue) 8%);

  >* {
    position: relative;
    z-index: 3;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/background/arabic-pattern-blue-large.png');
    background-size: 200%;
    opacity: 0.2;
    z-index: 1;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 40%);
    pointer-events: none;
    z-index: 2;
  }
}

.bg-ncr-nikah {
  background: linear-gradient(to bottom, var(--light-gold) 2%, var(--lightest-gold) 5%, white);

  &::before {
    background-image: url('../images/background/arabic-pattern-gold-large.png') !important;
  }
}

.bg-ncr-cerai {
  background: linear-gradient(to bottom, var(--light-red) 2%, var(--lightest-red) 5%, white);

  &::before {
    background-image: url('../images/background/arabic-pattern-red-large.png') !important;
  }
}

.bg-ncr-rujuk {
  background: linear-gradient(to bottom, var(--light-green) 2%, var(--lightest-green) 5%, white);

  &::before {
    background-image: url('../images/background/arabic-pattern-green-large.png') !important;
  }
}

.bg-sweetalert-popup {
  z-index: 0;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/background/arabic-pattern-blue-large.png');
    background-size: 400%;
    opacity: 0.14;
    z-index: -2;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 30%);
    /* background: linear-gradient(to bottom, var(--dark-blue), var(--primary) 10%, var(--lightest-blue) 20%); */
    pointer-events: none;
    z-index: -1;
  }
}

.bg-blue-300-tailwind {
  background: #93c5fd;
}

.bg-light-yellow {
  background-color: var(--yellow-200) !important;
}

.bg-light-blue {
  background-color: var(--light-blue) !important;
}

.bg-pale-blue {
  background-color: var(--pale-blue);
}

.bg-blue-100 {
  background-color: var(--blue-100) !important;
}

.bg-blue-200 {
  background-color: var(--blue-200);
}

.bg-blue-300 {
  background-color: var(--blue-300);
}

.bg-light-red {
  background-color: var(--light-red);
}

.bg-light-green {
  background-color: var(--light-green);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-bright-pink {
  background-color: var(--bright-pink);
}

.text-pale-blue {
  color: var(--pale-blue);
}

.text-light-green {
  color: var(--light-green);
}

.text-light-red {
  color: var(--light-red);
}

.bg-hero {
  background-image: url('../../assets/images/hero/hero-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-light-blue {
  background-color: var(--secondary);
}

.bg-lightest-blue {
  background-color: var(--lightest-blue) !important;
}

.bg-prime-blue {
  background-color: var(--prime-blue) !important;
}

.bg-dark-blue {
  background-color: var(--dark-blue) !important;
}

.bg-dark-green {
  background-color: var(--dark-green);
}

.bg-light-gray {
  background-color: var(--light-gray);
}

.bg-lightest-gray {
  background-color: var(--lightest-gray);
}

.bg-black-overlay {
  background-color: hsl(0, 0%, 0%, 0.5);
  backdrop-filter: blur(1.2rem);
}

.btn-light-green {
  background-color: var(--light-green) !important;
  color: white;

  &:hover {
    background-color: var(--dark-green) !important;
  }
}

.btn-black {
  background-color: hsl(0, 0%, 0%) !important;
  color: white;

  &:hover {
    background-color: hsl(0, 0%, 20%) !important;
    color: white;
  }
}

.btn-light-red {
  background-color: var(--light-red) !important;

  &:hover {
    background-color: var(--dark-red) !important;
  }
}

.text-blue-100 {
  color: var(--blue-100) !important;
}

.text-blue-600 {
  color: var(--text-primary);
}

.text-prime-blue {
  color: var(--prime-blue) !important;
}

.text-lightest-blue {
  color: var(--lightest-blue);
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-style: bold;
}

.be-vietnam-pro-regular {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
}

.lexend-deca-regular {
  font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.16em;
  font-size: 1.6em;
}

.open-sans-bold {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.reem-kufi-regular {
  font-family: "Reem Kufi", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter-regular {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.work-sans-regular {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.rubik-regular {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.rubik-medium {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.rubik-semibold {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.bg-gradient-main {
  background: linear-gradient(90deg, var(--primary) 0%, var(--dark-blue) 100%);
}

.bg-gradient-login {

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--dark-blue), var(--primary) 20%, var(--lightest-blue) 30%);
    pointer-events: none;
    z-index: -2;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/background/arabic-pattern-lightest-blue.png');
    background-size: 200%;
    opacity: 0.14;
    z-index: -1;
  }
}

.bg-gradient-main-reverse-horizontal {
  background: linear-gradient(-90deg, var(--primary) 0%, var(--dark-blue) 100%);
}

.bg-gradient-main-reverse {
  background: linear-gradient(-45deg, var(--primary) 0%, var(--dark-blue) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-secondary-reverse {
  background: linear-gradient(-90deg, var(--primary) 0%, var(--secondary) 100%);
}

.bg-gradient-up {
  background: var(--main-gradient-up) !important;
}

.bg-log-masuk {
  max-height: 16rem;
  object-fit: cover;
}

.font-small {
  font-size: 0.8em;
}

.font-smallest {
  font-size: 0.7em;
}

.nav-link {
  cursor: pointer !important;
}

.navbar-nav .nav-item>.nav-link {
  border-top: 2px solid transparent;
}

.navbar-nav .nav-item>.nav-link.active {
  color: var(--primary);
  border-color: var(--primary);
}

.navbar-nav .nav-item>.nav-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}


.btn-login--navbar {
  min-width: 12rem;
  translate: 1rem 0rem;
  border: none !important;
  outline: none !important;
}

.btn-permohonan-baru {
  background: linear-gradient(90deg, var(--primary) 0%, var(--dark-blue) 100%);

  &:hover {
    background: linear-gradient(-90deg, var(--primary) 0%, var(--dark-blue) 100%);
  }
}

.btn-prime-blue {
  background-color: white !important;

  &:hover {
    background-color: var(--prime-blue) !important;
    color: white !important;

    svg {
      color: white;
    }
  }
}

.btn-ghost {
  background-color: transparent !important;
  color: white !important;

  &:hover {
    background-color: white !important;
    color: var(--prime-blue) !important;
  }
}

.btn-lightest-blue {
  background-color: white !important;
  color: var(--prime-blue) !important;

  &:hover {
    background-color: var(--lightest-blue) !important;
    color: var(--prime-blue) !important;
  }
}

.menu-utama {
  background-size: cover;
  background-repeat: no-repeat;

  .card-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    place-content: center;
    place-items: center;
    /* max-width: 24rem; */
  }

  .menu-utama-card {
    background-color: var(--blue-400);
    width: 100%;
    height: 100%;
    color: var(--text-primary);
    border-top-left-radius: 12rem;
    border-top-right-radius: 1.6rem;
    border-bottom-left-radius: 12rem;
    border-bottom-right-radius: 1.6rem;


    &:hover {
      background-color: var(--dark-blue);

      .menu-utama-icon {
        border: 6px solid var(--dark-blue) !important;
      }
    }

    .menu-utama-title {
      font-size: 1.2em;
    }

    .btn-permohonan {
      height: 2.4rem;
      color: var(--text-primary);
      background-color: var(--yellow-200);
      font-size: 0.5em;
      border: none;
    }

    .menu-utama-icon {
      width: 10rem;
      height: 10rem;
      border: 6px solid var(--pale-blue) !important;
    }
  }
}

.tentang-sppim {
  position: relative;

}

.btn-login:hover {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
}

.gradient-bottom {
  border-bottom: 1rem solid;
  background: var(--main-gradient);
  border-image: linear-gradient(90deg, var(--primary) 0%, var(--dark-blue) 100%) 1;
  border-image-slice: 20;
}

.logo-jabatan-agama-container {
  position: relative;

  &:hover {
    .logo-jabatan-agama{
      animation-play-state: paused;
    }
  }

  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    width: 8rem;
    height: 100%;
    z-index: 2;
  }

  &:before {
    left: 0;
    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
  }

  &:after {
    right: 0;
    background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  }
}

.logo-jabatan-agama {
  display: flex;
  white-space: nowrap;
  animation: scroll 15s linear infinite;

  &:hover {
    animation-play-state: paused;
  }

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
    width: auto;
    margin: 0 1rem;

    img {
      height: 100%;
      width: auto;
      object-fit: contain;
    }

  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.logo-jabatan-agama-chevron {
  &:hover {
    color: var(--light-blue);
  }
}

.waktu-solat-v1,
.hotline-card,
.senarai-paid-card {
  width: 100%;
}

.waktu-solat-v2-container {
  max-width: 64vw;
  height: 48vh;
  margin-bottom: 100px;
}

  .waktu-solat-v2-card {
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background-color: rgba(135, 206, 235, 0.4);
    backdrop-filter: blur(8px);
  }

  .waktu-solat-v2-details {

    > * {
      position: relative;
      z-index: 1;
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("../images/mosque-sillhouette.png");
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -2;
    }

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(135, 206, 235, 0.4);
      backdrop-filter: blur(4px);
      z-index: -1;
    }

    .gambar-masjid > img {
      /* width: 100%; */
      /* height: auto; */
    }

    .waktu-solat-next {
      width: auto;
    }

    .senarai-paid {
    }
  }


.hotline-card,
.senarai-paid-card {
  background-color: var(--dark-blue);

  div h3 {
    border-bottom: 3px solid white;
  }

  .hotline-card__text {

    /* width: 13.6rem; */
    a {
      color: var(--dark-blue);
    }
  }
}

.waktu-solat-v1 {
  height: 18rem;
  width: 100%;

  .waktu-solat-v1-dot {
    bottom: 0.2rem;
    left: 45%;
    width: 0.4rem;
    height: 0.4rem;
  }
}

.waktu-solat-v1__image {
  width: 30%;
  /* height: 12rem; */
  /* width: 24rem; */

  img {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.social-media>li>a>img {
  width: 1.6rem;
  height: auto;
}

.copyright-bar {
  background-image: url("../../assets/images/background/bg-copyright-bar.svg");
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: center;
}

.carta-alir {
  li {
    border: 2px solid var(--pale-blue);
    background-color: white;

    >a:hover {
      background-color: var(--lightest-blue);
    }
  }

  .circle {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border: 2px solid var(--pale-blue);
    border-radius: 50%;
  }
}

.start-pill {
  border-top-left-radius: 3rem;
  border-bottom-left-radius: 3rem;
}

#no-rujukan {

  svg:hover {
    color: var(--light-green);
  }
}

.divider-borang {
  border: none;
}

input::placeholder {
  color: rgba(0, 0, 0, 0.15) !important;
}

.wizard-icon-connector {
  height: 2px;
  width: 100%;
  background-color: var(--light-gray);
  z-index: -1;
  top: 50%;
}

.wizard-tab-container {
  /* z-index: -1; */
}

.wizard-form {
  .wizard-form-tab {
    border-color: transparent;
    border-radius: 50%;
    color: var(--light-gray);

    svg {
      width: 2.4rem;
      height: 2.4rem;
    }
  }

  .wizard-form-tab.completed {
    background-color: var(--light-green);
  }

  .wizard-form {
    .wizard-form-card {
      color: var(--light-gray);
      flex-direction: column;


      .wizard-form-body {
        small {
          color: var(--lightest-green);
        }
      }
    }

    &:hover {
      .wizard-form-tab {
        background-color: var(--pale-blue);
        color: white;
      }

      .wizard-form-body {
        small {
          color: var(--lightest-blue);
        }
      }


      .wizard-form-tab .wizard-form-filled {
        background-color: var(--light-green);
        color: white;
      }

      p {
        color: var(--pale-blue);
      }
    }
  }
}

#semakan-pendaftaran-kursus-box {
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
}

.border-prime-blue {
  border: 2px solid var(--prime-blue) !important;
}

.border-light-red {
  border: 2px solid var(--light-red) !important;
  background-color: var(--light-red-opaque) !important;
}

.border-light-green {
  border: 2px solid var(--light-green) !important;
  background-color: var(--light-green-opaque) !important;
}

.border-top-prime-blue {
  border-top: 0.2rem solid var(--prime-blue);
}

.border-lightest-blue {
  border: 2px solid var(--lightest-blue) !important;
  background-color: var(--lightest-blue) !important;
}


.ikon-bayaran {
  text-align: center;
  max-width: 4.8rem;

  >button {
    height: 4.8rem;
    width: 4.8rem;
    border: none;
  }

  &:hover {

    >button {
      border: 2px solid var(--prime-blue);
    }

    >p {
      color: var(--prime-blue);
    }
  }


}

.form-check-input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 2px solid #ccc;

  &:checked {
    border-color: var(--prime-blue);
    background-color: var(--prime-blue);
  }

  .input-kursus {
    width: 4rem;
    height: 4rem;
  }
}

.card-ncr-luar-negara-wrapper {
  /* display: grid;
  place-content: center; */
  /* grid-template-columns: repeat(1, 1fr); */
  /* gap: 0.8rem; */

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  width: 100%;
}

.card-ncr-luar-negara {
  .card-ncr-luar-negara-header img {
    min-width: 100%;
    height: 12rem;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-none {
  cursor: none !important;
}

.pendaftaran-kursus-praperkahwinan-section {
  background-color: white;
}

.p-inputtext {
  border-radius: 50rem !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  padding: 5px;
}

::ng-deep .modal-content {
  border-radius: 1em !important;
  overflow: hidden !important;
}

.asterisk-mandatory::after {
  content: '*';
  color: red;
}

label {
  font-weight: bold;
}

.form-check-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
}

.form-check-input[type="checkbox"] {
  height: 2rem;
  width: 2rem;
  border-radius: 0.6rem !important;
  margin-bottom: 0.2rem;
  cursor: pointer;
  border: 2px solid var(--light-blue);

  &:checked {
    background-color: var(--prime-blue);
  }
}

.p-paginator .p-paginator-pages .p-paginator-page {
  min-width: 4.5rem !important;
}

.menu-tab {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}

.menu-tab-slanted {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.text-sidebar-body {
  color: hsl(202, 29%, 85%);
}

.sidebar-dark-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}

.stepper-tab {
  padding: 0.4rem 2.1rem;
}

.list-lower-alpha {
  list-style-type: lower-alpha;
}

.list-lower-roman {
  list-style-type: lower-roman;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
  padding-left: 0px;
}

.list-dash {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-dash > li {
  position: relative;
  padding-left: 20px;
}

.list-dash > li::before {
  content: "—"; /* Dash character */
  position: absolute;
  left: 0; /* Align the dash on the left */
  transform: translateY(-50%); /* Fine-tune centering */
  top: 9px; /* Align dash to the top */
  font-size: 9px; /* Adjust dash size */
  font-weight: bold; /* Make the dash bold */
  color: black; /* Dash color */
}

.tracking-wide {
  letter-spacing: 0.01em;
}

.card-muat-turun:hover {
  background-color: var(--lightest-blue);
}

@media (min-width: 768px) {
  .body-home::before {
    background-size: 400%;
  }

  .bg-log-masuk {
    max-height: 32rem;
  }

  .bg-ncr {
    &::before {
      background-size: 100%;
    }
  }


  .divider-borang {
    border-right: 1px solid var(--light-gray);
  }

  .menu-utama {
    >div {
      background-color: transparent;

      a {
        margin-bottom: 4.8rem;
      }
    }

    .menu-utama-card {
      .menu-utama-icon {
        position: absolute;
        top: 0;
        left: 50%;
      }
    }

  }

  #semakan-pendaftaran-kursus-box {
    border-radius: 0;
  }

  .wizard-form-container {
    background-color: white;
    border: 2px solid var(--prime-blue);
  }


  .wizard-form {

    .wizard-form-tab {
      width: auto !important;
      height: auto !important;
      border-top-left-radius: 1rem !important;
      border-bottom-left-radius: 1rem !important;
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    .wizard-form-card {
      .wizard-form-tab {
        width: 16rem !important;
        /* transform: translateX(1rem); */
        /* z-index: -1; */
      }
    }

  }

  /* .card-ncr-luar-negara-wrapper {
    grid-template-columns: repeat(2, 1fr);
  } */

  .card-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 36rem;
  }

  .hotline-card__text {
    a {
      font-size: 1.4em;
    }
  }

  .pendaftaran-kursus-praperkahwinan-section {
    background-color: transparent;
  }

  .logo-jabatan-agama-container {
    &:before,
    &:after {
      width: 16rem;
    }
  }
}

@media (min-width: 992px) {
  .menu-utama-card {
    .menu-utama-icon.active {
      top: -2.4rem;
      width: 9.6rem !important;
      height: 9.6rem !important;
    }
  }

  .body-home::before {
    background-size: 240%;
  }

  .btn-login--navbar {
    translate: 2rem 0rem;
  }

  .rounded-pill-lg {
    border-radius: 3rem !important;
  }

  .stepper-tab {
    padding: 1.2rem 2rem;
  }

  .menu-utama>div>a {
    margin-bottom: 0;
  }

  .menu-utama-card {
    > div:nth-child(2) {
      padding-top: 4.8rem !important;
    }
  }
}

@media (min-width: 1024px) {
  /* .card-ncr-luar-negara-wrapper {
    grid-template-columns: repeat(3, 1fr);
  } */

  .waktu-solat-v1,
  .hotline-card,
  .senarai-paid-card {
    width: 56rem;
  }

  .card-wrapper {
    grid-template-columns: repeat(6, 1fr) !important;
    max-width: 72rem;
  }

  .logo-jabatan-agama-container {
    &:before,
    &:after {
      width: 24rem;
    }
  }
}

@media (min-width: 1440px) {
  .carousel {
    .carousel-indicators {
      top: 2.4rem;
      left: 62%;
    }

    .carousel-indicators>button {
      width: 1rem;
      height: 1rem;
      border: 3px solid white;
    }
  }
}

.form-check-label {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.p-tooltip .p-tooltip-text {
  background-color: #1d89bf;
  color: rgb(255, 255, 255) !important;
  width: 200px;
}

@media screen and (min-width: 1920px) {
  .p-tooltip .p-tooltip-text {
    margin-left: -233px;
  }

  .p-tooltip-arrow {
    margin-left: -235px;
  }
}

.sppim-loader {
  position: relative;
  width: 80px;
  height: 80px;
}

.sppim-loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#f07e6e, #84cdfa, #5ad1cd);
  filter: blur(10px);
  animation: rotate 2s linear infinite;
  z-index: 1;
}

.sppim-loader::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: hsla(0, 0%, 100%, 0.2);
  background-image: url('../images/sppim/sppim.svg');
  background-position: center 45%;
  background-size: 50%;
  background-repeat: no-repeat;
  backdrop-filter: blur(10px);
  border-radius: 50%;
  z-index: 2;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.sppim-wait {
  display: block;
  width: 80px;
  height: 80px;
  background: transparent;
  color: transparent;
  text-decoration: none;
}

.sppim-wait:before {
  content: '';
  background: url("../../assets/images/sppim-loading-2.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 80px;
  height: 80px;
}

.sppim-loader2 {
  content: '';
  background: url("../../assets/images/sppim-loading-3.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  width: 80px;
  height: 80px;
}

@keyframes rikSpikeRoll {
  0% {
    background-size: 10px 3px;
  }

  16% {
    background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px
  }

  33% {
    background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px
  }

  50% {
    background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px
  }

  66% {
    background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px
  }

  83% {
    background-size: 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px
  }

  100% {
    background-size: 10px 3px, 10px 3px, 10px 3px, 10px 10px, 10px 30px, 10px 50px
  }
}

.status-bg {
  border-radius: inherit;
  background-size: 900px;
  background-image: linear-gradient(350deg, rgba(77, 156, 214, 0.36), rgb(255, 255, 255) 50%), url("../../assets/images/background/arabic-pattern-blue-large.png");
}

.text-justify {
  text-align: justify !important;
}

.th-w-5 {
  width: 5% !important;
}

.th-w-15 {
  width: 15% !important;
}

.th-w-20 {
  width: 20% !important;
}

.th-w-25 {
  width: 25% !important;
}

.th-w-30 {
  width: 30% !important;
}

.th-w-35 {
  width: 35% !important;
}

.th-w-40 {
  width: 40% !important;
}

.th-w-45 {
  width: 45% !important;
}

.th-w-50 {
  width: 50% !important;
}

.td-w-5 {
  width: 5% !important;
}

.td-w-15 {
  width: 15% !important;
}

.td-w-20 {
  width: 20% !important;
}

.td-w-25 {
  width: 25% !important;
}

.td-w-30 {
  width: 30% !important;
}

.td-w-35 {
  width: 35% !important;
}

.td-w-40 {
  width: 40% !important;
}

.td-w-45 {
  width: 45% !important;
}

.td-w-50 {
  width: 50% !important;
}

.td-w-166 {
  width: 16.66% !important;
}

.td-w-17 {
  width: 17% !important;
}

.td-w-83 {
  width: 83% !important;
}

.text-justify {
  text-align: justify !important;
}

.text-red {
  color: red !important;
}

.ul-w-250 {
  width: 250px !important;
}

.i-o-08 {
  opacity: 0.8 !important;
}

mark {
  background-color: #2fa033 !important;
  color: #ffffff !important;
  padding: 3px 8px;
  border-radius: 4px;
}