﻿.edit-delete-action{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    height: 50px;
	}
.action-eye{
	color: #0f1c28;
    width: 14px;
    height: 14px;
}
.feather-edit{
	color: #3577f1;
    width: 14px;
    height: 14px;
}

.feather-trash-2{
	color: #FF0000;
    width: 14px;
    height: 14px;
}
.p-2 {
    padding: .5rem !important;
}
.me-2 {
    margin-right: .5rem !important;
}
.edit-delete-action a{
	border: 1px solid rgba(145, 158, 171, 0.3);
    background-color: #ffffff;
    border-radius: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    padding: 8px;
}
.ddvZdT{
	font-weight: bold;
}

.modal .modal-footer {
    border: 0;
    justify-content: flex-end;
}
.modal .modal-footer .btn {
    min-width: 80px;
    padding: 8px;
}

/* page title and Background */
.pgmargin{
	margin-right:775px;
}

.table-top{
	padding-bottom:10px !important;	
	
}
.btn-searchset{
	top: 5px;
}
.form-control-sm{
	padding: 10px 0.8rem;
}
.search-input{
	width: 300px;
}

.GroupStyles {
    display: 'flex';
    align-items: 'center';
    justify-content: 'space-between';
}
.GroupBadgeStyles {
    background-color: '#EBECF0';
    border-radius: '2em';
    color: '#172B4D';
    display: 'inline-block';
    font-size: 12;
    font-weight: 'normal';
    line-height: '1';
    min-width: 1;
    padding: '0.16666666666667em 0.5em';
    text-align: 'center';
}
.FavoritesStar{
    color: #1261A0;
    margin-left: 116px;
}
.sweetalert{
    position: fixed;
    z-index: 9999;
    top: 0px;
    left: 39%;
}

/* grid css*/

.titlename{
    font-weight: 600;
    font-family: sans-serif;
    font-size: 14px;
}

/* Handover register: keep table headers sticky within scrollable panel */
.sk-handover-items-table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
}

.sk-handover-items-table thead{
    z-index: 2;
}

/* delete modal  */

 .custom-alert-icon svg{
	 width:50px;
	 height:50px;
 }

 .modalheader-width{
	text-align: center;
    display: list-item;
	padding:0px;
 }
 
 .modalfooter-width{
	text-align: center;
    display: list-item;
	padding:0px;
 }
 
 .ddbtnicon{
	width: 86px;
    height: 38px;
    border: 0px solid var(--Stroke, rgba(145, 158, 171, 0.3));
    background: #1261a0;
    border-radius: 8px;
    font-size: 15px;
	color: #ffffff;
 }

 .react-datepicker-wrapper{
    display: inline-block;
    padding: 0;
    border: 0;
    width: 100%;
 }

 .rdt_TableHead > div > div > div > span{
    position: absolute;
    right:0;
    opacity: 1;
 }


 .css-1nmdiq5-menu{
    z-index: 101 !important;
 }

 .task-client-investment-grid {
    border-top: none !important;
 }

 .task-client-investment-grid-body {
    padding: 0 !important;
 }

 .datatable-grid-input{
    height: calc(100% - 15px) !important;
    width: 100%;
 }

 .task-modal .modal-body{
    overflow: auto;
    height: 629px;
 }
 .tasking-comment-history{
    padding: 7px !important;
 }
 .tasking-comment-history ul li{
    width: 14%;
    padding: 0px;
 }
 .pd-15{
	 padding:10px;
 }
 .mg-em{
	 margin-bottom:0.5em;
 }
 .tl-r{
	 text-align:right;
 }
 .noti-title {
    color: #343a40;
    font-weight: 500;
  }
  .noti-details {
    color: #adb5bd;
    margin: 0;
    font-size: 0.8000rem;
  }
  .notification-time {
    font-size: 12px;
    line-height: 1.35;
    color: #67748E;
    cursor: pointer;
  }
  .scrollable-history-comments {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px; /* optional to prevent scrollbar overlap */
  }
  .scrollable-comments {
    max-height: 400px;       /* Adjust height as needed */
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 6px;      /* Prevents content clipping behind scrollbar */
    margin-top: 1rem;
  }
  .refresh-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
 }
 .arroright{
    margin-top: -1px;
 }
 .filter-dropdown-wrapper {
    position: relative;
  }
  
  .remove-icon {
    margin-left: 5px;
    margin-top: 9px;
    cursor: pointer;
    color: #1261a0;
    font-weight: bold;
    display: none; /* hide by default */
  }
  
  .filter-dropdown-wrapper:hover .remove-icon {
    display: inline; /* show on hover */
  }
  
  .remove-icon {
    transition: opacity 0.2s;
    opacity: 0;
  }

  .filter-dropdown-wrapper:hover .remove-icon {
    opacity: 1;
  }

  .filter-dropdown-container{
    margin-left: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .filter-dropdown-wrapper{
    position: relative;
    display: flex;
    align-items: center;
  }
  .GridDropdown{
    width: calc(100% - 10px);
    border-radius: 0px;
  }
  .editable-cell-with-icon {
    position: relative;
    height: 100%;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .editable-cell-with-icon .cell-content {
    flex: 1;
  }
  
  .editable-cell-with-icon .edit-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }
  
  .editable-cell-with-icon:hover .edit-icon {
    opacity: 1;
  }

  .reports-module{
    padding: 10px !important;
  }

  .disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
  }

  .centered-card-message {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 1.5rem; /* equivalent to p-4 */
    margin-bottom: 1rem; /* equivalent to mb-4 */
    border: 1px solid #dee2e6; /* optional, keeps card look */
    border-radius: 0.25rem;
    background-color: #fff; /* or transparent if you prefer no color */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* subtle shadow */
}

