/*
 * YouBe Technology / Faveo client portal skin
 * Drop-in replacement for: support/public/lb-faveo/css/custom.css
 * Designed for the Faveo 3.x public client markup currently in production.
 */

/* Uses the visitor's native UI font for a smooth, enterprise interface. */

:root {
  --yb-ink: #071b2b;
  --yb-navy: #031521;
  --yb-navy-2: #082f49;
  --yb-blue: #1688c8;
  --yb-sky: #57b5ed;
  --yb-orange: #ef9655;
  --yb-green: #5ce4a3;
  --yb-paper: #f4f9fc;
  --yb-line: #cbdde6;
  --yb-muted: #617b8a;
  --yb-white: #ffffff;
  --yb-shadow: 0 24px 65px rgba(7, 45, 70, .11);
  --yb-radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--yb-paper) !important;
  color: var(--yb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 15px;
  letter-spacing: -.01em;
}
a { color: var(--yb-blue); text-decoration: none !important; }
a:hover { color: #096fa9; }
.container { max-width: 1180px !important; padding-left: 24px; padding-right: 24px; }

/* Header and brand */
.site-header {
  background:
    linear-gradient(rgba(87,181,237,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,181,237,.075) 1px, transparent 1px),
    radial-gradient(circle at 84% 45%, rgba(36,148,208,.25), transparent 28%),
    linear-gradient(125deg, var(--yb-navy), var(--yb-navy-2)) !important;
  background-size: 58px 58px, 58px 58px, auto, auto !important;
  border: 0 !important;
  color: white;
  min-height: 390px;
  overflow: visible;
  position: relative;
}
.site-header:before {
  color: var(--yb-orange);
  content: "YOUBE CLIENT SUPPORT / ONE CLEAR PATH";
  font: 800 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  left: max(24px, calc((100% - 1132px) / 2));
  letter-spacing: .16em;
  position: absolute;
  top: 112px;
}
.site-header:after {
  color: white;
  content: "How can we help you move forward?";
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 600;
  left: max(24px, calc((100% - 1132px) / 2));
  letter-spacing: -.06em;
  line-height: .96;
  max-width: 700px;
  position: absolute;
  top: 143px;
}
.site-navigation.navbar {
  background: rgba(3, 21, 33, .78) !important;
  border-bottom: 1px solid rgba(115, 191, 231, .22);
  min-height: 78px;
  padding: 10px 0 !important;
  position: relative;
  z-index: 20;
}
#logo.navbar-brand { height: 54px; margin: 0 28px 0 0; padding: 0; width: 168px; }
#logo > a {
  background: url("https://www.youbetech.com/images/youbetech-logo-modern-v13.png") center / contain no-repeat;
  color: transparent !important;
  display: block;
  font-size: 0;
  height: 54px;
  overflow: hidden;
  width: 168px;
}
.navbar .navbar-nav > li > a,
.navbar .navbar-nav .nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  color: #c2d5df !important;
  font-size: 12px;
  font-weight: 650;
  margin: 0 2px;
  padding: 10px 13px !important;
}
.navbar .navbar-nav > li.active > a,
.navbar .navbar-nav > li > a:hover {
  background: rgba(87,181,237,.09) !important;
  border-color: rgba(87,181,237,.24);
  color: white !important;
}
.navbar .navbar-nav > li:nth-last-child(2) > a {
  background: white !important;
  color: var(--yb-ink) !important;
  padding-left: 17px !important;
  padding-right: 17px !important;
}
.dropdown-menu {
  background: #09283d !important;
  border: 1px solid #28536b !important;
  border-radius: 13px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
  padding: 7px !important;
}
.dropdown-item { border-radius: 8px; color: #c4d8e2 !important; font-size: 12px; padding: 9px 11px !important; }
.dropdown-item:hover, .dropdown-item.active { background: rgba(87,181,237,.12) !important; color: white !important; }
.navbar-toggler { background: white !important; border: 0 !important; border-radius: 10px !important; }

/* Header search becomes the primary support action */
#header-search.site-search {
  bottom: 38px;
  margin: 0 !important;
  max-width: 760px;
  position: absolute;
  width: min(760px, calc(100% - 48px)) !important;
  z-index: 10;
}
#header-search .form-border { width: 100% !important; }
#header-search .form-group { display: flex !important; position: relative; width: 100% !important; }
#header-search .search-field {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 999px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  color: var(--yb-ink) !important;
  font-size: 14px;
  height: 58px;
  padding: 0 148px 0 23px !important;
  width: 100% !important;
}
#header-search .btn {
  background: var(--yb-blue) !important;
  border: 2px solid var(--yb-sky) !important;
  border-radius: 999px !important;
  color: white !important;
  height: 44px;
  margin: 0 !important;
  padding: 0 24px !important;
  position: absolute;
  right: 7px;
  top: 7px;
}
#header-search .btn:hover { background: #0b77b4 !important; transform: translateY(-1px); }
.login-form {
  background: #fff !important;
  border: 1px solid var(--yb-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--yb-shadow);
  color: var(--yb-ink);
  padding: 22px !important;
}

