:host /deep/ ng2-smart-table  {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  border-spacing: 0;
  color : #555555;
}
/* :host /deep/ ng2-smart-table tbody > tr > td:first-child { */


:host /deep/ ng2-smart-table thead > tr > th {
  padding :5px;
  font-size: 10px;
  border-bottom: solid #ccc 1px;
}

:host /deep/ ng2-smart-table thead > tr > th:first-child{
  text-align: center;
  padding: 0px;
}
:host /deep/ ng2-smart-table input[type=checkbox] {
  padding : 0px;
  max-height: 15px;
}

:host /deep/ ng2-smart-table tbody > tr > td{
  padding : 0px 2px 0px 2px ;
  font-size: 10px;
  border-bottom: solid #eeefff 1px;
}

.ng2-st-thead-filters-row{
  padding : 0px;
  font-size: 10px;
}

:host /deep/ ng2-smart-table thead > tr.ng2-smart-titles{
  background-color : #eee;
}

.header .left {
  width:450px; display:inline-block; float:left; padding-left:20px;
}

.header .right {
  width:250px; float:right; width:250px; display:inline-block;
}

.navbar-header .navbar-toggle{
  margin:-6px 0px 0px 0px !important;
}

#cont_clock{
  color:#999;font-size:11px;width:auto;display:inline-block;float:right;margin:-35px 8px 0px 0px;
}

ol.breadcrumb{
  background:none !important;
}

tbody > tr:nth-child(odd) {
  background-color: #f4f4f4;
}

tbody > tr:hover{
  background-color : #c0f2f7;
}

div.table_responsive.nostyle > table > tbody > tr:nth-child(odd) {
  background-color: transparent;
}

div.table_responsive.nostyle > table > tbody > tr:hover{
  background-color : transparent;
}

h1.appstitle{
  margin-left: 20px;
  margin-right: 20px;
}

.number
{
	text-align: right;
}

.datepicker{
	display:inline-block !important;
	width:75px !important;
}

.datetimepicker{
	display:inline-block !important;
	width:115px !important;
}

input.datepicker::-webkit-input-placeholder, 
input.datepicker::-moz-placeholder,
input.datetimepicker::-webkit-input-placeholder,
input.datetimepicker::-moz-placeholder {
  font-size: 12px !important;
}

img.ui-datepicker-trigger{
	cursor: pointer;
}

.form-group {
	clear: left !important;
}

select-editor select{
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAHlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC3KG9qAAAACXRSTlMABAcIEi6ytMBZALYlAAAAKElEQVQIW2NgoDIQNjZWgDIzZ86cAmVKzJwZAGUydk6FKxYPYKAhAAC6WQXpt3DHiQAAAABJRU5ErkJggg==") top right no-repeat #fff !important;
  width: 100%;
}

[hidden], .hidden{
	display:none !important;
}

.readonly{
  background: #F2F2F2 !important;
}

div.has-error{}
div.error-block{
  color: rgba(153, 4, 4, 0.741);
  font-size: 10px;
  margin-top: -10px;
  clear: left;
  margin-left: 110px;
}

img.icon-status{
  margin:0 auto;
  width:14px !important;
  height:14px !important;
}

fieldset{
	border: solid #ccc 1px;
	border-radius: 5px;
	padding: 10px 15px;
	margin: 10px 0px;
}

@media (max-width: 992px){
  fieldset{
    padding: 0px 30px !important;
  }
}

