@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sonar {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
body {
  background-color: #F5F7FB;
  font-family: Arial, Helvetica, sans-serif !important;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a { text-decoration: none; }

/*----------------page-wrapper----------------*/

.page-wrapper {
  height: 100vh;
}

.page-wrapper .theme {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 4px;
  margin: 2px;
}

.page-wrapper .theme.chiller-theme {
  background: #1e2229;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
  left: 0px;
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .page-wrapper.toggled .page-content {
    padding-left: 260px;
  }
}
/*----------------show sidebar button----------------*/
#show-sidebar {
	position: fixed;
  left: 30px; 
  top: 14px;
	border-radius: 0 4px 4px 0px;
	width: 35px;
	transition-delay: 0.3s;
  cursor: pointer;
  z-index: 999999;
}
.page-wrapper.toggled #show-sidebar {
  left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
  width: 260px;
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: -260px;
  z-index: 9;
}

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

.sidebar-wrapper a {
  text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
  /* max-height: 100vh;
  height: 100vh;
  overflow-y: auto; */
  position: relative;
}

.sidebar-content.desktop {
  overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
  height: 60px;
}

.sidebar-wrapper .sidebar-brand > a {
  text-transform: uppercase;
  font-weight: bold;
  flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
  cursor: pointer;
  font-size: 20px;
}
/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
  padding: 20px;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
  float: left;
  width: 60px;
  padding: 2px;
  border-radius: 12px;
  margin-right: 15px;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
  float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
  display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
  font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
  font-size: 11px;
  margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
  font-size: 8px;
  margin-right: 4px;
  color: #5cb85c;
}

/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search > div {
  padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
  padding-bottom: 10px;
  /* height: calc(100vh - 60px);
  overflow-y: auto; */
}

.sidebar-wrapper .sidebar-menu .header-menu span {
  font-weight: bold;
  font-size: 14px;
  padding: 15px 20px 5px 20px;
  display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  position: relative;
  padding: 8px 30px 8px 20px;
  color: #2B2B2B;
}

.sidebar-wrapper .sidebar-menu ul li a i {
  margin-right: 10px;
  font-size: 12px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
}

.sidebar-wrapper .sidebar-submenu ul li a { color: #657882; }

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  right: 15px;
  top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 5px 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
  padding-left: 25px;
  font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
  content: "\f111";
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 8px;
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
  float: right;
  margin-top: 8px;
  margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
  float: right;
  margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
  display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  right: 17px;
}

/*--------------------------side-footer------------------------------*/

.sidebar-footer { position: absolute; width: 100%; bottom: 0; display: flex; background: #fff; box-shadow: 0 0 7px #ddd; padding: 10px 0; }

/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
  display: inline-block;
  width: 100%;
  padding-left: 0px;
  padding-top: 20px;
}

.page-wrapper .page-content {
  /* overflow-x: hidden; */
}

/*------scroll bar---------------------*/