/* Breadcrumb rail */
.site-hero { background: #071f31 !important; border-bottom: 1px solid #21465b; min-height: 48px; }
.breadcrumb {
  align-items: center;
  display: flex;
  float: none !important;
  margin: 0 auto !important;
  max-width: 1180px;
  min-height: 48px;
  padding: 0 24px !important;
}
.breadcrumb, .breadcrumb a, .breadcrumb-item + .breadcrumb-item:before { color: #89a7b7 !important; font-size: 10px; }

/* Main content and home actions */
.site-main { background: linear-gradient(145deg, #f8fcfe, #edf6fa 68%, #fff8f2) !important; min-height: 430px; padding: 70px 0 90px; }
.content-area { background: transparent !important; }
#corewidgetbox { margin: 0 !important; }
#wbox.widgetrow {
  display: grid !important;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 !important;
  padding: 0 !important;
}
#wbox > span { display: block; min-width: 0; }
#wbox .widgetrowitem.defaultwidget {
  align-items: flex-start;
  background-color: rgba(255,255,255,.95) !important;
  background-image: none !important;
  border: 1px solid var(--yb-line) !important;
  border-radius: var(--yb-radius) !important;
  box-shadow: 0 15px 45px rgba(9,55,81,.065);
  display: flex !important;
  flex-direction: column;
  height: 220px !important;
  justify-content: flex-end;
  overflow: hidden;
  padding: 25px !important;
  position: relative;
  text-align: left;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  width: 100% !important;
}
#wbox .widgetrowitem.defaultwidget:before {
  align-items: center;
  background: #eaf6fc;
  border: 1px solid #add4e7;
  border-radius: 50%;
  color: var(--yb-blue);
  content: "↗";
  display: flex;
  font: 800 20px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  height: 52px;
  justify-content: center;
  left: 25px;
  position: absolute;
  top: 25px;
  width: 52px;
}
#wbox > span:nth-child(1) .defaultwidget:after { content: "01 / ACCOUNT"; }
#wbox > span:nth-child(2) .defaultwidget:after { content: "02 / NEW REQUEST"; }
#wbox > span:nth-child(3) .defaultwidget:after { content: "03 / STATUS"; }
#wbox > span:nth-child(4) .defaultwidget:after { content: "04 / KNOWLEDGE"; }
#wbox .widgetrowitem.defaultwidget:after {
  color: var(--yb-orange);
  font: 800 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  left: 25px;
  letter-spacing: .13em;
  position: absolute;
  top: 94px;
}
#wbox .widgetitemtitle {
  color: var(--yb-ink) !important;
  font-size: 21px !important;
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.05;
}
#wbox .widgetrowitem.defaultwidget:hover {
  border-color: var(--yb-sky) !important;
  box-shadow: var(--yb-shadow);
  transform: translateY(-5px);
}
#wbox .widgetrowitem.defaultwidget:hover:before { background: var(--yb-blue); color: white; }

