g/* Move down content because we have a fixed navbar that is 50px tall */

@font-face {
    font-family: 'URWGeometricExtraBold';
    src: url('../fonts/URWGeometricExtraBold.otf') format('opentype');
}
@font-face {
    font-family: 'GE_SS_Text_Bold';
    src: url('../fonts/GE_SS_Text_Bold.otf') format('opentype');
}
@font-face {
    font-family: 'GE_SS_Text_Light';
    src: url('../fonts/GE_SS_Text_Light.otf') format('opentype');
}
@font-face {
    font-family: 'GE_SS_Text_Medium';
    src: url('../fonts/GE_SS_Text_Medium.otf') format('opentype');
}
@font-face {
    font-family: 'URWGeometricBold';
    src: url('../fonts/URWGeometricBold.otf') format('opentype');
}

@font-face {
    font-family: 'URWGeometricBlack';
    src: url('../fonts/URWGeometricBlack.otf') format('opentype');
}

@font-face {
    font-family: 'URWGeometricExtraLight';
    src: url('../fonts/URWGeometricExtraLight.otf') format('opentype');
}

@font-face {
    font-family: 'URWGeometricSemiBold';
    src: url('../fonts/URWGeometricSemiBold.otf') format('opentype');
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: 'URWGeometricBold';
}
.LoaderAll {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.loadingImage {
    width: 350px;
    margin-top:100px;
}
@media only screen and (max-width: 500px) {
    .loadingImage {
        width: 300px;
    }
    .navbar-inverse .navbar-toggle {
        border-color: #7d387b;
        margin-right: 45% !important;
    }

    .imgWlc {
        padding-bottom: 20px !important;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #7d387b;
    }

    .pub-def {
        margin-left: 60% !important;
    }
}
/*.navbar-btnmz:hover {
    color: white !important;
    background-image: linear-gradient(to left, #b62f7d, #6b337f) !important;
}*/
@media only screen and (max-width: 800px) {
    .navbar-inverse .navbar-toggle {
        border-color: #7d387b;
        margin-right: 45% !important;
    }

    .imgWlc {
        padding-bottom: 20px !important;
    }

    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #7d387b;
    }

    /*.pub-def {
        margin-left: 60% !important;
    }*/
    .navbar-right.nv-rt {
        margin-right: 400px;
    }
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
   /* padding-left: 15px;
    padding-right: 15px;*/
   width:100%;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #333333 !important;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    /*color: #fff !important;*/
    background-color: white !important;
}
a:hover, a:focus {
    /*   color: #7d387b ;*/
    text-decoration: none !important;
}
sub-cl {
    background-image: linear-gradient(to left, #b62f7d, #6b337f) !important;
    color: white !important;
}
.btn-a {
    font-family: 'URWGeometricSemiBold', sans-serif !important;
    color: #424242 !important;
    font-size:13px !important;
}
.btn-ar {
    font-family: 'GE_SS_Text_Medium' !important;
    color: #424242 !important;
}
.btn-ab {
    font-family: 'URWGeometricSemiBold', sans-serif !important;
    color: #7d387b !important;
}
.btn-abar {
    font-family: 'GE_SS_Text_Medium' !important;
    color: #7d387b !important;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

.navbar-inverse {
    /*background-color: #222;*/
    background-color: white;
    border-color: #080808;
}

    .navbar-inverse .navbar-nav > li > a {
        color: #424242;
    }

.navbar-btn {
    margin-left: 30px;
}

.navbar-btnzm {
    background-image: linear-gradient(to left, #b62f7d, #6b337f); /* Gradient background */
    color: white; /* Text color on hover */
    border-radius: 12px;
}

.navbar-btnmz {
    background-color: white; /* Set the background color */
    border: 2px solid #6b337f; /* Set the border to a solid 2px */
    color: #424242; /* Text color */
    border-image-slice: 1; /* Ensure the entire border is covered by the gradient */
    border-radius: 12px;
}


.navbar-navz {
    margin-left: 50px;
    font-family: 'URWGeometricBold';
}

.title-wlc {
    color: #7d387b !important;
}

.image-container {
    width: 100%;
    height: 100%;
    overflow: hidden; /* To ensure the image does not overflow the container */
}

    .image-container img {
        width: 100%;
        height: auto; /* This will maintain the image's aspect ratio */
    }
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

h3 {
    font-size: 18px;
}

h2 {
    font-size: 23px;
}

.mid {
    text-align: center !important;
}

.title-ft {
    color: #7d387b !important;
    font-size: 14px !important;
}

ul, ul li {
    list-style-type: none !important;
}

.footer-links p {
    display: inline;
    /* Add some spacing between the links */
}

.mrg-rght {
    margin-left: 60%;
    color: #7d387b;
}

.mrg-smrght {
    margin-left: 20px;
    color: #7d387b;
}
.englang {
    font-family: 'URWGeometricSemiBold', sans-serif !important;
}
.footer-end {
    background-color: white;
    height: 10px;
   /* margin-top: 15px;*/
    padding-top: 0;
    margin-bottom: 5px;
    padding-bottom: 0;
}

.navbar-inverse .navbar-nav > li > a {
    color: #424242;
    font-family: 'URWGeometricBold';
}

.sign-me-up {
    margin-top: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #424242;
    font-family: 'URWGeometricBold' !important;
    margin-left: 100px;
}
.sign-me-upar {
    margin-top: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #424242;
    font-family: 'GE_SS_Text_Medium' !important;
    margin-left: 100px;
}
.form-controll {
    display: inline-block;
    width: 50%;
    border-radius: 7px;
    margin-top: 15px;
}

.btncz {
    /*width: 20%;*/
    font-size: 12px;
    height: 26px;
}

.nv-rt {
    margin-top: 15px;
    left: 50px;
    position: absolute;
}

.ft-one {
    margin-top: 0px;
    padding: 0;
}

.news-section {
    display: flex; /* Use flexbox to make them appear on the same line */
}

.new-see {
    margin-left: 820px !important;
    margin-top: 15px;
}

@media only screen and (max-width:800px) {
    /* For tablets: */
    .new-see {
        margin-top: 60px !important;
        margin-left: -50px !important;
    }

    .law-see {
        /*margin-top: 100px !important;*/
        margin-left: -200px !important;
    }
    .laww-see {
        margin-top: 100px !important;
        margin-left: -200px !important;
    }

    .wlc-two {
        margin-top: 15px;
    }

    .navbar-inverse .navbar-toggle {
        border-color: #7d387b;
        margin-right: 0px !important ;
    }
    #headrEn {
        margin-left: 0px !important;
        margin-right:0px !important;
    }

        .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
      /*  width: 400px;*/
        text-align: center;
    }

    .midd {
        text-align: center;
    }

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
        color: #424242;
        background-color: none !important;
    }

    .about-us {
        margin-left: 200px;
    }

    .art-titt {
        width: 300px;
        margin-left: 200px;
    }

    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
        background-color: none;
        border-color: none;
    }

    .desktop-only {
        display: none; /* Hide on screens <= 768px wide */
    }

    .mobile-only {
        display: block;
    }

    .pub-def {
        margin-left: 0% !important;
    }
   
}


