/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
body {
    margin: 0;
    font-family: "Montserrat", Helvetica, Arial, serif;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.1;
    color: #626262;
    text-align: left;
    background-color: #f8f8f8;
}
body#beranda {
	background-color: #796997;
	color: #fa7272;
}
#navshadow.header-navbar-shadow {
    background: linear-gradient(180deg, rgba(74, 71, 104, 0.95) 44%, rgba(85, 73, 108, 0.46) 73%, rgba(255, 255, 255, 0)) !important;
}
#beranda > .footer {
	color: #ffffff;
}
#beranda > .footer a {
	color: #c6c1fa !important;
}
#beranda .card {
	background-color: #57496e !important;
}
#beranda .card.card-block {
	background-color: #dfd5f3 !important;
}
#beranda .text-primary {
    color: #cec9ff !important;
}
#beranda #dashboard-analytics h3 {
	color: #fca300;
}


.navigation {
    font-size: 0.9rem !important;
}
.main-menu.menu-light .navigation li a {
    line-height: 1.7 !important;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
    font-size: 1.3rem;
}
table.dataTable thead tr {
    background-color: #f4f1ff;
}
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before {
    content: "\e845" !important;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
    content: "\e842" !important;
}
table.dataTable tfoot th {
    font-size: 0.9rem;
    border: 0;
    font-weight: 600;
    font-style: italic;
    border-top: 1px dashed #e1ceff;
}
.card-block {
	background-color: #dfd5f3;
	border: 1px solid #fff;
	border-radius: 10px;
}
.card-block2 {
	background-color: #cbd0d9;
	border: 1px solid #fff;
	border-radius: 10px;
}
.card-block3 {
	background-color: #d1c8d9;
	border: 1px solid #fff;
	border-radius: 10px;
}
.nav.nav-tabs.nav-justified .nav-item a.nav-link.active {
    border: none;
    background-color: transparent !important;
}
.form-group label {
    font-weight: 600;
    color: #796997;
    margin-bottom: 2px;
}
.select2-container--bootstrap .select2-selection{
    font-size: 0.85rem;
}
.btn-sm, .btn-group-sm > .btn{
    font-size: 0.75rem;
    padding: 0.65rem 0.65rem;
}
.close {
    display: none;
}
.modal-backdrop.show{
    opacity: 0.5;
}
.modal-backdrop{
    background-color: #000;
}
.modal .select2-container{
    width: 100% !important;
}
 th, td {
    white-space: nowrap;
}
.has-icon-right .toggle-password {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #6e6b7b;
    font-size: 18px;
    cursor: pointer;
}
.has-icon-right .toggle-password:hover {
    color: #7367f0;
}
#loginForm.locked {
    opacity: 0.5;
    pointer-events: none;
}
#loginForm.unlocked {
    opacity: 1;
    pointer-events: all;
}

/* Checkbox size & style */
.custom-control-label {
    margin-top: 2px;
    cursor: pointer;
    font-size: 0.95rem;
}
table.dataTable th{
    text-align: center;
}
table.dataTable th.dt-head-center {
    text-align: center;
}
table.dataTable td.dt-center,
table.dataTable th.dt-center {
    text-align: center;
}

table.dataTable td.dt-right {
    text-align: right;
}

table.dataTable td.dt-left {
    text-align: left;
}

/* Jika ingin panjang kolom tertentu di-limit */
.table-wrap-wide {
    min-width: 180px !important;
    max-width: 190px;          /* opsional */
    white-space: normal !important;
    word-wrap: break-word;
    word-break: break-word;
}

.dataTables_wrapper .dataTables_scrollBody table.dataTable {
    white-space: unset !important;
}

.dataTables_scrollHead table,
.dataTables_scrollBody table {
    width: 100% !important;
}

.dataTables_scrollHead table th,
.dataTables_scrollBody table td {
    white-space: nowrap;
}

.is-invalid {
    border: 2px solid red !important;
}

.is-invalid-select {
    border: 2px solid #dc3545 !important;
    border-radius: 4px !important;
}

#tablePager .btn {
    border-radius: 6px;
}

select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;
  opacity: 0.6; /* Optional: to make it appear slightly faded */
  cursor: no-drop; /* Optional: to change the cursor on hover */
}