.bg-app {
    background-color: #128193;
}

.bg-app1 {
    background-color: #128193;
    border-bottom: 3px solid orange;
}

.bg-app2 {
    background-color: orange;
}

#sidebar {
    height: auto;
    width: 80%;
    max-width: 400px;
    z-index: 1090;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1px;
    margin-right: 1px;
}

#sidebar a {
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: block;
    padding: 15px 20px;
    color: white;
}

#sidebar a.active {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#sidebar a:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#sidebar #logo {
    border-bottom: 5px solid rgba(255, 153, 0, 1);
}

.menu-backend_container {
    display: none;
    background-color: #0d6c7a;
    padding-left: 15px;
}

.menu-backend_dropdown {
    display: block;
    background: none;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-backend_dropdown:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

#overlays {
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1080;
    position: absolute;
    top: 0;
    left: 0;

}

.border-outline {
    border: 1px solid #d1d6dc !important;
}

/* .tabbable .nav-tabs {
    overflow-x:auto !important;
    overflow-y:hidden;
    flex-wrap: nowrap;
 }

 .tabbable .nav-tabs .nav-link {
    white-space: nowrap;
 } */


/* .table thead th { */
.border-bottom-orange {
    /* background-color: rgba(0, 0, 0, 0.2); */
    background-color: white;
    border-bottom: 3px solid rgba(255, 153, 0, 1);

}

/* .table tbody { */
.border-bottom-grey {
    border-bottom: 3px solid rgba(0, 0, 0, 0.2) !important;

}

/* .text-wrap {
    white-space: initial;
} */

.bg-green-50 {
    background-color: rgba(0, 255, 0, 0.1) !important;
}

.bg-gd-light {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
}

.bg-gd-secondary {
    background-image: linear-gradient(#e9ecef, #f8f9fa);
}

.table-detail .col {
    padding: 11px;
    /* margin: 0; */
}

#table-resep_obat tbody tr, #table-pemeriksaan_ralan tbody tr, #table-permintaan_lab tbody tr, #table-permintaan_radiologi tbody tr {
    border-bottom: 3px solid rgba(0, 0, 0, 0.2) !important;
}

.box-password {
    width: 30%; /* Ubah lebar sesuai kebutuhan */
    padding: 20px;
    border: 1px solid #8f8f8f;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(37, 107, 119, 0.1);
}

/* CSS Gelap */
/* Table */

body.bg-dark #table-resep_obat tbody tr, #table-pemeriksaan_ralan tbody tr, #table-permintaan_lab tbody tr, #table-permintaan_radiologi tbody tr {
    border-bottom: 3px solid rgb(76 193 182 / 46%) !important;
}

body.bg-dark .table {
    color: #d8d3cb;
}

body.bg-dark .table-condensed {
    color: #d8d3cb;
}

body.bg-dark .datepicker table tr td:hover {
    color: #bee0f5;
    background-color: #50504f;
}

body.bg-dark .datepicker table tr th:hover {
    color: #bee0f5;
    background-color: #50504f;
}

body.bg-dark .datepicker table tr td.active {
    color: #444858;
    background-color: #d8d3cb;
    background-image: none;
}

body.bg-dark .datepicker table tr td.active.active {
    color: #444858;
    background-color: #d8d3cb;
    background-image: none;
}

body.bg-dark table.table-bordered thead {
    background-color: #444858;
    border-color: #8f8f8f;
    color: #d8d3cb;
}

body.bg-dark table.table-bordered tbody {
    color: #d8d3cb;
    border-bottom: 1px solid 8f8f8f;
}

body.bg-dark table.table-bordered tbody tr {
    border-bottom: solid rgba(255, 255, 255, 0.432) !important;
}

body.bg-dark table.dataTable.table > tbody > tr.selected>* {
    color: #ffffff;
    background-color: #bebebe;
    box-shadow: inset 0 0 0 9999px rgb(41 122 165 / 95%);
}

body.bg-dark table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
    color: #ffffff;
    box-shadow: inset 0 0 0 9999px rgb(41 122 165 / 95%);
    background-color: #bebebe;
}

body.bg-dark div.dts div.dt-scroll-body table {
    color: #d8d3cb;
    background-color: #50504f;
}

body.bg-dark .page-link {
    color: #e8e8ea;
    background-color: #444857;
    border: 1px solid #e8e8ea;
}

body.bg-dark .page-link:hover {
    color: #0056b3;
    text-decoration: none;
    background-color: #e2e7e9;
    border-color: #e2e7e9;
}

body.bg-dark .page-item.disabled .page-link {
    color: #cdcbd3;
    background-color: #444857;
    border-color: 1px solid #444857;
}

body.bg-dark .page-item.active .page-link {
    color: #d8d3cb;
    background-color: #3282b8;
    border: 1px solid #d8d3cb;
}

body.bg-dark .btn-primary {
    background-color: #333333;
    border-color: #555555;
}