.custom-search-input {
  height: 39px !important; /* Or whatever height you want */
  font-size: 14px; /* Optional: adjust text size */
  padding: 6px 12px; /* Optional: tweak spacing */
}

.btn-searchset {
  height: 39px !important;;
  padding: 6px 12px;
}

.search-set .search-input {
  position: relative;
  margin-right: 0px !important;
}

.pg-header-dividor{
  padding-bottom: 0;
  border-bottom: 1px solid rgba(145, 158, 171, 0.3);
}

/* RoleSecurityMain.css */

.transform-none {
  transform: none !important;
}

.relative-position {
  position: relative !important;
}

.static-position {
  position: static !important;
}

.scroll-hidden {
  overflow: hidden !important;
}

.scroll-visible {
  overflow: visible !important;
}

.box-border {
  box-sizing: border-box !important;
}

.min-height-1 {
  min-height: 1px !important;
}

.scrollbar {
  background: #ccc !important;
  width: 7px !important;
  position: absolute !important;
  top: 0 !important;
  opacity: 0.4 !important;
  display: none !important;
  border-radius: 7px !important;
  z-index: 99 !important;
  right: 1px !important;
  height: 893px !important;
}

.scrollbar-rail {
  width: 7px !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  display: none !important;
  border-radius: 7px !important;
  background: #333 !important;
  opacity: 0.2 !important;
  z-index: 90 !important;
  right: 1px !important;
}

.resize-sensor {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
  visibility: hidden !important;
}

.resize-expand,
.resize-shrink {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
  visibility: hidden !important;
}

.resize-expand > div {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transition: all !important;
  width: 258px !important;
  height: 907px !important;
}

.resize-shrink > div {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transition: 0s !important;
  width: 200% !important;
  height: 200% !important;
}

.add-role-button{
  padding: 5px 0px 5px 5px;
}

.ddbtnicon2 {
  width: 120px;
  height: 38px;
  border: 0px solid var(--Stroke, rgba(145, 158, 171, 0.3));
  background: #1261a0;
  border-radius: 8px;
  font-size: 15px;
  color: #ffffff;
}

.role-item {
  color: #5B6670;
  white-space: unset;
  padding: 0.5rem 0.9375rem;
  font-size: 0.8125rem;
}

.sidebars.settings-sidebar .slimScrollDiv {
  height: auto !important;
}
.rdt_ExpanderRow .rdt_TableHead {
  display: none !important;
}
.followup-label{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #5B6670 !important;
  margin-bottom: 8px !important;
}

alink-whilte{
	font-weight: bold;
    color: #ffffff;
}

.topnav-dropdown-footer p{
	text-align: center;
	font-weight: bold;
	font-size: 13px;
}

.filter-by{
  padding-bottom: 10px !important;
}
.mt-30{
  margin-top:30px;
}
.ht150{
  height:150px;
}
.wd-25{
	width:25%;
}
.c-black{
	color:808283;
}
.enq-form{
    text-align: right;
}


.acces-box{
	margin-bottom: 1.5rem;
    background-color: #ffffff;
    transition: all 0.5s ease-in-out;
    position: relative;
    border-radius: 4px;
    border: 1px solid #dbe0e6 !important;
    box-shadow: none;
	padding: 20px 0px 0px 20px;
	font-size: 12px;
}
.acces-title{
	font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
	margin-bottom: 15px;
}

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

.acess P{
	font-size: 12px;
	font-weight: 700;
}

.modal-extra-wide .modal-dialog {
  max-width: 1300px !important;
  width: 100%;
}