div.table_responsive table, .datagrid table, ng2-smart-table table{
  border-top: #ddd solid 1px;
  border-left: #ddd solid 1px;
  border-radius: 4px;
}
div.table_responsive th, div.table_responsive td,
.datagrid th, .datagrid td,
ng2-smart-table th, ng2-smart-table td {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  border-right: #ddd solid 1px;
  border-bottom: #ddd solid 1px;
  padding: 2px 6px;
}
div.table_responsive th a, .datagrid th a,.ng2-smart-titles a{
  color: #374151 !important;
  font-size: 13px;
}
div.table_responsive thead th,
.datagrid thead th,
.ng2-smart-titles th{
  background: #f8fafc !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.datagrid{
  display: block;
  position: relative;
}
.datagrid .action-column{
  width:120px;
}
.datagrid .action-column a.btn-action{
  color: #1e40af;
  margin-left: 5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
}
.datagrid .action-column a.btn-action:hover{
  text-decoration: underline;
}
.datagrid .action-column a.btn-action.first{
  margin-left: 0px;
}
.datagrid .pagination{
  display: table-cell;
}
.datagrid .pagination .separator{
  background: #999;
  width: 1px;
  margin: 0 6px;
  top:4px;
  height:20px;
  position: relative;
  display: inline-block;
}
.datagrid .pagination select, .datagrid input{
  border:#ccc solid 1px;
  border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  max-height:24px;
  padding: 2px 4px;
  margin-left: 4px;
}
.datagrid .row-filter input:focus{
  outline: none;
}
.datagrid .row-filter input{
  width: 98%;
}
.datagrid .pagination input{
  text-align: center;
  width:55px;
}
.datagrid .pagination button{
  background: #eee;
  border:#ccc solid 1px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  margin-left: 2px;
  width:24px;
  height:24px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
}
.datagrid .pagination button:hover{
  background: #fff;
  -moz-box-shadow: 0 0 6px #AAA;
-webkit-box-shadow: 0 0 60px #AAA;
box-shadow: 0 0 6px #AAA;
}
.datagrid .pagination button:disabled,
.datagrid .pagination button[disabled]{
  cursor: auto;
}
.datagrid .pagination button:disabled:hover,
.datagrid .pagination button[disabled]:hover{
  background: #eee;
  -moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.datagrid .datagrid-loading{
  /*background: #eee;*/
  cursor: wait;
  position: absolute;
  opacity: 0.4;
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
}
.datagrid .datagrid-loading .spinkit{
  margin-top:100px;
}

legend{
  font-size: 12px !important;
  width: auto;
  margin-bottom: 0px !important;
}

input::-webkit-input-placeholder {
  font-size: 11px !important;
}

.btn_lov {
	padding:0 2px; height:20px;
}
.btn_lov .material-icons{
	top:0px !important;
}

/* Loading Animation */
.spinkit {
	margin: 0px auto;
	width: 70px;
	text-align: center;
}

.spinkit > div {
	width: 18px;
	height: 18px;
	background-color: #A3A3A3;

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinkit .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinkit .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}
.footer-btn .spinkit {
	width:100%;
	position:absolute;
	top:150px;
}


.barspinner {
  width: 30px;
  height: 25px;
  text-align: center;
  font-size: 10px;
	margin-top: -4px;
	display:inline-block;
}

.barspinner > div {
  background-color: #999;
  height: 100%;
  width: 2px;
	margin: 0 1px 0 0;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.barspinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.barspinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.barspinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.barspinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.readonly {
	padding:3px;
	margin:0px;
	border: 1px solid #9e9e9e;
	background: #dedbdb;
	color:#474646;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline !important;
    padding: 6px 12px;
    cursor: pointer;
    color: #fff !important;
    background: #269ceb;
    -webkit-box-shadow: 5px 5px 10px #eee;
    -moz-box-shadow: 5px 5px 10px #eee;
    box-shadow: 5px 5px 10px #eee;

}
.custom-file-upload:hover {
  border: 1px solid #84c4ef;
  border-radius: 3px;
  background: #ffffff;
  color: #555 !important;
}
table.table-upload {
  /* width: calc(100% - 200px) !important; */
  background: #fff !important;
  /* border: 1px solid #cccccc; */
  /* border-style: solid; */
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
}
table.table-upload > tbody > tr{
  background-color: #fff !important;
}
table.table-upload > tbody > tr > td{
  padding-right: 20px !important;
  vertical-align: top;
}
table.table-upload > tbody > tr > th{
  padding-right: 20px !important;
  vertical-align: top;
}
fieldset{
	/* background: #fff none repeat scroll 0% 0%; */
	border: #CCC solid 1px;
  border-radius: 6px;
  /* box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1); */
  margin-bottom: 10px;
  padding: 5px 20px;
}

legend {
  background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 6px;
	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
	font-size: 12px;
	width: auto;
	margin-bottom: 5px;
	margin-left: 10px;
	padding: 2px 20px;
}
.dropbox {
  width: 300px;
  height: 300px;
  border: 3px dashed #efefef;
  text-align: center;
  vertical-align: middle;
  color: #868e96;
}
.dropbox:hover {
  border: 3px dashed #ddd;
  color: #666;
}
.dropbox span {
  font-size: 1.75rem;
  margin-top: 75px;
  margin-bottom: 15px;
  display: block;
  text-align: center;
  color: #868e96;
}

[_nghost-c0] ng2-smart-table .form-group .form-control{
  width:auto;
}

/* Override untuk memastikan header kolom konsisten */
ng2-smart-table thead tr th,
.ng2-smart-titles th,
ng2-smart-table thead th {
  color: #374151 !important;
  background: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

[_nghost-c11] input[_ngcontent-c11], [_nghost-c11] textarea[_ngcontent-c11]{
  min-width:150px;
  width:auto;
}

/* Modal z-index fix agar selalu di atas komponen lain */


.main-panel {
	z-index: 0 !important;
}

/* Modal backdrop untuk logout modal - Pastikan di bawah modal */
.modal-backdrop.in {
  opacity: 0.5 !important;
  z-index: 1030 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Khusus untuk enterprise modal, backdrop harus terlihat */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal + .modal-backdrop {
  opacity: 0.5 !important;
  z-index: 1030 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Pastikan modal dialog berada di atas backdrop */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal {
  z-index: 1060 !important;
  position: relative !important;
}

/* Force modal content di atas semua */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content {
  z-index: 1070 !important;
  position: relative !important;
}

/* ULTRA MINIMALIST LOGOUT MODAL - COMPLETE REDESIGN */

/* Force override all Bootstrap styles */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content,
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content * {
    all: unset !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ultra Clean Modal Container */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content {
    display: block !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    z-index: 1070 !important;
}

/* Force modal to be above everything */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal {
    z-index: 1060 !important;
    position: relative !important;
}

/* Ensure modal backdrop is below modal */
.modal-backdrop {
    z-index: 1030 !important;
}

/* Override any conflicting z-index */
.modal.in.fade {
    z-index: 1060 !important;
}

/* ULTRA NUCLEAR OPTION - Force modal above everything */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal {
    z-index: 9999 !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content {
    z-index: 9999 !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content * {
    z-index: 9999 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force backdrop to stay below */
.modal-backdrop.in,
.modal-backdrop,
.modal-backdrop.show {
    z-index: 1000 !important;
    position: fixed !important;
}

/* Override any modal z-index */
.modal.in.fade {
    z-index: 9999 !important;
}

/* Force all modal elements */
.modal.in.fade .modal-dialog {
    z-index: 9999 !important;
}

/* Specific override for enterprise modal */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-header,
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body,
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer {
    z-index: 9999 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* SIMPLIFIED - Modal now at app level, no z-index issues */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal {
    z-index: 1050 !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content {
    z-index: 1050 !important;
    position: relative !important;
    background: #ffffff !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content * {
    z-index: 1050 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force backdrop below - Override SCSS */
body .modal-backdrop.in,
body .modal-backdrop,
body .modal-backdrop.show,
.modal-backdrop.in {
    z-index: 1000 !important;
    position: fixed !important;
    opacity: 0.5 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Override SCSS modal backdrop specifically */
.modal-backdrop.in {
    z-index: 1000 !important;
    opacity: 0.5 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Minimalist Header */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-header {
    display: block !important;
    background: #f8fafc !important;
    padding: 20px 20px 16px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
}

/* Simple Icon */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-header .modal-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #fee2e2 !important;
    border-radius: 12px !important;
    margin: 0 auto 12px auto !important;
    position: relative !important;
    border: 1px solid #fecaca !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-header .modal-icon i {
    font-size: 20px !important;
    color: #dc2626 !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Clean Title */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-header .modal-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    display: block !important;
    letter-spacing: -0.025em !important;
}

/* Minimalist Body */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body {
    display: block !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    text-align: center !important;
}

/* Simple Message */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body .modal-message {
    font-size: 14px !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
    font-weight: 400 !important;
}

/* Clean Warning */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body .modal-warning {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    background: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin: 0 !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body .modal-warning i {
    font-size: 14px !important;
    color: #f59e0b !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    display: inline-block !important;
    vertical-align: top !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body .modal-warning span {
    font-size: 12px !important;
    color: #92400e !important;
    line-height: 1.3 !important;
    flex: 1 !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Ultra Clean Footer */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer {
    display: flex !important;
    gap: 12px !important;
    padding: 16px 24px 20px 24px !important;
    background: #ffffff !important;
    border-top: 1px solid #f3f4f6 !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Minimalist Buttons */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-width: 90px !important;
    height: 40px !important;
    text-decoration: none !important;
    flex: 1 !important;
    max-width: 120px !important;
}

/* Cancel Button */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn-secondary {
    background: #ffffff !important;
    color: #6b7280 !important;
    border-color: #d1d5db !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn-secondary:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #374151 !important;
}

/* Logout Button */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn-primary {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn-primary:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Button Icons - Force visibility */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn i {
    font-size: 16px !important;
    color: inherit !important;
    display: inline-block !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    flex-shrink: 0 !important;
}

.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn span {
    color: inherit !important;
    font-weight: 500 !important;
}

/* Simple Animation */
.modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content {
    animation: fadeInUp 0.2s ease-out !important;
}

@keyframes fadeInUp {
    from {
  opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 480px) {
    .modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content {
        margin: 20px !important;
        max-width: calc(100% - 40px) !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-header,
    .modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-body,
    .modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer {
        flex-direction: column !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.enterprise-modal .modal-content .modal-footer .btn {
        width: 100% !important;
    }
}

/* Role Modal - Force above backdrop */
.modal.in.fade .modal-dialog .modal-content {
    z-index: 1050 !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog {
    z-index: 1050 !important;
    position: relative !important;
}

/* MODERN ROLE MODAL - Complete Redesign */

/* Modal Container - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    z-index: 1070 !important;
}

/* Clean Header - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__header {
    background: #f8fafc !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 2px 0 !important;
    letter-spacing: -0.025em !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__subtitle {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__close-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: none !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__close-btn:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
    transform: scale(1.05) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__close-btn i {
    font-size: 18px !important;
}

/* Modern Role Grid - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 20px 24px 24px 24px !important;
    background: #ffffff !important;
}

/* Modern Role Cards - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:hover {
    border-color: #3b82f6 !important;
    background: #f8fafc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Active Role State */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card.active {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card.active::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 12px !important;
    height: 12px !important;
    background: #10b981 !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card.active .role-modal__icon-container {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card.active .role-modal__role-name {
    color: #059669 !important;
    font-weight: 700 !important;
}

/* Modern Icon Container - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__icon-container {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3) !important;
    position: relative !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:hover .role-modal__icon-container {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

/* Icon Colors for Different Roles */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:nth-child(1) .role-modal__icon-container {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:nth-child(2) .role-modal__icon-container {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:nth-child(3) .role-modal__icon-container {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:nth-child(4) .role-modal__icon-container {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:nth-child(5) .role-modal__icon-container {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card:nth-child(6) .role-modal__icon-container {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* Modern Icons - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__icon {
    font-size: 20px !important;
    color: #ffffff !important;
    font-family: 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Role Name - More Compact */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__role-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    text-align: center !important;
    margin: 0 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
}

/* Loading State */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 32px !important;
    background: #ffffff !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__loading-spinner {
    width: 32px !important;
    height: 32px !important;
    border: 3px solid #e5e7eb !important;
    border-top: 3px solid #3b82f6 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-bottom: 16px !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__loading p {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Empty State */
.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 32px !important;
    background: #ffffff !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__empty-icon {
    font-size: 48px !important;
    color: #d1d5db !important;
    margin-bottom: 16px !important;
}

.modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__empty-text {
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* Responsive Design - More Compact */
@media (max-width: 480px) {
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content {
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__grid {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 8px !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__header {
        padding: 16px !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card {
        padding: 12px 8px !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__icon-container {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 6px !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__icon {
        font-size: 18px !important;
    }
    
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__role-name {
        font-size: 11px !important;
    }
    
    /* Active state for mobile */
    .modal.in.fade .modal-dialog.modal-sm.modern-role-modal .modal-content .role-modal__card.active::before {
        width: 10px !important;
        height: 10px !important;
        top: 6px !important;
        right: 6px !important;
    }
}