/* Responsive Menu Navbar */
@media (max-width: 1199px) {
  /*====================================== SECTION MENU NAVBAR ======================================*/
  .menu-lang {
    margin-right: 1rem;
  }

  .nav-hamburger {
    display: flex;
  }

  .container-nav .nav-logo a img {
    width: 140px;
  }

  .container-nav {
    position: relative;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .hide-menu {
    width: 100%;
  }

  /* #navigation {
    background-color: var(--c-transparent);
    transition: all 0.5s;
  } */

  /* .scroll#navigation {
    background-color: var(--c-primary) !important;
  } */

  .nav-menu .menu-nav {
    display: none !important;
  }

  .menu-container-mobile .nav-header {
    position: relative;
    top: 1rem;
    left: 1rem;
  }

  .menu-container-mobile .nav-header .image {
    max-width: 64px !important;
  }

  .menu-container-mobile .nav-logo-mobile {
    position: absolute;
    top: 1rem;
    left: 1rem;
  }

  .menu-container-mobile .nav-logo-mobile .image {
    max-width: 104px;
  }

  .menu-container-mobile .nav-close {
    z-index: 999;
    top: 1rem;
    right: 1rem;
  }

  .menu-container-mobile nav {
    position: relative;
    max-height: 100%;
    height: 100%;
    padding-top: 6rem;
    padding-bottom: 2rem;
    margin: 0 0 0 0;
    align-items: start;
    overflow-y: auto;
    background-image: url("../images/general/graph-hais-13.png");
    background-size: 128px;
    background-repeat: no-repeat;
    background-position: bottom right;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .menu-container-mobile .menu-nav-mobile {
    width: 100%;
    height: auto;
    justify-content: start;
    margin: 0 0.5rem 0 0.5rem;
    padding: 0 1rem 1rem 0.5rem;
  }

  .menu-mobile-li .accordion-button,
  .submenu-mobile li a,
  .menu-mobile-li .menu-mobile-unsub {
    position: relative;
    background-color: var(--c-transparent);
    font-size: 18px;
    display: flex;
    align-items: center;
    padding: 1rem 0.5rem !important;
    gap: 8px;
    transition: all 0.5s;
  }

  .submenu-mobile li a {
    width: auto;
    color: var(--c-black);
  }

  .menu-mobile-li .accordion-button.collapsed::before {
    width: 0 !important;
  }

  .menu-mobile-li .accordion-button::before,
  .menu-mobile-li .menu-mobile-unsub::before {
    content: "";
    bottom: 0;
    left: 0;
    background-color: var(--c-primary);
    height: 1px;
    width: 0;
    transition: all 0.5s;
  }

  .menu-mobile-li:hover .accordion-button::before,
  .menu-mobile-li:hover .menu-mobile-unsub::before {
    width: 24px;
  }

  .menu-nav-mobile .menu-mobile-li.active .accordion-button {
    color: var(--c-primary);
  }

  .menu-mobile-li .accordion-button:not(.collapsed),
  .menu-mobile-li.active .accordion-button:not(.collapsed) {
    background-color: var(--c-primary);
    color: var(--c-white);
  }

  .menu-mobile-li .accordion-button:not(.collapsed)::before {
    background-color: var(--c-white);
    width: 24px;
  }

  .menu-nav-mobile > li.cursor-none.active a {
    color: var(--c-primary);
    font-size: 20px;
    font-weight: 700;
  }

  .menu-nav-mobile li .accordion-item {
    border: 0;
    background-color: var(--c-transparent);
  }

  .menu-mobile-li.active .menu-mobile-unsub,
  .submenu-mobile li:hover a {
    color: var(--c-primary);
  }

  .menu-nav-mobile li .accordion-item .accordion-body {
    padding: 0 1rem;
  }

  .submenu-mobile > li a::before {
    content: "";
    background-color: var(--c-primary);
    height: 1px;
    width: 0;
    transition: all 0.5s;
  }

  .submenu-mobile > li:hover a::before {
    width: 24px;
  }

  .submenu-mobile > li.active a,
  .submenu-mobile > li.active:hover a,
  .menu-mobile-li.active .menu-mobile-unsub,
  .menu-mobile-li:hover .menu-mobile-unsub {
    color: var(--c-primary) !important;
  }

  .submenu-mobile > li.active a::before,
  .menu-mobile-li.active .menu-mobile-unsub::before {
    width: 24px;
  }

  .menu-mobile-li .menu-mobile-unsub {
    color: var(--c-black);
  }

  .ir-etc--img::before {
    background: linear-gradient(
      270deg,
      rgb(22 65 148 / 40%) 0%,
      #164194 100%
    ) !important;
  }

  /*====================================== SECTION HOME PAGE - 1199 ======================================*/

  .article-home-swiper-wrapper .swiper-button-prev,
  .article-home-swiper-wrapper .swiper-button-next {
    display: none;
  }

  /*====================================== SECTION INFO PWMII - Career - 1199 ======================================*/

  .job-card {
    padding: 1.25rem;
    gap: 1rem;
  }

  .job-card-title-wrapper {
    width: 100%;
  }

  .job-card--meta {
    flex-direction: row;
    gap: 0.75rem;
  }

  .job-card--meta-item,
  .job-card--meta-item:first-child {
    width: auto;
    min-width: 140px;
  }

  .job-card--cta {
    flex-direction: column;
  }

  .job-card--cta .cta {
    width: 100%;
  }

  .job-card--cta .btn {
    width: 100%;
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  .job-card-title-wrapper {
    width: 150px;
  }

  .job-card--meta-item {
    width: 130px;
  }

  .job-card--meta-item:first-child {
    width: 155px;
  }
}

@media (max-width: 991px) {
  .sidebar-screen {
    display: none;
  }

  .no-scroll {
    overflow: hidden;
  }

  header nav {
    padding: 16px 0px 0px 0px;
  }

  .menu-bottombar-mobile {
    z-index: 901;
    display: block;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    box-shadow:
      0px 20px 50px rgba(0, 0, 0, 0.12),
      0px 6px 20px rgba(0, 0, 0, 0.26);
    border-radius: var(--rd-lg);
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .text-wrapper {
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .text-track {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .text-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: none;
  }

  .text-item.is-hidden {
    visibility: hidden;
    width: 0;
    opacity: 0;
  }

  .menu-bottombar-mobile.hide {
    bottom: 0px;
    transform: translate(-50%, 120%) scale(0.8);
    opacity: 0;
  }

  .menu-bottombar-mobile .notif-indicator--o {
    top: -2px;
    left: auto;
    right: -5px;
  }

  .menu-bottombar-m--nav-wrapper {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 900;
  }

  .menu-bottombar-m--nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--c-white);
    padding: 1rem;
    max-height: 80vh;
    height: fit-content;
    max-width: 480px;
    overflow: auto;
    margin: 0 auto;
    position: fixed;
    inset: 0;
    top: auto;
    border-radius: var(--rd-lg);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.06),
      0 2px 8px rgba(0, 0, 0, 0.04);
    overflow-y: auto;
  }

  .menu-bottombar-m--ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .menu-bottombar-m-disabled {
    position: relative;
    display: flex;
    gap: 0.5rem;
  }

  .menu-bottombar-m-disabled .sidebar-upcoming {
    position: static;
    justify-content: start;
  }

  .menu-bottombar-m-disabled .menu-bottombar-m--link {
    color: var(--c-disabled);
  }

  .menu-bottombar-m--link {
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--c-primary);
  }

  .accordion-menu-bottombar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .accordion-menu-bottombar .accordion-item:first-of-type .accordion-button {
    border: 0;
    border-radius: 0.5rem;
  }

  .accordion-menu-bottombar .accordion-button {
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--c-primary);
  }

  .accordion-menu-bottombar .accordion-button:focus {
    box-shadow: none;
  }

  .accordion-menu-bottombar .accordion-button:not(.collapsed) {
    color: var(--c-primary);
    box-shadow: none;
  }

  .accordion-menu-bottombar .accordion-item {
    border: 0;
    background-color: transparent;
  }

  .accordion-menu-bottombar .accordion-item .accordion-body {
    padding: 1rem 0rem 0rem 1rem;
  }

  .accordion-menu-bottombar .accordion-item .accordion-nav-list {
    position: relative;
    width: fit-content;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--c-primary);
    transition: all 0.3s;
  }

  .accordion-menu-bottombar .accordion-item .accordion-nav-list:hover,
  .menu-bottombar-m--link:hover {
    background-color: rgba(45, 51, 147, 0.075);
  }

  .accordion-menu-bottombar .accordion-item .accordion-nav-list.active,
  .menu-bottombar-m--link.active {
    background-color: rgba(45, 51, 147, 0.25);
  }

  .accordion-menu-bottombar
    .accordion-item
    .accordion-nav-list
    .notif-indicator--o,
  .accordion-nav-link-wrapper .notif-indicator--o {
    top: 2px;
    left: auto;
    right: -8px;
  }

  /*====================================== SECTION HOME - 991 ======================================*/
  .ppl-card-swiper .ppl-card .ppl-card--left .ppl-card--wrapper {
    min-height: 420px;
  }

  .ppl-card-swiper .ppl-card .ppl-card--left .ppl-card--wrapper .ppl-card--cta {
    margin-top: auto;
  }

  /*====================================== SECTION INFO PWMII - Career - 991 ======================================*/
  .job-card {
    align-items: start;
    flex-direction: column;
  }

  .job-card--meta {
    flex-direction: row;
  }

  .job-card--cta {
    width: 100%;
  }

  .job-modal--cta {
    flex-wrap: nowrap;
  }

  .job-modal--cta,
  .job-modal--cta .cta,
  .job-modal--cta .cta .btn {
    width: 100%;
  }

  /*====================================== SECTION REGISTER PAGE - 992 ======================================*/

  .register--body {
    max-width: 100%;
  }

  .register--left {
    display: none;
  }

  .register--page-footer {
    flex-direction: column;
    align-items: center;
  }

  /*====================================== SECTION DASHBOARD PPL REGISTRASI - DASHBOARD - 992 ======================================*/

  .dashboard-filter-wrapper .dashboard-filter-cta,
  .dashboard-filter-wrapper .dashboard-filter-cta .btn,
  .dashboard-filter-wrapper .dashboard-filter-short {
    width: 100%;
  }

  /*====================================== SECTION DASHBOARD RUTA WINNER - 991 ======================================*/
  .nominee-winner {
    transform: translateY(0);
  }

  /*====================================== SECTION DASHBOARD RUTA LIVE - 991 ======================================*/
  section.section-ruta-voting {
    margin-bottom: 0 !important;
  }

  /*====================================== SECTION FOOTER - 992 ======================================*/
  .footer--brand {
    padding-right: 0;
  }

  .footer--links {
    padding-left: 0;
    border-left: none;
    height: auto;
  }
}