/* Inner page cards, knowledge base, articles and tickets */
.section, .panel, .card, .box, div#respond, form.contact-form, .archive-article, article.hentry {
  background: white !important;
  border: 1px solid var(--yb-line) !important;
  border-radius: var(--yb-radius) !important;
  box-shadow: 0 16px 48px rgba(9,55,81,.07);
  overflow: hidden;
}
.section-title, .panel-heading, .card-header, .box-header {
  background: #f8fbfc !important;
  border-bottom: 1px solid #d7e5eb !important;
  color: var(--yb-ink) !important;
  font-size: 18px !important;
  font-weight: 650;
  letter-spacing: -.025em;
  padding: 18px 22px !important;
}
.section-title > i.line { background: linear-gradient(90deg,var(--yb-sky),var(--yb-orange)) !important; left: 0; }
.panel-body, .card-body, .box-body, .entry-content { padding: 22px !important; }
.list-group-item {
  background: white !important;
  border: 1px solid #dbe7ed !important;
  color: var(--yb-ink) !important;
  padding: 15px 18px !important;
}
.list-group-item-action:hover { background: #f0f8fc !important; color: var(--yb-blue) !important; }
.table, .ticket-table { background: white; color: var(--yb-ink); }
.table thead th { background: #082a40; border-color: #244e65 !important; color: #d9eaf2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.table td, .table th { border-color: #dce8ee !important; padding: 13px !important; vertical-align: middle !important; }
.table-striped tbody tr:nth-of-type(odd) { background: #f7fbfd !important; }
.badge, .label { border-radius: 999px !important; font-size: 10px !important; padding: 6px 9px !important; }

/* Forms */
label { color: #496475; font-size: 11px; font-weight: 700; letter-spacing: .035em; }
.form-group { margin-bottom: 18px; }
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  background: #f8fbfc !important;
  border: 1px solid #c9dbe4 !important;
  border-radius: 11px !important;
  color: var(--yb-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  min-height: 46px;
  outline: none !important;
  padding: 11px 13px !important;
}
textarea.form-control, textarea { min-height: 135px; }
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--yb-blue) !important;
  box-shadow: 0 0 0 4px rgba(22,136,200,.1) !important;
}
.btn, button, input[type="submit"] {
  border-radius: 999px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: box-shadow .2s, transform .2s;
}
.btn-primary, .btn-custom, button[type="submit"], input[type="submit"] {
  background: var(--yb-navy-2) !important;
  border: 2px solid var(--yb-sky) !important;
  color: white !important;
  padding: 10px 19px !important;
}
.btn-primary:hover, .btn-custom:hover, button[type="submit"]:hover, input[type="submit"]:hover {
  box-shadow: 0 12px 28px rgba(8,47,73,.2);
  transform: translateY(-2px);
}
.btn-default, .btn-light, .btn-secondary { background: white !important; border: 1px solid #bdd3de !important; color: #355b6f !important; }
.alert { border: 0 !important; border-radius: 13px !important; padding: 15px 18px !important; width: 100% !important; }
.alert-success { background: #e8f8f0 !important; color: #176c49 !important; }
.alert-danger { background: #fff0ed !important; color: #9d4032 !important; }

/* Footer */
.site-footer {
  background:
    linear-gradient(rgba(87,181,237,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,181,237,.055) 1px, transparent 1px),
    #061724 !important;
  background-size: 54px 54px !important;
  border: 0 !important;
  color: #91adbb;
  min-height: 150px;
  padding: 42px 0 !important;
}
.site-footer hr { border-color: #21465b !important; opacity: 1; }
.site-footer .site-info p { color: #91adbb !important; font-size: 11px; }
.site-footer .site-info p:before {
  color: white;
  content: "YOUBE TECHNOLOGY  /  CLIENT SUPPORT";
  display: block;
  font: 800 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: .14em;
  margin-bottom: 11px;
}
.site-footer a { color: var(--yb-sky) !important; }

/* Dark mode remains on-brand instead of switching to flat black. */
.switcher-toggle { background: #e6f2f8; border: 1px solid #acd0e2; border-radius: 999px; cursor: pointer; height: 34px; margin-left: 14px; padding: 4px; position: relative; width: 76px; }
.switcher-toggle span.icon { background: var(--yb-blue); border-radius: 50%; display: block; height: 24px; left: 4px; position: absolute; width: 24px; }
.dark-mode, .dark-mode .site, .dark-mode .site-main, .dark-mode .content-area { background: #04131f !important; }
.dark-mode .section, .dark-mode .panel, .dark-mode .card, .dark-mode .box, .dark-mode .list-group-item, .dark-mode form { background: #09283d !important; border-color: #28536b !important; color: #d8e8ef !important; }
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode p, .dark-mode span, .dark-mode label, .dark-mode td { color: #d8e8ef !important; }
.dark-mode .form-control, .dark-mode input, .dark-mode select, .dark-mode textarea { background: #061d2c !important; border-color: #315d74 !important; color: white !important; }
.dark-mode .switcher-toggle span.icon { left: auto; right: 4px; }

/* Faveo utility compatibility */
.small, small { font-size: 80%; font-weight: 400; }
.mr-3, .mx-3 { margin-right: 1rem !important; }
.m-none { display: none; }
.desk_none { display: block; }
footer ul.media-list { list-style: none; }
div#respond .form-group, #login-form .form-group, form.contact-form .form-group { margin-bottom: 1rem; }
.has-error .form-control { border-color: #c94d3a !important; }
.help-block, .text-red { color: #b93f31 !important; }

@media (max-width: 992px) {
  .site-header { min-height: 430px; }
  .site-navigation.navbar { padding-left: 0 !important; padding-right: 0 !important; }
  #navbarSupportedContent { background: #08283d; border: 1px solid #28536b; border-radius: 16px; left: 24px; padding: 13px; position: absolute; right: 24px; top: 72px; }
  .navbar .navbar-nav > li > a { margin: 3px 0; }
  #header-search.site-search { bottom: 35px; }
  #wbox.widgetrow { grid-template-columns: 1fr 1fr; }
  .m-none { display: block; }
  .desk_none { display: none; }
}

@media (max-width: 620px) {
  .container { padding-left: 17px; padding-right: 17px; }
  .site-header { min-height: 455px; }
  .site-header:before { left: 17px; top: 118px; }
  .site-header:after { font-size: 43px; left: 17px; right: 17px; top: 150px; }
  #logo.navbar-brand, #logo > a { height: 48px; width: 145px; }
  #header-search.site-search { bottom: 31px; width: calc(100% - 34px) !important; }
  #header-search .search-field { padding-right: 105px !important; }
  #header-search .btn { padding: 0 17px !important; }
  .breadcrumb { padding-left: 17px !important; padding-right: 17px !important; }
  .site-main { padding: 48px 0 65px; }
  #wbox.widgetrow { grid-template-columns: 1fr; }
  #wbox .widgetrowitem.defaultwidget { height: 185px !important; }
  .table-responsive { border: 1px solid var(--yb-line); border-radius: 14px; }
}

/* Enterprise brand refinement */
.site-navigation.navbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 126px;
  padding: 5px 0 !important;
}
#logo.navbar-brand {
  height: 116px;
  margin: 0 34px 0 0;
  overflow: visible;
  width: 128px;
}
#logo > a {
  background: url("https://www.youbetech.com/images/youbetech-logo-modern-v13.png") center / contain no-repeat !important;
  height: 116px;
  overflow: visible;
  width: 128px;
}
#logo img, #logo > a > img { display: none !important; }
.site-navigation .navbar-collapse { justify-content: flex-end; }
.site-navigation .navbar-nav {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(4, 25, 40, .46) !important;
  border: 1px solid rgba(104, 186, 248, .28) !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 42px rgba(0, 8, 18, .15);
  display: flex;
  gap: 4px;
  padding: 5px !important;
}
.site-navigation .navbar-nav > li { border: 0 !important; }
.site-navigation .navbar-nav > li > a,
.site-navigation .navbar-nav .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  padding: 11px 16px !important;
}
.site-navigation .navbar-nav > li.active > a,
.site-navigation .navbar-nav > li > a:hover {
  background: rgba(104,186,248,.12) !important;
  border-color: rgba(104,186,248,.34) !important;
  color: white !important;
}
.site-navigation .navbar-nav > li:nth-last-child(2) > a {
  background: white !important;
  border-color: white !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  color: var(--yb-ink) !important;
}

#header-search .form-border,
#header-search form,
#header-search .form-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#wbox .widgetrowitem.defaultwidget {
  background-color: rgba(255,255,255,.94) !important;
  background-position: right -18px top 34px, center !important;
  background-repeat: no-repeat !important;
  background-size: 142px 142px, auto !important;
  box-shadow: inset 0 3px 0 var(--yb-blue), 0 18px 48px rgba(9,55,81,.075);
  height: 238px !important;
  isolation: isolate;
  padding: 29px 72px 29px 29px !important;
}
#wbox > span:nth-child(1) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230877cc' stroke-width='2' opacity='.10'%3E%3Ccircle cx='60' cy='37' r='18'/%3E%3Cpath d='M25 101c2-24 15-36 35-36s33 12 35 36M17 18h86v86H17z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0, rgba(104,186,248,.16), transparent 44%) !important;
}
#wbox > span:nth-child(2) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230877cc' stroke-width='2' opacity='.10'%3E%3Cpath d='M28 15h47l18 18v72H28zM75 15v20h18M45 58h31M45 72h31M60 47v36M17 18h86v86H17z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0, rgba(104,186,248,.16), transparent 44%) !important;
}
#wbox > span:nth-child(3) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230877cc' stroke-width='2' opacity='.10'%3E%3Ccircle cx='60' cy='60' r='35'/%3E%3Cpath d='M60 37v25l17 10M42 61l11 11 25-27M17 18h86v86H17z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0, rgba(104,186,248,.16), transparent 44%) !important;
}
#wbox > span:nth-child(4) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230877cc' stroke-width='2' opacity='.10'%3E%3Cpath d='M21 26c18-4 31 1 39 10v67c-8-9-21-14-39-10zM99 26c-18-4-31 1-39 10v67c8-9 21-14 39-10zM17 18h86v86H17z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0, rgba(104,186,248,.16), transparent 44%) !important;
}
#wbox .widgetrowitem.defaultwidget:before {
  bottom: 25px;
  height: 40px;
  left: auto;
  right: 25px;
  top: auto;
  transition: .25s ease;
  width: 40px;
  z-index: 3;
}
#wbox .widgetrowitem.defaultwidget:after { left: 29px; top: 29px; }
#wbox .widgetitemtitle {
  font-size: 23px !important;
  font-weight: 750 !important;
  position: relative;
  z-index: 2;
}
#wbox .widgetrowitem.defaultwidget:hover {
  box-shadow: inset 0 3px 0 var(--yb-orange), var(--yb-shadow);
  transform: translateY(-6px);
}
#wbox .widgetrowitem.defaultwidget:hover:before {
  background: var(--yb-blue) !important;
  border-color: var(--yb-blue) !important;
  color: white !important;
  transform: rotate(45deg);
}

.site-footer .site-info p { font-size: 0 !important; }
.site-footer .site-info p:before {
  content: "YOUBE TECHNOLOGY  /  CLIENT SUPPORT";
  font-size: 11px;
  font-weight: 800;
}
.site-footer a[href*="faveo"],
.site-footer a[href*="ladybirdweb"] { display: none !important; }

@media (max-width: 992px) {
  .site-navigation.navbar { min-height: 96px; }
  #logo.navbar-brand, #logo > a { height: 86px; width: 96px; }
  .site-navigation .navbar-nav { align-items: stretch; background: rgba(4,25,40,.96) !important; border-radius: 18px !important; padding: 10px !important; }
}

@media (max-width: 620px) {
  #logo.navbar-brand, #logo > a { height: 76px; width: 84px; }
  #wbox .widgetrowitem.defaultwidget { height: 205px !important; }
}

/* Final experience alignment */
.site-header { min-height: 465px; }
.site-header:before {
  align-items: center;
  display: flex;
  min-height: 28px;
  padding-left: 38px;
  top: 148px;
}
.site-header:before {
  background: radial-gradient(circle at 14px center, var(--yb-orange) 0 3px, rgba(255,139,30,.18) 4px 12px, transparent 13px);
}
.site-header:after { top: 184px; }

#header-search.site-search { bottom: 40px; }

.site-navigation .dropdown-menu {
  backdrop-filter: blur(20px);
  background: rgba(5, 31, 49, .96) !important;
  border: 1px solid rgba(104,186,248,.26) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0,7,17,.30) !important;
  margin-top: 10px !important;
  min-width: 220px;
  overflow: hidden !important;
  padding: 8px !important;
}
.site-navigation .dropdown-menu:before {
  background: linear-gradient(90deg, var(--yb-blue), var(--yb-sky), var(--yb-orange));
  content: "";
  height: 2px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 0;
}
.site-navigation .dropdown-menu li { border: 0 !important; margin: 0 !important; }
.site-navigation .dropdown-item {
  align-items: center;
  border: 0 !important;
  border-radius: 11px !important;
  color: #c7dbe7 !important;
  display: flex;
  font-size: 12px !important;
  font-weight: 650;
  min-height: 42px;
  padding: 10px 13px !important;
}
.site-navigation .dropdown-item:after {
  color: #6fbdf0;
  content: "↗";
  margin-left: auto;
  opacity: .65;
}
.site-navigation .dropdown-item:hover,
.site-navigation .dropdown-item.active {
  background: rgba(104,186,248,.12) !important;
  color: white !important;
}

