/* Mengubah lebar, warna latar belakang, dan warna teks input */
.select2-container .select2-selection--single {
    width: 100%;
    background-color: #0080ff;
    color: #000000;
}

/* Mengubah border-radius, warna garis, dan margin input */
.select2-container .select2-selection--single .select2-selection__rendered {
    height: 38px;
    border-radius: 5px;
    border: 1px solid #D2D6DA;
    padding: .25rem .75rem;
}

/* Mengubah tampilan dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    right: 10px; /* Sesuaikan dengan jarak dari sisi kanan */
    top: 50%; /* Mengatur posisi ikon di tengah vertikal */
    transform: translateY(27%); /* Menggeser ikon ke atas sejauh setengah dari tingginya */
}


/* Mengubah tampilan option pada dropdown */
.select2-results__option {
    padding: .375rem .75rem;
    color: #333; /* Warna teks option */
    background-color: #f8f9fa; /* Warna latar belakang option */
}

/* Mengubah tampilan option pada dropdown saat dihover */
.select2-results__option:hover {
    background-color: #dee2e6; /* Warna latar belakang option saat dihover */
}

/* Mengubah tampilan option yang dipilih */
.select2-results__option[aria-selected=true] {
    background-color: #b1b1b1; /* Warna latar belakang option yang dipilih */
    color: #fff; /* Warna teks option yang dipilih */
}

[data-n-id] rect {
    fill: #4AAAC0;
}

[data-n-id='1'] rect {
    fill: #4AAAC0;
}

.node.red rect {
    fill: #4AAAC0;
}


[data-c-l-from]:hover {
    cursor: pointer !important;
}

[data-c-l-from]:hover>path:first-child {
    stroke-width: 3;
}

.boc-edit-form-header {
    border-top-left-radius: 15px;
    background-color: #4AAAC0 !important;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.field_0 {
    fill: #ffffff;
}

.field_1 {
    fill: #ffffff;
}


.custom-edit-form {
    padding: 20px;
}

.custom-edit-form .form-group {
    margin-bottom: 15px;
}

.custom-edit-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.custom-edit-form input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.custom-edit-form .profile-img {
    max-width: 100px;
    border-radius: 5px;
}

.boc-img-button {
    background-color: #4AAAC0; /* Change this to your desired color */
}

.boc-img-button:hover {
    background-color: #4AAAC0; /* Optional: Change color on hover */
}

.content-dashboard {
    height: 500px;
}

/* Include the CSS adjustments here */
#sidenav-main {
    display: none; /* Hide by default */
    transition: transform 0.3s ease;
    transform: translateX(-100%);
}

#sidenav-main,
#sidenav-small-main {
    display: none; /* Hide by default */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
/* Show sidenav-small-main on small screens when toggled */
#sidenav-small-main.show {
    display: block;
    transform: translateX(0);
}

  /* Show sidebar in desktop view */
  @media (min-width: 1200px) {
    #sidenav-main {
        display: block;
        transform: translateX(0);
    }
    #sidenav-small-main {
        display: none;
    }
    .photo_card {
        width: 250px;
        height: 250px;
        box-shadow: 100px;
    }
    .photo_card_box {
        width: 150px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom:10px;
    }
    .photo_card_body {
        padding:2px ;
        max-width: 150px;
        max-height: 150px;
    }
}

/* Global CSS rule for elements on small screens */

@media (min-width: 1201px) {
    .nav-link {
        height: 50px;
    }
    .nav-link h6 {
        height: 50px;
    }
    .button-tab-action {
        font-size: 11px;
        margin-bottom:0px;
    }
    .icon-tab-action {
        font-size: 11px; /* Adjust global font size for smaller screens */
        margin-right:8px;
    }

    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
        list-style: none;
    }

    .pagination li {
        margin: 1px;
    }

    .pagination .page-link {
        border-radius: 50%;
    }

    .pagination .page-link:hover {
        color: #fff;
        background-color: #00526B;
        border-color: #00526B;
    }

    .pagination .page-item.active .page-link {
        color: #fff;
        background-color: #00526B;
        border-color: #00526B;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
        border-color: #dee2e6;
    }

    .pagination .page-item {
        flex: 1;
    }
}
@media (max-width: 1200px) {
    .nav-item {
        text-align: center;
        margin-bottom: 2px;
    }
    .nav-link {
        padding: 0.4rem; /* Adjust padding for smaller screens */
        height: 30px;
    }
    .nav-link h6 {
        font-size: 0.35rem; /* Adjust font size for smaller screens */
        height: 30px;
    }
    body {
        font-size: 0.7rem; /* Adjust global font size for smaller screens */
    }
    .card-header {
        font-size: 0.7rem; /* Adjust global font size for smaller screens */
    }
    .title-font-size {
        font-size: 1rem; /* Adjust global font size for smaller screens */
    }
    .dynamic-font-size {
        font-size: 0.7rem; /* Adjust global font size for smaller screens */
    }
    .dynamic-org-size {
        font-size: 1.09rem; /* Adjust global font size for smaller screens */
        margin-top: 4px;
    }
    .button-tab-action {
        font-size: 11px; /* Adjust global font size for smaller screens */
        margin-bottom:0px;
    }
    .icon-tab-action {
        font-size: 11px; /* Adjust global font size for smaller screens */
        margin-right:4px;
    }
    .photo_card {
        width: 160px;
        height: 160px;
        box-shadow: 50px;
        font-size: 0.5rem;
    }
    .photo_card_box {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom:5px;
        font-size: 0.5rem;
    }
    .photo_card_body {
        padding:2px ;
        max-width: 80px;
        max-height: 80px;
    }
    .photo_upload {
        font-size: 0.4rem;
    }


}

@media (min-width: 576px) {
    .pagination .page-link {
        border-radius: 50%;
    }
}

@media (max-width: 575.98px) {
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
        list-style: none;
    }

    .pagination li {
        margin: 1px;
    }

    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.5rem; /* Adjust padding as needed */
        border: 1px solid #dee2e6;
        color: #00526B;
        text-decoration: none;
        background-color: #fff;
        border-radius: 0; /* Set border-radius to 0 for square shape */
        min-width: 70px; /* Ensure minimum width to accommodate the text */
        font-size: 10px; /* Adjust font size for smaller screens */
    }

    .pagination .page-link:hover {
        color: #fff;
        background-color: #00526B;
        border-color: #00526B;
    }

    .pagination .page-item.active .page-link {
        color: #fff;
        background-color: #00526B;
        border-color: #00526B;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d;
        pointer-events: none;
        background-color: #fff;
        border-color: #dee2e6;
    }

}

@media (max-width: 767.98px) {
    .btn {
        font-size: 0.6rem; /* Smaller font size for buttons */
        height: 25px; /* Smaller height for buttons */
    }

    .form-control-sm {
        font-size: 0.6rem; /* Smaller font size for input */
    }
    .btn-dashboard {
        width: 50px;
    }
    .text-btn-dashboard {
        margin-left: -17px;
    }
    .content-dashboard {
        height: 350px;
    }
}