/*Mobile General*/
@media (max-width: 767px) {
  /*====================================== SECTION COMPONENT - Mobile General ======================================*/
  h1 {
    font-size: 2.25rem;
    line-height: 1.1;
  }

  h2 {
    font-size: 1.75rem;
    line-height: 1.25;
  }

  h3 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  h4 {
    font-size: 1.375rem;
    line-height: 1.35;
  }

  h5 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  h6 {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  p {
    font-size: 1rem;
    line-height: 1.45;
  }

  .f-xxxl {
    font-size: 2.5rem !important;
  }

  .f-xxl {
    font-size: 2rem !important;
  }

  .f-xl {
    font-size: 1.75rem !important;
  }

  .f-lg {
    font-size: 1.5rem !important;
  }

  .f-sl {
    font-size: 1.25rem !important;
    line-height: 1.3;
  }

  .f-md {
    font-size: 1.125rem !important;
  }

  .f-base {
    font-size: 1rem !important;
  }

  .f-sm {
    font-size: 0.875rem !important;
  }

  .f-xs {
    font-size: 0.75rem !important;
  }

  .f-xxs {
    font-size: 0.5rem !important;
  }

  .btn {
    padding: 12px 14px;
    line-height: 1.25;
  }

  .modal-header {
    padding: 1.5rem 1.5rem 1rem 1rem;
  }

  .modal-body {
    padding: 1rem;
  }

  .modalbocd-content--right .modal-close {
    top: 8px;
    right: 8px;
  }

  section {
    padding: 2rem 0;
  }

  .section-hero-top {
    padding-top: 7rem;
  }

  .hero-pad {
    padding-top: 6rem;
  }

  .subject-title {
    max-width: 100%;
  }

  .hero-container {
    height: 100%;
    padding: 6rem 0rem 4rem 0rem;
  }

  .hero-ornament {
    opacity: 0;
    width: 180px;
    height: 180px;
  }

  .hero-container::before {
    background: linear-gradient(
      148deg,
      rgba(25, 68, 149, 1) 0%,
      rgb(54 97 166 / 90%) 60% 60%,
      rgb(38 79 152 / 40%) 100%,
      rgb(38 79 151 / 0%) 100%
    );
  }

  .hero-container::after {
    height: 128px;
  }

  .hero-container .hero-wrapper {
    gap: 0.5rem !important;
  }

  .breadcrumb-list {
    font-size: 16px;
  }

  .breadcrumb-list li + li::before {
    margin: 0 0.25rem;
  }

  .about-content-wrapper {
    padding: 1.5rem 1rem;
  }

  .section-margin-top {
    margin-top: 0;
  }

  .empty-page--asset {
    max-width: 140px;
  }

  header nav .container-nav {
    max-width: 100%;
    padding: 0.5rem 1rem;
  }

  .container-nav .nav-logo {
    max-width: 4rem;
  }

  /*====================================== SECTION HOME - Mobile GENERAL ======================================*/
  .section-hero-all .hero-container {
    padding: 7rem 0 5rem 0;
  }

  .ppl-card-swiper .swiper-slide .ppl-card {
    width: 100%;
    height: 100%;
  }

  .ppl-card-swiper .ppl-card .ppl-card--left .ppl-card--wrapper {
    padding: 1.25rem 1.25rem 5rem 1.25rem;
  }

  .ppl-card-swiper
    .ppl-card
    .ppl-card--left
    .ppl-card--wrapper
    .ppl-card--cta
    .btn {
    width: 100%;
  }

  .ppl-card-swiper .ppl-card-swiper--pagination-wrapper {
    left: 50%;
  }

  .home-about-wrapper .cta .btn {
    width: 100%;
  }

  .section-benefit-join .benefit-join-body {
    padding-bottom: 4rem;
  }

  .benefit-join-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .benefit-join-card--center,
  .benefit-join-card--left,
  .benefit-join-card--right {
    grid-column: auto;
    grid-row: auto;
  }

  .benefit-join-cards-grid > div:nth-child(1) .benefit-why-card,
  .benefit-join-cards-grid > div:nth-child(2) .benefit-why-card {
    text-align: left;
  }

  .benefit-why-card {
    padding: 1.25rem;
  }

  .section-join-member-home {
    padding: 0rem 0 0 0;
  }

  .join-member-home--card {
    flex-direction: column;
    gap: 1rem;
    padding: 0rem;
  }

  .join-member-home--left {
    justify-content: left;
    padding: 1.25rem 1.25rem 5rem 1.25rem;
  }

  .join-member-home--left .cta .btn {
    width: 100%;
  }

  .join-member-home--right {
    flex: 1;
    width: 100%;
    min-height: 15rem;
    border-radius: 0 0 var(--rd-md) var(--rd-md);
    background-size: 150%;
  }

  .section-home-contact-card {
    margin-top: 0rem;
    padding-top: 2rem;
  }

  .home-contact-card--left {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .home-contact-card--right {
    z-index: 1;
    background-color: transparent;
    color: var(--c-white);
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  }

  /*====================================== SECTION ABOUT PAGE OVERVIEW - Mobile GENERAL ======================================*/
  .section-profile-overview .ppl-card {
    height: 100%;
    min-height: 100%;
  }

  .section-profile-overview .ppl-card .ppl-card--left,
  .ppl-card-swiper .ppl-card .ppl-card--left .ppl-card--wrapper {
    height: 100%;
  }

  .section-profile-overview .ppl-card.skeleton-card {
    width: 100%;
    height: 100%;
  }

  .section-profile-overview .ppl-card.skeleton-card .skeleton-picture {
    width: 100%;
    height: 17.5rem;
  }

  .section-profile-overview .ppl-card .ppl-card--right {
    width: 100%;
    flex: none;
  }

  .about-background-card-wrapper .code-ethics--card .code-ethics--card-wrapper {
    min-height: 100%;
    gap: 1rem;
  }

  .about-background-card-wrapper
    .code-ethics--card
    .code-ethics--card-wrapper
    .cta
    .btn {
    width: 100%;
  }

  .section-profile-overview .hero-container {
    padding: 7rem 0 0rem 0;
  }

  .section-about-history {
    padding: 2rem 0rem;
  }

  .overview-tab--content-card {
    flex-direction: column;
    gap: 0;
  }

  .overview-tab--content-card .overview-tab--content-image {
    position: static;
    height: 17.5rem;
    max-width: 100%;
    border-radius: var(--rd-md) var(--rd-md) 0 0;
  }

  .overview-tab--content-desc {
    padding: 1.25rem;
  }

  .section-overview-org {
    padding: 2rem 0 4rem 0;
  }

  .section-overview-contact .contact-overview--address {
    padding-top: 2rem;
  }

  .contact-overview--map {
    min-height: 15rem;
  }

  .contact-overview--info-list {
    gap: 1rem;
  }

  /*====================================== SECTION ABOUT PAGE CODE ETHICS - Mobile GENERAL ======================================*/
  .code-ethics--card {
    padding: 1.25rem;
  }

  /*====================================== SECTION MAIN MEMBER PAGE - Mobile General ======================================*/
  .main-member--row,
  .regular-member-list--card-row,
  .pps-schedule--card-row {
    gap: 1rem;
  }

  .main-member--card-body::before {
    height: 100%;
  }

  /*====================================== SECTION INFO PWMII - Artikel Kami - Mobile General ======================================*/

  .article-recommend--card-wrapper {
    padding: 1.25rem;
  }

  /*====================================== SECTION INFO PWMII - Artikel Detail - Mobile General ======================================*/
  .section-hero-article-detail .hero-container {
    padding: 7rem 0 1rem 0;
  }

  .section-article-detail.section-overlay-top {
    margin-top: 0rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
  }

  .article-detail--cover-figure {
    height: 20rem;
  }

  /*====================================== SECTION INFO PWMII - Career - Mobile General ======================================*/

  .careers-filter {
    flex-direction: column;
    align-items: flex-start;
  }

  .job-card {
    padding: 1.25rem;
    align-items: start;
    flex-direction: column;
  }

  .job-card--meta {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .job-card--cta {
    width: 100%;
  }

  .job-modal--cta {
    flex-wrap: wrap;
  }

  /*====================================== SECTION LAYANAN - Pendidikan Profesi Lanjutan (PPL) - Mobile General ======================================*/
  .ppl-card {
    flex-direction: column-reverse;
  }

  .ppl-card .ppl-card--right {
    min-height: 17.5rem;
  }

  .ppl-card .ppl-card--left .ppl-card--wrapper {
    padding: 1.25rem;
  }

  .ppl-card .ppl-card--left .cta .btn {
    width: 100%;
  }

  /*====================================== SECTION Prosedur - Mobile General======================================*/

  /*====================================== SECTION REGISTER PAGE - Mobile GENERAL ======================================*/

  .register--form-row {
    flex-direction: column;
  }

  .register--wizard-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /*====================================== SECTION LOGIN - Mobile GENERAL ======================================*/
  .section-login .ruta-back {
    left: 12px;
  }

  .login-wrapper .login-assets .image {
    max-width: 180px;
  }

  .login-wrapper .login-box-wrapper {
    padding: 0 0 2rem 0;
  }

  /*====================================== SECTION DASHBOARD USER - DASHBOARD - Mobile General  ======================================*/

  .dashboard-screen {
    margin-top: 0 !important;
    margin-bottom: 10vh;
  }

  .dashboard-event-banner--content {
    flex-direction: column;
    align-items: start;
  }

  .breadcrumb-list a,
  .breadcrumb-list li {
    font-size: 12px !important;
  }

  /*====================================== SECTION DASHBOARD RIWAYAT SERTIFIKASI - DASHBOARD - Mobile GENERAL ======================================*/

  .dashboad-table .dataTables_wrapper .top {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }

  /*====================================== SECTION DASHBOARD PPL REGISTRASI - DASHBOARD - Mobile GENERAL ======================================*/

  .dashboard-schedule-list {
    flex-direction: column;
    gap: 0.75rem;
  }

  .dashboard-schedule-list .dsl-date {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem;
  }

  .dashboard-schedule-list .dsl-cta {
    width: 100%;
  }

  .dashboard-schedule-list .dsl-date .dsl-status-icon {
    top: -28px;
    right: -28px;
    font-size: 12px;
    padding: 0.5rem;
  }

  .dashboard-schedule-list .dsl-date .dsl-date-bot h2 {
    font-size: 0.875rem !important;
  }

  .dashboard-schedule-list .dsl-cta .btn {
    width: 100%;
  }

  /*====================================== SECTION DASHBOARD QUESTIONER - DASHBOARD - Mobile GENERAL ======================================*/
  .questioner--info-key {
    width: 7.5rem;
  }

  .questioner--form-table th,
  .questioner--form-table td {
    padding: 0.5rem 0.5rem;
  }

  .questioner--form-table td.q-answer {
    width: 3.5rem;
  }

  .q-radio-label {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
  }

  /*====================================== SECTION USER DASHBOARD - KEANGGOTAAN - Mobile GENERAL ======================================*/
  .bio-card--point {
    position: absolute !important;
    top: 8px;
    right: 8px;
    width: 72px;
    height: 72px;
  }

  /*====================================== SECTION DASHBOARD USER - KEANGOTAAN UPLOAD - Mobile GENERAL ======================================*/
  .btn-floating-back {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  /*====================================== SECTION DASHBOARD IURAN KEANGOTAAN - DASHBOARD - Mobile GENERAL ======================================*/
  .dashboard-member-billing {
    flex-direction: column;
    align-items: start;
    gap: 0.75rem;
  }

  .dashboard-member-billing .dmb-cta,
  .dashboard-member-billing .dmb-cta .btn {
    width: 100%;
  }

  .copy-tooltip {
    right: 20px;
    left: auto;
  }

  .recomm-card {
    background-position: right -62px bottom -40px;
    background-size: 7rem;
  }

  .recomm-card .recomm-card--pp,
  .recomm-card .recomm-card--pp img {
    width: 80px;
    height: 100px;
    aspect-ratio: 9 / 16;
    border-radius: var(--rd-md);
  }

  /*====================================== SECTION DASHBOARD USER - USER GUIDE - Mobile General ======================================*/
  .user-guide-wrapper .pdf-preview-wrapper iframe {
    height: 420px;
  }

  /*====================================== SECTION DASHBOARD USER - DISCLAIMER - Mobile General ======================================*/

  .disclaimer-card,
  .disclaimer-card {
    padding: 1.25rem;
    background: radial-gradient(
      circle at 420% 0%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 0%,
      var(--c-primary) 25%
    );
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, cover, cover;
  }

  /*====================================== SECTION DASHBOARD USER - BIODATA DIRI - Mobile General ======================================*/

  .bio-card .bio-card--photo {
    max-width: 8rem;
  }

  .bio-card--qr {
    width: 100%;
  }

  .bio-card--qr .card-qr--image {
    max-width: 6rem;
  }

  .bio-card--qr .card-qr--dl,
  .bio-card--qr .card-qr--dl .btn {
    width: 100%;
  }

  .bio-form--row {
    grid-template-columns: none;
    grid-template-rows: 20px auto 1fr;
  }

  .bio-form--row .bio-form__label::after {
    content: ":";
    position: static;
  }

  .document-modal-wrapper .upload-box {
    width: 100%;
    height: 20rem;
    aspect-ratio: 3 / 3;
  }

  /* ========================== SECTION DASHBOARD USER - RUTA VOTING - Mobile General ==========================*/
  .row-ruta-voting {
    row-gap: 3rem !important;
  }

  /* ========================== SECTION DASHBOARD USER - PPK & PPL - Mobile General ==========================*/
  .dashboard-schedule-list .dsl-date .dsl-date-year {
    position: static;
    border: 0;
  }

  .dashboard-schedule-list .dsl-date .dsl-date-year p {
    font-size: 0.875rem !important;
  }

  .dashboard-schedule-list .dsl-date .dsl-date-top {
    margin-left: auto !important;
  }

  .dsl-add-point {
    width: 100%;
    position: static;
    margin-bottom: -8px;
  }

  .add-point--wrapper {
    width: 100%;
    border: 1px solid var(--c-transparent);
    padding: 4px;
  }

  .add-point--wrapper span {
    color: var(--c-secondary) !important;
  }

  .modal-konversi .cta,
  .modal-konversi .cta .btn {
    width: 100%;
  }

  /* ========================== SECTION DASHBOARD USER - CAMPAIGN CANDIDATE - Mobile General ==========================*/
  .section-campaign {
    padding: 7rem 0 8rem 0;
  }

  /* ========================== SECTION DASHBOARD USER - YEARLY - WAITING - Mobile General ==========================*/

  .voting-yearly--wrapper--cta .cta,
  .voting-yearly--wrapper--cta .btn-zoom,
  .voting-yearly--wrapper--cta .btn {
    width: 100%;
  }

  .voting-yearly--wrapper--cta .btn-zoom {
    justify-content: center;
  }

  /* ========================== SECTION DASHBOARD USER - YEARLY - ONBOARDING - Mobile General ==========================*/

  .ruta-onboarding--icon {
    width: 80px;
    height: 80px;
  }

  .ruta-onboarding--icon i {
    font-size: 2rem;
  }

  /* ========================== SECTION RUTA YEARLY - VOTING - Mobile General ==========================*/

  .vote-question--card,
  .vote-answer--card {
    padding: 1.25rem;
  }

  /* ========================== SECTION RUTA YEARLY - SUMMARY - Mobile General ==========================*/
  .summary-result--card {
    padding: 1.25rem;
  }

  /*====================================== SECTION FOOTER - Mobile General ======================================*/
  footer {
    padding: 2rem 0 0rem 0;
  }

  .footer--wrapper {
    padding: 0 1rem;
  }

  .footer-row {
    gap: 2rem;
    padding-bottom: 2rem;
  }

  footer::before {
    width: 100%;
    height: 100%;
  }

  .footer--wrapper .row-gap-2 {
    row-gap: 1.5rem;
  }

  .footer-social--link {
    flex-shrink: 0;
  }

  .footer-logo .image {
    max-width: 10rem !important;
  }

  .footer-nav {
    width: 100%;
  }

  .footer-menu {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    margin-left: 0px;
  }

  .footer-nav .footer-menu li {
    padding-left: 0px;
  }

  .footer-nav .footer-menu li::before,
  .footer-nav .footer-menu li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: unset;
    bottom: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: unset;
  }

  .footer-menu .footer-menu--link a {
    width: 100%;
  }

  .footer-copyright {
    padding: 1rem 0;
  }

  /*====================================== SECTION 404 & 503 - Mobile General ======================================*/
  .not-found--lottie,
  .maintenance--lottie {
    max-width: 300px;
  }
}

/*Phone View - MAX / PRO Devices GENERAL */
@media (max-width: 575px) {
  .menu-container-mobile .menu-nav-mobile {
    margin-left: 0;
  }

  .menu-mobile-li .accordion-button,
  .submenu-mobile li a,
  .menu-mobile-li .menu-mobile-unsub {
    font-size: 16px;
  }

  /*====================================== SECTION COMPONENT - Mobile MAX / PRO DEVICES GENERAL
======================================*/
  .about-content--head-desc {
    max-width: 100%;
  }

  .menu-sidebar {
    height: 389px;
  }

  /*====================================== SECTION HOMEPAGE -  Mobile MAX / PRO DEVICES GENERAL
======================================*/

  .stat-home--wrapper {
    flex-direction: column;
    gap: 1rem;
  }

  .ppl-card-swiper .ppl-card .ppl-card--left .ppl-card--wrapper {
    min-height: 375px;
  }

  /*====================================== SECTION INFO PWMII - Career -  Mobile MAX / PRO DEVICES GENERAL
======================================*/

  .job-card--meta-item,
  .job-card--meta-item:first-child {
    width: 100%;
    min-width: unset;
  }

  .job-modal--cta .btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  /*====================================== SECTION DASHBOARD USER - DASHBOARD - Mobile MAX / PRO DEVICES GENERAL  ======================================*/

  .card-d-icon {
    margin-left: 0;
    margin-right: auto;
    max-width: 124px;
    transform: translateY(24px);
  }

  .d-headline--list {
    margin-left: 0;
  }

  /*====================================== SECTION RUTA UPCOMING - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .flip-clock-divider {
    width: 14px !important;
  }

  .flip-clock-divider .flip-clock-label {
    top: -1.8em !important;
    right: -52px !important;
  }

  .flip-clock-wrapper ul {
    margin: 3px !important;
    width: 30px !important;
    height: 40px !important;
    font-size: 30px !important;
  }

  .flip-clock-divider {
    height: 40px !important;
  }

  .flip-clock-wrapper ul li a div.up:after {
    top: 19px !important;
  }

  .flip-clock-wrapper ul li a div {
    font-size: 22px !important;
  }

  .flip-clock-wrapper ul li a div div.inn {
    font-size: 26px !important;
  }

  .flip-clock-dot {
    background: var(--c-primary) !important;
    width: 4px !important;
    height: 4px !important;
  }

  .flip-clock-dot.top {
    top: 14px !important;
  }

  .flip-clock-dot.bottom {
    bottom: 14px !important;
  }

  /*====================================== SECTION DASHBOARD QUESTIONER - DASHBOARD - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .questioner--info-row {
    flex-direction: column;
    gap: 0.25rem;
  }

  .questioner--info-key {
    width: 100%;
  }

  .questioner--attendance-value {
    flex-direction: column;
    align-items: flex-start;
  }

  .questioner--intro {
    padding: 1rem;
  }

  .questioner--scale-table thead tr {
    display: flex;
    flex-wrap: wrap;
  }

  .questioner--scale-table th {
    flex: 0 0 50%;
    box-sizing: border-box;
  }

  .questioner--form-table {
    display: block;
    border: 1px solid var(--c-br);
  }

  .questioner--form-table thead {
    display: none;
  }

  .questioner--form-table tbody {
    display: block;
    width: 100%;
  }

  .questioner--form-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 1px solid var(--c-br);
  }

  .questioner--form-table tbody tr:last-child {
    border-bottom: none;
  }

  .questioner--form-table .group-header {
    display: block;
  }

  .questioner--form-table .group-header th {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--c-br);
    padding: 0.5rem 0.75rem;
  }

  .questioner--form-table td.q-number {
    display: none;
  }

  .questioner--form-table
    tbody
    tr
    > td:not(.q-number):not(.q-answer):not(.q-answer-wide):not([colspan]) {
    flex: 1 1 100%;
    border: none;
    border-bottom: 1px solid var(--c-br);
    padding: 0.75rem;
  }

  .questioner--form-table tbody tr > td[colspan] {
    flex: 1 1 100%;
    border: none;
    padding: 0.5rem 1rem;
  }

  .questioner--form-table td.q-answer {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0.5rem;
    width: auto;
  }

  .questioner--form-table td.q-answer-wide {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: none;
    padding: 0.25rem 0.5rem;
  }

  .cta-wrapper {
    flex-direction: column;
  }

  .cta-wrapper .cta {
    width: 100%;
  }

  .cta-wrapper .cta .btn,
  .cta-wrapper .cta a {
    width: 100%;
    justify-content: center;
  }

  /*====================================== SECTION DASHBOARD RUTA CAMPAIGN CANDIDATE - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .bottom-bar-nav {
    margin-top: 1rem;
  }

  /*====================================== SECTION DASHBOARD RUTA WELCOME - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .voting-container {
    padding: 3rem 1rem;
  }

  /*====================================== SECTION PENGKINIAN DATA - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .section-pkd {
    padding-bottom: 0;
  }

  .save-bottom-pkd {
    margin-top: 1rem;
    position: relative;
    padding: 1rem 1rem;
    flex-direction: column;
    gap: 1rem;
    border-radius: var(--rd-md);
  }

  .save-bottom-pkd .cta-wrapper,
  .save-bottom-pkd button {
    width: 100%;
  }

  /*====================================== SECTION USER DASHBOARD - PPK HISTORY - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .konversi-card-item {
    flex-direction: column;
    padding: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--rd-md);
  }

  /*====================================== SECTION 404 - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .notfound-layout--title {
    top: 15%;
  }

  .notfound-layout---img {
    bottom: -16px;
  }

  .notfound-layout--title .image {
    transform: scale(1.5);
  }

  .notfound-layout--desc {
    bottom: 24px;
  }

  .notfound-layout--desc .notfound-desc--wrapper p.f-lg {
    font-size: 24px !important;
  }

  .notfound-layout--desc .notfound-desc--wrapper p.f-md {
    font-size: 18px !important;
  }

  /*====================================== SECTION 503 - Mobile MAX / PRO DEVICES GENERAL
======================================*/
  .mt-layout--title {
    margin-bottom: -7rem;
  }

  .mt-layout--title h1 {
    font-size: 14rem;
    line-height: 1;
  }

  .mt-layout--desc {
    margin-top: -3rem;
  }
}

/*Mobile (Small Phone - Normal Phone)*/
@media (max-width: 399px) {
  /*====================================== SECTION HOME - Mobile SMALL - Normal ======================================*/

  .intermezo-ship img {
    scale: 0.2;
  }

  /*====================================== SECTION DASHBOARD PPL REGISTRASI - DASHBOARD - Mobile SMALL - Normal ======================================*/

  .dashboard-schedule-list .dsl-wrapper-l .dsl-content--meta:first-child,
  .dashboard-schedule-list .dsl-wrapper-r .dsl-content--meta:first-child,
  .dashboard-schedule-list .dsl-wrapper-l .dsl-content--meta:nth-child(2),
  .dashboard-schedule-list .dsl-wrapper-r .dsl-content--meta:nth-child(2) {
    min-width: auto;
    width: 100%;
  }

  /*====================================== SECTION 404 - MOBILE Small - Normal ======================================*/
  .notfound-layout--title .image {
    transform: scale(1.75);
  }

  .notfound-layout--desc .notfound-desc--wrapper p.f-md {
    font-size: 16px !important;
  }

  /*====================================== SECTION 503 - MOBILE Small - Normal ======================================*/
  .mt-layout--title {
    margin-bottom: -5rem;
  }

  .mt-layout--title h1 {
    font-size: 10rem;
    line-height: 1;
  }

  .mt-layout--desc {
    margin-top: -3rem;
  }

  /*====================================== SECTION 404 & 503 - MOBILE Small - Normal ======================================*/
  .not-found--lottie,
  .maintenance--lottie {
    max-width: 240px;
  }
}

/*Phone View - MAX / PRO Devices*/
@media (min-width: 400px) and (max-width: 575px) {
  /*====================================== SECTION COMPONENT - Mobile MAX / PRO DEVICES
======================================*/

  /*====================================== SECTION DASHBOARD PPL REGISTRASI - DASHBOARD - Mobile MAX / PRO DEVICES ======================================*/
}

/*Phone Medium*/
@media (min-width: 576px) and (max-width: 767px) {
  /*====================================== SECTION HOMEPAGE - Mobile MAX / PRO DEVICES GENERAL ======================================*/

  /*====================================== SECTION RUTA UPCOMING - Mobile MAX / PRO DEVICES GENERAL ======================================*/
  .flip-clock-divider .flip-clock-label {
    top: -1.85em !important;
    right: -62px !important;
  }

  .flip-clock-wrapper ul {
    width: 40px !important;
    height: 60px !important;
    font-size: 40px !important;
  }

  .flip-clock-divider {
    height: 60px !important;
  }

  .flip-clock-wrapper ul li a div {
    font-size: 30px !important;
  }

  .flip-clock-wrapper ul li a div div.inn {
    font-size: 38px !important;
  }

  .flip-clock-wrapper ul li a div.up:after {
    top: 28px !important;
  }

  .flip-clock-dot {
    background: var(--c-primary) !important;
    width: 6px !important;
    height: 6px !important;
  }

  .flip-clock-dot.top {
    top: 26px !important;
  }

  .flip-clock-dot.bottom {
    bottom: 14px !important;
  }

  /*====================================== SECTION 404 - MOBILE Medium ======================================*/
  .notfound-layout--title {
    top: 20%;
  }

  .notfound-layout--title .image {
    transform: scale(1.35);
  }

  .notfound-layout--desc {
    bottom: 5%;
  }
}

/*Phone FOLD Unfolded View*/
@media (min-width: 0) and (max-width: 316px) {
  /*====================================== SECTION USER DASHBOARD - KEANGGOTAAN - MOBILE Folded ======================================*/
  .bio-card--point {
    position: absolute !important;
    top: 4px;
    right: 4px;
    width: 54px;
    height: 54px;
  }

  .bio-card--point h3 {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 767px) and (min-height: 750px) {
}

/* Portrait iPad */
@media (min-width: 768px) and (max-width: 991px) {
  /*====================================== SECTION COMPPONENT - iPad Portrait ======================================*/

  .menu-container-mobile {
    width: 50%;
  }

  .hero-container::before {
    background: linear-gradient(
      148deg,
      rgba(25, 68, 149, 1) 0%,
      rgb(54 97 166 / 80%) 60% 60%,
      rgb(38 79 152 / 40%) 100%,
      rgb(38 79 151 / 0%) 100%
    );
  }

  .hero-container::after {
    height: 50%;
    background: linear-gradient(
      0deg,
      rgb(245 249 253) 0%,
      rgba(255, 255, 255, 0) 80%
    );
  }

  .hero-ornament {
    width: 180px;
    height: 180px;
  }

  .breadcrumb-list {
    font-size: 16px;
  }

  .empty-page--asset {
    max-width: 180px;
  }

  .modal-body {
    padding: 1.5rem;
  }

  /*====================================== SECTION NAVBAR - iPad Portrait ======================================*/

  /*====================================== SECTION HOME - iPad Portrait ======================================*/
  .ppl-card-swiper .ppl-card .ppl-card--left .ppl-card--wrapper {
    padding: 1.25rem 1.25rem 5rem 1.25rem;
  }

  .ppl-card-swiper
    .ppl-card
    .ppl-card--left
    .ppl-card--wrapper
    .ppl-card--cta
    .btn {
    width: 100%;
  }

  .ppl-card-swiper .ppl-card-swiper--pagination-wrapper {
    left: 50%;
  }

  .section-benefit-join .benefit-join-body {
    padding-bottom: 6rem;
  }

  .benefit-join-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .benefit-join-card--center,
  .benefit-join-card--left,
  .benefit-join-card--right {
    grid-column: auto;
    grid-row: auto;
  }

  .benefit-join-cards-grid > div:nth-child(1) .benefit-why-card,
  .benefit-join-cards-grid > div:nth-child(2) .benefit-why-card {
    text-align: left;
  }

  .benefit-why-card {
    padding: 1.25rem;
  }

  /*====================================== SECTION ABOUT PAGE OVERVIEW - iPad Portrait ======================================*/

  .section-profile-overview .ppl-card {
    min-height: 100%;
  }

  .section-profile-overview .ppl-card.skeleton-card {
    width: 100%;
    height: 100%;
  }

  .section-profile-overview .ppl-card.skeleton-card .skeleton-picture {
    width: 100%;
    height: 17.5rem;
  }

  .section-profile-overview .ppl-card .ppl-card--right {
    width: 100%;
    flex: none;
  }

  .overview-tab--content-card {
    flex-direction: column;
    gap: 0;
  }

  .overview-tab--content-card .overview-tab--content-image {
    position: static;
    height: 20rem;
    max-width: 100%;
    border-radius: var(--rd-md) var(--rd-md) 0 0;
  }

  .overview-tab--content-desc {
    padding: 1.25rem;
  }

  /*====================================== SECTION ABOUT PAGE CODE ETHICS - iPad Portrait ======================================*/
  .code-ethics--card {
    padding: 1.25rem;
  }

  /*====================================== SECTION INFO PWMII - Artikel Kami - iPad Portrait ======================================*/

  .article-recommend--card-wrapper {
    padding: 1.25rem;
  }

  /*====================================== SECTION INFO PWMII - Career - iPad Portrait ======================================*/

  /*====================================== SECTION LAYANAN - Pendidikan Profesi Lanjutan (PPL) - iPad Portrait ======================================*/
  .ppl-card {
    flex-direction: column-reverse;
  }

  .ppl-card .ppl-card--right {
    min-height: 20rem;
  }

  /*====================================== SECTION Prosedur - iPad Portrait ======================================*/
  .section-terms-conditions .disclaimer-card,
  .section-privacy-policy .disclaimer-card {
    padding: 1.25rem;
  }

  /*====================================== SECTION LOGIN - iPad Portrait ======================================*/
  .login-row {
    padding-bottom: 0;
  }

  .login-wrapper .login-assets {
    max-width: 320px;
  }

  .login-wrapper .login-assets .image {
    max-width: 580px;
  }

  /*======================================   SECTION DASHBOARD USER - DASHBOARD - iPad Portrait ======================================*/

  .dashboard-screen {
    margin-top: 0 !important;
    margin-bottom: 5vh;
  }
  .card-d-icon {
    margin-left: 0;
    max-width: 124px;
    margin-bottom: -28px;
  }

  /* ========================== SECTION DASHBOARD USER - PPK & PPL - DASHBOARD - iPad Portrait ==========================*/

  .modal-konversi .cta,
  .modal-konversi .cta .btn {
    width: 100%;
  }

  /*====================================== SECTION DASHBOARD USER - IURAN KEANGOTAAN - DASHBOARD - iPad Portrait ======================================*/
  .recomm-card {
    background-position: right -74px bottom -40px;
    background-size: 9rem;
  }

  /* ========================== RUTA - VOTING - iPad Portrait ==========================*/
  .row-ruta-voting {
    row-gap: 3rem !important;
  }

  .voting-container .nominee-profile {
    max-width: 340px !important;
  }

  /* ========================== RUTA - CAMPAIGN CANDIDATE - iPad Portrait ==========================*/
  .campaign-flyer {
    max-width: 480px;
  }

  /* ========================== SECTION RUTA YEARLY - VOTING - iPad Portrait ==========================*/

  .vote-question--card,
  .vote-answer--card {
    padding: 1.25rem;
  }

  /* ========================== SECTION RUTA YEARLY - SUMMARY - iPad Portrait ==========================*/
  .summary-result--card {
    padding: 1.25rem;
  }

  /*====================================== SECTION FOOTER - iPad Portrait ======================================*/
  .footer--wrapper {
    padding: 0 3rem;
  }

  .footer-row {
    gap: 1rem;
  }

  /*====================================== SECTION 404 - iPad Portrait ======================================*/

  .notfound-layout--title .image {
    transform: scale(1.35);
  }

  .notfound-layout--title {
    top: 20%;
  }

  .notfound-layout--desc {
    bottom: 10%;
  }
}

/* Landscape iPad Air and another Tab */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  /*====================================== SECTION HOME - iPad LANDSCAPE ======================================*/
  /*====================================== SECTION ABOUT PAGE CODE ETHICS - iPad LANDSCAPE ======================================*/
  .code-ethics--card {
    padding: 1.5rem;
  }

  /*====================================== SECTION LOGIN - iPad LANDSCAPE ======================================*/

  .login-wrapper .login-assets .image {
    max-width: 520px;
  }

  /* ========================== RUTA - VOTING - iPad LANDSCAPE ==========================*/
  .voting-container .nominee-profile {
    max-width: 320px !important;
  }

  /*====================================== SECTION 404 - iPad LANDSCAPE ======================================*/

  /*====================================== SECTION FOOTER ======================================*/
}

/* Landscape iPad Mini and another Tab */
@media only screen and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  /*====================================== SECTION HOME PAGE - iPad Mini Landscape ======================================*/

  .section-intermezo--container .section-intermezo--wrapper {
    padding: 0 1rem;
  }

  .hero-home--ornament {
    max-width: 48px;
    top: unset;
    bottom: 335px;
    right: 165px;
    left: unset;
  }

  .intermezo-ship img {
    scale: 0.5;
  }

  /*====================================== SECTION 404 - iPad Mini Landscape ======================================*/
}

/* iPad Pro Portrat & Tab 1024 Portrait */
@media only screen and (device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  /*====================================== SECTION HOME PAGE - iPad Pro Portrait ======================================*/
  .section-benefit-join .benefit-join-body {
    padding-bottom: 6rem;
  }

  /*====================================== SECTION INFO PWMII - Career - 992 ======================================*/

  .job-card {
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .job-card-title-wrapper {
    width: 100%;
  }

  .job-card--meta {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .job-card--meta-item,
  .job-card--meta-item:first-child {
    width: auto;
    min-width: 140px;
  }

  .job-card--cta {
    width: 100%;
    flex-direction: column;
  }

  .job-card--cta .cta {
    width: 100%;
  }

  .job-card--cta .btn {
    width: 100%;
    flex: 1;
    text-align: center;
    justify-content: center;
  }

  .job-card-title-wrapper {
    width: 150px;
  }

  .job-card--meta-item {
    width: 130px;
  }

  .job-card--meta-item:first-child {
    width: 155px;
  }

  /*====================================== SECTION 404 - iPad Pro PORTRAIT ======================================*/
  .notfound-layout--title .image {
    max-width: 540px;
    transform: scale(1.35);
  }

  .notfound-layout--desc {
    bottom: 10%;
  }
}

/* Small Laptop */
@media (min-width: 992px) and (max-width: 1199px) {
  /*====================================== SECTION COMPPONENT - Small Laptop ======================================*/

  /* ========================== RUTA - VOTING - Small Laptop ==========================*/
  .voting-container .nominee-profile {
    max-width: 280px !important;
  }

  .menu-container-mobile {
    width: 50%;
  }

  /*====================================== SECTION FOOTER - Small Laptop ======================================*/

  .footer--wrapper {
    padding: 0 2rem;
  }
}

/* 11-12 Inch */
@media (min-width: 1025px) and (max-width: 1199px) {
  /*====================================== SECTION INFO PWMII - Career 11-12 Inch ======================================*/
  .job-card--meta-item {
    width: 100px;
  }

  /*====================================== SECTION 404 - 11-12 Inch ======================================*/

  .notfound-layout---img {
    bottom: -32px;
  }

  .notfound-layout--title {
    top: 12.5%;
  }

  .notfound-layout--desc {
    bottom: 5%;
  }
}

/* 11-12 Inch - Notebook */
@media (min-width: 1025px) and (max-width: 1199px) and (max-height: 600px) {
  /*====================================== SECTION 404 - 11-12 Inch - Notebook ======================================*/
  .notfound-layout--title .image {
    max-width: 400px;
  }

  .notfound-layout--desc {
    bottom: 2%;
  }

  /*====================================== SECTION FOOTER CONTACT - 11-12 Inch - Notebook
======================================*/
}

@media (min-width: 1024px) and (max-width: 1440px) and (max-height: 682px) {
  /* ========================== DASHBOARD RUTA CAMPAIGN - MIN HEIGHT 682px ==========================*/
  .campaign-flyer {
    max-width: 340px;
  }
}

@media (max-width: 1400px) {
  /* ========================== RUTA - VOTING ==========================*/
  .voting-container .nominee-profile {
    max-width: 320px;
  }
}

/* >15 Inch */
@media (min-width: 1440px) {
  /*====================================== SECTION HOME PAGE >15 Inch ======================================*/

  /*====================================== SECTION LOGIN PAGE > 15 Inch ======================================*/

  /*====================================== SECTION FOOTER CONTACT >15 Inch ======================================*/
}

/* >16 Inch */
@media (min-width: 1550px) {
  /*====================================== SECTION HOME PAGE > 16 Inch ======================================*/

  /*====================================== SECTION LOGIN PAGE > 16 Inch ======================================*/
  .login-wrapper .login-box-wrapper {
    padding: 2rem 0 6rem 0;
  }

  /*====================================== SECTION 404 - >16 Inch ======================================*/
}

@media (min-width: 1880px) {
  /*====================================== SECTION 404 - >18 Inch ======================================*/
}

@media (min-width: 2500px) {
  /*====================================== SECTION 404 - >25 Inch ======================================*/
}