@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Noto+Sans&display=swap');

body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11pt;
}

@media screen and (max-width: 720px){
    body {
        font-size: 9pt;
    }
}

.navbar-light {
    font-size: 12pt;
}

.statistik-bg {
    background: #5c0100 !important;
}

footer, footer a {
    color: #fff !important;
}

.row-daftar-pekerjaan .card {
    min-height: 30rem;
}

.running-text {
    padding: 0.4rem 1rem !important;
}

h1 {
    font-size: 1.9rem !important;
}

h2 {
    font-size: 1.6rem !important;
}

h3 {
    font-size: 1.45rem !important;
}

h4 {
    font-size: 1.3rem !important;
}

h5 {
    font-size: 1.15rem !important;
}

h6 {
    font-size: 1rem !important;
}

.hero-custom {
    margin-top: -4rem;
    height: 26rem;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-left: -2.75rem;
    margin-right: -2.75rem;
    padding: 10rem 8rem;
    width: calc(100% + 4.75rem);
}

.hero-custom.hero-home {
    width: calc(100% + 3.5rem);
}

.hero-custom h1 {
    margin-bottom: 1rem;
}

.navbar {
    background-color: rgb(253, 253, 253);
}

.nav-item {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

.form-group {
    margin: 0.5rem 0 0.5rem 0;
}

label {
    font-weight: bold;
}

.nav-link.active {
    font-weight: bold;
}

.navbar-light a {
    color: #222;
}

.body-content {
    background: rgb(255, 255, 255);
    padding: 3rem 2rem;
}

.wrapper {
    padding: 1rem 2rem;
}

.wrapper-home {
    padding: 2rem;
}

.wrapper-mini {
    padding: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

.card-header-spacer {
    height: 3rem;
}

.profile-image {
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border: 0.2rem solid #fff;
    box-sizing: border-box;
}

.body-link {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.color-white {
    color: #fff;
}

.mark-job {
    float: right;
    font-size: 1.4rem;
    cursor: pointer;
}

.profile-image.lg {
    margin: 0rem auto;
    width: 5rem;
    height: 5rem;
    margin-top: -3.5rem;
}

input.custom-cari{
    background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  padding:1rem;
}
button.custom-btn-cari{
    background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  padding:1rem;
}

select.custom-select {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
     /* 
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
     calc(100% - 2.5em) 0.5em; */
        calc(100% - 20px) calc(1.5em + 2px),
        calc(100% - 15px) calc(1.5em + 2px),
        calc(100% - 2.5em) 1em; 

    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
    padding:1rem;
  }
  
.navbar-auth {
    background: #d32020 !important;
}

.navbar-auth a {
    color: #fff !important;
}

.dropdown-menu a {
    color: #000 !important;
}

.hero-bg {
    background: #5c0100;
    height: 10rem;
    margin-left: -4rem;
    margin-right: -4rem;
    box-sizing: border-box;
    margin-top: -4rem;
    color: #fff;
    padding: 1rem 4rem;
}

h1, h2, h3, h4 {
    color: rgb(143, 0, 0);
}

.hero-card {
    margin-top: -5rem;
    box-shadow: 0.2rem 0.2rem 0.2rem rgba(40, 40, 40, 0.2);
}

.hero-wrapper {
    margin-left: -2rem;
    margin-right: -2rem;
}

.hero-header {
    font-size: 3rem;
}

.hero-subheader {
    font-size:1.25rem;
    margin-top:-1rem;
}

.hero-mini {
    height: 22rem !important;
}

.upper-wrapper {
    margin-top: -4rem;
    background: rgb(255, 255, 255);
    margin-left: 2rem;
    margin-right: 2rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.mobile-show {
    display: none;
}

.navbar-auth {
    background: #d32020 !important;
}

.pekerjaan-top {
    margin-top: -4rem;
}

.pekerjaan-top-2 {
    margin-top: -1rem;
}

.content-top {
    margin-top: 4rem;
}

.btn-primary {
    background-color: rgb(143, 0, 0) !important;
    border-color: rgb(143, 0, 0) !important;
}

.berita-thumbnail {
    height: 12rem;
}

@media screen and (min-width: 1280px){
    .navbar-transparent {
        background: transparent !important;
    }
}

@media screen and (max-width: 1200px){
    .pekerjaan-top {
        margin-top: 0;
    }

    .content-top {
        margin-top: 0rem;
    }

    .hero-bg {
        margin-left: -4rem;
        margin-right: -2rem;
    }
}

@media screen and (max-width: 720px){
    .card-body {
        padding: 0.5rem !important;
        font-size: 9pt !important;
    }

    .berita-thumbnail {
        height: 6rem;
    }

    .hero-mini {
        height: 15rem !important;
    }

    .content-top {
        margin-top: 1rem;
    }

    .pekerjaan-top-2 {
        margin-top: -4rem;
    }

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

    .hero-bg {
        margin-left: -2rem;
        margin-right: -2rem;
    }

    .navbar-collapse {
        margin-top: 1.5rem;
    }

    .body-content {
        padding: 1rem;
    }

    .desktop-show {
        display: none;
    }

    .mobile-show {
        display: block;
    }

    .upper-wrapper {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .hero-header {
        font-size: 1.8rem;
    }

    .hero-subheader {
        font-size: 1rem;
    }

    .hero-wrapper {
        box-sizing: border-box;
        width: calc(100% - 1rem);
    }

    .hero-custom {
        margin-top: -3rem;
        margin-left: 0rem;
        margin-right: 0rem;
        width: calc(100% + 4rem);
        padding: 5rem 2rem 2rem 2rem;
        height: 24rem;
    }

    .form-control {
        font-size: 7pt !important;
    }

    button.custom-btn-cari {
        padding: 0.25rem;
    }

    .btn-cari-lg {
        padding: 0.47rem !important;
    }

    .hero-custom.hero-home {
        width: calc(100% + 1.7rem);
        margin-top: -4rem;
        margin-left: -1rem;
    }

    .wrapper {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0rem;
    }

    h1 {
        font-size: 1.4rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    h3 {
        font-size: 1.2rem !important;
    }
    
    h4 {
        font-size: 1.1rem !important;
    }
    
    h5 {
        font-size: 0.95rem !important;
    }
    
    h6 {
        font-size: 0.8rem !important;
    }

    body {
        font-size: 0.8rem !important;
    }

    input.custom-cari {
        padding: 0.6rem;
    }

    select.custom-select {
        padding: 0.6rem;
    }

    .btn {
        font-size: 0.7rem;
    }
}