body.bg-dark .JudulHeading h1 {
    color: #d8d3cb;
}

body.bg-dark .custom-select {
    background-color: #333333;
    color: #d8d3cb;
}

body.bg-dark .form-control {
    background-color: #333333;
    color: #d8d3cb;
    border-color: #8f8f8f;
}

body.bg-dark .border-outline {
    border-color: #8f8f8f !important;
}

body.bg-dark .filter-option {
    color: #d8d3cb;
    border-color: #8f8f8f;
}

body.bg-dark .dropdown-menu {
    background-color: #333333;
    border-color: #8f8f8f;
}

body.bg-dark .dropdown-item {
    color: #d8d3cb;
}

body.bg-dark .dropdown-item.active {
    background-color: #50504f;
}

body.bg-dark .dropdown-item.active.selected {
    background-color: #50504f;
}

body.bg-dark .dropdown-item:hover {
    background-color: #50504f;
}

body.bg-dark .form-control::placeholder {
    color: #d8d3cb;
}

body.bg-dark .nav-tabs {
    border-color: #8f8f8f;
}

body.bg-dark .nav-tabs .nav-link {
    color: #abc1da;
    margin-bottom: -1px;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

body.bg-dark .nav-link.active {
    color: #d8d3cb;
    background-color: #333333;
    border-left: 1px solid #8f8f8f;
    border-top: 1px solid #8f8f8f;
    border-right: 1px solid #8f8f8f;
}

body.bg-dark .tab-content {
    color: #d8d3cb;
    background-color: #333333 !important;
}

body.bg-dark .bg-gd-light {
    background-image: linear-gradient(rgba(65, 65, 65, 0), rgb(88, 88, 88, 0.15));
}

body.bg-dark .bg-gd-secondary {
    background-image: linear-gradient(#404142, #2a2c2e);
    margin-bottom: 7px;
}

body.bg-dark .fixed-bottom{
    background-color: #343a40 !important;
}

body.bg-dark .input-group-text{
    background-color: #d7d7d7 ;
}

body.bg-dark .btn-light{
    background-color: #404142;
}

body.bg-dark .modal-content{
    background-color: #404142;
}

body.bg-dark .btn-outline-info {
    color: #72d7e7;
    border-color: #72d7e7;
}

body.bg-dark .btn-outline-danger {
    color: #fd707d;
    border-color: #fd707d;
}

body.bg-dark .btn-outline-secondary {
    color: #ced4d9;
    border-color: #ced4d9;
}

[contenteditable].single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding: 11px 11px;
}

[contenteditable].single-line br {
    display: none;
}

[contenteditable].single-line * {
    display: inline;
}





/* Make the sidebar vertical */

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .nav-item {
    padding: 0;
    margin: 0;
    width: 100%;
}

.sidebar .nav-link {
    display: block; /* Ensures link uses the full width of its container */
    padding: 10px 15px; /* Provides internal spacing for the text */
    border: none; /* Optional: Removes border if present */
    width: 100%; /* Stretch to fill container */
}

.sidebar, .sidebar ul, .sidebar .nav-item, .sidebar .nav-link {
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

.nav-pills .nav-link {
    border-radius: 0;
}

.tab-content-container {
    padding-left: 0px;
    background-color: #ffffff;
}

/* Adjust the active tab link style */
.nav-link.active {
    background-color: #ffffff !important;
    color: #241e1e !important;
}

.btnRiwayat {
    position: fixed;
    right: 0;
    top: 25%;
    transform: translateY(-50%);
    z-index: 1000;
}

.previewgambar img {
    height: 50%;
    width: 50%;
}

.icon-container {
    display: inline-block;
    background-color: rgba(31, 120, 255, 0.144);
    padding: 15px;
    border-radius: 50%;
    text-align: center;
}

.icon-container i {
    font-size: 20px;
}

.card-body_soap:hover {
    background-color: #f8f9fa;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    cursor: pointer;
    transition: all 0.3s ease;
}

#canvas_GambarSOAP {
    border: 1px solid black;
    cursor: crosshair;
  }

.small-td {
    padding: 5px !important; /* Mengatur padding */
    font-size: 15px; /* Mengatur ukuran font */
    white-space: nowrap; /* Menghindari teks terpotong */
    /* width: 50px; Menyediakan opsi untuk mengatur lebar */
}

table.surat-rujukan_header{
    font-size: 14px;
    color: #00632b;
    line-height: normal;
    margin-bottom: 15px;
}
table.surat-rujukan_header span.poliklinik{
    letter-spacing: 2px;
    font-size: 26px;
}
table.surat-rujukan_header span.rssm{
    letter-spacing: 2px;
    font-size: 30px;
}
table.surat-rujukan_header td{
    border : none;
    text-align: center;
}

@media (max-width: 1366px) { /* untuk layar medium atau lebih kecil */
    #tab-1 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-evenly !important;
    }

    #tab-1 .nav-item {
        flex-grow: 1 !important;
    }
}