::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #525965;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #525965;
}
::-webkit-scrollbar-thumb:active {
  background: #525965;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
label { font-size: 14px; margin-bottom: 8px; color: #393939; font-weight: 600; }
.form-group .form-control { border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px; }
.form-group .form-control:focus { box-shadow: none; border-color: #C1E4F9; }
.form-group .form-control + .error { margin-top: 5px; font-size: 12px; color: #EF5050; }
/* .form-group .form-control:focus::placeholder { color: #333; } */

.copyrights p { color: #8B8B8B; font-size: 12px; }
.closesidebaricon { display: none; }
.closesidebaricon path { fill: #fff; }
.page-wrapper.toggled .closesidebaricon { display: block; cursor: pointer; }
/* .page-wrapper.toggled .opensidebaricon { display: none; } */
/* .page-wrapper .opensidebaricon { display: block; cursor: pointer } */
.page-wrapper .opensidebaricon path { fill: #fff; }
.main-header { background-color: #0076BC; height: 60px; display: flex; align-items: center; padding: 0 30px; position: sticky; top: 0; z-index: 9999; }
.header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.card-margin-top { margin-top: 15px; }
.card { border: 0; padding:15px 30px; border-radius: 10px; }
.page-container { padding:15px 30px 30px 30px; }
.page-filter .accordion-item { border-radius: 10px; }
.page-filter .accordion-button.collapsed { border-radius: 10px !important; border-bottom: 0; color: #333; } 
.page-filter .accordion-button { border-radius: 10px 10px 0px 0px !important; background-color: #fff; border-bottom: 0; box-shadow: none; color: #333; font-size: 18px;
font-weight: 600; } 
.page-filter .accordion-button:focus { border-color: #E9E9E9; outline: 0; box-shadow: none; }
.page-filter .calendar-icon { position: absolute; right: 14px; top: 40px; color: #0076BC; margin-bottom: 0; }
.page-filter .refresh-button { height: 38px; width: auto; border-radius: 5px; border: 1px solid #0076BC; color: #0076BC; background: #fff; position: relative;
	top: 29px; padding: 0 10px; left: 0; box-shadow: none; }
.page-filter .refresh-button:hover { border: 1px solid #0076BC; color: #fff; background: #0076BC; box-shadow: none; }
.default-card .card-header { background-color: #fff; padding: 15px 0; display: flex; align-items: center; justify-content: space-between; }
.default-card .card-header h2 { color: #333; font-size: 18px; font-weight: 600; } 
.default-card .card-header p { color: #657882; font-size: 12px; } 

.page-filter .accordion-header { border-bottom: 1px solid #f4f4f4; }

.date-time-content { display: flex; align-items: center; column-gap: 10px; }
.date-time-content p { color: #878787; }
.date-time-content .datecalendaricon { color:#0076BC; }

.card-comman-tab .nav-tabs .nav-item.show .nav-link, 
.card-comman-tab .nav-tabs .nav-link.active { color: #fff; background-color: #0076BC; border-color: #0076BC #0076BC #0076BC; }
.card-comman-tab .nav-tabs .nav-link:hover { color: #fff; background-color: #0076BC; border-color: #0076BC #0076BC #0076BC; }
.card-comman-tab .nav-tabs { border-bottom: 0; }
.card-comman-tab .nav-tabs .nav-link { font-size: 14px; color: #484848; border-radius: 25px; }
.card-comman-tab .nav-tabs .nav-item { margin-right: 10px; }
.card-comman-tab .nav-tabs .nav-item:last-child { margin-right: 0; }
.card-comman-tab .nav-tabs .nav-item.active .nav-link { color: #fff; background-color: #0076BC; border-color: #0076BC #0076BC #0076BC; }

.table-content .table-scroll { border-radius: .5rem; max-height: 660px; }
.table-content thead { top: 0; position: sticky; background:transparent; border-bottom: 1px solid #D2D2D2; border-radius: 10px 10px 0 0; z-index: 1; }
.table-content thead th { border-bottom: 2px solid #D2D2D2 !important; font-size: 14px; }
.table-content tr td { border-color: #E9E9E9; font-size: 14px; color: #626262; border-bottom: 1px solid #E9E9E9 !important; padding: 12px 10px !important; background-color: #fff !important; }
.table-content tr td.sorting_1 { border-color: #E9E9E9; font-size: 14px; color: #626262; border-bottom: 1px solid #E9E9E9 !important; padding: 8px 10px !important; }
.table-content th { border-bottom: 1px solid #D2D2D2 !important; font-size: 14px; background-color: #F5F5F5 !important; padding: 8px 10px !important; }
.table-content th:first-child { border-radius: 10px 0px 0 0 !important; }
.table-content th:last-child { border-radius: 0px 10px 0 0 !important; }

.table-content tbody th:first-child { border-radius: 0 !important; background: #fff !important; color: #464646 !important; }
.table-content tbody th:last-child { border-radius: 0 !important; }

.table-content .first-column { border-color: #E9E9E9; font-size: 14px; color: #626262; background: #fff; border-bottom:1px solid #E9E9E9 !important; }
.statistics-card-tabs { display: flex; align-items: center; justify-content: space-between; }
.statistics-card-tabs .download-report { width: 35px; height: 35px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background-color: #EBF8FF; color: #0076BC; transition: all 0.5s; }
.statistics-card-tabs .download-report:hover { background-color: #212529; color: #fff; }

.welcome-user { display: flex; align-items: center; }
.welcome-user .wlcmtext p { font-size: 14px; font-weight: 600; color: #fff; margin-right: 3px; }
.welcome-user h3 { font-weight: 400; color: #fff; font-size: 14px; }
.welcome-user .dropdown-arrow { color: #fff; margin-left: 5px; }
.welcome-user .dropdown-toggle::after {display: none; }
.welcome-user .user-dropdown-button { background: transparent; border: 0; color: #fff; }
/* login page css */
.login-cards { display: flex; height: 100vh; }
.login-left-section { width: 640px; background: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; }
.login-left-section .copyright-text { font-size: 14px; color: #828282; }
.login-right-section .copyright-text { font-size: 14px; color: #828282; display: none; }
.login-right-section { width: calc(100% - 640px); display: flex; flex-direction: column; justify-content: space-around; }
.login-right-section .login-form { max-width: 400px; width: 100%; border-radius: 15px; padding: 25px; background: #fff; border: 1px solid #DEF3FF; }
.login-right-section .login-form label { font-size: 14px; color: #686868; }
.login-right-section .login-form .form-control { border-color: #CECECE; font-size: 14px; color: #212529; }
.login-right-section .login-form .form-control::placeholder { color: #D9D9D9; }
.login-right-section .login-form h3 { font-size: 22px; font-weight: 600; margin: 0 0 25px 0; color: #212529; }
.login-right-section .login-form .forgotpass-link { color: #212529; font-weight: 400; font-size: 14px; transition: all 0.5s; }
.login-right-section .login-form .forgotpass-link:hover { color: #0076BC; }
.login-right-section .loginbutton { background: #0076BC; border: 0; width: 100%; border-radius: 5px; height: 40px; color: #fff; transition: all 0.5s; font-size: 14px; font-weight: 600; }
.login-right-section .loginbutton:hover { background: #212529; } 
.login-right-section .loginbutton:focus-visible { outline: none; }

/* my profile */
.page-title h1 { font-size: 22px; font-weight: 700; color: #212529; }
.page-title a { color: #212529; }
.page-title i { font-size: 16px; }
.page-title a:hover { color: #0076BC; }
.advancedtext a { font-size: 14px; color: #0076BC; }
.advancedtext a:hover { color: #212529; }
.myaccount-profile-cards { display: grid; grid-template-columns: 30% 70%; column-gap: 30px; width: calc(100% - 30px); }
.profile-details .ext-field { width: 60px; }
.profile-details .userimage { display: flex; align-items: center; justify-content: center; }
.profile-details .userimage .img { width: 80px; height: 80px; display: flex; border-radius: 50%; }
.profile-details .form-group .form-control:focus { box-shadow: none; border-color: #C1E4F9; }
.profile-details .form-group .form-control::placeholder { color: #D9D9D9 !important; }
.profile-details .form-group .form-control:focus::placeholder { color: #D9D9D9 !important; }

.card-heading { border-bottom: 1px solid #E9E9E9; padding-bottom: 15px; }
.card-heading h2 { font-size: 18px; font-weight: 700; color: #333333; margin-bottom: 0; }
.card-heading p { color: #A9A8A8; font-size: 14px; }
.form-control.username-field { width: 240px; font-size: 14px; }
.form-control:disabled, .form-control[readonly] { border-color: #C5D1D8; background-color: #EEF5F9; color: #565656; }
.changepasswordbutton { border: 1px solid #EBEBEB; background: #fff; border-radius: 5px; padding: 0 10px; height: 40px; color: #0076BC; font-size: 14px; transition: all 0.5s; line-height: 38px; }
.changepasswordbutton:hover { border-color: #0076BC; background: #0076BC; color: #fff; }

.customcheckbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; }
.customcheckbox label { position: relative; cursor: pointer; }
.customcheckbox label:before { content: ''; -webkit-appearance: none; background-color: transparent; border: 1px solid #0079bf; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 10px; width: 16px; height: 16px; border-radius: 3px; }
.customcheckbox input:checked + label:after { content: ''; display: block; position: absolute; top: 6px; left: 6px; width: 5px; height: 10px; border: solid #0079bf; border-width: 0 2px 2px 0; transform: rotate(45deg);}

.closedbutton { background: #F5F3F3; border: 0; width: 35px; height: 35px; border-radius: 50%; }
.popup-header { border-color: #D9D9D9; }
.popup-header h5 { font-size: 18px; font-weight: 500; color: #212529; }
.changepassword-popup .modal-dialog { max-width: 400px; width: 100%; }
.changepassword-popup .modal-content { border-radius: 25px; }
.changepassword-popup .note { font-size: 14px; color: #727272; }
.changepassword-popup .form-control::placeholder { color: #AFAFAF; }
.changepassword-popup .form-control::placeholder:focus{ color: #AFAFAF; }
.changepassword-popup .form-control::placeholder { color: #D9D9D9 !important; }
.changepassword-popup .form-control::placeholder:focus{ color: #D9D9D9 !important; }
.changepassword-popup .asterisksign { position: absolute; right: 15px; top: 10px; }

.exportbutton {	color: #0076BC !important; border-radius: 25px !important; background-color: #fff !important; border: 1px solid #0076BC !important; 	text-align: center !important;
	height: 35px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important; margin: 0 !important; box-shadow: none !important;
} 
.exportbutton:hover { background-color: #0076BC !important; border-color: #0076BC !important; color: #fff !important; }

.submitbutton { color: #fff; border-radius: 25px; background-color: #0076BC; border: 1px solid #0076BC; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.submitbutton:hover { background-color: #212529; border-color: #212529; }

.resetbutton { color: #212529; border-radius: 25px; background-color: #fff; border: 1px solid #212529; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.resetbutton:hover { background-color: #212529; color: #fff; }

.defaultbutton { color: #212529; border-radius: 25px; background-color: #fff; border: 1px solid #ddd; text-align: center; height: 35px; line-height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; box-shadow: none; }
.defaultbutton:hover { background-color: #212529; color: #fff; }

.cancelbutton { color: #EF5050; border-radius: 25px; background-color: #fff; border: 1px solid #EF5050; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.cancelbutton:hover { background-color: #EF5050; color: #fff; }

.autodetectbutton { width: 140px; color: #fff; border-radius: 5px; background-color: #0076BC; border: 1px solid #0076BC; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; }
.autodetectbutton:hover { background-color: #212529; border-color: #212529; color: #fff; }

#preferences .autodetectbutton { width: 140px; color: #0076BC;	border-radius: 5px; background-color: #fff; border: 1px solid #0076BC;
	text-align: center; height: 38px; transition: all 0.5s; padding: 0 12px; font-size: 14px; box-shadow: none; }
#preferences .autodetectbutton:hover { background-color: #0076BC; border-color: #0076BC; color: #fff; }


.commanbutton { color: #fff !important; border-radius: 5px !important; background-color: #0076BC !important; border: 1px solid #0076BC !important; text-align: center !important; height: 38px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important; margin: 0 !important; }
.commanbutton:hover { background-color: #212529 !important; border-color: #212529 !important; color: #fff !important; }


.export-commanbutton { color: #0076BC !important; border-radius: 5px !important; background-color: #fff !important; border: 1px solid #0076BC !important; text-align: center !important; height: 38px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important; box-shadow: none !important; }
.export-commanbutton:hover { background-color: #0076BC !important; border-color: #0076BC !important; color: #fff !important; }

.defaultbtn { color: #fff !important; border-radius: 5px !important; background-color: #0076BC !important; border: 1px solid #0076BC !important; text-align: center !important; transition: all 0.5s !important; font-size: 14px !important; margin: 0 !important; }
.defaultbtn:hover { background-color: #212529 !important; border-color: #212529 !important; color: #fff !important; }


input.submitbutton[type="submit"] { color: #fff; border-radius: 25px; background-color: #0076BC; border: 1px solid #0076BC; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; box-shadow: none !important; }
input.submitbutton:hover[type="submit"] { background-color: #212529; border-color: #212529; box-shadow: none !important; color: #fff; }

input.submitbutton[type="button"] { color: #fff; border-radius: 25px; background-color: #0076BC; border: 1px solid #0076BC; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
input.submitbutton:hover[type="button"] { background-color: #212529; border-color: #212529; }


input.resetbutton[type="reset"]  { color: #212529; border-radius: 25px; background-color: #fff; border: 1px solid #212529; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
input.resetbutton:hover[type="reset"] { background-color: #212529; color: #fff; }

input.resetbutton[type="button"]  { color: #212529; border-radius: 25px; background-color: #fff; border: 1px solid #212529; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
input.resetbutton:hover[type="button"] { background-color: #212529; color: #fff; }

.cancelbutton[type="button"]  { color: #EF5050; border-radius: 25px; background-color: #fff; border: 1px solid #EF5050; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.cancelbutton:hover[type="button"] { background-color: #EF5050; color: #fff; }

.cancelbutton[type="submit"]  { color: #EF5050; border-radius: 25px; background-color: #fff; border: 1px solid #EF5050; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.cancelbutton:hover[type="submit"] { background-color: #EF5050; color: #fff; }


.comman-popup-body input[type="submit"] { color: #fff; border-radius: 25px; background-color: #0076BC; border: 1px solid #0076BC; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.comman-popup-body input:hover[type="submit"] { background-color: #212529; border-color: #212529; }

.comman-popup-body input[type="reset"]  { color: #212529; border-radius: 25px; background-color: #fff; border: 1px solid #212529; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.comman-popup-body input:hover[type="reset"] { background-color: #212529; color: #fff; }

.comman-popup-body input[type="button"]  { color: #EF5050; border-radius: 25px; background-color: #fff; border: 1px solid #EF5050; text-align: center; height: 35px; transition: all 0.5s; padding: 0 12px; font-size: 14px; margin: 0; }
.comman-popup-body input:hover[type="button"] { background-color: #EF5050; color: #fff; }

.submitbutton.done[type="button"] { color: #0076BC !important; border-radius: 25px !important; background-color: #fff !important; border: 1px solid #0076BC !important; text-align: center !important; height: 38px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important; box-shadow: none !important; }
.submitbutton.done[type="button"]:hover { background-color: #0076BC !important; border-color: #0076BC !important; color: #fff !important; }





.configureoptions-popup .modal-dialog { max-width: 450px; width: 100%; }
.configureoptions-popup .modal-content { border-radius: 25px; }
.configureoptions-popup .note { font-size: 14px; color: #727272; }
.configureoptions-popup ul { list-style: none; }
.configureoptions-popup ul li a {display: flex; flex-direction: column; background-color: #F4FBFF; border-radius: 5px; }
.configureoptions-popup ul li p { color: #919191; font-size: 14px; font-weight: 400; }
.configureoptions-popup ul li span { color: #0076BC; font-size: 14px; font-weight: 500; }

.field-info { color: #818181; font-size: 12px; margin-top: 5px; display: flex; }

.page-action-footer .buttons { display: flex; column-gap: 10px; justify-content: flex-end; }
.signature-textarea { height:140px !important; }
.report-card { border-radius: 15px; border: 1px solid #F2F2F2; transition: all 0.5s; }
.report-card:hover { border-color: #FF5F0B; }
.report-card p { color: #000; font-size: 16px; }
.report-icon { background-color: #FFF5EF; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; color: #FF5F0B; }
select option:disabled { color: gray; }
.table-search .form-group { max-width: 200px; }
.table-search .search-icon { width: 28px; height: 28px; background-color: #E2F4FF; color: #0076BC; border-radius: 5px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 6px; right: 6px; transition: all 0.5s; margin: 0 !important; padding: 0 !important; border: 0; }
.table-search .search-icon:hover { background-color:#0076BC; color: #fff; }

.table-entries {  }

.link { color: #0076BC; transition: all 0.5s; }
.link:hover { color: #212529; }
.custom-checkbox { display: flex; align-items: center; }
.checkbox-input { position: relative; flex-shrink: 0; width: 16px; height: 16px; appearance: none; border: none; cursor: pointer; border-radius: 0; background-color: transparent; }
.checkbox-input:checked:before { background: #0076BC; border: 1px solid #0076BC; }
.checkbox-input:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #333333; background-color: transparent; transition: background-color 0.2s; border-radius: 3px; }
.checkbox-input:checked:after { width: 9px; height: 5px; transition: height 0.08s ease-out, width 0.08s ease-out 0.1s; border-color: #fff; top: -4px; left: -3px; }
.checkbox-input:after { content: ""; position: absolute; width: 0; height: 0; transform: rotate(-45deg); transform-origin: 1.125rem -0.0625rem; border-bottom: 0.125rem solid transparent; border-left: 0.125rem solid transparent; }

.card-header-right-content .card-action ul { list-style: none; display: flex; column-gap: 5px; }
.card-header-right-content .card-action ul li a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #E2F4FF; border-radius: 5px; color: #0076BC; transition: all 0.5s; }
.card-header-right-content .card-action ul li a:hover {  background: #0076BC; color: #fff; }
.card-header-right-content .card-action ul li a.delete { background: #FFEDED; color: #FF3333; }
.card-header-right-content .card-action ul li a.delete:hover { background: #FF3333; color: #fff; }

/* login loading */
.login-message { font-weight: 400; font-size: 14px; }
.confirmation-message { font-size: 18px; font-weight: 600; }
.confirmation-sub-message { font-size: 16px; font-weight: 500; }

/* dashboard */
.search-query.form-control + .ui-datepicker-trigger { position: absolute; top: 38px; right: 10px; }
.nav-tabs.statistics-tab { padding: 0 !important; border-bottom: 0; height: auto !important; background: #fff !important;  box-shadow: none; }
.header-action-dropdown { border-radius: 10px !important; top: 42px !important; padding-top: 10px !important; border: 0 !important; box-shadow: 0 10px 15px -5px rgba(189, 189, 189, 0.5) !important; padding-bottom: 0 !important; }
.header-action-dropdown a { padding: 10px 15px !important; }
.header-action-dropdown.dropdown-menu li > a:hover, 
.header-action-dropdown.dropdown-menu .active > a, 
.header-action-dropdown.dropdown-menu .active > a:hover { background-color: transparent; color: #0088cc; }
.header-action-dropdown.dropdown-menu li + li { border: 0; }
.header-action-dropdown .logoutbutton { background: #FFF4F4; border-radius: 0 0 10px 10px; color: #D73939 !important; border-top: 1px solid transparent; display: flex;
  align-items: center; justify-content: space-between; }
.header-action-dropdown .logoutbutton:hover { border-color:#ff7e7e; }

/* Fix dropdown z-index to appear above sticky header */
.customQ-dropdown,
#customQ_nav .customQ-dropdown,
.sub-navication .customQ-dropdown {
    z-index: 10000 !important;
}

/* Disable hover-based dropdown - Use click only */
#customQ_nav ul li.item:hover div.customQ-dropdown {
    display: none !important;
}

/* Show dropdown only when dropdown-open class is present */
#customQ_nav ul li.item.dropdown-open div.customQ-dropdown {
    display: block !important;
}

/* Extend hover area to include dropdown so it doesn't hide when moving mouse to click */
#customQ_nav ul li.item {
    position: relative;
}

#customQ_nav ul li.item .customQ-dropdown {
    pointer-events: auto !important;
}

/* navication css */
.custom-navication { background: transparent !important; padding: 15px 15px !important; border: 0 !important; display: flex; flex-direction: column; line-height: initial !important; }
.custom-navication li { height: auto !important; margin: 3px 0; text-align: left !important; padding: 12px 20px !important; cursor: pointer; }
.custom-navication li + li { margin: 1px 0 !important; }
.custom-navication li a { text-align: left; padding: 12px 20px !important; }
.custom-navication li.active { box-shadow: none !important; border: 0 !important; background: #0076BC !important; border-radius: 25px !important; color: #fff !important; }
.custom-navication li.active a { color: #fff !important; }
.custom-navication li.inactive:hover { background-color: #0076BC !important; border-radius: 25px !important; color: #fff !important; } 
.custom-navication li.inactive:hover a { color: #fff !important; } 
.custom-navication li.active, .custom-navication li.inactive:hover { box-shadow: none !important; border-color: transparent !important; color: #fff !important; }

.custom-navication li.inactive:hover > ul { visibility: hidden !important; opacity: 0; }
.sub-navication { 
    background: #fff !important; 
    border: 0 !important; 
    padding: 0px 30px !important; 
    position: relative !important; 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap !important; /* Changed to wrap for responsive design */
    line-height: 28px; 
    margin: 0 !important; 
    align-items: center; 
    visibility: inherit !important;
    gap: 4px; /* Add gap between wrapped items */
}
.jb-overflowmenu { height: auto !important; }
.sub-navication li { 
    margin: 6px 3px !important; 
    display: flex; 
    align-items: center; 
    flex-shrink: 0; 
    justify-content: space-between;
}
.sub-navication li .queue-count { order: 1; }
.sub-navication li a { padding: 5px 0px 5px 0px !important; font-size: 14px; }
.sub-navication li a.active { /*border-bottom: 1px solid #999;*/ }
.sub-navication li a.active {
	border: transparent !important;
	background: #0076bc !important;
	color: #fff !important;
}
/* .sub-navication li.top-queue.item.active a { background-color: #0076bc; color: #fff !important; } */
#sub_nav.sub-navication  > li > a, #customQ_nav .jb-overflowmenu-menu-primary li.item > a { margin: 0; border: 1px solid #fff; background: linear-gradient(45deg, #f4fbff, #eef9ff); }

/* Overflow dropdown styling - HIDE MORE BUTTON */
.sub-navication .overflow-dropdown { 
    display: none !important; /* Hide the More button completely */
}
.sub-navication .overflow-toggle { 
    display: none !important;
}
.sub-navication .overflow-menu { 
    display: none !important;
}

/* Show all navigation items instead of hiding overflow items */
.sub-navication li.overflow-item {
    display: block !important;
}

/* Responsive navigation - wrap items instead of hiding */
.sub-navication {
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.sub-navication > li {
    flex-shrink: 0;
}

/* ==========================================
   MODERN PREMIUM NAVIGATION - 2026 DESIGN
   Click-based dropdowns with smooth animations
   ========================================== */

/* Import Montserrat Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Navigation Wrapper */
.nav-wrapper {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Hamburger Menu Button - Hidden on Desktop */
.hamburger-menu {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 9;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
    width: 100%;
}

.hamburger-menu .menu-text {
    order: 1;
    flex: 0 0 auto;
}

.hamburger-menu .hamburger-icon {
    order: 2;
    margin-left: auto;
}

.hamburger-menu:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
    transform: translateY(-1px);
}

.hamburger-menu:focus {
    outline: 3px solid rgba(14, 165, 233, 0.3);
    outline-offset: 2px;
}

.hamburger-menu:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(14, 165, 233, 0.2);
}

/* Hamburger Icon */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 24px;
    height: 18px;
}

.hamburger-icon .bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger Animation when Active */
.hamburger-menu.active .hamburger-icon .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-menu.active .hamburger-icon .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger-menu.active .hamburger-icon .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Desktop Navigation Styles - Premium 2026 Design */
.sub-navication { 
    background: transparent !important; 
    border: 0 !important; 
    padding: 16px 32px !important; 
    position: relative !important; 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap !important;
    line-height: 1.6; 
    margin: 0 !important; 
    align-items: center; 
    visibility: inherit !important;
    gap: 8px;
    list-style: none;
}

.sub-navication li { 
    margin: 0 !important; 
    display: flex; 
    align-items: center; 
    flex-shrink: 0; 
    position: relative;
}

.sub-navication li a { 
    padding: 5px 12px !important; 
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #475569;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sub-navication li a:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e0f2fe 100%);
    color: #0284c7;
    border-color: #bae6fd;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    transform: translateY(-2px);
}

.sub-navication li a.active {
    background: linear-gradient(135deg, #afe6ff 0%, #c4ebff 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 6px rgba(199, 199, 199, 0.35) !important;
    font-weight: 600;
}

/* Dropdown indicator for items with submenus */
.sub-navication li.top-queue > a::after,
.sub-navication li.has-dropdown > a::after,
.sub-navication li:has(.customQ-dropdown) > a::after {
    content: '›';
    font-size: 18px;
    margin-left: 4px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    display: none;
}

.sub-navication li.dropdown-open > a::after {
    transform: rotate(90deg);
}

/* Premium Dropdown Menu Styling */
.sub-navication .customQ-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;    
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    padding: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.sub-navication li.dropdown-open .customQ-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 500px;
    pointer-events: auto;
}

.sub-navication .customQ-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-navication .customQ-dropdown li {
    margin: 2px 0 !important;
    display: block !important;
    width: 100%;
}

.sub-navication .customQ-dropdown li a {
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    /* width: 100%; */
    display: flex !important;
    align-items: center;
}

.sub-navication .customQ-dropdown li a:hover {
    /* background: #f1f5f9 !important; */
    color: #0ea5e9 !important;
    transform: translateX(4px) !important;
}

.sub-navication .customQ-dropdown li a.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #0284c7 !important;
    font-weight: 600;
}

#sub_nav.sub-navication > li > a, 
#customQ_nav .jb-overflowmenu-menu-primary li.item > a { 
    /* padding: 5px 18px !important;  */
    margin: 0; 
    border: 1px solid #e2e8f0; 
    background: #ffffff;
    color: #000 !important;
}

/* Desktop: Show content by default */
.sub-navication-content {
    display: block !important;
}

/* Hide overflow items - keep all visible */
.sub-navication .overflow-dropdown,
.sub-navication .overflow-toggle,
.sub-navication .overflow-menu { 
    display: none !important;
}

.sub-navication li.overflow-item {
    display: flex !important;
}

/* Prevent body scroll when mobile menu is open */
body.nav-open {
    overflow: hidden;
}

/* Desktop: Ensure dropdowns stay within viewport */
.sub-navication li.top-queue,
.sub-navication li:has(.customQ-dropdown) {
    position: relative;
}

/* Left-aligned dropdowns for first few items to prevent overflow */
.sub-navication li:nth-child(-n+2) .customQ-dropdown {
    left: 0;
    right: auto;
}

/* Smooth transitions for all interactive elements */
.sub-navication * {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.sub-navication .overflow-menu .customQ-dropdown ul {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 180px;
    padding: 5px;
    list-style: none;
    margin: 0;
}
.sub-navication .overflow-menu .customQ-dropdown ul li {
    list-style: none;
    margin: 0 !important;
    display: block !important;
}
.sub-navication .overflow-menu .customQ-dropdown ul li a {
    display: block !important;
    padding: 0px 10px 0px 0 !important;
    color: #333 !important;
    font-size: 14px;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
}
.sub-navication .overflow-menu .customQ-dropdown ul li a:hover {
    background-color: #f0f8ff !important;
}
.sub-navication .overflow-menu .customQ-dropdown .scroll-height {
    max-height: 400px;
    overflow-y: auto;
}
.sub-navication .overflow-menu .customQ-dropdown .add-queue {
    border-top: 1px solid #e0e0e0;
    margin-top: 4px;
    padding-top: 4px;
}
.sub-navication .overflow-menu .customQ-dropdown .queue-count {
    float: right;
    margin-left: 8px;
    color: #E65524;
}
.sub-navication .overflow-menu li .customQ-dropdown ul li {
	background: transparent;
}
.sub-navication .overflow-menu li .customQ-dropdown ul li a { margin: 0 !important; height: auto; }
.sub-navication .overflow-menu .customQ-dropdown .add-queue a { background: #0076bc !important; color: #fff !important; }
.sub-navication .overflow-menu .customQ-dropdown .add-queue a span { opacity: 1; }
/* navication css End */

.myprofile-tabs { background: #fff !important; border: 0 !important; box-shadow: none !important; height: auto !important; border-radius: 15px;
	flex-direction: row; padding:15px !important; column-gap: 10px; list-style: none; }
ul.myprofile-tabs li a { border-radius: 25px !important; font-size: 14px; color: #484848; }
ul.myprofile-tabs li.active a { color: #fff; background-color: #0076BC; border-color: #0076BC; border-radius: 25px !important; }

.timezone-dropdown .select2-selection__rendered { font-size: 14px; line-height: 40px !important; }
.timezone-dropdown .select2-selection { border-color: #C5D1D8 !important; height: 40px !important; }
.timezone-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

.table-content table.list tbody tr:nth-child(2n+1) td { background-color: #fff; }
.table-content table.list { background: transparent !important; }
.table-pagination { background: #EBF8FF; border-bottom: 1px solid #EBF8FF !important; border-radius: 0 0 10px 10px; }
.table-content table.list thead th a.desc { background: url('../images/desc.gif') 100% 50% no-repeat #F5F5F5 !important;	color: #0076BC !important; }
.table-content table.list thead th a.asc { background: url('../images/asc.gif') 100% 50% no-repeat #F5F5F5 !important; color: #0076BC !important; }

/* user directory css*/
.user-directory-header { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 10px 10px 0 0; padding: 15px 30px; border-color: #E9E9E9; }
.user-directory-list-card { border-radius: 0px 0px 10px 10px; }
.table-search .form-control { padding: 0 15px; }
.table-action-row { background-color: #F5F5F5 !important; }
.listing-action-buttons .commanbutton {
	color: #0076BC !important;
	border-radius: 5px !important;
	background-color: #E2F4FF !important;
	border: 1px solid #E2F4FF !important;
	text-align: center !important;
	height: 30px !important;
	transition: all 0.5s !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	margin: 0 !important;
	line-height: 30px;
	box-shadow: none !important;
}
.commanbutton:hover { background-color: #212529 !important; border-color: #212529 !important; color: #fff !important; box-shadow: none !important; }
.listing-action-buttons .commanbutton i.icon-caret-down { line-height: 30px; padding-top: 0; height: 32px; padding-left: 10px; /*border-color: #E2F4FF; */border: 0; }
.listing-action-buttons .commanbutton:hover i.icon-caret-down { border-color: #5a5a5a; }
.user-directory-header h2 a { font-size: 18px; font-weight: 600; color: #212529; }
.user-directory-header h2 a:hover { color: #0076BC; }

.user-directory-tab { background: #fff !important; box-shadow: none !important; height: auto !important; border-radius: 0;
flex-direction: row; column-gap: 10px; list-style: none; }
ul.user-directory-tab li a { border-radius: 25px !important; font-size: 14px; color: #484848; }
ul.user-directory-tab li.active a { color: #fff; background-color: #0076BC; border-color: #0076BC; border-radius: 25px !important; }
/* user directory css End*/

.userticket-details { background: #fff; }
.userticket-details-column td { font-size: 14px; } 
.userticket-details-column th { font-size: 14px; } 

.ticketmodify-tabs { background: #fff !important; box-shadow: none !important; height: auto !important; border-radius: 0;
  flex-direction: row; column-gap: 10px; list-style: none; }
ul.ticketmodify-tabs li a { border-radius: 25px !important; font-size: 14px; color: #484848; }
ul.ticketmodify-tabs li.active a { color: #fff; background-color: #0076BC; border-color: #0076BC; border-radius: 25px !important; }

.custom-thread-entry-design .header { /*background: #E8F6FF !important;*/ font-size: 14px; }
.custom-thread-entry-design .avatar > img.avatar { border-radius: 50%; }

.thread-entry.message .header .small-dropdown-button { background-color: #9dc2f2; color:#fff; width: 25px; text-align: center; }
.thread-entry.response .header .small-dropdown-button { background-color: #0076BC; color:#fff; width: 25px; text-align: center; }
.thread-entry.response .header .label-bare {
	border-radius: 5px;
	padding: 2px 5px;
	background: #edf8ff;
	border: 1px solid rgba(0,0,0,0.15);
	width: 25px;
	color: #0076bc;
	height: 25px;
	display: inline-block;
	text-align: center;
}

.reply-content-form { background-color: transparent !important; border: 0 !important; }

.collaborators-content #show_ccs { background: #DAF1FF; border-radius: 5px; padding: 7px 15px; color: #212529; }
.collaborators-hidden-ceontent { background: #F6FCFF; margin: 0 10px; width: calc(100% - 25px) !important; }
.collaborators-column { max-width: 400px; width: 100%; }
.collaborators-column .select2-container { width: 100% !important; }
.collaborators-column .select2-selection--multiple { border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%;}
.collaborators-column .select2-container--default .select2-search--inline .select2-search__field { height: 38px; margin: 0; padding: 0 10px; }

.reply-content-form .redactor-toolbar { background: #DAF1FF !important; border-radius: 15px 15px 0 0 !important; }
.reply-content-form .redactor-box { border-radius: 15px !important; border: 1px solid #DBDBDB !important; } 
.reply-content-form .redactor-toolbar .re-button { background: transparent; border-radius: 5px !important; }
.reply-content-form .redactor-toolbar .re-button:hover { background-color: #0076BC !important; }
.reply-content-form #reply_form_attachments { margin: 15px 0 0 0; }
.reply-content-form .redactor-statusbar { border-radius: 0 0 15px 15px; }
.reply-content-form .filedrop .dropzone { border: 1px dashed #5D93B4 !important; background-color: #fff !important; color: #212529; 	text-align: center; border-radius: 10px !important; }
.reply-content-form .filedrop .files:not(:empty) { border-radius: 10px !important; display: flex; align-content: center; margin-bottom: 10px; background: #fff5f0; border-color: #fff5f0 !important; }
.reply-content-form .filedrop .files .file { height: auto !important; width: 100%; }
.reply-content-form .filedrop .files .file > span { padding: 0 !important; }

.user-directory-list-card p { font-size: 14px; font-weight: 400; }
.comman-table-header { display: flex; justify-content: space-between; align-items: center; }
.message-thread-content { display: flex; column-gap: 5px; flex-wrap: wrap; }
.message-thread-content .commanbutton {	margin: 3px 0 !important; }
.response-dropdown .select2-container { width: 100% !important; }
.response-dropdown .select2-selection__rendered { font-size: 14px; line-height: 40px !important; }
.response-dropdown .select2-selection { border-color: #C5D1D8 !important; height: 40px !important; }
.response-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.manage-collaborators.preview { font-size: 14px; }
.linktext {font-size: 14px; }

#ticket_thread #thread-items::before { margin-left: 24px; }
#ticket_thread .thread-event { padding: 0 2px 15px; margin-left: 20px; }
#ticket_thread .thread-event .description { font-size: 14px; line-height: 22px; }
#ticket_thread .thread-event .avatar { border-radius: 50%; margin: 0 5px 0 0px !important; }
.message.bar { z-index: 99999; }
.post-internal-note-content { border: 0 !important; background: transparent !important; }
.reply-content-form .attachments-box { margin: 15px 0 0 0; }
.engineer-mapping-list table.dataTable thead tr, .engineer-mapping-list table.dataTable thead tr tbody tr { background-color: transparent; }
.dataTables_wrapper.no-footer .dataTables_scrollBody { border-bottom: 1px solid #f4f4f4 !important; }
.dataTables_wrapper.no-footer .dataTables_scrollBody thead, .dataTables_wrapper.no-footer .dataTables_scrollBody thead th { border-radius: 0px !important; border-bottom: 0 !important; }
.engineer-mapping-list .dataTables_length { margin-bottom: 10px; }
.engineer-mapping-list .dataTables_length select { background-color: #fff; border-color: #C5D1D8; height: 35px; padding: 0 10px; }
.engineer-mapping-list .dataTables_filter input { background-color: #fff; border-color: #C5D1D8; height: 35px; padding: 0 10px; border-radius: 5px; }
.engineer-mapping-list .dataTables_filter input:focus { outline: none;}
.add-department-form .buttons { margin: 32px 0 0 0; }
.tasks-header-card .card-header { background-color: #fff; padding: 15px 0; display: flex; align-items: center; justify-content: space-between; }
.tasks-header-card .card-header h2 { color: #333; font-size: 18px; font-weight: 600; } 
.tasks-header-card .card-header p { color: #657882; font-size: 12px; } 
.customQ-dropdown ul li { margin-right: 0; margin: 0 5px !important; }
#line-chart-here { height: auto; overflow-x: auto; overflow-y: hidden; background: #f5fbff !important; padding-right: 50px !important; }

.comman-select2-dropdown .select2-container { width: 100% !important; }
.comman-select2-dropdown .select2-selection__rendered { font-size: 14px; line-height: 40px !important; }
.comman-select2-dropdown .select2-selection { border-color: #C5D1D8 !important; height: 40px !important; }
.comman-select2-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

.user-collaborators-field .form-group { width: 100%; }
.user-collaborators-field .changepasswordbutton { width: 120px; text-align: center; }
.user-collaborators-field { display: flex; column-gap: 15px; }

/* Modern Collaborators Multiselect Styling */
.collaborators-hidden-content {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin: 0 10px 15px 10px;
    width: calc(100% - 30px);
}
.collaborators-column {
    width: 100%;
}
.collaborators-column .form-group {
    margin-bottom: 0;
}
#collabselection {
    width: 100% !important;
    border-color: #C5D1D8 !important;
    border-radius: 6px !important;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #C5D1D8 !important;
    border-radius: 6px !important;
    min-height: 120px !important;
    padding: 8px !important;
    background: #fff !important;
}
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #0076BC !important;
    box-shadow: 0 0 0 3px rgba(0, 118, 188, 0.1) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #0076BC !important;
    border: 1px solid #0076BC !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 0px 10px !important;
    margin: 4px 6px 4px 0 !important;
    font-size: 13px !important;
    line-height: 22px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 0px !important;
    font-size: 16px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #FFE5E5 !important;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 6px !important;
    margin-left: 4px !important;
    font-size: 14px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #9CA3AF !important;
    font-size: 14px !important;
    margin-top: 6px !important;
    margin-left: 4px !important;
}
.select2-container--default .select2-results__option {
    padding: 10px 12px !important;
    font-size: 14px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #F0F8FF !important;
    color: #0076BC !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #E0F2FF !important;
    color: #0076BC !important;
}
.collaborators-content .manage-collaborators {
    color: #6B7280;
    font-size: 13px;
    text-decoration: none;
}
.collaborators-content .manage-collaborators:hover {
    color: #0076BC;
}
#show_ccs {
    cursor: pointer;
    color: #374151;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}
#show_ccs:hover {
    color: #0076BC;
}
#show_ccs #arrow-icon {
    transition: transform 0.2s ease;
}

.comman-select2-dropdown .select2-search__field { margin-top: 0 !important; }
.ticket-information-field .required { font-weight: 400 !important; }
.ticket-information-field .form-group.duedate-column { display: flex; flex-direction: column; position: relative; }
.ticket-information-field .form-group.duedate-column .duedate-field + .ui-datepicker-trigger { position: absolute; right: 10px; top: 37px; }
.ticket-information-field .form-group.duedate-column .duedate-field + .ui-datepicker-trigger + .faded { position: absolute; right: 0; font-size: 12px; }
.ticket-information-field .time-information { position: absolute; bottom: 22px; font-size: 12px; }

.comman-select2-dropdown.cannedresponse-apend { display: flex; align-items: center; max-width: 600px; column-gap: 10px; width: 100%; }
.comman-select2-dropdown.cannedresponse-apend .checkbox { width: 100%; display: flex; align-items: center; column-gap: 25px; }
.dynamic-form-ticketdetails td { border: 0; }

.kb-listing .list-content { background-size: 26px; margin: 15px 0 !important; }
.kb-listing .list-content h4 { font-size: 14px !important; }
.kb-listing .list-content span, 
.kb-listing .list-content h4,
.kb-listing .list-content p { font-size: 14px; }
.category-type-radiobutton { align-items: center; column-gap: 5px; font-size: 14px; flex-wrap: wrap; }

.table-content .table-scroll table.dataTable thead tr { background-color: transparent; }
.table-content table.dataTable.display tbody tr.odd { background-color: #fff; }
.datatable-filter-field .dataTables_length select { background-color: #fff; border-color: #C5D1D8; height: 35px; padding: 0 10px; }
.datatable-filter-field .dataTables_filter input { background-color: #fff; border-color: #C5D1D8; height: 35px; padding: 0 10px; border-radius: 5px; }
/* .report-listing-content .dataTables_scrollHead { padding-top: 15px !important; } */
.report-listing-content .DTFC_Cloned { border: none !important; }
/* .report-listing-content .dataTables_scrollBody table#display thead th { background: #fff !important; padding: 0 !important; } */

/* .report-listing-content .DTFC_LeftBodyLiner .org-report-listing thead th { background: #fff !important; padding: 0 !important; border: 0 !important; } */
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #0076BC !important; border-color: #0076BC !important; color: #fff !important; }
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #0076BC !important; border-color: #0076BC !important; color: #fff !important; }
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button { background: #f4f4f4 !important; border-color: #ddd !important; border-radius: 5px !important;  padding: 6px 10px !important; min-width: 40px !important; }
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #0076BC !important; border-color: #0076BC !important; color: #fff !important; }

.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.next, 
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.previous { font-size: 14px; }

.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.next, 
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.previous { font-size: 14px; }
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover, 
.datatable-filter-field .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover { background: #0076BC !important; border-radius: 5px !important; border: 1px solid #0076BC !important; color: #fff !important; cursor: pointer; }

/* all the popup css */
.comman-popup-body { background: #fff; border-radius: 15px; }
.popup-comman-title { color: #212529 !important; font-weight: 600; }
.comman-popup-body .drag-handle { color: #212529 !important; font-weight: 600; }
.comman-popup-body input { border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px !important; }
.comman-popup-body select { border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px !important; }
.comman-popup-body input:focus-visible { outline: none !important; }
.quick-add.changepassword-form small { font-size: 14px; }
/* .quick-add.changepassword-form tr:first-child .cell label { position: absolute; right: 20px; top: 14px; } */
.quick-add.changepassword-form tr:first-child .cell { position: relative; }
.quick-add.changepassword-form tr:last-child .cell label { position: absolute; right: 20px; top: 14px; }
.quick-add.changepassword-form tr:last-child .cell { position: relative; }
.quick-add.changepassword-form .cell .error { font-size: 12px; position: relative; top: 5px; }

/* all the popup css */
.card-header.mb-3.systemlogs-header .card-header-right-content .deleteentries-button { display: flex; align-items: center; column-gap: 5px; }
.card-header.mb-3.systemlogs-header .card-header-right-content .deleteentries-button p { color: #0076BC; }
.card-header.mb-3.systemlogs-header .card-header-right-content .deleteentries-button:hover p { color: #fff; }
.systemslogs-date-filter .hasDatepicker + .ui-datepicker-trigger { position: absolute; right: 15px; top: 8px; }
.systemlogs-info-content table tr td:first-child { color: #000; font-weight: 500; }

.dialog .table.manage2fa-option-list tr.manage2fa-option-data { background-color: #F4FBFF !important; }
.dialog .table.manage2fa-option-list tr td:not(:empty) { background-color: transparent !important; }
.org-profile-content { display: flex; flex-direction: column; }
.task-thread-content { border-top: 1px solid #E9E9E9; margin-top: 15px; }

.taskinformation-content caption { padding: 8px 0 !important; }
.taskinformation-content fieldset { padding-left: 0 !important; padding-right:0 !important; }
#action-dropdown-stats { left: 0 !important; }
#action-dropdown-stats::before, #action-dropdown-stats::after { right: calc(50% - 10px);}
#action-dropdown-org-stats { left: 0 !important; }
#action-dropdown-org-stats::before, #action-dropdown-org-stats::after { right: calc(50% - 10px);}
#user_tabs_container .floating-options { position: relative; top: 16px; right: 5px; left: inherit; position: absolute; }
.paginate_button.current { background: #d8f0ff !important; padding: 2px 10px !important; border-radius: 3px !important; border-color: #b7e2fb !important; }
.card-header .card-header-left-content h2 { font-size: 18px; font-weight: 600; color: #212529; }
.sorting-mode-select .form-control { height: 35px; font-size: 14px; max-width: 150px; }
.schedule-details-content select, .schedule-details-content input { border-color: #C5D1D8; height: 40px; font-size: 14px; padding: 0 15px; max-width: 350px;	width: 100%; }
.schedule-details-content .select2-container { max-width: 350px;	width: 100% !important; }
.schedule-details-content .select2-container .select2-selection--single { border-color: #C5D1D8; height: 40px; font-size: 14px; padding: 0 15px; }
.schedule-details-content .select2-container--default .select2-selection--single .select2-selection__rendered {	line-height: 40px; }
.schedule-details-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }

.select2-field input { border-color: #C5D1D8; height: 40px; font-size: 14px; padding: 0 15px; width: 100%; }
.select2-field .select2-container { max-width: 350px;	width: 100% !important; }
.select2-field .select2-container .select2-selection--single { border-color: #C5D1D8; height: 40px; font-size: 14px; padding: 0 15px; }
.select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {	line-height: 40px; }
.select2-field .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }


.default-form-control { border-color: #C5D1D8; font-size: 14px; padding: 5px 15px; height: 28px; }
.adv-search-method select { border-color: #C5D1D8; font-size: 14px; padding: 5px 15px; height: 34px; }
.condition-property select { border-color: #C5D1D8; font-size: 14px; padding: 5px 15px; height: 34px; width: 100% !important; max-width: 100%; }
.advanced-search .condition-property { margin: 7px 0 7px 20px !important; }
select { background-color: #F5F5F5; }
.checkbox-field label { font-weight: 600; }
.checkbox-field .commancheckbox { margin-bottom: 5px; font-size: 14px; }
.checkbox-field .commancheckbox input[type="checkbox"] { width: 12px; height: 12px; }
.duration-minutes { position: absolute; right: 10px; font-size: 12px; color: #ccc; }
.company-information-content tr td:first-child { width: 120px; }
.company-information-content tr td { vertical-align: middle; }
.company-information-content input { border-color: #C5D1D8; font-size: 14px; padding: 5px 15px; height: 40px; max-width: 345px; width: 100%; }
.company-information-content input:focus-visible { outline: none; }
.company-information-content textarea:focus-visible { outline: none; }
/* .heading-more-btn .action-button { color: #fff !important; border-radius: 5px !important; background-color: #0076BC !important; border: 1px solid #0076BC !important;
  text-align: center !important; height: 30px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important;
  margin: 0 !important; line-height: 30px; box-shadow: none !important; } */
.heading-more-btn .action-button { color: #0076BC !important; border-radius: 5px !important; background-color: #D2EEFF !important; border: 1px solid #BBE6FF !important; 	text-align: center !important;
	height: 30px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important; margin: 0 !important; line-height: 30px; box-shadow: none !important; }
.heading-more-btn .action-button:hover { background-color: #212529 !important; border-color: #212529 !important; color: #fff !important; box-shadow: none !important; }
.heading-more-btn .action-button:hover a { color: #fff !important; }
.heading-more-btn i.icon-caret-down { border: 0 !important; }
.authentication-cards-list .card { flex-direction: row; border: 1px solid #ddd; margin: 5px 0; padding: 15px; }
.authentication-cards-list .card a { margin-bottom: 5px; }
.authentication-cards-list .card .icon-file-text { font-size: 20px; }
.authentication-cards-list .card .faded { font-size: 14px; } 
.advanced-search.queuesearch-criteria-content .form-control { border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px; }
.advanced-search.queuesearch-criteria-content .form-control:focus { box-shadow: none; border-color: #C1E4F9; }
.advanced-search.queuesearch-criteria-content .adv-search-method { margin-left: 0; margin-bottom: 15px; }
.advanced-search.queuesearch-criteria-content .adv-search-field { margin-top: 10px; border-top: 1px solid #f4f4f4; padding-top: 10px; }
.advanced-search.queuesearch-criteria-content .adv-search-method select { max-width: 318px; width: 100%; }
.advanced-search.queuesearch-criteria-content .adv-search-val { margin-left: 0 !important; }
.advanced-search.queuesearch-criteria-content .adv-search-val select { max-width: 318px; width: 100%; border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px; margin-left: 0px; } 
.advanced-search.queuesearch-criteria-content .adv-search-val input { max-width: 318px !important; border-color: #C5D1D8; height: 38px; font-size: 14px; margin: 0; } 
.advanced-search.queuesearch-criteria-content .adv-search-val .select2-container--default .select2-selection--multiple { max-width: 318px !important; width: 100%; border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px; margin-left: 0px; }

/* Queue Settings Modern UI */
.queue-settings-container { 
    background: #ffffff; 
    border-radius: 8px;
}

.queue-setting-item {
    margin-bottom: 24px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.queue-setting-item:hover {
    border-color: #C1E4F9;
    box-shadow: 0 2px 8px rgba(0, 118, 188, 0.08);
}

.queue-setting-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 12px;
    gap: 8px;
}

.queue-setting-label i.icon-tag,
.queue-setting-label i.icon-filter,
.queue-setting-label i.icon-sort {
    color: #0076BC;
    font-size: 16px;
}

.queue-setting-label .help-tip {
    margin-left: auto;
    cursor: help;
}

.queue-setting-label .help-tip i {
    color: #94a3b8;
    font-size: 14px;
    transition: color 0.2s ease;
}

.queue-setting-label .help-tip:hover i {
    color: #0076BC;
}

.queue-setting-input {
    position: relative;
}

.queue-setting-input .form-control,
.queue-setting-input .form-select {
    width: 100%;
    height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
    background-color: #ffffff;
    border: 1px solid #C5D1D8;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.queue-setting-input .form-control:focus,
.queue-setting-input .form-select:focus {
    border-color: #0076BC;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 118, 188, 0.1);
}

.queue-setting-input .form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.queue-setting-readonly {
    padding: 10px 16px;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
}

.queue-setting-error {
    margin-top: 8px;
    font-size: 13px;
    color: #dc2626;
    padding: 8px 12px;
    background-color: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: 4px;
}

/* Enhanced select dropdown styling */
.queue-setting-input select.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23334155' d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.queue-setting-input select.form-select:hover {
    border-color: #94a3b8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .queue-setting-item {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .queue-setting-label {
        font-size: 13px;
    }
    
    .queue-setting-input .form-control,
    .queue-setting-input .form-select {
        height: 40px;
        font-size: 13px;
    }
}

.condition-search-content .adv-search-method { margin-left: 0; margin-bottom: 15px; }
.condition-search-content .adv-search-method select { max-width: 318px !important; width: 100%; border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px; margin-left: 0px; } 
.condition-search-content .adv-search-val { margin-left: 0 !important; }
.condition-search-content .adv-search-val select { max-width: 318px; width: 100%; border-color: #C5D1D8; height: 40px; font-size: 14px; max-width: 100%; padding: 0 15px; margin-left: 0px; } 
.condition-search-content .adv-search-val input { max-width: 318px !important; border-color: #C5D1D8; height: 38px; font-size: 14px; margin: 0; } 
/* .condition-search-content .adv-search-method + .properties { margin: 0 !important; max-width: 318px; } */
.condition-search-content .properties { display: flex; margin-left: 0 !important; flex-wrap: wrap; }
.condition-search-content .properties .condition-property { margin: 0 !important; width: calc(25% - 12px); }
.condition-search-content .properties .condition-property input { width: 100%; }
.condition-search-content .condition-property .default-form-control { margin: 24px 0 0 0; }

.custommenu-container .jb-overflowmenu { width: 100% !important; }

.sub-navication a { display: block; padding: 10px 16px; margin: 6px 8px; border-radius: 6px; color: #334155; background: #f9fafb; border: 1px solid transparent; transition: all 0.25s ease; }
.sub-navication .customQ-dropdown li a { height: 35px; line-height: 33px; padding: 0 !important; }
.sub-navication .customQ-dropdown li a:hover { background: #e0f2fe; color: #fff !important; }
.opensubmenu { display: none; }
.opensubmenu span { color: #666; font-size: 14px; font-weight: 600; }
.sub-navication li .icon-sort-down { margin-top: 2px; font-size: 80%; }

.page-wrapper.toggled .mobile-menu-close { display: none; }
.schedule-details-content input[type="checkbox"] { width: 12px; }
.agent-module-table-header .card-header-right-content { margin: 0 !important; }
.engineer-mapping-list #display thead { visibility: hidden; display: table-footer-group;}
.dataTables_scrollBody #display thead { visibility: hidden; display: table-footer-group;}
.DTFC_LeftBodyLiner .display thead { visibility: hidden; display: table-footer-group;}

.kb-listing .list-content table tbody tr:nth-child(2n+1) td { background-color: #f0faff; }
.kb-listing .list-content table tbody td { background: #fff; padding: 5px; vertical-align: top; font-size: 14px; }

.table-content span.Icon { display: none; }
.table-content table.tickets td span a { color: #0076BC; }
.table-content table.tickets td a.preview { color: #0076BC; }

.ticket-header { display: flex; align-items: center; justify-content: space-between; }
.ticket-header .table-search .form-group { max-width: max-content; }  
.search-button-filter .table-search { display: flex; column-gap: 10px; align-items: center; }
.search-button-filter .table-search .advancedtext a { border: 1px solid #C5D1D8; height: 40px; background: #fff; border-radius: 5px; display: flex;
  align-items: center; padding: 0 10px; color: #0076BC; } 
  .search-button-filter .table-search .advancedtext a i { display: none; }  
  .search-button-filter .table-search .advancedtext a:hover i { display: block; }
.adv-search-field-container .checkbox.inline { margin: 0; }
.adv-search-field-container input[type="checkbox"] { width: 14px; height: 10px; font-weight: 500; }
.backreportbutton { background: transparent; border: 0; color: #0076BC !important; }
.backreportbutton:hover { color: #212529; }
.report-title { display: flex; align-items: center; gap: 10px; }
table.dataTable { border-collapse: collapse !important; }
#user-import-tabs_container #upload input { height: auto; }


/* --- Align filter elements left & right like screenshot --- */
.engineer-mapping-list .dataTables_wrapper .dataTables_length,
.engineer-mapping-list .dataTables_wrapper .dataTables_filter {
    display: flex; align-items: center; margin-bottom: 12px; }
/* --- "Show entries" Select Box --- */
.engineer-mapping-list .dataTables_length select {
    border: 1px solid #d2d6dc !important; padding: 6px 28px 6px 10px !important; border-radius: 5px !important; outline: none !important; background: #fff !important;
    font-size: 14px !important; cursor: pointer; }
/* --- Search Box Wrapper --- */
.engineer-mapping-list .dataTables_filter { position: relative; }
/* --- Redesign Search Input --- */
.engineer-mapping-list .dataTables_filter input[type="search"] { width: 220px !important; border: 1px solid #d2d6dc !important; padding: 8px 38px 8px 12px !important;
    border-radius: 5px !important; font-size: 14px !important; outline: none !important; background-color: #fff !important; position: relative; }
/* --- Add Search Icon Inside Input --- */
.engineer-mapping-list .dataTables_filter:after { content: ""; position: absolute; right: 4px; top: 17px; width: 28px; height: 27px; transform: translateY(-50%);
    pointer-events: none; background-image: url('data:image/svg+xml;utf8,<svg fill="%230076BC" width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.9 14.32a8 8 0 111.41-1.41l4.39 4.38-1.41 1.42-4.39-4.39zM8 14A6 6 0 108 2a6 6 0 000 12z"/></svg>');
    background-size: 18px; background-repeat: no-repeat; background-color: #E2F4FF; background-position: 5px 6px; border-radius: 5px; }
/* --- Remove default label boldness --- */
.engineer-mapping-list .dataTables_filter label, 
.engineer-mapping-list .dataTables_length label { font-weight: 600; }
/* Add placeholder text */
.dataTables_filter input[type="search"]::placeholder { content: "Search..."; color: #9aa3b1; font-size: 14px;  opacity: 1; }
/* Placeholder styling */
.engineer-mapping-list .dataTables_filter input[type="search"]::placeholder { color: #9aa3b1; font-size: 14px; opacity: 1; }
.page-wrapper.toggled #footer { position: fixed; bottom: 0; width: calc(100% - 260px); left: 260px; background: #f3f5f9; z-index: 9; }
.deletebutton { background-color: #FFEDED !important; color: #FF3333 !important; border-radius: 5px !important; border: 1px solid #FFEDED !important;
text-align: center !important; height: 30px !important; transition: all 0.5s !important; padding: 0 12px !important; font-size: 14px !important; margin: 0 !important;
line-height: 30px; box-shadow: none !important; }
.deletebutton:hover { background-color: #FF3333 !important; color: #fff !important; border-color: #FF3333 !important; }
.page-action-footer i { display: none; }
.popup-footer { display: flex; }
.advanced-add-other-fields .select2-container .select2-selection--single { height: 38px; }
.advanced-add-other-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 14px; line-height: 38px; }
.advanced-add-other-fields .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.ckb { appearance: none; -webkit-appearance: none; width: 16px !important; height: 16px !important;
	border: 1px solid #cfcfcf; border-radius: 3px; outline: none; cursor: pointer; background-color: #fff;
	transition: all 0.2s ease; position: relative !important; }
/* Hover effect */
.ckb:hover { border-color: #b3b3b3; }
/* When checked */
.ckb:checked { background-color: #0076BC;   /* change color as needed */ border-color: #0076BC; }
/* Checkmark */
.ckb:checked::after { content: ""; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0;  transform: rotate(45deg); }






.commancheckbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px !important; height: 14px !important;
	border: 1px solid #cfcfcf; border-radius: 3px; outline: none; cursor: pointer; background-color: #fff;
	transition: all 0.2s ease; position: relative !important; }
/* Hover effect */
.commancheckbox input[type="checkbox"]:hover { border-color: #b3b3b3; }
/* When checked */
.commancheckbox input[type="checkbox"]:checked { background-color: #0076BC;   /* change color as needed */ border-color: #0076BC; }
/* Checkmark */
.commancheckbox input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 1px; left: 5px; width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0;  transform: rotate(45deg); }
input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cfcfcf;
    background-color: #fff;
    margin-right: 6px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}
/* Hover */
input[type="radio"]:hover {
    border-color: #8ea0b5;
}
/* When checked – blue outline */
input[type="radio"]:checked {
    border-color: #0066cc !important;
}
/* Inner filled dot */
input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; background: #0066cc; border-radius: 50%; position: absolute; top: 2px; left: 2px; }
/* Works on Chrome, Edge, Safari */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f3f3f3;  /* light background */  border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #89d3ff; /* grey thumb */ border-radius: 10px; border: 2px solid #f3f3f3; /* space around thumb */ }
::-webkit-scrollbar-thumb:hover { background: #b5b5b5; /* slightly darker on hover */ }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #89d3ff #f3f3f3; }

/* Add rounded search icon inside DataTables filter (global for report/list pages) */
.datatable-filter-field .dataTables_filter,
.dataTables_wrapper .dataTables_filter { position: relative; margin-bottom: 15px; }
.datatable-filter-field .dataTables_filter label,
.dataTables_wrapper .dataTables_filter label { display: block; position: relative; margin: 0; }
/* Icon container (left side inside the label) */
.datatable-filter-field .dataTables_filter label:before,
.dataTables_wrapper .dataTables_filter label:before { content: ""; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); width: 30px; height: 30px; border-radius: 5px; background-color: #E2F4FF;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='14' height='14'><path fill='%230076BC' d='M12.9 14.32a8 8 0 111.41-1.41l4.39 4.38-1.41 1.42-4.39-4.39zM8 14A6 6 0 108 2a6 6 0 000 12z'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 18px; pointer-events: none;
  box-shadow: none; }
input:focus-visible { outline: none !important; }
/* Make sure the input has enough left padding so text doesn't overlap the icon */
.datatable-filter-field .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input[type="search"],
.datatable-filter-field .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input { padding-left: 10px !important; height: 36px; border-radius: 5px; background-color: #fff; border: 1px solid #C5D1D8; width: 98%; margin-left: 0 !important; }
.datatable-filter-field #display_length select { width: 90px; }
/* Small screen adjustments */
@media (max-width: 575px) {
.datatable-filter-field .dataTables_filter label:before,
.dataTables_wrapper .dataTables_filter label:before { width: 30px; height: 30px; }
.datatable-filter-field .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input { padding-left: 10px !important; height: 34px; }
}
.dataTables_scrollHeadInner { width: auto !important; }
.dataTables_scrollHeadInner table { width: auto !important; }
.dataTables_scrollBody table { width: 100% !important; }
.dataTables_scrollHeadInner table {	width: 100% !important; }

.user-collaborators-field.cc-field .select2-container--default .select2-selection--multiple .select2-selection__choice {
	height: auto;
	line-height: 10px;
	padding: 5px !important;
	display: flex;
	align-items: center;
	border-radius: 5px !important;
}
.user-collaborators-field.cc-field .comman-select2-dropdown .select2-selection__rendered { line-height:auto !important; height: 100%; overflow: inherit; }
/* .tickets-listion-column .column-icon { position: relative; padding-right: 30px !important; } */
/* .tickets-listion-column .column-icon .pull-right { position: absolute; right: 5px; } */

form.page-title + .card-margin-top { margin-top: 15px !important; }
.collaborators-content { position: relative; }
.manage-collaborators.collaborators.preview { position: absolute; right: 15px; top: 9px; }
.ticket-view-user-info .form-control { line-height: inherit; font-size: 14px; font-weight: normal; background: #f7fcff; height: auto; padding: 8px 10px; min-height: 40px; }

/* Phone Number & Extension Field Styling */
#new-user-form .input-group.phone-field-group, 
#user-form .input-group.phone-field-group {
    display: flex;
    width: 100%;
}

#new-user-form .input-group.phone-field-group .form-control, 
#user-form .input-group.phone-field-group .form-control {
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border: 1px solid #ced4da;
    border-radius: 4px;
}


#new-user-form .input-group.phone-field-group input[type="tel"],
#user-form .input-group.phone-field-group input[type="tel"] {
    flex: 1 1 auto;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#new-user-form .input-group.phone-field-group .input-group-text, 
#user-form .input-group.phone-field-group .input-group-text {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857143;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-left: 0;
    border-right: 0;
    height: 38px;
}

#new-user-form .input-group.phone-field-group .ext-input, 
#user-form .input-group.phone-field-group .ext-input {
    flex: 0 0 100px;
    max-width: 100px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* Ensure consistent height for all form fields */
.user.form input[type="text"],
.user.form input[type="email"],
.user.form input[type="tel"],
.user.form textarea,
.user.form .form-control {
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

.user.form textarea.form-control {
    height: auto;
    min-height: 38px;
}

/* Required field asterisk styling */
#new-user-form label.required .error, 
#user-form label.required .error,
.grid.form label.required .error {
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}

/* Issue Summary, Priority Level & Client Dropdown Styling */
.grid.form input[type="text"],
.grid.form input[type="email"],
.grid.form select,
.grid.form .form-control {
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Proper field widths */
.grid.form .form-field-value input[type="text"],
.grid.form .form-field-value input[type="email"] {
    max-width: 500px;
    width: 100%;
}

.grid.form .form-field-value select,
.grid.form .form-field-value .select2-container {
    max-width: 350px;
    width: 100%;
}

/* Select dropdown styling */
.grid.form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

/* Select2 dropdown styling */
.grid.form .select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

.grid.form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 12px !important;
    color: #495057;
}

.grid.form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* Textarea and rich editor styling */
.grid.form textarea,
.grid.form .redactor-box {
    border: 1px solid #ced4da;
    border-radius: 4px;
    max-width: 800px;
    width: 100%;
}

.grid.form textarea {
    min-height: 150px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.grid.form .redactor-box textarea {
    border: none;
    border-radius: 0;
    max-width: 100%;
}

/* Issue Details field specific */
.grid.form .redactor-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #ced4da;
    border-radius: 4px 4px 0 0;
}

.grid.form .redactor-editor {
    min-height: 150px;
    padding: 12px;
    font-size: 14px;
}

/* Dynamic Form Div-based Layout */
.form-section {
    width: 100%;
    margin-bottom: 20px;
}

.form-header {
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 15px;
}

.form-field-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding:0;
}

.form-field-row .form-field-label {
    flex: 0 0 200px;
    min-width: 200px;
    padding-right: 15px;
    font-weight: 500;
    color: #495057;
    padding-top: 8px;
}

.form-field-row .form-field-label.required::after {
    content: "";
    margin-left: 4px;
}

.form-field-row .form-field-value {
    flex: 1;
    max-width: calc(100% - 200px);
    position: relative;
}
/* .form-field-value .error {
    position: absolute;
    right: 10px;
    top: 11px;
} */
.form-field-row .form-field-full {
    flex: 1;
    width: 100%;
}

/* Open a New Ticket css*/
.form-field-row.subject {
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
  width: 33.33%;
  position: relative;
  float: left;
}
.form-field-row.subject .form-field-label.multi-line {
	flex: auto;
	min-width: auto;
	width: 100%;
  font-size: 14px;
  color: #393939;
  font-weight: 600;
}
.form-field-row.subject .form-field-value {
	max-width: 100%;
	flex: auto;
	width: 100%;
}
.form-field-row.message {
	width: 100%;
}
.form-field-row.message .form-field-full {
	padding-top: 0 !important;
}
.form-field-row.subject #subject.form-group input {
	width: 96% !important;
}
.form-field-row.priority {
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
  width: 33.33%;
  position: relative;
  float: left;
}
.form-field-row.priority .form-field-label.multi-line {
	flex: auto;
	min-width: auto;
	width: 100%;
  font-size: 14px;
  color: #393939;
  font-weight: 600;
}
.form-field-row.priority .form-field-value {
	max-width: 100%;
	flex: auto;
	width: 100%;
}
.form-field-row.Client {
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
  width: 33.33%;
  position: relative;
  padding-left: 15px;
}
.form-field-row.Client #Client {
  position: relative;
}
.form-field-row.Client #Client .error {
	position: absolute;
	left: 60px;
	top: -30px;
}
.form-field-row.Client .form-field-label.multi-line {
	flex: auto;
	min-width: auto;
	width: 100%;  
  color: #393939;
  font-weight: 600;
}
.form-field-row.Client .form-field-value {
	max-width: 100%;
	flex: auto;
	width: 100%;
  padding-top: 5px !important;
}
.form-field-value #subject.form-group input  {
  border-color: #C5D1D8;
  height: 40px;
  font-size: 14px;
  max-width: 100%;
  padding: 0 15px;
}
/* Open a New Ticket End*/
/* user */
.useractionbutton .buttontext {
	margin-right: 8px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.form-field-row {
	flex-direction: column;
  margin-bottom: 0;
}
.form-field-row .form-field-label {
	flex: 0;
	min-width: 100%;
}
.form-field-row .form-field-value {
	flex: 1;
	max-width: calc(100% - 0px);
  width: 100%;
}
#new-user-form .form-field-row .form-field-value input {
	width: 97%;
}
#new-user-form .input-group.phone-field-group input[type="tel"], #user-form .input-group.phone-field-group input[type="tel"] {
	width: 50%;
}
/* Open a New Ticket*/
.form-field-row.priority {
	width: 50%;
}
.form-field-row.Client {
	width: auto;
}
.form-field-row.subject {
  width: 100%;
}
.changepasswordbutton {
  width: auto !important;
  padding: 0 12px !important;
}
.changepasswordbutton span.text {
	display: none;
}
/* Open a New Ticket End*/

}
@media (max-width: 575px) {
.form-field-row.priority {
	width: 100%;
}
.form-field-row.Client {
	width: 100%;
	padding-left: 0;
	float: left;
}
/* View Ticket */
.collaborators-column #collabs-button {
	display: none;
}
.collaborators-column i.icon-caret-down {
	margin: 0;
	padding: 0 !important;
}
#reply-to {
	padding-right: 40px;
}
}
@media (max-width: 479px) {
#advsearch #save-changes .form-group {
	flex-direction: column;
}
#action-dropdown-more li a {
	font-size: 14px;
	white-space: initial;
}
.sub-navication .overflow-dropdown {
	margin-left: auto !important;
}
}/* Modern & Clean UI for Ticket View Thread Page Only */
/* This CSS is scoped to #ticket-view-modern to avoid affecting other pages */

#ticket-view-modern {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f8f9fa;
    padding: 20px 0;
}

/* Modern Ticket Header */
#ticket-view-modern .ticket-header-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

#ticket-view-modern .ticket-header-modern h1 {
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

#ticket-view-modern .ticket-header-modern h1 .refresh {
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    transition: transform 0.3s ease;
}

#ticket-view-modern .ticket-header-modern h1 .refresh:hover {
    transform: rotate(180deg);
}

#ticket-view-modern .ticket-header-modern h1 small {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    margin-left: 10px;
}

#ticket-view-modern .ticket-header-modern .action-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    margin-left: 8px;
}

#ticket-view-modern .ticket-header-modern .action-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Modern Info Cards */
#ticket-view-modern .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

#ticket-view-modern .info-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ticket-view-modern .info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#ticket-view-modern .info-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: none;
}

#ticket-view-modern .info-card .card-body {
    padding: 0;
}

#ticket-view-modern .info-card table {
    width: 100%;
    border-collapse: collapse;
}

#ticket-view-modern .info-card table tr {
    border-bottom: 1px solid #f1f3f5;
    transition: background 0.2s ease;
}

#ticket-view-modern .info-card table tr:last-child {
    border-bottom: none;
}

#ticket-view-modern .info-card table tr:hover {
    background: #f8f9fa;
}

#ticket-view-modern .info-card table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 140px;
    background: #f8f9fa;
}

#ticket-view-modern .info-card table td {
    padding: 14px 20px;
    color: #212529;
    font-size: 14px;
}

/* Custom Data Section */
#ticket-view-modern .custom-data-modern {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    overflow: hidden;
}

#ticket-view-modern .custom-data-modern .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 16px;
}

#ticket-view-modern .custom-data-modern table {
    width: 100%;
}

#ticket-view-modern .custom-data-modern table tr {
    border-bottom: 1px solid #f1f3f5;
}

#ticket-view-modern .custom-data-modern table tr:last-child {
    border-bottom: none;
}

#ticket-view-modern .custom-data-modern table tr:hover {
    background: #f8f9fa;
}

#ticket-view-modern .custom-data-modern table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    font-size: 13px;
    width: 200px;
    background: #f8f9fa;
}

#ticket-view-modern .custom-data-modern table td {
    padding: 14px 20px;
    color: #212529;
}

/* Modern Thread Container */
#ticket-view-modern #ticketThread {
    background: transparent;
    padding: 0;
}

/* Modern Thread Entry */
#ticket-view-modern .thread-entry {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ticket-view-modern .thread-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Message Entry (from User) */
#ticket-view-modern .thread-entry.message .header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 0;
    padding: 16px 20px;
}

#ticket-view-modern .thread-entry.message .header b {
    color: white;
}

#ticket-view-modern .thread-entry.message .header time {
    color: rgba(255, 255, 255, 0.9);
}

#ticket-view-modern .thread-entry.message .header .faded {
    color: rgba(255, 255, 255, 0.85);
}

#ticket-view-modern .thread-entry.message .header .label {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
}

/* Response Entry (from Staff) */
#ticket-view-modern .thread-entry.response .header {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    border: none;
    border-radius: 0;
    padding: 16px 20px;
}

#ticket-view-modern .thread-entry.response .header b {
    color: white;
}

#ticket-view-modern .thread-entry.response .header time {
    color: rgba(255, 255, 255, 0.9);
}

#ticket-view-modern .thread-entry.response .header .faded {
    color: rgba(255, 255, 255, 0.85);
}

#ticket-view-modern .thread-entry.response .header .label {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
}

/* Thread Body */
#ticket-view-modern .thread-entry .thread-body {
    border: none;
    border-radius: 0;
    padding: 20px;
    background: white;
}

#ticket-view-modern .thread-entry .thread-body > div {
    line-height: 1.6;
    color: #495057;
}

/* Avatars */
#ticket-view-modern .thread-entry.avatar .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    margin: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 3px solid white;
}

#ticket-view-modern .thread-entry.avatar img.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Remove old arrow styles */
#ticket-view-modern .thread-entry.avatar .header:before,
#ticket-view-modern .thread-entry.avatar .header:after {
    display: none;
}

/* Attachments */
#ticket-view-modern .thread-body .attachments {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 2px solid #dee2e6;
    padding: 16px 20px;
    margin: 20px -20px -20px;
    border-radius: 0 0 12px 12px;
}

#ticket-view-modern .thread-body .attachments .attachment-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    margin: 4px 8px 4px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

#ticket-view-modern .thread-body .attachments .attachment-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#ticket-view-modern .thread-body .attachments .attachment-info i {
    color: #667eea;
    font-size: 16px;
}

#ticket-view-modern .thread-body .attachments .filename {
    color: #495057;
    font-weight: 500;
    text-decoration: none;
    max-width: 200px;
}

#ticket-view-modern .thread-body .attachments .filename:hover {
    color: #667eea;
}

#ticket-view-modern .thread-body .attachments .filesize {
    color: #868e96;
    font-size: 12px;
}

/* Reply Form */
#ticket-view-modern #reply {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-top: 30px;
}

#ticket-view-modern #reply h2 {
    color: #212529;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f5;
}

#ticket-view-modern #reply textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    transition: border-color 0.3s ease;
    resize: vertical;
    min-height: 150px;
}

#ticket-view-modern #reply textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

#ticket-view-modern #reply input[type="submit"],
#ticket-view-modern #reply input[type="reset"],
#ticket-view-modern #reply input[type="button"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 8px 8px 0;
}

#ticket-view-modern #reply input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

#ticket-view-modern #reply input[type="reset"] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

#ticket-view-modern #reply input[type="reset"]:hover {
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

#ticket-view-modern #reply input[type="button"] {
    background: transparent;
    color: #6c757d;
    border: 2px solid #dee2e6;
}

#ticket-view-modern #reply input[type="button"]:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    box-shadow: none;
}

#ticket-view-modern .warning-banner {
    background: linear-gradient(135deg, #ffd93d 0%, #ffb020 100%);
    color: #856404;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

/* Messages */
#ticket-view-modern #msg_info,
#ticket-view-modern #msg_error,
#ticket-view-modern #msg_notice,
#ticket-view-modern #msg_warning {
    border-radius: 8px;
    padding: 15px 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#ticket-view-modern #msg_info {
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

#ticket-view-modern #msg_error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-left: 4px solid #dc3545;
    color: #721c24;
}

#ticket-view-modern #msg_notice {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
    color: #155724;
}

#ticket-view-modern #msg_warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-left: 4px solid #ffc107;
    color: #856404;
}

/* Responsive Design */
@media (max-width: 768px) {
    #ticket-view-modern .info-grid {
        grid-template-columns: 1fr;
    }
    
    #ticket-view-modern .ticket-header-modern {
        padding: 20px;
    }
    
    #ticket-view-modern .ticket-header-modern h1 {
        font-size: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    #ticket-view-modern .info-card table th {
        width: 100px;
        font-size: 12px;
        padding: 10px 15px;
    }
    
    #ticket-view-modern .info-card table td {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    #ticket-view-modern #reply {
        padding: 20px;
    }
}

/* Remove old styles when in modern mode */
#ticket-view-modern #ticketInfo {
    border: none;
    width: 100%;
    background: transparent;
}

#ticket-view-modern .infoTable {
    border: none;
    background: transparent;
}

#ticket-view-modern .clear {
    clear: both;
}


#popup-loading, #loading {
  background-color: rgba(255, 255, 255, 0.3) !important;
  background-image: none;
  color: #0076BC !important;
  border: 0;
  box-shadow: none;  
  text-align: center;
}

#msg_warning {
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7e6, #ffe8c2);
    border: 1px solid #ffd591;
    color: #8a5a00;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    animation: fadeInWarning 0.3s ease-in-out;
}

/* Warning icon */
#msg_warning::before {
    content: "⚠";
    font-size: 18px;
    line-height: 1;
    margin-right: 5px;
}

/* Subtle hover effect */
#msg_warning:hover {
    background: linear-gradient(135deg, #ffe8c2, #ffd591);
}

/* Fade-in animation */
@keyframes fadeInWarning {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#msg_warning .overdueTicket {  padding-left: 5px; }
.redactor-styles { font-size: 14px !important; } 
#transfer select.form-control { width: 100% !important; max-width: 100%; }
#transfer .redactor-styles { border-color: #C5D1D8 !important; }
#transfer .redactor-box.redactor-styles-on,
#ticket-status .redactor-box.redactor-styles-on { border: 1px solid #C5D1D8 !important;}
#ticket-entries .merge-tickets { overflow-x: hidden; }
/* ==============================
   Modern Select Ticket Card
============================== */

.select-ticket-field {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e9ecef;
    padding: 18px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.select-ticket-field:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* Flex alignment improvement */
.select-ticket-field .d-flex {
    gap: 5px !important;
}

/* ==============================
   Modern Select Dropdown
============================== */

.ticketSelection.form-select {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #dcdfe4;
    padding: 10px 14px;
    font-size: 14px;
    background-color: #f9fafb;
    transition: all 0.25s ease;
    box-shadow: none;
}

.ticketSelection.form-select:focus {
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ==============================
   Modern Add Button
============================== */

.select-ticket-field .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
    color: #ffffff;
}

.select-ticket-field .btn-success:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35);
}

.select-ticket-field .btn-success:active {
    transform: scale(0.98);
}

/* Button icon spacing */
.select-ticket-field .btn-success i {
    font-size: 14px;
}

/* ==============================
   Responsive Fix
============================== */

@media (max-width: 576px) {
    .select-ticket-field .d-flex {
        flex-direction: column;
        align-items: stretch !important;
    }

    .select-ticket-field .btn-success {
        width: 100%;
        justify-content: center;
    }
}

/* Container full width */
.select-ticket-field .select2-container {
    width: 100% !important;
}

/* Main selection box */
.select-ticket-field .select2-container--default .select2-selection--single {
    height: 40px !important;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    display: flex;
    align-items: center;
    padding: 0 38px 0 12px;
    transition: all 0.2s ease;
    box-shadow: none;
}

/* Hover */
.select-ticket-field .select2-container--default .select2-selection--single:hover {
    border-color: #9ca3af;
    background: #ffffff;
}

/* Focus */
.select-ticket-field .select2-container--default.select2-container--focus 
.select2-selection--single {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Selected text */
.select-ticket-field .select2-selection__rendered {
    line-height: 40px !important;
    font-size: 14px;
    color: #374151;
    padding-left: 0 !important;
}

/* Placeholder */
.select-ticket-field .select2-selection__placeholder {
    color: #9ca3af;
}

/* Arrow */
.select-ticket-field .select2-selection__arrow {
    height: 40px !important;
    right: 10px !important;
}

.select-ticket-field .select2-selection__arrow b {
    border-width: 5px 4px 0 4px !important;
}

/* Dropdown */
.select-ticket-field .select2-dropdown {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Dropdown options */
.select-ticket-field .select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
}

/* Highlighted option */
.select-ticket-field .select2-results__option--highlighted {
    background: #2563eb !important;
    color: #fff !important;
}
/* =========================================
   Modern Ticket Entries UI
   Scoped to .ticket-entries-form
========================================= */

.ticket-entries-form #ticket-entries {
    padding: 0;
    margin: 0;
}

.ticket-entries-form .merge-tickets {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    overflow-y: auto;
}

/* Each Ticket Row */
.ticket-entries-form .merge-tickets li.row-item {
    list-style: none;
    position: relative;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 50px 10px 36px;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

/* Hover Effect */
.ticket-entries-form .merge-tickets li.row-item:hover {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Drag Icon */
.ticket-entries-form .merge-tickets li .icon-reorder {
    position: absolute;
    left: 10px;
    color: #9ca3af;
    cursor: move;
    font-size: 14px;
}

/* Ticket Number Link */
.ticket-entries-form .merge-tickets li a.preview {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.ticket-entries-form .merge-tickets li a.preview:hover {
    text-decoration: underline;
}

/* Right Side Icon Container */
.ticket-entries-form .merge-tickets li div[style*="position:absolute"] {
    right: 45px !important;
    top: 50% !important;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons Styling */
.ticket-entries-form .merge-tickets li i {
    color: #6b7280;
    font-size: 14px;
    transition: 0.2s ease;
}

.ticket-entries-form .merge-tickets li i:hover {
    color: #111827;
}

/* Delete Button */
.ticket-entries-form .merge-tickets li .button-group {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.ticket-entries-form .merge-tickets li .delete a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #fee2e2;
    transition: all 0.2s ease;
}

.ticket-entries-form .merge-tickets li .delete a:hover {
    background: #ef4444;
}

.ticket-entries-form .merge-tickets li .delete a:hover i {
    color: #ffffff;
}

/* Disabled Row */
.ticket-entries-form .merge-tickets li.ui-state-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f3f4f6;
}

/* Scrollbar Modern */
.ticket-entries-form .merge-tickets::-webkit-scrollbar {
    width: 6px;
}

.ticket-entries-form .merge-tickets::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.ticket-entries-form .row-item .delete { border: 0; }
.ticket-entries-form .row-item .delete:hover { background: transparent; color: transparent; }

/* =================================================
   Modern Export List UI
   SAFE VERSION – No structure changes
   Scoped to: .queue-export-listing
================================================= */

.queue-export-listing {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    padding: 0;
}

/* Keep table behavior intact */
.queue-export-listing .table {
    margin: 0;
}

/* Header row */
.queue-export-listing tr.header td {
    background: #f8fafc;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

/* Selected count text */
.queue-export-listing .faded {
    color: #fff;
    font-weight: 500;
}

/* Sortable rows */
.queue-export-listing .sortable-rows tr {
    transition: background 0.2s ease;
}

/* Row cells */
.queue-export-listing .sortable-rows tr td {
    padding: 11px 15px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    vertical-align: middle;
}

/* Hover effect */
.queue-export-listing .sortable-rows tr:hover {
    background: #f9fafb;
}

/* Drag icon */
.queue-export-listing .icon-sort {
    color: #9ca3af;
    margin-right: 8px;
    cursor: move;
    font-size: 13px;
}

/* Checkbox styling (safe) */
.queue-export-listing input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #2563eb;
}

/* Label spacing */
.queue-export-listing label {
    margin: 0;
    font-weight: 500;
    color: #374151;
}

/* Scrollbar styling */
.queue-export-listing::-webkit-scrollbar {
    width: 6px;
}

.queue-export-listing::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 8px;
}

.queue-export-listing .header { height: 40px; position: sticky; top: 0; background-color: #0076BC; z-index: 9;
    color: #fff; }
.queue-export-listing .header td { color: #fff !important; }

.queue-export-listing .table .header td:not(:empty) {
  background-color: transparent !important;
}

/* =========================================
   Modern Alert Messages
   Targets: #msg_error, #msg_notice, #msg_warning
========================================= */

/* Base Alert Style */
#msg_error,
#msg_notice,
#msg_warning {
    padding: 14px 16px 14px 44px;
    border-radius: 10px;
    margin: 12px 0;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    animation: fadeInAlert 0.3s ease-in-out;
}

/* Icons */
#msg_error::before,
#msg_notice::before,
#msg_warning::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: bold;
}

/* Error */
#msg_error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

#msg_error::before {
    content: "✖";
    color: #dc2626;
}

/* Success / Notice */
#msg_notice {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

#msg_notice::before {
    content: "✔";
    color: #16a34a;
}

/* Warning */
#msg_warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

#msg_warning::before {
    content: "⚠";
    color: #f59e0b;
}

/* Smooth Fade */
@keyframes fadeInAlert {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================
   Modern Table Pagination UI
   Safe Styling
===================================== */

.table-pagination { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 14px 16px; background: #ffffff; border-top: 1px solid #e5e7eb; font-size: 14px; flex-wrap: wrap; }
/* Page Numbers */
.table-pagination a,
.table-pagination .first-pagination { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.2s ease; }
/* Normal page link */
.table-pagination a { background: #f3f4f6; color: #374151; padding: 0; }
/* Hover */
.table-pagination a:hover { background: #0076BC; color: #ffffff; transform: translateY(-2px); }
/* Active page */
.table-pagination .first-pagination { background: #0076BC; color: #ffffff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
/* Export Button Special Styling */
.table-pagination .no-pjax { background: #16a34a; color: #ffffff; padding: 0 14px; font-weight: 600; }
.table-pagination .no-pjax:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); }
.table-pagination .faded.pull-right { order: 1; margin-left: auto; }
/*queue columns popup css*/
.queue-columns-table input.translatable { border-color: #C5D1D8 !important; height: 40px; font-size: 14px; padding: 0 15px !important; border-radius: 5px; width: 140px; }
.queue-columns-table button.translatable { border-color: #C5D1D8 !important; height: 42px; font-size: 14px; padding: 0 15px !important; border-radius: 0 5px 5px 0; background: #0076bc; }
div.translatable { border-color: #C5D1D8 !important; border-radius: 5px !important;  }
.append-column-controls { display: flex; align-items: center; gap: 10px; }
.append-column-controls .defaultbtn { height: 33px; min-width: 50px; }
/*queue columns popup css end*/
.report-table-content tbody td { white-space: inherit !important; word-break: inherit !important; }
.tickets-listion-column span.truncate { padding-right: 40px; }
.tickets-listion-column span.truncate + .small.icon-paperclip { position: relative; left: -14px; }
.tickets-listion-column .column-icon .faded-more { background: #fff; z-index: 9; position: relative; padding: 0 0px 0 5px; }
.link.button { background: #16a34a; color: #ffffff; padding: 0 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; transition: all 0.2s ease; border-radius: 8px; }
.link.button:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); color: #fff; padding: 0 14px; }
#new-task-form .cell label { position: relative; }
#new-task-form .duedate-field { width: 100% !important; }
#new-task-form .ui-datepicker-trigger { position: absolute; right: 1px; top: 27px; width: 36px; background: #f4f4f4; height: 36px; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center; }
#new-task-form .ui-datepicker-trigger + .faded { position: absolute; right: 50px; top: 35px; }
#new-task-form .form-control { margin-top: 5px; }
.dialog #popup-loading { display: flex; align-items: center; justify-content: center; }
.duedate-comman-field { width: 100% !important; position: relative; }
.duedate-comman-field .form-control {  width: 100% !important;}
.duedate-comman-field .ui-datepicker-trigger + .faded { position: absolute; right: 48px; top: 40px; font-size: 14px; }
.duedate-comman-field .ui-datepicker-trigger { position: absolute; right: 7px; top: 33px; width: 36px; background: #f4f4f4; height: 36px; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center; }

/* =====================================================
   Ticket Preview Popup - Modern Premium UI
   ===================================================== */
.tip_content {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 118, 188, 0.12) !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 440px;
    background: #ffffff !important;
}

.tip_content .ticket-preview-wrapper {
    width: 580px;
    min-width: 440px;
}

/* Popup Header */
.tip_content .ticket-preview-wrapper > h2,
.tip_content h2:first-of-type {
    margin: 0;
    padding: 18px 44px 18px 22px;
    background: linear-gradient(135deg, #0076BC 0%, #005a90 100%);
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    border-radius: 0;
}

/* Close Button */
.tip_close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    /* color: rgba(255,255,255,0.85) !important; */
    font-size: 20px !important;
    line-height: 1;
    z-index: 100 !important;
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none !important;
}
.tip_close:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: scale(1.15);
}

/* Warning / Notice messages */
.tip_content #msg_warning,
.tip_content #msg_error,
.tip_content #msg_notice {
    margin: 10px 16px 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

/* Tabs */
.tip_content ul#ticket-preview,
.tip_content ul.tabs {
    background: #f5f8fb !important;
    border-bottom: 2px solid #e4ecf3 !important;
    padding: 0 16px !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-end;
    gap: 4px;
    box-shadow: none !important;
    margin: 0 !important;
}

.tip_content ul#ticket-preview li,
.tip_content ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    bottom: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.tip_content ul#ticket-preview li a.nav-link,
.tip_content ul.tabs li a {
    display: block !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #5a7fa0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    line-height: 1.4 !important;
}

.tip_content ul#ticket-preview li a.nav-link:hover,
.tip_content ul.tabs li a:hover {
    color: #0076BC !important;
    border-bottom-color: #b3d4ec !important;
    text-decoration: none !important;
    background: transparent !important;
}

.tip_content ul#ticket-preview li.active a.nav-link,
.tip_content ul.tabs li.active a,
.tip_content ul#ticket-preview li a.nav-link.active {
    color: #0076BC !important;
    border-bottom-color: #0076BC !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Tab Content Container */
#ticket-preview_container {
    padding: 0 4px;
}

#ticket-preview_container .tab_content {
    padding: 16px 18px 4px;
}

/* Info Tables */
.tip_content .ticket_info {
    background: transparent !important;
    width: 100%;
    border-collapse: collapse;
}

.tip_content .ticket_info tr {
    border-bottom: 1px solid #f0f4f8;
}

.tip_content .ticket_info tr:last-child {
    border-bottom: none;
}

.tip_content .ticket_info th {
    width: 120px;
    padding: 8px 10px 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.tip_content .ticket_info td {
    padding: 8px 0;
    font-size: 13px;
    color: #1e293b;
    vertical-align: top;
}

.tip_content .ticket_info td a {
    color: #0076BC !important;
    font-weight: 500;
}

.tip_content .ticket_info td a:hover {
    color: #005a90 !important;
    text-decoration: underline;
}

/* HR divider inside popup */
.tip_content hr {
    border: none !important;
    border-top: 1px solid #e8f0f8 !important;
    margin: 4px 0 !important;
    background: transparent !important;
    height: 1px !important;
}

/* Override h2 table that appears after hr */
.tip_content .ticket_info ~ .ticket_info {
    margin-top: 0;
}

/* Faded text */
.tip_content .faded {
    color: #94a3b8;
    font-size: 12px;
}

/* Ticket state spans */
.tip_content .ticket_info td span {
    font-weight: 500;
}

/* Bottom Action Menu */
.tip_content .tip_menu {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px 14px !important;
    margin: 0 !important;
    border-top: 1px solid #e8f0f8 !important;
    background: #f8fafc;
    height: auto !important;
}

.tip_content .tip_menu li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tip_content .tip_menu li a {
    display: inline-flex !important;
    align-items: center;
    float: none !important;
    padding: 5px 14px !important;
    border: 1px solid #d0e4f0 !important;
    border-radius: 6px !important;
    color: #0076BC !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    white-space: nowrap;
}

.tip_content .tip_menu li a:hover {
    background: #0076BC !important;
    color: #ffffff !important;
    border-color: #0076BC !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 118, 188, 0.25);
}

/* Thread preview */
.tip_content .thread-preview {
    padding: 10px 0;
}

/* Collaborators tab */
.tip_content #collab table {
    width: 100%;
}

.tip_content #collab td {
    padding: 6px 0;
    font-size: 13px;
    color: #1e293b;
    border-bottom: 1px solid #f0f4f8;
}

/* Overdue / Locked badge */
/* .tip_content .Icon.overdueTicket,
.tip_content .Icon.lockedTicket {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.tip_content .Icon.overdueTicket {
    background: #fff1f0;
    color: #e53e3e;
    border: 1px solid #fecaca;
} */
.tip_content .Icon.lockedTicket {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}
.tip_content #user_tabs {
	margin-top: 15px !important;
}
.tip_content .floating-options .action {
	width: 25px;
	height: 25px;
    display: flex;
    align-items: center;
    justify-content: center
}
.tip_content .floating-options {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.tip_content #msg_warning .overdueTicket { padding-left: 20px; }
/* =====================================================
   Ticket Preview Popup - END
   ===================================================== */

.action-dropdown, .noclick-dropdown {
    z-index: 99;
}

/* Calendar css start */
.ui-widget-header {
    border: 1px solid #0076bc !important;
    background: #0076bc !important;    
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #0076bc !important;
    background: #0076bc !important;
    color: #fff !important;
}
button.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all, 
button.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
    border: 1px solid #0076bc !important;
    background: #0076bc !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 14px;
    padding: 5px 14px;
    opacity: inherit;
}
button.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all:hover, 
button.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all:hover {
    background: #005a90 !important;
    border-color: #005a90 !important;
    color: #fff !important;
    transform: translateY(-2px);
}
/* Calendar css end */