@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
* {box-sizing:border-box;}
.lexendFont {font-family: "Lexend", sans-serif;}
body {background: #fff; margin:0;}
ul {list-style:none;}
select, input, textarea, button {outline: none !important;}
/* textarea {overflow: hidden; resize: vertical;} */
a {text-decoration:none; cursor: pointer;}
.scroll::-webkit-scrollbar {width: 0; height: 0;}
.scroll::-webkit-scrollbar-track {background: #e5e5e5;}
.scroll::-webkit-scrollbar-thumb {background: #333;}
.scroll::-webkit-scrollbar-thumb:hover {background: #333;}
.dbLeft:hover {width:380px;}
.dbLeft:hover .dbMenu li a .text {display: block;}
.dbLeft:hover .dbMenu > li {overflow: visible;}
.dbLogo .over {display: none;}
.dbLeft:hover .dbLogo .over {display: block;}
.dbLeft:hover .dbLogo .front {display: none;}
.dbMenu > li {width: 100%; overflow: hidden;}
.dbMenu > li > a {height: 50px; padding: 0 30px; color: #fff; font-size: 20px; width: 380px;}
.dbMenu > li > a:hover {background: #fff; color: var(--primarColor);}
.dbMenu > li > a.active {background: #fff; color: var(--primarColor);}
.dbMenu li a .text {display: none; white-space: nowrap;}
.dbMenu li a .icon img.over {display: none;}
.dbMenu li a:hover .icon img.over {display: block;}
.dbMenu li a:hover .icon img.front {display: none;}
.dbMenu li a.active .icon img.over {display: block;}
.dbMenu li a.active .icon img.front {display: none;}
.dbMenu li.user a {padding: 0 26px; font-size: 16px;}
.dbMenu li.user a .text span {font-size: 14px; font-weight: 200;}
.calendar .group li {width: 14.28%;}
.calendar .group li.status-green span {display: block; background: #84A66D;}
.calendar .group li.status-blue span {display: block; background: #3D89BC;}
.calendar .group li.status-orange span {display: block; background: #DB7960;}
.calendar .group li.status-yellow span {display: block; background: #FDC185;}
.calendar .group li.today {color: #fff;}
.calendar .group li.today:before {content: ''; width: 24px; height: 24px; background: #003B71; position: absolute; left: 50%; top: 10px; z-index: -1; margin-left: -12px;}

.navTab:before, .navTab:after {content: ''; width: 30px; height: 30px; background: #B1C9E8; position: absolute; top: 0; }
.navTab:before {left: 4px; transform: skew(160deg, 0deg);}
.navTab:after {right: 4px; transform: skew(-160deg, 0deg);}
.navTab.active:before, .navTab.active:after {background:#003B71;}

.dbRight .left.sinlge {max-width: 1400px;}


#db_htm_details_flyout { position: fixed; right: -1200px; top: 70px; width: 980px; height: 600px; overflow-y:scroll;
                               background: #ffffff; opacity: 0; transition: opacity 0.3s linear 0s, right 0.3s linear 0s;
                               cursor: default; border:solid 3px #ccc; border-radius:5px; z-index:999999; padding:20px; }

#ticket_stats_box { float:left; width:960px; padding:10px; margin:10px 0 20px 0px; }

#process_msg { float:right;width:380px;text-align:right;margin:30px 0 0 0;display:none; }
#footer_content { float:left; width:952px; height:40px; text-align:left; padding:20px 20px 0 20px; margin:20px 0 0 0px; background-color:#EFE8E2; border:solid 4px #45707B; border-radius:10px; }

/* #manage_dvm_hr_certs_content_new { width:1055px; float:left; cursor: default; background-color:#ffffff;border:solid 1px #ccc; border-radius:5px; min-height:740px;padding:20px; } */

.ticket_status_tooltip { position:relative;}
.ticket_status_tooltip:hover .ticket_status_tooltip_text { visibility: visible; }

.role_out {background-color:#bbbbbb;}
.fill_dvm {background-color:#ffc000;}
.fill_aca {background-color:#bf8f00; color:white;}
.fill_grm {background-color:#b4c6e7;}
.fill_tech {background-color:#92d050; color:white;}
.fill_css {background-color:#b188d0; color:white;}       
.fill_mgr {background-color:#00b0f0;}         
.fill_hos {background-color:#6ca400;}

@media(max-width:767px) {
    .dbLeft:hover {width:100%;}
    .dbLogo {height: auto !important; margin: 0 !important;}
    .dbLogo .front {display: none;}
    .dbLogo .over {display: block; width: 130px;}    
    .showMobMenu i {width: 32px; height: 3px; border: none; padding: 0; display: block; border-radius: 6px; background: #fff; margin-bottom: 7px; transition: ease-in-out .4s;}
    .showMobMenu.active {margin-top: -3px;}
    .showMobMenu.active i:nth-child(3) {display: none;}
    .showMobMenu.active i:nth-child(1) {transform: rotate(45deg); background: #fff;}
    .showMobMenu.active i:nth-child(2) {transform: rotate(-45deg); margin: -10px auto 0 auto; background: #fff;}    
    .dbMenuBox.active {left: 0;}
    .dbMenu > li {overflow: visible;}
    .dbMenu > li > a {padding: 0 20px; font-size: 17px; width: 100%;}
    .dbMenu li a .text {display: block; white-space: nowrap;}
    .dbMenu li.user a {padding: 0 16px;}
}

/* Live password requirement checklist -- change-password.php, reset-password.php */
.pw-requirement { color: #dc2626; transition: color 0.15s ease; }
.pw-requirement.pw-rule-met { color: #16a34a; }
.pw-match-indicator { display: block; margin-top: 4px; font-size: 12px; min-height: 1em; }
.pw-match-indicator.pw-rule-met { color: #16a34a; }
.pw-match-indicator.pw-rule-not-met { color: #dc2626; }
#login_form input[type=submit]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Ticket Leader Report text classes -- not defined in stylesheet.css, and module-ticket-mutts.php
   doesn't load style.css, so the report's white header text would render dark (ported from CityVet). */
.white12  { font-size:12px;color:#ffffff;font-family:verdana,arial;font-weight:normal;text-decoration:none; }
.white12b { font-size:12px;color:#ffffff;font-family:verdana,arial;font-weight:bold;text-decoration:none; }

/* Bigger white text inside the flyout only -- 12px white-on-dark is hard to read; scoped to
   #ticket_stats_box so .white12 on other pages keeps its size. */
#ticket_stats_box .white12 { font-size:14px; }

/* Section heading box in the Ticket Leader Report flyout (e.g. "Opens/Closes By Day").
   Same design as CityVet's stylesheet.css, in Arista's #007168. Scoped to the flyout so
   the other pages using #content_header_box keep their current look. */
#ticket_stats_box #content_header_box {
  background: #007168;
  max-width: 450px;
  border-radius: 8px;
  width: 100%;
  padding: 10px 15px;
  color: #fff;
  font-family: verdana, arial;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

/* Ticket Leader Report flyout - skeleton loading state (ported from CityVet).
   Mirrors widget-ticket-system-it-metrics.cgi's tables: a primary-coloured header row
   ("T7 Days" + 7 dates = 9 columns) followed by light data rows, with section headings
   in #007168 to match the real report. */
@keyframes ticket-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ticket-skeleton-wrap {
  width: 100%;
}
.ticket-skeleton-bar,
.ticket-skeleton-bar-light,
.ticket-skeleton-heading {
  width: 100%;
  height: 18px;
  border-radius: 3px;
  background-size: 200% 100%;
  animation: ticket-skeleton-shimmer 1.6s ease-in-out infinite;
}
.ticket-skeleton-bar {
  background-color: #003B71;
  background-image: linear-gradient(90deg, #003B71 0%, rgba(255,255,255,0.55) 50%, #003B71 100%);
}
.ticket-skeleton-bar-light {
  background-color: #e4e4e4;
  background-image: linear-gradient(90deg, #e4e4e4 0%, rgba(255,255,255,0.9) 50%, #e4e4e4 100%);
}
.ticket-skeleton-heading {
  background-color: #007168;
  background-image: linear-gradient(90deg, #007168 0%, rgba(255,255,255,0.55) 50%, #007168 100%);
}
.ticket-skeleton-title {
  height: 37px;
  max-width: 450px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.ticket-skeleton-table {
  background-color: #ffffff;
  border: solid 1px #ccc;
  width: 100%;
  margin-bottom: 14px;
  padding: 6px;
  box-sizing: border-box;
}
.ticket-skeleton-row {
  width: 100%;
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.ticket-skeleton-row:last-child {
  margin-bottom: 0;
}
.ticket-skeleton-row > div:first-child {
  flex: 1.6;
}
.ticket-skeleton-row > div {
  flex: 1;
}
.ticket-skeleton-row:nth-child(2) .ticket-skeleton-bar-light { animation-delay: 0.1s; }
.ticket-skeleton-row:nth-child(3) .ticket-skeleton-bar-light { animation-delay: 0.2s; }
.ticket-skeleton-row:nth-child(4) .ticket-skeleton-bar-light { animation-delay: 0.3s; }
.ticket-skeleton-row:nth-child(5) .ticket-skeleton-bar-light { animation-delay: 0.4s; }
.ticket-skeleton-row:nth-child(6) .ticket-skeleton-bar-light { animation-delay: 0.5s; }