.modal .modal-dialog.add-centered-sales-modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  max-width: 1319px !important;
}

.p-datepicker {
	z-index: 2000 !important;
  font-size: 0.92rem !important;
  min-width: 18.5rem !important;
}

.p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
.p-datepicker .p-datepicker-header .p-datepicker-next:focus,
.p-datepicker .p-monthpicker .p-monthpicker-month:focus,
.p-datepicker .p-yearpicker .p-yearpicker-year:focus,
.p-datepicker .p-datepicker-calendar td > span:focus {
  box-shadow: 0 0 0 0.12rem rgba(18, 97, 160, 0.25) !important;
}

.p-datepicker .p-datepicker-header {
  padding: 0.45rem 0.6rem !important;
}

.p-datepicker .p-datepicker-title {
  font-size: 0.98rem !important;
}

.p-datepicker .p-datepicker-prev,
.p-datepicker .p-datepicker-next {
  width: 2rem !important;
  height: 2rem !important;
}

.p-datepicker .p-datepicker-calendar th {
  padding: 0.28rem !important;
  font-size: 0.82rem !important;
}

.p-datepicker .p-datepicker-calendar td {
  padding: 0.16rem !important;
}

.p-datepicker .p-datepicker-calendar td > span {
  width: 2rem !important;
  height: 2rem !important;
  font-size: 0.9rem !important;
}

.p-datepicker .p-datepicker-calendar td.p-datepicker-today > span {
  background: rgba(18, 97, 160, 0.12) !important;
  color: #1261A0 !important;
}

.p-datepicker .p-datepicker-calendar td > span:hover,
.p-datepicker .p-monthpicker .p-monthpicker-month:hover,
.p-datepicker .p-yearpicker .p-yearpicker-year:hover,
.p-datepicker .p-datepicker-header .p-datepicker-prev:hover,
.p-datepicker .p-datepicker-header .p-datepicker-next:hover {
  background: #3895D3 !important;
  color: #ffffff !important;
}

.p-datepicker .p-datepicker-calendar td.p-highlight > span,
.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight,
.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
  background: #1261A0 !important;
  color: #ffffff !important;
}

.p-datepicker .p-timepicker {
  padding: 0.4rem !important;
}

.p-calendar .p-datepicker-trigger.p-button.p-button-icon-only {
  width: 2.5rem !important;
  background: #1261A0 !important;
  border: 1px solid #1261A0 !important;
  color: #ffffff !important;
}

.p-calendar .p-datepicker-trigger.p-button.p-button-icon-only:hover,
.p-calendar .p-datepicker-trigger.p-button.p-button-icon-only:focus,
.p-calendar .p-datepicker-trigger.p-button.p-button-icon-only:active {
  background: #3895D3 !important;
  border-color: #3895D3 !important;
  color: #ffffff !important;
}

.p-calendar .p-datepicker-trigger.p-button.p-button-icon-only .p-button-icon {
  color: #ffffff !important;
}

.p-component-overlay {
	z-index: 2000 !important;
}

.p-button.p-button-icon-only {
    width: 2.5rem !important;
    padding: 0.25rem 0 !important;
}

.form-check-input {
    border: 1px solid #1261a0 !important ;
}

.product-list ul li {
    width: 12%;
    padding: 0 0px;
}

.btn-ho-sm {
   width: 33px;
}

table.tableizer-table {
	font-size: 12px;
	border: 1px solid #CCC; 
	font-family: Arial, Helvetica, sans-serif;
} 
.tableizer-table td {
	padding: 4px;
	margin: 3px;
	border: 1px solid #CCC;
}
.tableizer-table th {
	background-color: #104E8B; 
	color: #FFF;
	font-weight: bold;
}

.bold{
	font-weight:bold;
}

label {
    cursor: default;
}

span {
    cursor: default;
}

h2 {
    cursor: default;
}

.sidebar .sidebar-menu > ul > li.submenu-open > ul > li.submenu > a,
.sidebars .sidebar-menu > ul > li.submenu-open > ul > li.submenu > a {
  padding-right: 42px;
}

.sidebar .sidebar-menu > ul > li.submenu-open > ul > li.submenu > a .menu-arrow,
.sidebars .sidebar-menu > ul > li.submenu-open > ul > li.submenu > a .menu-arrow {
  right: 8px;
}

.login-wrapper .login-content .login-logo.logo-normal,
.login-wrapper .login-content .login-logo.logo-normal img {
  cursor: default;
  caret-color: transparent;
  user-select: none;
}