#login-form.login-form {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid #cbdde6 !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 70px rgba(0,12,25,.25) !important;
  min-width: 340px;
  padding: 26px !important;
  position: absolute;
  right: 24px;
  top: 96px;
  z-index: 50;
}
#login-form .row { margin: 0 !important; }
#login-form [class*="col-"] { padding: 0 !important; }
#login-form .form-group { margin-bottom: 16px !important; }
#login-form .form-control { width: 100% !important; }
#login-form .btn { margin: 7px 0 16px; min-width: 132px; }
#login-form ul { margin: 8px 0 0 !important; padding: 0 !important; }

.login-box {
  margin: 10px auto 30px !important;
  max-width: 540px !important;
  width: 100% !important;
}
.login-box > .form-border {
  background: white !important;
  border: 1px solid var(--yb-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 65px rgba(7,45,70,.10);
  padding: 32px !important;
}
.login-box h4:first-child { display: none !important; }
.login-box .box-title {
  color: var(--yb-ink) !important;
  font-size: 25px !important;
  font-weight: 750 !important;
  letter-spacing: -.035em;
  margin: 0 0 26px !important;
}
.login-box .form-group {
  display: flex !important;
  margin-bottom: 17px !important;
  position: relative;
}
.login-box .form-control { min-height: 52px; width: 100% !important; }
.login-box .btn-block { min-height: 48px; width: 100% !important; }
.login-box .row.mt-2 { align-items: center; gap: 10px 0; margin-top: 18px !important; }
.login-box .row.mt-2 > div { font-size: 11px; min-width: 33.333%; }

/* Create-ticket sidebar: remove Faveo's doubled panel and restore form rhythm. */
#sidebar.site-sidebar > #form-border.comment-respond {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}
#sidebar #section-categories.section {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid var(--yb-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 52px rgba(7,45,70,.09);
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}
#sidebar #section-categories .section-title {
  font-size: 20px !important;
  line-height: 1.2;
  margin: 0 !important;
  padding: 22px 24px !important;
}
#sidebar #section-categories > div { padding: 23px 24px 25px !important; }
#sidebar #section-categories form { margin: 0 !important; }
#sidebar #section-categories label {
  display: inline-block;
  font-size: 11px;
  margin: 0 0 8px !important;
}
#sidebar #section-categories .text-red { display: inline; }
#sidebar #section-categories input.form-control {
  display: block;
  height: 50px;
  margin: 0 0 19px !important;
  width: 100% !important;
}
#sidebar #section-categories button[type="submit"] {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  justify-content: center;
  margin: 2px 0 0 !important;
  min-height: 44px;
  padding: 10px 19px !important;
}

