@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

/* responsive */
@media only screen and (max-width: 600px) {
    .column-sm {
        flex-direction: column !important;
    }

    .colrev-sm {
        flex-direction: column-reverse !important;
    }

    .event-search {
        top: 15% !important;
        ;
    }

    .photo-sm {
        width: 70%;
    }

    .text-event {
        font-size: 20px !important;
    }

    .image-org {
        filter: url(#colorFilter);
    }

    .map-sm {
        width: 300px !important;
        margin-top: 150px !important;
    }

    .icon {

        font-size: 20px !important;
    }

    .icon-sm {
        width: 50px !important;
        height: 50px !important;
    }

    .h-screen {
        height: 100%;

    }

    .ml0 {
        margin-left: 0px !important;
    }

    /* slider */
    .swiper-slide {
        height: 100% !important;
    }

    .slide-captions {

        left: 0% !important;

    }

    .current-title {
        font-size: 12px;
    }

    .form-search button {
        background-color: #0b4238 !important;
        color: #ffffff;
    }



    .current-subtitle {
        font-size: 10px;
    }

    .swiper-button-next::after {
        font-size: 20px !important;
    }


    .swiper-button-prev::after {
        font-size: 20px !important;
    }

    .swiper-button-prev {
        padding: 30px !important;
    }

    .swiper-button-next {
        padding: 30px !important;
    }

    /* slider */

}

/* swiper slider */

.img-shadow:hover {

    scale: 1.1;
}

.slide-captions {
    position: absolute;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #204b37;
    opacity: 85%;
    top: 90%;
    left: 5%;
    color: #FFF !important;
    z-index: 999;
    transform: translateY(-90%);
}

.swiper-button-next {
    opacity: 75%;
    padding: 40px;
    background-color: #204b37;
    color: #fff !important;
    border-radius: 100%
}


.swiper-button-prev {
    opacity: 65%;
    padding: 40px;
    background-color: #204b37;
    color: #fff !important;
    border-radius: 100%
}

.swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* swiper slider */

/* responsive */

.cardhv :hover {
    -webkit-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    border-style: solid;
    border-width: 2px !important;
    border-color: #3F8664 !important;
    border-radius: 20px !important;
    transform: scale(1.1);
    transition: 0.2s;
}

.akses :hover {
    -webkit-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
}

.modal-img {
    width: 25px;
    height: 25px;
}

.modalkc {
    position: absolute;
    display: none;
    background-color: #eaeaea;
    color: #333;
    border-width: 2px !important;
    border-color: #3F8664;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 5px !important;
    width: fit-content !important;
    height: fit-content !important;
}



.ignore-hv {
    pointer-events: none;
}

.button-green {
    background-color: #3F8664;
    color: #FFF;
}

.button-green:hover {
    background-color: #204b37;

}

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


.no-underline :hover {
    text-decoration: none !important;
    color: #000;
}

.h-screen {
    height: 100%;
    min-height: 100vh;
}

#navbar {
    background-color: #d9d9d9 !important;
}

.resize-none {
    resize: none;
    width: auto;

}

.link {
    color: #3F8664 !important;
    ;
}

.link:hover {
    color: #204b37 !important;
    ;
}

.shadow {
    -webkit-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
}

.box {
    border-style: solid;
    border-width: 2px !important;
    border-color: #3F8664 !important;
    border-radius: 20px !important;

}




.no-border {
    border: 0;
    outline: 0;
}

.boxy {
    border-style: solid;
    border-width: 2px;
    border-color: #3F8664 !important;
    border-radius: 15px !important;

}

.boxy:hover {
    border-width: 3px;
}

.shadowhv:hover {
    -webkit-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.32);
}



.pas-photo {
    width: 150px;
    object-fit: cover;
}

.box-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.required label:after {
    color: #e32;
    content: ' *';
    display: inline;
}

.boxx {
    border-style: solid;
    border-width: 2px !important;
    border-color: #4e69b4 !important;
    border-radius: 10px !important;

}

.wrapper-bg {

    width: 50%;
}

.text-map {
    fill: #3F8664;
    stroke: none;
    font-weight: 500;

}

.inter {
    font-family: 'Inter', sans-serif;
    font-family: 'Montserrat', sans-serif;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.center1 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

}

.text-green {
    color: #3F8664;
}

.img-profile {
    filter: grayscale(0%);

}

.img-profile:hover {
    filter: grayscale(100%);
}

.text-green-dark {
    color: #0b4238;
    font-weight: 700;
}

.row {
    align-items: center;
    flex-direction: row;
}

.display-row {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: row;
}

.display-col {
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
}

.circle {
    border-radius: 100%;
}

.footer {
    background-color: #3f8664 !important;
    color: #ffffff !important;
}