.ellipsis-cell {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   Gallery (skcs) overrides
   ========================= */

.sk-folder-container{
  display:flex;
  gap:18px;
  padding:10px;
  flex-wrap:wrap;
}

.sk-folder{
  background:transparent;
  border:none;
  text-align:center;
  width:200px;
  position:relative;
  padding:0;
}

.sk-folder:hover .sk-folder-icon{transform:translateY(-1px)}

.sk-folder-icon{
  width:195px;
  height:199px;
  background:#ffe082;
  border-radius:6px;
  position:relative;
  margin:0 auto 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:2px 2px 5px rgba(0,0,0,0.1);
  transition:transform .15s ease;
}

.sk-file-preview{
  width:112px;
  height:145px;
  background:#fff;
  border:1px solid #ddd;
  box-shadow:1px 1px 3px rgba(0,0,0,0.2);
  position:absolute;
  transform:rotate(-5deg);
  overflow:hidden;
  border-radius:3px;
}

.sk-file-preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sk-folder-title{
  font-size:13px;
  color:#555;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sk-folder-subtitle{font-size:11px;color:#888}

.sk-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.sk-breadcrumb-sep{color:#6c757d}
.sk-breadcrumb-link{
  border:none;
  background:transparent;
  padding:0;
  color:#1261A0;
  font-size:14px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.sk-breadcrumb-link:hover{color:#0a58ca}
.sk-breadcrumb-current{color:#1261A0;font-size:14px;font-weight:700}

.sk-gallery-shell{
  background:#fff;
  border:1px solid #f0f0f0;
  border-radius:10px;
  overflow:hidden;
}
.sk-gallery-shell-scroll{
  background:#fff;
  max-height:calc(100vh - 290px);
  overflow-y:auto;
}

/* Remove template blue backgrounds in gallery view */
.sk-gallery-shell .cd-hero,
.sk-gallery-shell .cd-hero-slider,
.sk-gallery-shell .cd-hero-slider li,
.sk-gallery-shell .cd-full-width,
.sk-gallery-shell .js-tm-page-content{
  background:#fff !important;
}
.sk-gallery-shell .tm-img-gallery-container{padding:10px}

/* Make every photo tile same width + same height */
.sk-gallery-shell .tm-img-gallery.gallery-one{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(300px, 300px));
  justify-content:flex-start;
}

.sk-gallery-shell .tm-img-gallery.gallery-one .grid-item{
  width:auto !important;
  float:none !important;
}

.sk-gallery-shell .tm-img-gallery.gallery-one figure.effect-sadie{
  width:300px;
  height:300px;
  margin:0;
}

.sk-gallery-shell .tm-img-gallery.gallery-one img.tm-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  max-width:none !important;
}

/* Gallery hover overlay (Sadie effect): use lighter SKCS blue */
.sk-gallery-shell figure.effect-sadie figcaption::before{
  background: linear-gradient(
    to bottom,
    rgba(18, 97, 160, 0) 0%,
    rgba(18, 97, 160, 0.55) 75%
  ) !important;
}

/* Caption title: smaller font for file name */
.sk-gallery-shell .tm-figure-title{
  font-size: 1.15rem !important;
  line-height: 1.25 !important;
}

.sk-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.sk-file-card{border:1px solid #eee;border-radius:10px;padding:12px;position:relative;background:#fff}
.sk-file-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px;opacity:0;transition:opacity .15s ease}
.sk-file-card:hover .sk-file-actions{opacity:1}
.sk-action-btn{border:none;background:rgba(18,97,160,0.10);width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.sk-action-btn:hover{background:rgba(18,97,160,0.18)}

.sk-file-name{
  padding-right:80px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Gallery tabs: inactive tab light blue */
.sk-gallery-tabs .nav-link{              /* same as your blue */
  color: #1261A0;
  background: rgba(18, 97, 160, 0.10);      /* light blue fill */
}

/* Active tab stays solid */
.sk-gallery-tabs .nav-link.active{
  background: #1261A0;
  border-color: #1261A0;
  color: #fff;
}

.sk-vehicle-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.sk-vehicle-option-label{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sk-vehicle-option-icon{
  flex:0 0 auto;
  color:#1261A0;
  cursor:pointer;
}

.sk-vehicle-option-icon:hover{
  color:#0d4d80;
}

/* Ensure vehicle gallery modal is always on top of other modals */
.sk-vehicle-gallery-backdrop.show{
  z-index: 19998;
}

.sk-vehicle-gallery-modal.modal{
  z-index: 19999;
}

/* Magnific popup (FluidGallery) must be above Bootstrap modals */
.mfp-bg{
  z-index: 20050 !important;
}

.mfp-wrap{
  z-index: 20051 !important;
}