#wbox > span:nth-child(1) .defaultwidget:after { content: "01    ACCOUNT"; }
#wbox > span:nth-child(2) .defaultwidget:after { content: "02    NEW REQUEST"; }
#wbox > span:nth-child(3) .defaultwidget:after { content: "03    STATUS"; }
#wbox > span:nth-child(4) .defaultwidget:after { content: "04    KNOWLEDGE"; }
#wbox .widgetrowitem.defaultwidget:after {
  align-items: center;
  background: radial-gradient(circle at 15px center, #0b7dca 0 13px, transparent 14px);
  color: var(--yb-orange);
  display: flex;
  font-size: 9px;
  font-weight: 850;
  height: 30px;
  letter-spacing: .12em;
  padding-left: 7px;
  white-space: pre;
}
#wbox > span:nth-child(1) .defaultwidget,
#wbox > span:nth-child(2) .defaultwidget,
#wbox > span:nth-child(3) .defaultwidget,
#wbox > span:nth-child(4) .defaultwidget {
  background-position: right -8px top 38px, center !important;
  background-size: 154px 154px, auto !important;
}
#wbox > span:nth-child(1) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%230877cc' opacity='.12'%3E%3Cpath d='M80 10v18M80 132v18M10 80h18M132 80h18M30 30l13 13M117 117l13 13M130 30l-13 13M43 117l-13 13'/%3E%3Ccircle cx='80' cy='80' r='55' stroke-dasharray='3 7'/%3E%3Ccircle cx='80' cy='63' r='20' stroke-width='2'/%3E%3Cpath d='M40 126c5-26 18-39 40-39s35 13 40 39M25 80h12M123 80h12' stroke-width='2'/%3E%3Ccircle cx='25' cy='80' r='4'/%3E%3Ccircle cx='135' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0,rgba(104,186,248,.16),transparent 44%) !important;
}
#wbox > span:nth-child(2) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%230877cc' opacity='.12'%3E%3Ccircle cx='80' cy='80' r='58' stroke-dasharray='3 7'/%3E%3Cpath d='M48 34h45l22 22v70H48zM93 34v23h22M65 78h33M81 62v33M22 54h20M118 108h20M32 54v-14h18M128 108v14h-18' stroke-width='2'/%3E%3Ccircle cx='22' cy='54' r='4'/%3E%3Ccircle cx='138' cy='108' r='4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0,rgba(104,186,248,.16),transparent 44%) !important;
}
#wbox > span:nth-child(3) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%230877cc' opacity='.12'%3E%3Ccircle cx='80' cy='80' r='58' stroke-dasharray='3 7'/%3E%3Ccircle cx='80' cy='80' r='39' stroke-width='2'/%3E%3Cpath d='M80 52v30l22 13M48 105l13 13 36-42M20 80h18M122 80h18' stroke-width='2'/%3E%3Ccircle cx='20' cy='80' r='4'/%3E%3Ccircle cx='140' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0,rgba(104,186,248,.16),transparent 44%) !important;
}
#wbox > span:nth-child(4) .defaultwidget {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%230877cc' opacity='.12'%3E%3Ccircle cx='80' cy='80' r='58' stroke-dasharray='3 7'/%3E%3Cpath d='M31 45c21-5 37 1 49 14v65c-12-13-28-19-49-14zM129 45c-21-5-37 1-49 14v65c12-13 28-19 49-14zM20 34h19M121 34h19M20 34v16M140 34v16' stroke-width='2'/%3E%3Ccircle cx='20' cy='34' r='4'/%3E%3Ccircle cx='140' cy='34' r='4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 100% 0,rgba(104,186,248,.16),transparent 44%) !important;
}