@media (width: 800px) and (height: 1200px) and (orientation: portrait) {

    inverse .navbar-form {
       /* width: 750px !important;*/
        text-align: center;
    }

}
@media (max-width: 800px) {
    .desktop-only {
        display: none !important; /* Hide on screens <= 768px wide */
    }

    .mobile-only {
        display: block !important;
    }
    .navbar-toggle {
        display: block !important;
    }

    /* make header behave like collapsed mode */
    .navbar-header {
        float: none !important;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }

        /* when opened (Bootstrap adds .in) show it */
        .navbar-collapse.collapse.in {
            display: block !important;
        }
    .navbar-nav {
        float: none !important;
       /* margin: 8.5px 5px !important;*/
    }

        .navbar-nav > li {
            float: none !important;
        }

            .navbar-nav > li > a,
            .navbar-nav > li > button {
                padding-top: 10px;
                padding-bottom: 10px;
            }
    .mobile-only {
        display: block;
        margin-left: 37% !important;
        width: 200px;
        background-color: #7d387b;
        color: white;
    }
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: #101010;
    }
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        max-height: 450px;
    }
    #headAr #myTopnav {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    #headAr.navbar-inverse .navbar-toggle,
    #headAr .navbar-inverse .navbar-toggle,
    #headAr .navbar-toggle {
        border-color: #7d387b !important;
        /*margin-right: 75% !important;*/
    }
}
@media only screen and (max-width:500px) {
    /* For mobile phones: */
    .new-see {
        margin-top: 60px !important;
        margin-left: -50px !important;
    }
    .nv-rt {
        margin-right: auto;
        text-align: center;
        display: contents;
        width: 50%;
    }
    .pub-def{
        width:100% !important;
    }
    .law-see {
        margin-top: 0px !important;
        margin-left: 50px !important;
        right: 5px !important;
    }
    .laww-see {
        margin-top: 100px !important;
        margin-left: -200px !important;
    }
    .wlc-two {
        margin-top: 15px;
    }

    .navbar-inverse .navbar-toggle {
        border-color: #7d387b;
        margin-right: 400px;
    }

    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        width: 400px;
        text-align: center;
    }

    .midd {
        text-align: center;
    }

    .midd2 {
        margin-right: 80px !important;
        text-align: center !important;
    }

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
        color: #424242;
        background-color: none !important;
    }

    .about-us {
        margin-left: 200px;
    }

    .art-titt {
        width: 300px;
        margin-left: 200px;
    }

    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
        background-color: none;
        border-color: none;
    }

    .desktop-only {
        display: none; /* Hide on screens <= 768px wide */
    }

    .mobile-only {
        display: block;
    }
}