/* homepage */
.map {
    margin-top: 30px;
}

.cls-1:hover {
    fill: #00dc58;
    text-decoration: none;

}

.resize-none {
    resize: none;
}

.cls-2:hover {
    fill: #336666;
}

.cls-3:hover {
    fill: #990000;
}

.cls-4:hover {
    fill: #99cccc;
}

.cls-5:hover {
    fill: #ff6666;
}

.cls-6:hover {
    fill: #ffbc8d;
}

.cls-7:hover {
    fill: #ff6600;
}

.cls-8:hover {
    fill: #ffcc00;
}

.cls-9:hover {
    fill: #ff99cc;
}

.cls-10:hover {
    fill: #990000;
}

.button {
    background-color: #3F8664 !important;
    stroke: #3F8664 !important;
}

.buttonsc {
    color: #3F8664 !important;
}

.button:hover {
    background-color: #204b37 !important;
}

.buttonsc:hover {
    background-color: #3f7586 !important;
    color: #d9d9d9 !important;
    border-style: none !important;

}

.button-outline {
    font-size: 12px;
    display: block;
    text-align: center;
    width: 150px;
    border-radius: 10px;
    padding: 5px;
    border-style: solid !important;
    border-width: 2px !important;
    color: #3F8664 !important;
}


.button-outline:hover {
    text-decoration: none;
    background-color: #3F8664 !important;
    stroke: none;
    color: #ffffff !important;
}

.button-outline:hover,
.button-outline:focus,
.button-outline:active,
.button-outline.active {
    text-decoration: none;
    background-color: #3F8664 !important;
    stroke: none;
    color: #ffffff !important;
}

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

.iconwr1 {
    background-color: #195772;
    width: 75px;
    height: 75px;
}

.iconwr2 {
    background-color: #feedb8;
    width: 75px;
    height: 75px;
}

.iconwr3 {
    background-color: #fed5b8;
    width: 75px;
    height: 75px;
}

/* svg text */
.cls-1:hover #cls1 {
    display: block !important;
    ;

}

/* svg text */
/* styling table */
.tbl {
    border-collapse: separate !important;
    border-spacing: 0;
}

.tbl tr th,
.tbl tr td {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.tbl tr th:first-child,
.tbl tr td:first-child {
    border-left: 1px solid #dee2e6;
}

.tbl tr th {
    border-top: 1px solid #dee2e6;
}


.tbl tr:first-child th:first-child {
    border-top-left-radius: 0.5rem;
}

.tbl tr:first-child th:last-child {
    border-top-right-radius: 0.5rem;
}


.tbl tr:last-child td:first-child {
    border-bottom-left-radius: 0.5rem;
}

.tbl tr:last-child td:last-child {
    border-bottom-right-radius: 0.5rem;
}

.thead {
    background-color: #3f8664 !important;
    color: #ffffff !important;
    border-radius: 10px 10px 0px 0px !important;

}

/* styling table */
/* styling berita */
.news-container {
    display: flex;
    flex-wrap: wrap;

}

.news-wrapper {
    width: 350px;
    height: 100px;

}

.news-photo {
    width: 350px;
    height: 230px;
    object-fit: cover;
}

/* styling berita */
/* styling berita by-id */


.news-wrapper-byid {
    width: 70%;

}

/* styling berita by-id */

/* homepage */
/* Organisasi Kepemudaan Page */



.wrapper-wrap {
    display: flex;
    flex-wrap: wrap;
}

.card-footer.card-custom {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    background-color: #3f8664 !important;
    color: white !important;
}


/* Organisasi Kepemudaan Page */
.photo {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    object-fit: cover;
}

/* Organisasi Kepemudaan Page end */


/* Dokumen page */
.table-card {
    background-color: #ffffff;
    border-radius: 10px;

}

/* Dokumen page */
/* pagination style */
.page-item.active .page-link {
    z-index: 3;
    color: #ffffff !important;
    background-color: #3f8664 !important;
    border-color: #0b4238 !important;
    border-radius: 50%;
    padding: 6px 12px;
}

.page-link {
    z-index: 3;
    color: #3f8664 !important;
    background-color: #ffffff;
    border-color: #0b4238;
    border-radius: 50%;
    padding: 6px 12px !important;
}

.page-item:first-child .page-link {
    border-radius: 30% !important;
}

.page-item:last-child .page-link {
    border-radius: 30% !important;
}

.pagination li {
    padding: 3px;
}

.disabled .page-link {
    color: #212529 !important;
    opacity: 0.5 !important;
}

.svg-tag:hover {
    fill: #0b4238;
    stroke: #ffffff;
}

.photo-sm {
    width: 500px;
    object-fit: cover;


}




/* pagination style end */
.hide {
    display: none;
}