.site-footer .row:last-child { align-items: center; }
.site-footer .site-info p {
  color: #91adbb !important;
  font-size: 11px !important;
  margin: 0 !important;
}
.site-footer .site-info p:before { display: none !important; }
.site-footer .site-social { align-items: center; display: flex; justify-content: flex-end; }
.site-footer .site-social > ul:empty { display: none !important; }
.yb-footer-return {
  align-items: center;
  background: rgba(255,255,255,.97);
  border: 1px solid white;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
  color: var(--yb-ink) !important;
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 15px;
  padding: 7px 8px 7px 18px;
  transition: .25s ease;
}
.yb-footer-return i {
  align-items: center;
  background: var(--yb-blue);
  border-radius: 50%;
  color: white;
  display: flex;
  font-style: normal;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.yb-footer-return:hover { box-shadow: 0 18px 42px rgba(0,0,0,.28); transform: translateY(-2px); }

@media (max-width: 992px) {
  .site-header:before { top: 119px; }
  .site-header:after { top: 157px; }
  #login-form.login-form { left: 18px; min-width: 0; right: 18px; top: 92px; }
}

@media (max-width: 620px) {
  .site-header { min-height: 485px; }
  .site-header:before { left: 17px; top: 112px; }
  .site-header:after { top: 151px; }
  .login-box > .form-border { padding: 24px !important; }
  .login-box .row.mt-2 > div { min-width: 100%; }
  .site-footer .site-info, .site-footer .site-social { justify-content: flex-start; margin-top: 18px; width: 100%; }
  #sidebar.site-sidebar { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}