.artmid2 {
    margin-right: 40%;
}
.law-see {
    /*margin-left: 800px;*/
    right: 50px;
    position: absolute;
    margin-top: 15px;
}
.laww-see {
    margin-left: 735px;
    margin-top: 15px;
}

.midd {
    margin-right: 460px;
    text-align: center;
}

midd2 {
    margin-right: 460px;
    text-align: center;
}

.dropdown {
    position: static; /* Ensure the parent is not positioned relative/absolute */
}

/*.dropdown-menu {
    width: 1300px;
    margin-left: -220px;
    height: 140px;
}*/
.data-menu {
    width: 1350px;
    margin-left: -410px;
    height: 425px;
}

.new-menu {
    width: 1350px;
    margin-left: -330px;
    height: 140px;
}

.about-menu {
    width: 1360px;
    margin-left: -250px;
    height: 140px;
}

.who-menu {
    width: 1360px;
    margin-left: -540px;
    height: 140px;
}

.serv-menu {
    width: 1360px;
    margin-left: -660px;
    height: 140px;
}

.dropdown-menu::before {
    display: none; /* Hide the caret */
}

.dropdown-menu > li > a:hover {
    text-decoration: underline; /* Add underline on hover */
}

.img-about {
    width: 100px;
    height: 70px;
    border-radius: 8px;
    float: right;
    margin-right: 50px;
}

.about-para {
    float: left;
    width: 150px;
}

.abt {
    padding: 10px;
    margin-top: 20px;
    width: 150px;
}

.abt-drp {
    margin-top: 30px;
}

.custom-div {
   /* margin-left: 70px;*/
    border-right: 1px solid black; /* You can change the color and width as needed */
   /* height: 100px;*/ /* Specify a height for your div if necessary */
}
.custom-divv {
   
    border-right: 1px solid black; /* You can change the color and width as needed */
    height: auto; /* Specify a height for your div if necessary */
}
.custom-div-prime {
    margin-left: 70px;
    border-right: 1px solid black; /* You can change the color and width as needed */
    /* Specify a height for your div if necessary */
}

.sinup {
    height: 30px;
    margin-top: 0;
    padding-top: 5px !important;
    border: 2px solid #6b337f;
}

.supin {
    height: 30px;
    margin-top: 0;
    color: white;
    padding-top: 5px !important;
    background-image: linear-gradient(to left, #b62f7d, #6b337f);
}
#headAr ul.nav.navbar-nav li {
   margin-right: 20px; /* Adjust this value as needed */
}


.rd-more-btn {
    margin-right: 30px !important;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
        margin-left: 100px;
        /* text-align: center; */
        width: 200px;
        background-color: #7d387b;
        color: white;
    }

    .desktop-only {
        display: none;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: white;
        font-family: 'URWGeometricBold';
    }

    .out {
        background-color: #7d387b;
    }
}

/* Desktop-specific styles */
/*@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
}*/

.jadwalModal {
    background-color: #0f3347;
    border: 1px solid;
    padding: 10px;
    z-index: 999999;
    position: absolute;
    top: 100px;
    border-radius: 20px;
    left: 150px;
    display: none;
}

#JadwalModalBody {
    height: 400px;
    overflow-y: auto;
}

.jadwalDivs {
    margin: 10px;
}