@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,0&display=swap");
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 10px;
}
h3,
h4,
h5 {
  margin-top: 5px;
  font-weight: 600;
}
.nav > li > a {
  color: #a7b1c2;
  font-weight: 600;
  padding: 20px 20px 10px 25px;
}
.nav.navbar-right > li > a {
  color: #999c9e;
}
.nav > li.active > a {
  color: #ffffff;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
  background-color: #293846;
  color: white;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background: #fff;
}
.nav.navbar-top-links > li > a:hover,
.nav.navbar-top-links > li > a:focus {
  background-color: transparent;
}
.nav > li > a i {
  margin-right: 6px;
}
.navbar {
  border: 0;
}
.navbar-default {
  background-color: transparent;
  border-color: #2f4050;
}
.navbar-top-links li {
  display: inline-block;
}
.navbar-top-links li:last-child {
  margin-right: 40px;
}
.body-small .navbar-top-links li:last-child {
  margin-right: 0;
}
.navbar-top-links li a {
  padding: 20px 10px;
  min-height: 50px;
}
.dropdown-menu {
  border: medium none;
  border-radius: 3px;
  box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 1000;
}
.dropdown-menu > li > a {
  border-radius: 3px;
  color: inherit;
  line-height: 25px;
  margin: 4px;
  text-align: left;
  font-weight: normal;
}
.contact-box .dropdown-menu > li > a {
    line-height: 15px;
}
.contact-box .dropdown-menu .divider {
    margin: 5px 0;} 

.dropdown-menu > li > a.font-bold {
    font-weight: 600;
}
.navbar-top-links .dropdown-menu li {
  display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
  margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: 0; color:#000;
}
.navbar-top-links .dropdown-menu li a div {
  white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
  width: 310px;
  min-width: 0;
}
.navbar-top-links .dropdown-messages {
  margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
  margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
  margin-left: -123px;
}
.navbar-top-links .dropdown-user {
  right: 0;
  left: auto;
}
.dropdown-messages,
.dropdown-alerts {
  padding: 10px 10px 10px 10px;
}
.dropdown-messages li a,
.dropdown-alerts li a {
  font-size: 12px;
}
.dropdown-messages li em,
.dropdown-alerts li em {
  font-size: 10px;
}
.nav.navbar-top-links .dropdown-alerts a {
  font-size: 12px;
}
.nav-header {
  padding: 15px 25px;
  background: url("patterns/header-profile.png") no-repeat;
}
.pace-done .nav-header {
  transition: all 0.4s;
}
.nav > li.active {
  border-left: 4px solid #19aa8d;
  background: #293846;
}
.nav.nav-second-level > li.active {
  border: none;
}
.nav.nav-second-level.collapse[style] {
  height: auto !important;
}
.nav-header a {
  color: #DFE4ED;
}
.nav-header .text-muted {
  color: #8095a8;
}
.minimalize-styl-2 {
  padding: 4px 12px;
  margin: 14px 5px 5px 20px;
  font-size: 14px;
  float: left;
}
.navbar-form-custom {
  float: left;
  height: 50px;
  padding: 0;
  width: 200px;
  display: inline-table;
}
.navbar-form-custom .form-group {
  margin-bottom: 0;
}
.nav.navbar-top-links a {
  font-size: 14px;
}
.navbar-form-custom .form-control {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;
  font-size: 14px;
  height: 60px;
  margin: 0;
  z-index: 2000;
}
.count-info .label {
  line-height: 12px;
  padding: 2px 5px;
  position: absolute;
  right: 6px;
  top: 12px;
}
.arrow {
  float: right;
}
.fa.arrow:before {
  content: "\f104";
}
.active > a > .fa.arrow:before {
  content: "\f107";
}
.nav-second-level li,
.nav-third-level li {
  border-bottom: none !important;
}
.nav-second-level li a {
  padding: 7px 10px 7px 10px;
  padding-left: 52px;
}
.nav-third-level li a {
  padding-left: 62px;
}
.nav-second-level li:last-child {
  margin-bottom: 10px;
}
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:hover > .nav-second-level,
.mini-navbar .nav li:focus > .nav-second-level {
  display: block;
  border-radius: 0 2px 2px 0;
  min-width: 140px;
  height: auto;
}
body.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  font-size: 12px;
  border-radius: 3px;
}
.fixed-nav .slimScrollDiv #side-menu {
  padding-bottom: 60px;
}
.mini-navbar .nav-second-level li a {
  padding: 10px 10px 10px 15px;
}
.mini-navbar .nav-second-level {
  position: absolute;
  left: 70px;
  top: 0;
  background-color: #2f4050;
  padding: 10px 10px 10px 10px;
  font-size: 12px;
}
.canvas-menu.mini-navbar .nav-second-level {
  background: #293846;
}
.mini-navbar li.active .nav-second-level {
  left: 65px;
}
.navbar-default .special_link a {
  background: #1ab394;
  color: white;
}
.navbar-default .special_link a:hover {
  background: #17987e !important;
  color: white;
}
.navbar-default .special_link a span.label {
  background: #fff;
  color: #1ab394;
}
.navbar-default .landing_link a {
  background: #1cc09f;
  color: white;
}
.navbar-default .landing_link a:hover {
  background: #1ab394 !important;
  color: white;
}
.navbar-default .landing_link a span.label {
  background: #fff;
  color: #1cc09f;
}
.logo-element {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: white;
  display: none;
  padding: 18px 0;
}
.pace-done .navbar-static-side,
.pace-done .nav-header,
.pace-done li.active,
.pace-done #page-wrapper,
.pace-done .footer {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.navbar-fixed-top {
  background: #fff;
  transition-duration: 0.4s;
  border-bottom: 1px solid #e7eaec !important;
  z-index: 2030;
}
.navbar-fixed-top,
.navbar-static-top {
   background: background:#0073b7 !important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0073b7), color-stop(1, #0089db)) !important;
    background: -ms-linear-gradient(bottom, #0073b7, #0089db) !important;
    background: -moz-linear-gradient(center bottom, #0073b7 0%, #0089db 100%) !important;
    background: -o-linear-gradient(#0089db, #0073b7) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0089db', endColorstr='#0073b7', GradientType=0) !important;
    
}
.fixed-nav #wrapper {
  margin-top: 0;
}
body.fixed-nav #wrapper .navbar-static-side,
body.fixed-nav #wrapper #page-wrapper {
  margin-top: 60px;
}
body.top-navigation.fixed-nav #wrapper #page-wrapper {
  margin-top: 0;
}
body.fixed-nav.fixed-nav-basic .navbar-fixed-top {
  left: 220px;
}
body.fixed-nav.fixed-nav-basic.mini-navbar .navbar-fixed-top {
  left: 70px;
}
body.fixed-nav.fixed-nav-basic.fixed-sidebar.mini-navbar .navbar-fixed-top {
  left: 0;
}
body.fixed-nav.fixed-nav-basic #wrapper .navbar-static-side {
  margin-top: 0;
}
body.fixed-nav.fixed-nav-basic.body-small .navbar-fixed-top {
  left: 0;
}
body.fixed-nav.fixed-nav-basic.fixed-sidebar.mini-navbar.body-small .navbar-fixed-top {
  left: 220px;
}
.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.body-small .navbar-fixed-top {
  margin-left: 0;
}
body.mini-navbar .navbar-static-side {
  width: 70px;
}
body.mini-navbar .profile-element,
body.mini-navbar .nav-label,
body.mini-navbar .navbar-default .nav li a span {
  display: none;
}
body.canvas-menu .profile-element {
  display: block;
}
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav-second-level {
  display: none;
}
body.mini-navbar .navbar-default .nav > li > a {
  font-size: 16px;
}
body.mini-navbar .logo-element {
  display: block;
}
body.canvas-menu .logo-element {
  display: none;
}
body.mini-navbar .nav-header {
  padding: 0;
  background-color: #1ab394;
}
body.canvas-menu .nav-header {
  padding: 33px 25px;
}
body.mini-navbar #page-wrapper {
  margin: 0 0 0 70px;
}
body.fixed-sidebar.mini-navbar .footer,
body.canvas-menu.mini-navbar .footer {
  margin: 0 0 0 0 !important;
}
body.canvas-menu.mini-navbar #page-wrapper,
body.canvas-menu.mini-navbar .footer {
  margin: 0 0 0 0;
}
body.fixed-sidebar .navbar-static-side,
body.canvas-menu .navbar-static-side {
  position: fixed;
  width: 220px;
  z-index: 2001;
  height: 100%;
}
body.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 0;
}
body.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 0;
}
body.body-small.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 220px;
}
body.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 220px;
}
.fixed-sidebar.mini-navbar .nav li:focus > .nav-second-level,
.canvas-menu.mini-navbar .nav li:focus > .nav-second-level {
  display: block;
  height: auto;
}
body.fixed-sidebar.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  font-size: 12px;
  border-radius: 3px;
}
body.canvas-menu.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
  font-size: 13px;
  border-radius: 3px;
}
.fixed-sidebar.mini-navbar .nav-second-level li a,
.canvas-menu.mini-navbar .nav-second-level li a {
  padding: 10px 10px 10px 15px;
}
.fixed-sidebar.mini-navbar .nav-second-level,
.canvas-menu.mini-navbar .nav-second-level {
  position: relative;
  padding: 0;
  font-size: 13px;
}
.fixed-sidebar.mini-navbar li.active .nav-second-level,
.canvas-menu.mini-navbar li.active .nav-second-level {
  left: 0;
}
body.fixed-sidebar.mini-navbar .navbar-default .nav > li > a,
body.canvas-menu.mini-navbar .navbar-default .nav > li > a {
  font-size: 13px;
}
body.fixed-sidebar.mini-navbar .nav-label,
body.fixed-sidebar.mini-navbar .navbar-default .nav li a span,
body.canvas-menu.mini-navbar .nav-label,
body.canvas-menu.mini-navbar .navbar-default .nav li a span {
  display: inline;
}
body.canvas-menu.mini-navbar .navbar-default .nav li .profile-element a span {
  display: block;
}
.canvas-menu.mini-navbar .nav-second-level li a,
.fixed-sidebar.mini-navbar .nav-second-level li a {
  padding: 7px 10px 7px 52px;
}
.fixed-sidebar.mini-navbar .nav-second-level,
.canvas-menu.mini-navbar .nav-second-level {
  left: 0;
}
body.canvas-menu nav.navbar-static-side {
  z-index: 2001;
  background: #2f4050;
  height: 100%;
  position: fixed;
  display: none;
}
body.canvas-menu.mini-navbar nav.navbar-static-side {
  display: block;
  width: 220px;
}
.top-navigation #page-wrapper {
  margin-left: 0;
}
.top-navigation .navbar-nav .dropdown-menu > .active > a {
  background: white;
  color: #1ab394;
  font-weight: bold;
}
.white-bg .navbar-fixed-top,
.white-bg .navbar-static-top {
  background: #fff;
}
.top-navigation .navbar {
  margin-bottom: 0;
}
.top-navigation .nav > li > a {
  padding: 15px 20px;
  color: #676a6c;
}
.top-navigation .nav > li a:hover,
.top-navigation .nav > li a:focus {
  background: #fff;
  color: #1ab394;
}
.top-navigation .nav > li.active {
  background: #fff;
  border: none;
}
.top-navigation .nav > li.active > a {
  color: #1ab394;
}
.top-navigation .navbar-right {
  margin-right: 10px;
}
.top-navigation .navbar-nav .dropdown-menu {
  box-shadow: none;
  border: 1px solid #e7eaec;
}
.top-navigation .dropdown-menu > li > a {
  margin: 0;
  padding: 7px 20px;
}
.navbar .dropdown-menu {
  margin-top: 0;
}
.top-navigation .navbar-brand {
  background: #1ab394;
  color: #fff;
  padding: 15px 25px;
}
.top-navigation .navbar-top-links li:last-child {
  margin-right: 0;
}
.top-navigation.mini-navbar #page-wrapper,
.top-navigation.body-small.fixed-sidebar.mini-navbar #page-wrapper,
.mini-navbar .top-navigation #page-wrapper,
.body-small.fixed-sidebar.mini-navbar .top-navigation #page-wrapper,
.canvas-menu #page-wrapper {
  margin: 0;
}
.top-navigation.fixed-nav #wrapper,
.fixed-nav #wrapper.top-navigation {
  margin-top: 50px;
}
.top-navigation .footer.fixed {
  margin-left: 0 !important;
}
.top-navigation .wrapper.wrapper-content {
  padding: 40px;
}
.top-navigation.body-small .wrapper.wrapper-content,
.body-small .top-navigation .wrapper.wrapper-content {
  padding: 40px 0 40px 0;
}
.navbar-toggle {
  background-color: #1ab394;
  color: #fff;
  padding: 6px 12px;
  font-size: 14px;
}
.top-navigation .navbar-nav .open .dropdown-menu > li > a,
.top-navigation .navbar-nav .open .dropdown-menu .dropdown-header {
  padding: 10px 15px 10px 20px;
}
@media (max-width: 768px) {
  .top-navigation .navbar-header {
    display: block;
    float: none;
  }
}
.menu-visible-lg,
.menu-visible-md {
  display: none !important;
}
@media (min-width: 1200px) {
  .menu-visible-lg {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .menu-visible-md {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .menu-visible-md {
    display: block !important;
  }
  .menu-visible-lg {
    display: block !important;
  }
}
.btn {
  border-radius: 3px;
}
.float-e-margins .btn {
  margin-bottom: 5px;
}
.btn-w-m {
  min-width: 120px;
}
.btn-primary.btn-outline {
  color: #1ab394;
}
.btn-success.btn-outline {
  color: #1c84c6;
}
.btn-info.btn-outline {
  color: #23c6c8;
}
.btn-warning.btn-outline {
  color: #f8ac59;
}
.btn-danger.btn-outline {
  color: #ed5565;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
  color: #fff;
}
.btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary.active:focus {
  background-color: #18a689;
  border-color: #18a689;
  color: #FFFFFF;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.btn-primary.disabled.active,
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active,
.btn-primary.active[disabled],
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary.active {
  background-color: #1dc5a3;
  border-color: #1dc5a3;
}
.btn-success {
  background-color: #1c84c6;
  border-color: #1c84c6;
  color: #FFFFFF;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success,
.btn-success:active:focus,
.btn-success:active:hover,
.btn-success.active:hover,
.btn-success.active:focus {
  background-color: #1a7bb9;
  border-color: #1a7bb9;
  color: #FFFFFF;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success.disabled:hover,
.btn-success.disabled:focus,
.btn-success.disabled:active,
.btn-success.disabled.active,
.btn-success[disabled],
.btn-success[disabled]:hover,
.btn-success[disabled]:focus,
.btn-success[disabled]:active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success:hover,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success.active {
  background-color: #1f90d8;
  border-color: #1f90d8;
}
.btn-info {
  background-color: #23c6c8;
  border-color: #23c6c8;
  color: #FFFFFF;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info,
.btn-info:active:focus,
.btn-info:active:hover,
.btn-info.active:hover,
.btn-info.active:focus {
  background-color: #21b9bb;
  border-color: #21b9bb;
  color: #FFFFFF;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info.disabled:hover,
.btn-info.disabled:focus,
.btn-info.disabled:active,
.btn-info.disabled.active,
.btn-info[disabled],
.btn-info[disabled]:hover,
.btn-info[disabled]:focus,
.btn-info[disabled]:active,
.btn-info.active[disabled],
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info:hover,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info.active {
  background-color: #26d7d9;
  border-color: #26d7d9;
}
.btn-default {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default.active:focus {
  color: inherit;
  border: 1px solid #d2d2d2;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled]:active,
.btn-default.active[disabled],
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
  color: #cacaca;
}
.btn-warning {
  background-color: #f8ac59;
  border-color: #f8ac59;
  color: #FFFFFF;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning,
.btn-warning:active:focus,
.btn-warning:active:hover,
.btn-warning.active:hover,
.btn-warning.active:focus {
  background-color: #f7a54a;
  border-color: #f7a54a;
  color: #FFFFFF;
}
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning.disabled:hover,
.btn-warning.disabled:focus,
.btn-warning.disabled:active,
.btn-warning.disabled.active,
.btn-warning[disabled],
.btn-warning[disabled]:hover,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:active,
.btn-warning.active[disabled],
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning:hover,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning.active {
  background-color: #f9b66d;
  border-color: #f9b66d;
}
.btn-danger {
  background-color: #ed5565;
  border-color: #ed5565;
  color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger.active:hover,
.btn-danger.active:focus {
  background-color: #ec4758;
  border-color: #ec4758;
  color: #FFFFFF;
}
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger.disabled:hover,
.btn-danger.disabled:focus,
.btn-danger.disabled:active,
.btn-danger.disabled.active,
.btn-danger[disabled],
.btn-danger[disabled]:hover,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:active,
.btn-danger.active[disabled],
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger:hover,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger.active {
  background-color: #ef6776;
  border-color: #ef6776;
}
.btn-link {
  color: inherit;
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  color: #1ab394;
  text-decoration: none;
}
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
  background-image: none;
}
.btn-link.disabled,
.btn-link.disabled:hover,
.btn-link.disabled:focus,
.btn-link.disabled:active,
.btn-link.disabled.active,
.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus,
.btn-link[disabled]:active,
.btn-link.active[disabled],
fieldset[disabled] .btn-link,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:active,
fieldset[disabled] .btn-link.active {
  color: #cacaca;
}
.btn-white {
  color: inherit;
  background: white;
  border: 1px solid #e7eaec;
}
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.open .dropdown-toggle.btn-white,
.btn-white:active:focus,
.btn-white:active:hover,
.btn-white.active:hover,
.btn-white.active:focus {
  color: inherit;
  border: 1px solid #d2d2d2;
}
.btn-white:active,
.btn-white.active {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
}
.btn-white:active,
.btn-white.active,
.open .dropdown-toggle.btn-white {
  background-image: none;
}
.btn-white.disabled,
.btn-white.disabled:hover,
.btn-white.disabled:focus,
.btn-white.disabled:active,
.btn-white.disabled.active,
.btn-white[disabled],
.btn-white[disabled]:hover,
.btn-white[disabled]:focus,
.btn-white[disabled]:active,
.btn-white.active[disabled],
fieldset[disabled] .btn-white,
fieldset[disabled] .btn-white:hover,
fieldset[disabled] .btn-white:focus,
fieldset[disabled] .btn-white:active,
fieldset[disabled] .btn-white.active {
  color: #cacaca;
}
.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse,
.navbar-form,
.navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover,
.open .btn.dropdown-toggle,
.panel,
.popover,
.progress,
.progress-bar {
  box-shadow: none;
}
.btn-outline {
  color: inherit;
  background-color: transparent;
  transition: all .5s;
}
.btn-rounded {
  border-radius: 50px;
}
.btn-large-dim {
  width: 85px;
  height: 85px;
  font-size: 37px;
}
button.dim {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding-top: 0px;
  margin-right: 5px;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 20px !important; background:#fff;
}
button.dim:active {
  top: 3px;
}
button.btn-primary.dim {
  box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #999999;
}
button.btn-primary.dim:active {
  box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999;
}
button.btn-default.dim {
  box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999;
}
button.btn-default.dim:active {
  box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999;
}
button.btn-warning.dim {
  box-shadow: inset 0 0 0 #f79d3c, 0 5px 0 0 #f79d3c, 0 10px 5px #999999;
}
button.btn-warning.dim:active {
  box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999;
}
button.btn-info.dim {
  box-shadow: inset 0 0 0 #1eacae, 0 5px 0 0 #1eacae, 0 5px 5px #999999;
}
button.btn-info.dim:active {
  box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999;
}
button.btn-success.dim {
  box-shadow: inset 0 0 0 #1872ab, 0 5px 0 0 #1872ab, 0 10px 5px #999999;
}
button.btn-success.dim:active {
  box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999;
}
button.btn-danger.dim {
  box-shadow: inset 0 0 0 #ea394c, 0 5px 0 0 #ea394c, 0 10px 5px #999999;
}
button.btn-danger.dim:active {
  box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999;
}
button.dim:before {
  font-size: 50px;
  line-height: 1em;
  font-weight: normal;
  color: #fff;
  display: block;
  padding-top: 10px;
}
button.dim:active:before {
  top: 7px;
  font-size: 50px;
}
.btn:focus {
  outline: none !important;
}
.label {
  background-color: #d1dade;
  color: #5e5e5e;
  font-family: 'Open Sans';
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  text-shadow: none;
}
.badge {
  background-color: #d1dade;
  color: #5e5e5e;
  font-family: 'Open Sans';
  font-size: 11px;
  font-weight: 600;
  padding-bottom: 4px;
  padding-left: 6px;
  padding-right: 6px;
  text-shadow: none;
}
.label-primary,
.badge-primary {
  background-color: #1ab394;
  color: #FFFFFF;
}
.label-success,
.badge-success {
  background-color: #1c84c6;
  color: #FFFFFF;
}
.label-warning,
.badge-warning {
  background-color: #f8ac59;
  color: #FFFFFF;
}
.label-warning-light,
.badge-warning-light {
  background-color: #f8ac59;
  color: #ffffff;
}
.label-danger,
.badge-danger {
  background-color: #ed5565;
  color: #FFFFFF;
}
.label-info,
.badge-info {
  background-color: #23c6c8;
  color: #FFFFFF;
}
.label-inverse,
.badge-inverse {
  background-color: #262626;
  color: #FFFFFF;
}
.label-white,
.badge-white {
  background-color: #FFFFFF;
  color: #5E5E5E;
}
.label-white,
.badge-disable {
  background-color: #2A2E36;
  color: #8B91A0;
}
/* TOOGLE SWICH */
.onoffswitch {
  position: relative;
  width: 64px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #1ab394;
  border-radius: 2px;
}
.onoffswitch-inner {
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  float: left;
  width: 50%;
  height: 20px;
  padding: 0;
  line-height: 20px;
  font-size: 12px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #1ab394;
  color: #FFFFFF;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #FFFFFF;
  color: #999999;
  text-align: right;
}
.onoffswitch-switch {
  width: 20px;
  margin: 0;
  background: #FFFFFF;
  border: 2px solid #1ab394;
  border-radius: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 44px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0;
}
/* CHOSEN PLUGIN */
.chosen-container-single .chosen-single {
  background: #ffffff;
  box-shadow: none;
  -moz-box-sizing: border-box;
  background-color: #FFFFFF;
  border: 1px solid #CBD5DD;
  border-radius: 2px;
  cursor: text;
  height: auto !important;
  margin: 0;
  min-height: 30px;
  overflow: hidden;
  padding: 4px 12px;
  position: relative;
  width: 100%;
}
.chosen-container-multi .chosen-choices li.search-choice {
  background: #f1f1f1;
  border: 1px solid #ededed;
  border-radius: 2px;
  box-shadow: none;
  color: #333333;
  cursor: default;
  line-height: 13px;
  margin: 3px 0 3px 5px;
  padding: 3px 20px 3px 5px;
  position: relative;
}
/* PAGINATIN */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #f4f4f4;
  border-color: #DDDDDD;
  color: inherit;
  cursor: default;
  z-index: 2;
}
.pagination > li > a,
.pagination > li > span {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  color: inherit;
  float: left;
  line-height: 1.42857;
  margin-left: -1px;
  padding: 4px 8px;
  position: relative;
  text-decoration: none;
}
/* TOOLTIPS */
.tooltip-inner {
  background-color: #2F4050;
}
.tooltip.top .tooltip-arrow {
  border-top-color: #2F4050;
}
.tooltip.right .tooltip-arrow {
  border-right-color: #2F4050;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #2F4050;
}
.tooltip.left .tooltip-arrow {
  border-left-color: #2F4050;
}
/* EASY PIE CHART*/
.easypiechart {
  position: relative;
  text-align: center;
}
.easypiechart .h2 {
  margin-left: 10px;
  margin-top: 10px;
  display: inline-block;
}
.easypiechart canvas {
  top: 0;
  left: 0;
}
.easypiechart .easypie-text {
  line-height: 1;
  position: absolute;
  top: 33px;
  width: 100%;
  z-index: 1;
}
.easypiechart img {
  margin-top: -4px;
}
.jqstooltip {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
/* FULLCALENDAR */
.fc-state-default {
  background-color: #ffffff;
  background-image: none;
  background-repeat: repeat-x;
  box-shadow: none;
  color: #333333;
  text-shadow: none;
}
.fc-state-default {
  border: 1px solid;
}
.fc-button {
  color: inherit;
  border: 1px solid #e7eaec;
  cursor: pointer;
  display: inline-block;
  height: 1.9em;
  line-height: 1.9em;
  overflow: hidden;
  padding: 0 0.6em;
  position: relative;
  white-space: nowrap;
}
.fc-state-active {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #ffffff;
}
.fc-header-title h2 {
  font-size: 16px;
  font-weight: 600;
  color: inherit;
}
.fc-content .fc-widget-header,
.fc-content .fc-widget-content {
  border-color: #e7eaec;
  font-weight: normal;
}
.fc-border-separate tbody {
  background-color: #F8F8F8;
}
.fc-state-highlight {
  background: none repeat scroll 0 0 #FCF8E3;
}
.external-event {
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 5px;
}
.fc-ltr .fc-event-hori.fc-event-end,
.fc-rtl .fc-event-hori.fc-event-start {
  border-radius: 2px;
}
.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
  padding: 4px 6px;
  background-color: #1ab394;
  /* background color */
  border-color: #1ab394;
  /* border color */
}
.fc-event-time,
.fc-event-title {
  color: #717171;
  padding: 0 1px;
}
.ui-calendar .fc-event-time,
.ui-calendar .fc-event-title {
  color: #fff;
}
/* Chat */
.chat-activity-list .chat-element {
  border-bottom: 1px solid #e7eaec;
}
.chat-element:first-child {
  margin-top: 0;
}
.chat-element {
  padding-bottom: 15px;
}
.chat-element,
.chat-element .media {
  margin-top: 15px;
}
.chat-element,
.media-body {
  overflow: hidden;
}
.media-body {
  display: block;
  width: auto;
}
.chat-element > .pull-left {
  margin-right: 10px;
}
.chat-element img.img-circle,
.dropdown-messages-box img.img-circle {
  width: 38px;
  height: 38px;
}
.chat-element .well {
  border: 1px solid #e7eaec;
  box-shadow: none;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px 20px;
  font-size: 11px;
  line-height: 16px;
}
.chat-element .actions {
  margin-top: 10px;
}
.chat-element .photos {
  margin: 10px 0;
}
.right.chat-element > .pull-right {
  margin-left: 10px;
}
.chat-photo {
  max-height: 180px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom: 10px;
}
.chat {
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body {
  margin-left: 60px;
}
.chat li.right .chat-body {
  margin-right: 60px;
}
.chat li .chat-body p {
  margin: 0;
  color: #777777;
}
.panel .slidedown .glyphicon,
.chat .glyphicon {
  margin-right: 5px;
}
.chat-panel .panel-body {
  height: 350px;
  overflow-y: scroll;
}
/* LIST GROUP */
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFFFFF;
  z-index: 2;
}
.list-group-item-heading {
  margin-top: 10px;
}
.list-group-item-text {
  margin: 0 0 10px;
  color: inherit;
  font-size: 12px;
  line-height: inherit;
}
.no-padding .list-group-item {
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.no-padding .list-group-item:first-child {
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: none;
}
.no-padding .list-group {
  margin-bottom: 0;
}
.list-group-item {
  background-color: inherit;
  border: 1px solid #e7eaec;
  display: block;
  margin-bottom: -1px;
  padding: 10px 15px;
  position: relative;
}
.elements-list .list-group-item {
  border-left: none;
  border-right: none;
  padding: 15px 25px;
}
.elements-list .list-group-item:first-child {
  border-left: none;
  border-right: none;
  border-top: none !important;
}
.elements-list .list-group {
  margin-bottom: 0;
}
.elements-list a {
  color: inherit;
}
.elements-list .list-group-item.active,
.elements-list .list-group-item:hover {
  background: #f3f3f4;
  color: inherit;
  border-color: #e7eaec;
  /*border-bottom: 1px solid #e7eaec;*/
  /*border-top: 1px solid #e7eaec;*/
  border-radius: 0;
}
.elements-list li.active {
  transition: none;
}
.element-detail-box {
  padding: 25px;
}
/* FLOT CHART  */
.flot-chart {
  display: block;
  height: 200px;
}
.widget .flot-chart.dashboard-chart {
  display: block;
  height: 120px;
  margin-top: 40px;
}
.flot-chart.dashboard-chart {
  display: block;
  height: 180px;
  margin-top: 40px;
}
.flot-chart-content {
  width: 100%;
  height: 100%;
}
.flot-chart-pie-content {
  width: 200px;
  height: 200px;
  margin: auto;
}
.jqstooltip {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  visibility: hidden;
  background: #2b303a;
  background-color: rgba(43, 48, 58, 0.8);
  color: white;
  text-align: left;
  white-space: nowrap;
  z-index: 10000;
  padding: 5px 5px 5px 5px;
  min-height: 22px;
  border-radius: 3px;
}
.jqsfield {
  color: white;
  text-align: left;
}
.fh-150 {
  height: 150px;
}
.fh-200 {
  height: 200px;
}
.h-150 {
  min-height: 150px;
}
.h-200 {
  min-height: 200px;
}
.legendLabel {
  padding-left: 5px;
}
.stat-list li:first-child {
  margin-top: 0;
}
.stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stat-percent {
  float: right;
}
.stat-list li {
  margin-top: 15px;
  position: relative;
}
/* DATATABLES */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background: transparent;
}
.dataTables_wrapper {
  padding-bottom: 30px;
}
.dataTables_length {
  float: left;
}
.dataTables_filter label {
  margin-right: 5px;
}
.html5buttons {
  float: right;
}
.html5buttons a {
  border: 1px solid #e7eaec;
  background: #fff;
  color: #676a6c;
  box-shadow: none;
  padding: 6px 8px;
  font-size: 12px;
}
.html5buttons a:hover,
.html5buttons a:focus:active {
  background-color: #eee;
  color: inherit;
  border-color: #d2d2d2;
}
div.dt-button-info {
  z-index: 100;
}
@media (max-width: 768px) {
  .html5buttons {
    float: none;
    margin-top: 10px;
  }
  .dataTables_length {
    float: none;
  }
}
/* CIRCLE */
.img-circle {
  border-radius: 50%;
}
.btn-circle {
  width: 30px;
  height: 30px;
  padding: 6px 0;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.428571429;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  border-radius: 25px;
  font-size: 18px;
  line-height: 1.33;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}
.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #ddd;
  background-color: #eee !important;
}
.show-grid {
  margin: 15px 0;
}
/* ANIMATION */
.css-animation-box h1 {
  font-size: 44px;
}
.animation-efect-links a {
  padding: 4px 6px;
  font-size: 12px;
}
#animation_box {
  background-color: #f9f8f8;
  border-radius: 16px;
  width: 80%;
  margin: 0 auto;
  padding-top: 80px;
}
.animation-text-box {
  position: absolute;
  margin-top: 40px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
}
.animation-text-info {
  position: absolute;
  margin-top: -60px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  font-size: 10px;
}
.animation-text-box h2 {
  font-size: 54px;
  font-weight: 600;
  margin-bottom: 5px;
}
.animation-text-box p {
  font-size: 12px;
  text-transform: uppercase;
}
/* PEACE */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #1ab394;
  position: fixed;
  z-index: 2040;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
.pace-inactive {
  display: none;
}
/* WIDGETS */
.widget {
 
  padding: 15px 20px;
 
  margin-top: 10px;
}
.widget.style1 h2 {
  font-size: 30px;
}
.widget h2,
.widget h3 {
  margin-top: 5px;
  margin-bottom: 0;
}
.widget-text-box {
  padding: 20px;
  border: 1px solid #e7eaec;
  background: #ffffff;
}
.widget-head-color-box {
  border-radius: 5px 5px 0 0;
  margin-top: 10px;
}
.widget .flot-chart {
  height: 100px;
}
.vertical-align div {
  display: inline-block;
  vertical-align: middle;
}
.vertical-align h2,
.vertical-align h3 {
  margin: 0;
}
.todo-list {
  list-style: none outside none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.todo-list.small-list {
  font-size: 12px;
}
.todo-list.small-list > li {
  background: #f3f3f4;
  border-left: none;
  border-right: none;
  border-radius: 4px;
  color: inherit;
  margin-bottom: 2px;
  padding: 6px 6px 6px 12px;
}
.todo-list.small-list .btn-xs,
.todo-list.small-list .btn-group-xs > .btn {
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.5;
  padding: 1px 2px 1px 5px;
}
.todo-list > li {
  background: #f3f3f4;
  border-left: 6px solid #e7eaec;
  border-right: 6px solid #e7eaec;
  border-radius: 4px;
  color: inherit;
  margin-bottom: 2px;
  padding: 10px;
}
.todo-list .handle {
  cursor: move;
  display: inline-block;
  font-size: 16px;
  margin: 0 5px;
}
.todo-list > li .label {
  font-size: 9px;
  margin-left: 10px;
}
.check-link {
  font-size: 16px;
}
.todo-completed {
  text-decoration: line-through;
}
.geo-statistic h1 {
  font-size: 36px;
  margin-bottom: 0;
}
.glyphicon.fa {
  font-family: "FontAwesome";
}
/* INPUTS */
.inline {
  display: inline-block !important;
}
.input-s-sm {
  width: 120px;
}
.input-s {
  width: 200px;
}
.input-s-lg {
  width: 250px;
}
.i-checks {
  padding-left: 0;
}
.form-control,
.single-line {
  background-color: #FFFFFF;
  background-image: none;
  border: 1px solid #ddd;
  border-radius: 0px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 14px;
}
.form-control:focus,
.single-line:focus {
  border-color: #1ab394 !important;
}
.has-success .form-control {
  border-color: #1ab394;
}
.has-warning .form-control {
  border-color: #f8ac59;
}
.has-error .form-control {
  border-color: #ed5565;
}
.has-success .control-label {
  color: #1ab394;
}
.has-warning .control-label {
  color: #f8ac59;
}
.has-error .control-label {
  color: #ed5565;
}
.input-group-addon {
  background-color: #fff;
  border: 1px solid #E5E6E7;
  border-radius: 1px;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 12px;
  text-align: center;
}
.spinner-buttons.input-group-btn .btn-xs {
  line-height: 1.13;
}
.spinner-buttons.input-group-btn {
  width: 20%;
}
.noUi-connect {
  background: none repeat scroll 0 0 #1ab394;
  box-shadow: none;
}
.slider_red .noUi-connect {
  background: none repeat scroll 0 0 #ed5565;
  box-shadow: none;
}
/* UI Sortable */
.ui-sortable .ibox-title {
  cursor: move;
}
.ui-sortable-placeholder {
  border: 1px dashed #cecece !important;
  visibility: visible !important;
  background: #e7eaec;
}
.ibox.ui-sortable-placeholder {
  margin: 0 0 23px !important;
}
/* SWITCHES */
.onoffswitch {
  position: relative;
  width: 54px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #1AB394;
  border-radius: 3px;
}
.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 16px;
  padding: 0;
  line-height: 16px;
  font-size: 10px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 7px;
  background-color: #1AB394;
  color: #FFFFFF;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 7px;
  background-color: #FFFFFF;
  color: #919191;
  text-align: right;
}
.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 0;
  background: #FFFFFF;
  border: 2px solid #1AB394;
  border-radius: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 36px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0;
}
/* jqGrid */
.ui-jqgrid {
  -moz-box-sizing: content-box;
}
.ui-jqgrid-btable {
  border-collapse: separate;
}
.ui-jqgrid-htable {
  border-collapse: separate;
}
.ui-jqgrid-titlebar {
  height: 40px;
  line-height: 15px;
  color: #676a6c;
  background-color: #F9F9F9;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ui-jqgrid .ui-jqgrid-title {
  float: left;
  margin: 1.1em 1em 0.2em;
}
.ui-jqgrid .ui-jqgrid-titlebar {
  position: relative;
  border-left: 0 solid;
  border-right: 0 solid;
  border-top: 0 solid;
}
.ui-widget-header {
  background: none;
  background-image: none;
  background-color: #f5f5f6;
  text-transform: uppercase;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.ui-jqgrid tr.ui-row-ltr td {
  border-right-color: inherit;
  border-right-style: solid;
  border-right-width: 1px;
  text-align: left;
  border-color: #DDDDDD;
  background-color: inherit;
}
.ui-search-toolbar input[type="text"] {
  font-size: 12px;
  height: 15px;
  border: 1px solid #CCCCCC;
  border-radius: 0;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  background: #F9F9F9;
  border: 1px solid #DDDDDD;
  line-height: 15px;
  font-weight: bold;
  color: #676a6c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ui-widget-content {
  box-sizing: content-box;
}
.ui-icon-triangle-1-n {
  background-position: 1px -16px;
}
.ui-jqgrid tr.ui-search-toolbar th {
  border-top-width: 0 !important;
  border-top-color: inherit !important;
  border-top-style: ridge !important;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: #f5f5f5;
  border-collapse: separate;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  background: #f2fbff;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 1px solid #dddddd;
  background: #ffffff;
  font-weight: normal;
  color: #212121;
}
.ui-jqgrid .ui-pg-input {
  font-size: inherit;
  width: 50px;
  border: 1px solid #CCCCCC;
  height: 15px;
}
.ui-jqgrid .ui-pg-selbox {
  display: block;
  font-size: 1em;
  height: 25px;
  line-height: 18px;
  margin: 0;
  width: auto;
}
.ui-jqgrid .ui-pager-control {
  position: relative;
}
.ui-jqgrid .ui-jqgrid-pager {
  height: 32px;
  position: relative;
}
.ui-pg-table .navtable .ui-corner-all {
  border-radius: 0;
}
.ui-jqgrid .ui-pg-button:hover {
  padding: 1px;
  border: 0;
}
.ui-jqgrid .loading {
  position: absolute;
  top: 45%;
  left: 45%;
  width: auto;
  height: auto;
  z-index: 101;
  padding: 6px;
  margin: 5px;
  text-align: center;
  font-weight: bold;
  display: none;
  border-width: 2px !important;
  font-size: 11px;
}
.ui-jqgrid .form-control {
  height: 10px;
  width: auto;
  display: inline;
  padding: 10px 12px;
}
.ui-jqgrid-pager {
  height: 32px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 0;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 0;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 0;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 0;
}
.ui-widget-content {
  border: 1px solid #ddd;
}
.ui-jqgrid .ui-jqgrid-titlebar {
  padding: 0;
}
.ui-jqgrid .ui-jqgrid-titlebar {
  border-bottom: 1px solid #ddd;
}
.ui-jqgrid tr.jqgrow td {
  padding: 6px;
}
.ui-jqdialog .ui-jqdialog-titlebar {
  padding: 10px 10px;
}
.ui-jqdialog .ui-jqdialog-title {
  float: none !important;
}
.ui-jqdialog > .ui-resizable-se {
  position: absolute;
}
/* Nestable list */
.dd {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}
.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dd-list .dd-list {
  padding-left: 30px;
}
.dd-collapsed .dd-list {
  display: none;
}
.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
}
.dd-handle {
  display: block;
  margin: 5px 0;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  border: 1px solid #e7eaec;
  background: #f5f5f5;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-handle span {
  font-weight: bold;
}
.dd-handle:hover {
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
}
.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}
.dd-item > button:before {
  content: '+';
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0;
}
.dd-item > button[data-action="collapse"]:before {
  content: '-';
}
#nestable2 .dd-item > button {
  font-family: FontAwesome;
  height: 34px;
  width: 33px;
  color: #c1c1c1;
}
#nestable2 .dd-item > button:before {
  content: "\f067";
}
#nestable2 .dd-item > button[data-action="collapse"]:before {
  content: "\f068";
}
.dd-placeholder,
.dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5;
  background-image: -webkit-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff), -webkit-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff);
  background-image: -moz-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff), -moz-linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff);
  background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff), linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%, #ffffff);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}
.dd-dragel {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}
.dd-dragel > .dd-item .dd-handle {
  margin-top: 0;
}
.dd-dragel .dd-handle {
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
}
/**
* Nestable Extras
*/
.nestable-lists {
  display: block;
  clear: both;
  padding: 30px 0;
  width: 100%;
  border: 0;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
}
#nestable-menu {
  padding: 0;
  margin: 10px 0 20px 0;
}
#nestable-output,
#nestable2-output {
  width: 100%;
  font-size: 0.75em;
  line-height: 1.333333em;
  font-family: open sans, lucida grande, lucida sans unicode, helvetica, arial, sans-serif;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#nestable2 .dd-handle {
  color: inherit;
  border: 1px dashed #e7eaec;
  background: #f3f3f4;
  padding: 10px;
}
#nestable2 .dd-handle:hover {
  /*background: #bbb;*/
}
#nestable2 span.label {
  margin-right: 10px;
}
#nestable-output,
#nestable2-output {
  font-size: 12px;
  padding: 25px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
/* CodeMirror */
.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}
/* Google Maps */
.google-map {
  height: 300px;
}
/* Validation */
label.error {
  color: #cc5965;
  display: inline-block;
  margin-left: 5px;
}
.form-control.error {
  border: 1px dotted #cc5965;
}
/* ngGrid */
.gridStyle {
  border: 1px solid #d4d4d4;
  width: 100%;
  height: 400px;
}
.gridStyle2 {
  border: 1px solid #d4d4d4;
  width: 500px;
  height: 300px;
}
.ngH eaderCell {
  border-right: none;
  border-bottom: 1px solid #e7eaec;
}
.ngCell {
  border-right: none;
}
.ngTopPanel {
  background: #F5F5F6;
}
.ngRow.even {
  background: #f9f9f9;
}
.ngRow.selected {
  background: #EBF2F1;
}
.ngRow {
  border-bottom: 1px solid #e7eaec;
}
.ngCell {
  background-color: transparent;
}
.ngHeaderCell {
  border-right: none;
}
/* Toastr custom style */
#toast-container > .toast {
  background-image: none !important;
}
#toast-container > .toast:before {
  position: fixed;
  font-family: FontAwesome;
  font-size: 24px;
  line-height: 24px;
  float: left;
  color: #FFF;
  padding-right: 0.5em;
  margin: auto 0.5em auto -1.5em;
}
#toast-container > .toast-warning:before {
  content: "\f0e7";
}
#toast-container > .toast-error:before {
  content: "\f071";
}
#toast-container > .toast-info:before {
  content: "\f005";
}
#toast-container > .toast-success:before {
  content: "\f00C";
}
#toast-container > div {
  -moz-box-shadow: 0 0 3px #999;
  -webkit-box-shadow: 0 0 3px #999;
  box-shadow: 0 0 3px #999;
  opacity: .9;
  -ms-filter: alpha(opacity=90);
  filter: alpha(opacity=90);
}
#toast-container > :hover {
  -moz-box-shadow: 0 0 4px #999;
  -webkit-box-shadow: 0 0 4px #999;
  box-shadow: 0 0 4px #999;
  opacity: 1;
  -ms-filter: alpha(opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}
.toast {
  background-color: #1ab394;
}
.toast-success {
  background-color: #1ab394;
}
.toast-error {
  background-color: #ed5565;
}
.toast-info {
  background-color: #23c6c8;
}
.toast-warning {
  background-color: #f8ac59;
}
.toast-top-full-width {
  margin-top: 20px;
}
.toast-bottom-full-width {
  margin-bottom: 20px;
}
/* Notifie */
.cg-notify-message.inspinia-notify {
  background: #fff;
  padding: 0;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
  border: none;
  margin-top: 30px;
  color: inherit;
}
.inspinia-notify.alert-warning {
  border-left: 6px solid #f8ac59;
}
.inspinia-notify.alert-success {
  border-left: 6px solid #1c84c6;
}
.inspinia-notify.alert-danger {
  border-left: 6px solid #ed5565;
}
.inspinia-notify.alert-info {
  border-left: 6px solid #1ab394;
}
/* Image cropper style */
.img-container,
.img-preview {
  overflow: hidden;
  text-align: center;
  width: 100%;
}
.img-preview-sm {
  height: 130px;
  width: 200px;
}
/* Forum styles  */
.forum-post-container .media {
  margin: 10px 10px 10px 10px;
  padding: 20px 10px 20px 10px;
  border-bottom: 1px solid #f1f1f1;
}
.forum-avatar {
  float: left;
  margin-right: 20px;
  text-align: center;
  width: 110px;
}
.forum-avatar .img-circle {
  height: 48px;
  width: 48px;
}
.author-info {
  color: #676a6c;
  font-size: 11px;
  margin-top: 5px;
  text-align: center;
}
.forum-post-info {
  padding: 9px 12px 6px 12px;
  background: #f9f9f9;
  border: 1px solid #f1f1f1;
}
.media-body > .media {
  background: #f9f9f9;
  border-radius: 3px;
  border: 1px solid #f1f1f1;
}
.forum-post-container .media-body .photos {
  margin: 10px 0;
}
.forum-photo {
  max-width: 140px;
  border-radius: 3px;
}
.media-body > .media .forum-avatar {
  width: 70px;
  margin-right: 10px;
}
.media-body > .media .forum-avatar .img-circle {
  height: 38px;
  width: 38px;
}
.mid-icon {
  font-size: 66px;
}
.forum-item {
  margin: 10px 0;
  padding: 10px 0 20px;
  border-bottom: 1px solid #f1f1f1;
}
.views-number {
  font-size: 24px;
  line-height: 18px;
  font-weight: 400;
}
.forum-container,
.forum-post-container {
  padding: 30px !important;
}
.forum-item small {
  color: #999;
}
.forum-item .forum-sub-title {
  color: #999;
  margin-left: 50px;
}
.forum-title {
  margin: 15px 0 15px 0;
}
.forum-info {
  text-align: center;
}
.forum-desc {
  color: #999;
}
.forum-icon {
  float: left;
  width: 30px;
  margin-right: 20px;
  text-align: center;
}
a.forum-item-title {
  color: inherit;
  display: block;
  font-size: 18px;
  font-weight: 600;
}
a.forum-item-title:hover {
  color: inherit;
}
.forum-icon .fa {
  font-size: 30px;
  margin-top: 8px;
  color: #9b9b9b;
}
.forum-item.active .fa {
  color: #1ab394;
}
.forum-item.active a.forum-item-title {
  color: #1ab394;
}
@media (max-width: 992px) {
  .forum-info {
    margin: 15px 0 10px 0;
    /* Comment this is you want to show forum info in small devices */
    display: none;
  }
  .forum-desc {
    float: none !important;
  }
}
/* New Timeline style */
.vertical-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.vertical-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
#vertical-timeline {
  position: relative;
  padding: 0;
  margin-top: 2em;
  margin-bottom: 2em;
}
#vertical-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #f1f1f1;
}
.vertical-timeline-content .btn {
  float: right;
}
#vertical-timeline.light-timeline:before {
  background: #e7eaec;
}
.dark-timeline .vertical-timeline-content:before {
  border-color: transparent #f5f5f5 transparent transparent;
}
.dark-timeline.center-orientation .vertical-timeline-content:before {
  border-color: transparent transparent transparent #f5f5f5;
}
.dark-timeline .vertical-timeline-block:nth-child(2n) .vertical-timeline-content:before,
.dark-timeline.center-orientation .vertical-timeline-block:nth-child(2n) .vertical-timeline-content:before {
  border-color: transparent #f5f5f5 transparent transparent;
}
.dark-timeline .vertical-timeline-content,
.dark-timeline.center-orientation .vertical-timeline-content {
  background: #f5f5f5;
}
@media only screen and (min-width: 1170px) {
  #vertical-timeline.center-orientation {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #vertical-timeline.center-orientation:before {
    left: 50%;
    margin-left: -2px;
  }
}
@media only screen and (max-width: 1170px) {
  .center-orientation.dark-timeline .vertical-timeline-content:before {
    border-color: transparent #f5f5f5 transparent transparent;
  }
}
.vertical-timeline-block {
  position: relative;
  margin: 2em 0;
}
.vertical-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.vertical-timeline-block:first-child {
  margin-top: 0;
}
.vertical-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .center-orientation .vertical-timeline-block {
    margin: 4em 0;
  }
  .center-orientation .vertical-timeline-block:first-child {
    margin-top: 0;
  }
  .center-orientation .vertical-timeline-block:last-child {
    margin-bottom: 0;
  }
}
.vertical-timeline-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  border: 3px solid #f1f1f1;
  text-align: center;
}
.vertical-timeline-icon i {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -9px;
}
@media only screen and (min-width: 1170px) {
  .center-orientation .vertical-timeline-icon {
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    font-size: 19px;
  }
  .center-orientation .vertical-timeline-icon i {
    margin-left: -12px;
    margin-top: -10px;
  }
  .center-orientation .cssanimations .vertical-timeline-icon.is-hidden {
    visibility: hidden;
  }
}
.vertical-timeline-content {
  position: relative;
  margin-left: 60px;
  background: white;
  border-radius: 0.25em;
  padding: 1em;
}
.vertical-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.vertical-timeline-content h2 {
  font-weight: 400;
  margin-top: 4px;
}
.vertical-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}
.vertical-timeline-content .vertical-date {
  float: left;
  font-weight: 500;
}
.vertical-date small {
  color: #1ab394;
  font-weight: 400;
}
.vertical-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
  .vertical-timeline-content h2 {
    font-size: 18px;
  }
  .vertical-timeline-content p {
    font-size: 13px;
  }
}
@media only screen and (min-width: 1170px) {
  .center-orientation .vertical-timeline-content {
    margin-left: 0;
    padding: 1.6em;
    width: 45%;
  }
  .center-orientation .vertical-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: white;
  }
  .center-orientation .vertical-timeline-content .btn {
    float: left;
  }
  .center-orientation .vertical-timeline-content .vertical-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 2px;
    font-size: 14px;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content {
    float: right;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: white;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content .btn {
    float: right;
  }
  .center-orientation .vertical-timeline-block:nth-child(even) .vertical-timeline-content .vertical-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
  .center-orientation .cssanimations .vertical-timeline-content.is-hidden {
    visibility: hidden;
  }
}
/* Tabs */
.tabs-container .panel-body {
  background: #fff;
  border: none;
  border-radius: 2px;
  padding: 15px;
  position: relative;
}
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  border: 1px solid #e7eaec;
  border-bottom-color: transparent;
  background-color: #fff;
}
.tabs-container .nav-tabs > li {
  float: left;
  margin-bottom: -3px;
}
.tabs-container .tab-pane .panel-body {
  border-top: none;
}
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus {
  border: 1px solid #999;
  border-bottom-color: transparent;
}
.tabs-container .nav-tabs {
  border-bottom: 1px solid #e7eaec;
}
.tabs-container .tab-pane .panel-body {
  border-top: none;
}
.tabs-container .tabs-left .tab-pane .panel-body,
.tabs-container .tabs-right .tab-pane .panel-body {
  border-top: 1px solid #e7eaec;
}
.tabs-container .nav-tabs > li a:hover {
  background: transparent;
  border-color: transparent;
}
.tabs-container .tabs-below > .nav-tabs,
.tabs-container .tabs-right > .nav-tabs,
.tabs-container .tabs-left > .nav-tabs {
  border-bottom: 0;
}
.tabs-container .tabs-left .panel-body {
  position: static;
}
.tabs-container .tabs-left > .nav-tabs,
.tabs-container .tabs-right > .nav-tabs {
  width: 20%;
}
.tabs-container .tabs-left .panel-body {
  width: 80%;
  margin-left: 20%;
}
.tabs-container .tabs-right .panel-body {
  width: 80%;
  margin-right: 20%;
}
.tabs-container .tab-content > .tab-pane,
.tabs-container .pill-content > .pill-pane {
  display: none;
}
.tabs-container .tab-content > .active,
.tabs-container .pill-content > .active {
  display: block;
}
.tabs-container .tabs-below > .nav-tabs {
  border-top: 1px solid #e7eaec;
}
.tabs-container .tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}
.tabs-container .tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}
.tabs-container .tabs-below > .nav-tabs > li > a:hover,
.tabs-container .tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #e7eaec;
  border-bottom-color: transparent;
}
.tabs-container .tabs-left > .nav-tabs > li,
.tabs-container .tabs-right > .nav-tabs > li {
  float: none; border-right:1px solid #999 !important;
}
.tabs-container .tabs-left > .nav-tabs > li > a,
.tabs-container .tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}
.tabs-container .tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
}
.tabs-container .tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.tabs-container .tabs-left > .nav-tabs .active > a,
.tabs-container .tabs-left > .nav-tabs .active > a:hover,
.tabs-container .tabs-left > .nav-tabs .active > a:focus {
  border-color: #999 transparent #999 #999;
  *border-right-color: #ffffff;
}
.tabs-container .tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
}
.tabs-container .tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.tabs-container .tabs-right > .nav-tabs .active > a,
.tabs-container .tabs-right > .nav-tabs .active > a:hover,
.tabs-container .tabs-right > .nav-tabs .active > a:focus {
  border-color: #e7eaec #e7eaec #e7eaec transparent;
  *border-left-color: #ffffff;
  z-index: 1;
}
@media (max-width: 767px) {
  .tabs-container .nav-tabs > li {
    float: none !important;
  }
  .tabs-container .nav-tabs > li.active > a {
    border-bottom: 1px solid #e7eaec !important;
    margin: 0;
  }
}
/* jsvectormap */
.jvectormap-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.jvectormap-tip {
  position: absolute;
  display: none;
  border: solid 1px #CDCDCD;
  border-radius: 3px;
  background: #292929;
  color: white;
  font-family: sans-serif, Verdana;
  font-size: smaller;
  padding: 5px;
}
.jvectormap-zoomin,
.jvectormap-zoomout,
.jvectormap-goback {
  position: absolute;
  left: 10px;
  border-radius: 3px;
  background: #1ab394;
  padding: 3px;
  color: white;
  cursor: pointer;
  line-height: 10px;
  text-align: center;
  box-sizing: content-box;
}
.jvectormap-zoomin,
.jvectormap-zoomout {
  width: 10px;
  height: 10px;
}
.jvectormap-zoomin {
  top: 10px;
}
.jvectormap-zoomout {
  top: 30px;
}
.jvectormap-goback {
  bottom: 10px;
  z-index: 1000;
  padding: 6px;
}
.jvectormap-spinner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: center no-repeat url(data:image/gif;base64,R0lGODlhIAAgAPMAAP///wAAAMbGxoSEhLa2tpqamjY2NlZWVtjY2OTk5Ly8vB4eHgQEBAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==);
}
.jvectormap-legend-title {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}
.jvectormap-legend-cnt {
  position: absolute;
}
.jvectormap-legend-cnt-h {
  bottom: 0;
  right: 0;
}
.jvectormap-legend-cnt-v {
  top: 0;
  right: 0;
}
.jvectormap-legend {
  background: black;
  color: white;
  border-radius: 3px;
}
.jvectormap-legend-cnt-h .jvectormap-legend {
  float: left;
  margin: 0 10px 10px 0;
  padding: 3px 3px 1px 3px;
}
.jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick {
  float: left;
}
.jvectormap-legend-cnt-v .jvectormap-legend {
  margin: 10px 10px 0 0;
  padding: 3px;
}
.jvectormap-legend-cnt-h .jvectormap-legend-tick {
  width: 40px;
}
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
  height: 15px;
}
.jvectormap-legend-cnt-v .jvectormap-legend-tick-sample {
  height: 20px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
}
.jvectormap-legend-tick-text {
  font-size: 12px;
}
.jvectormap-legend-cnt-h .jvectormap-legend-tick-text {
  text-align: center;
}
.jvectormap-legend-cnt-v .jvectormap-legend-tick-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
  padding-left: 3px;
}
/*Slick Carousel */
.slick-prev:before,
.slick-next:before {
  color: #1ab394 !important;
}
/* Payments */
.payment-card {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #e7eaec;
}
.payment-icon-big {
  font-size: 60px;
  color: #d1dade;
}
.payments-method.panel-group .panel + .panel {
  margin-top: -1px;
}
.payments-method .panel-heading {
  padding: 15px;
}
.payments-method .panel {
  border-radius: 0;
}
.payments-method .panel-heading h5 {
  margin-bottom: 5px;
}
.payments-method .panel-heading i {
  font-size: 26px;
}
/* Select2 custom styles */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: #e7eaec;
}
/* Tour */
.tour-tour .btn.btn-default {
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  color: inherit;
}
.tour-step-backdrop {
  z-index: 2101;
}
.tour-backdrop {
  z-index: 2100;
  opacity: .7;
}
.popover[class*=tour-] {
  z-index: 2100;
}
body.tour-open .animated {
  animation-fill-mode: initial;
}
/* Resizable */
.resizable-panels .ibox {
  clear: none;
  margin: 10px;
  float: left;
  overflow: hidden;
  min-height: 150px;
  min-width: 150px;
}
.resizable-panels .ibox .ibox-content {
  height: calc(100% - 49px);
}
.ui-resizable-helper {
  background: rgba(211, 211, 211, 0.4);
}
/* Wizard step fix */
.wizard > .content > .body {
  position: relative;
}
.sidebard-panel {
  width: 220px;
  background: #ebebed;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}
.sidebard-panel .feed-element img.img-circle {
  width: 32px;
  height: 32px;
}
.sidebard-panel .feed-element,
.media-body,
.sidebard-panel p {
  font-size: 12px; color:#000;
}
.sidebard-panel .feed-element {
  margin-top: 20px;
  padding-bottom: 0;
}
.sidebard-panel .list-group {
  margin-bottom: 10px;
}
.sidebard-panel .list-group .list-group-item {
  padding: 5px 0;
  font-size: 12px;
  border: 0;
}
.sidebar-content .wrapper,
.wrapper.sidebar-content {
  padding-right: 230px !important;
}
.body-small .sidebar-content .wrapper,
.body-small .wrapper.sidebar-content {
  padding-right: 20px !important;
}
#right-sidebar {
  background-color: #fff;
  border-left: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  overflow: hidden;
  position: fixed;
  top: 60px;
  width: 260px !important;
  z-index: 1009;
  bottom: 0;
  right: -260px;
}
#right-sidebar.sidebar-open {
  right: 0;
}
#right-sidebar.sidebar-open.sidebar-top {
  top: 0;
  border-top: none;
}
.sidebar-container ul.nav-tabs {
  border: none;
}
.sidebar-container ul.nav-tabs.navs-4 li {
  width: 25%;
}
.sidebar-container ul.nav-tabs.navs-3 li {
  width: 33.3333%;
}
.sidebar-container ul.nav-tabs.navs-2 li {
  width: 50%;
}
.sidebar-container ul.nav-tabs li {
  border: none;
}
.sidebar-container ul.nav-tabs li a {
  border: none;
  padding: 12px 10px;
  margin: 0;
  border-radius: 0;
  background: #2f4050;
  color: #fff;
  text-align: center;
  border-right: 1px solid #334556;
}
.sidebar-container ul.nav-tabs li.active a {
  border: none;
  background: #f9f9f9;
  color: #676a6c;
  font-weight: bold;
}
.sidebar-container .nav-tabs > li.active > a:hover,
.sidebar-container .nav-tabs > li.active > a:focus {
  border: none;
}
.sidebar-container ul.sidebar-list {
  margin: 0;
  padding: 0;
}
.sidebar-container ul.sidebar-list li {
  border-bottom: 1px solid #e7eaec;
  padding: 15px 20px;
  list-style: none;
  font-size: 12px;
}
.sidebar-container .sidebar-message:nth-child(2n+2) {
  background: #f9f9f9;
}
.sidebar-container ul.sidebar-list li a {
  text-decoration: none;
  color: inherit;
}
.sidebar-container .sidebar-content {
  padding: 15px 20px;
  font-size: 12px;
}
.sidebar-container .sidebar-title {
  background: #f9f9f9;
  padding: 20px;
  border-bottom: 1px solid #e7eaec;
}
.sidebar-container .sidebar-title h3 {
  margin-bottom: 3px;
  padding-left: 2px;
}
.sidebar-container .tab-content h4 {
  margin-bottom: 5px;
}
.sidebar-container .sidebar-message > a > .pull-left {
  margin-right: 10px;
}
.sidebar-container .sidebar-message > a {
  text-decoration: none;
  color: inherit;
}
.sidebar-container .sidebar-message {
  padding: 15px 20px;
}
.sidebar-container .sidebar-message .message-avatar {
  height: 38px;
  width: 38px;
  border-radius: 50%;
}
.sidebar-container .setings-item {
  padding: 15px 20px;
  border-bottom: 1px solid #e7eaec;
}
body {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #2f4050;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
}
    body.registerBg {
        background: #e7eaec ;} 
    html,
    body {
        height: 100%;
    }
body.full-height-layout #wrapper,
body.full-height-layout #page-wrapper {
  height: 100%;
}
#page-wrapper {
  min-height: auto;
}
body.boxed-layout {
  background: url('patterns/shattered.png');
}
body.boxed-layout #wrapper {
  background-color: #2f4050;
  max-width: 1200px;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
.top-navigation.boxed-layout #wrapper,
.boxed-layout #wrapper.top-navigation {
  max-width: 1300px !important;
}
.block {
  display: block;
}
.clear {
  display: block;
  overflow: hidden;
}
a {
  cursor: pointer;
}
a:hover,
a:focus {
  text-decoration: none;
}
.border-bottom {
  border-bottom: 1px solid #e7eaec !important;
}
.font-bold {
  font-weight: 600;
}
.font-noraml {
  font-weight: 400;
}
.text-uppercase {
  text-transform: uppercase;
}
.b-r {
  border-right: 1px solid #e7eaec;
}
.hr-line-dashed {
  border-top: 1px dashed #e7eaec;
  color: #ffffff;
  background-color: #ffffff;
  height: 1px;
  margin: 20px 0;
}
.hr-line-solid {
  border-bottom: 1px solid #e7eaec;
  background-color: rgba(0, 0, 0, 0);
  border-style: solid !important;
  margin-top: 15px;
  margin-bottom: 15px;
}
video {
  width: 100% !important;
  height: auto !important;
}
/* GALLERY */
.gallery > .row > div {
  margin-bottom: 15px;
}
.fancybox img {
  margin-bottom: 5px;
  /* Only for demo */
  width: 24%;
}
/* Summernote text editor  */
.note-editor {
  height: auto !important;
  min-height: 300px;
}
.note-editor.fullscreen {
  z-index: 2050;
}
/* MODAL */
.modal-content {
  background-clip: padding-box;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: 0 none;
  position: relative;
}
.modal-dialog {
  z-index: 2200;
}
.modal-body {
  padding: 20px 30px 30px 30px;
}
.inmodal .modal-body {
  background: #f8fafb;
}
.inmodal .modal-header {
  padding: 30px 15px;
  text-align: center;
}
.animated.modal.fade .modal-dialog {
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}
.inmodal .modal-title {
  font-size: 26px;
}
.inmodal .modal-icon {
  font-size: 84px;
  color: #e2e3e3;
}
.modal-footer {
  margin-top: 0;
}
/* WRAPPERS */
#wrapper {
    width: 100%;
    /**overflow-x: hidden;**/
}
.wrapper {
  padding: 0 20px;
}
.wrapper-content {
  padding: 20px 10px 40px;
}
#page-wrapper {
  padding: 0 15px;
  min-height: 568px;
  position: relative !important;
}
@media (min-width: 768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 240px;
   min-height: 2002px; 
    }
}
.title-action {
  text-align: right;
  padding-top: 30px;
}
.ibox-content h1,
.ibox-content h2,
.ibox-content h3,
.ibox-content h4,
.ibox-content h5,
.ibox-title h1,
.ibox-title h2,
.ibox-title h3,
.ibox-title h4,
.ibox-title h5 {
  margin-top: 5px;
}
ul.unstyled,
ol.unstyled {
  list-style: none outside none;
  margin-left: 0;
}
.big-icon {
  font-size: 160px !important;
  color: #e5e6e7;
}
/* FOOTER */
.footer {
  background: none repeat scroll 0 0 white;
  border-top: 1px solid #e7eaec;
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  position: absolute;
  right: 0;
}
.footer.fixed_full {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 20px;
  background: white;
  border-top: 1px solid #e7eaec;
}
.footer.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 10px 20px;
  background: white;
  border-top: 1px solid #e7eaec;
  margin-left: 220px;
}
body.mini-navbar .footer.fixed,
body.body-small.mini-navbar .footer.fixed {
  margin: 0 0 0 70px;
}
body.mini-navbar.canvas-menu .footer.fixed,
body.canvas-menu .footer.fixed {
  margin: 0 !important;
}
body.fixed-sidebar.body-small.mini-navbar .footer.fixed {
  margin: 0 0 0 220px;
}
body.body-small .footer.fixed {
  margin-left: 0;
}
/* PANELS */
.page-heading {
  border-top: 0;
  padding: 15px 10px 15px 10px;
}
.panel-heading h1,
.panel-heading h2 {
  margin-bottom: 5px;
}
/* TABLES */
.table-bordered {
  border: 1px solid #EBEBEB;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  background-color: #F5F5F6;
  border-bottom-width: 1px;
}
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #e7e7e7;
        padding: 7px !important;
    }
.table > thead > tr > th {
  border-bottom: 1px solid #DDDDDD;
  vertical-align: bottom;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
].table > tfoot > tr > td {
    border-bottom: 1px solid #e7eaec;
    line-height: 1.42857;
    padding: 7px !important;
    vertical-align: top;
    border-top: none !important;
}
table.no-bordersTable tr td { border:none !important; padding:2px;
}
/* PANELS */
.panel.blank-panel {
    background: none;
    margin: 0;
}
.blank-panel .panel-heading {
  padding-bottom: 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none;
  border-color: #dddddd #dddddd rgba(0, 0, 0, 0);
  border-bottom: #f3f3f4;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  color: #555555;
  cursor: default;
}
.nav.nav-tabs li {
  background: none;
  border: none;
}
.nav-tabs > li > a {
  color: #A7B1C2;
  font-weight: 600;
  padding: 10px 20px 10px 25px; border-radius:0 !important;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: #e6e6e6;
  color: #676a6c;
}
.ui-tab .tab-content {
  padding: 20px 0;
}
/* GLOBAL  */
.no-padding {
  padding: 0 !important;
}
.no-borders {
  border: none !important;
}
.no-margins {
  margin: 0 !important;
}
.no-top-border {
  border-top: 0 !important;
}
.ibox-content.text-box {
  padding-bottom: 0;
  padding-top: 15px;
}
.border-left-right {
  border-left: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
  border-top: none;
  border-bottom: none;
}
.border-left {
  border-left: 1px solid #e7eaec;
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.border-right {
  border-left: none;
  border-right: 1px solid #e7eaec;
  border-top: none;
  border-bottom: none;
}
.full-width {
  width: 100% !important;
}
.link-block {
  font-size: 12px;
  padding: 10px;
}
.nav.navbar-top-links .link-block a {
  font-size: 12px;
}
.link-block a {
  font-size: 10px;
  color: inherit;
}
body.mini-navbar .branding {
  display: none;
}
img.circle-border {
  border: 6px solid #ddd;
  border-radius: 50%;
}
.branding {
  float: left;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  padding: 17px 20px;
  text-align: center;
  background-color: #1ab394;
}
.login-panel {
  margin-top: 25%;
}
.icons-box h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.icons-box .infont a i {
  font-size: 25px;
  display: block;
  color: #676a6c;
}
.icons-box .infont a {
  color: #a6a8a9;
}
.icons-box .infont a {
  padding: 10px;
  margin: 1px;
  display: block;
}
.ui-draggable .ibox-title {
  cursor: move;
}
.breadcrumb {
  background-color: #ffffff;
  padding: 0;
  margin-bottom: 0;
}
.breadcrumb > li a {
  color: inherit;
}
.breadcrumb > .active {
  color: inherit;
}
code {
  background-color: #F9F2F4;
  border-radius: 4px;
  color: #ca4440;
  font-size: 90%;
  padding: 2px 4px;
  white-space: nowrap;
}
.ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox.collapsed .ibox-content {
  display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
  content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
  content: "\f077";
}
.ibox:after,
.ibox:before {
  display: table;
}
.ibox-title {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background-color: #ffffff;

  border-image: none;
 

  color: inherit;
  margin-bottom: 0;
  padding: 14px 15px 7px;
  min-height: 48px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 10px 10px 5px 10px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
}
.ibox-footer {
  color: inherit;
  border-top: 1px solid #e7eaec;
  font-size: 90%;
  background: #ffffff;
  padding: 10px 15px;
}
table.table-mail tr td {
  padding: 12px;
}
.table-mail .check-mail {
  padding-left: 20px;
}
.table-mail .mail-date {
  padding-right: 20px;
}
.star-mail,
.check-mail {
  width: 40px;
}
.unread td a,
.unread td {
  font-weight: 600;
  color: inherit;
}
.read td a,
.read td {
  font-weight: normal;
  color: inherit;
}
.unread td {
  background-color: #f9f8f8;
}
.ibox-content {
  clear: both;
}
.ibox-heading {
  background-color: #f3f6fb;
  border-bottom: none;
}
.ibox-heading h3 {
  font-weight: 200;
  font-size: 24px;
}
.ibox-title h5 {
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: left;
}
.ibox-title .label {
  float: left;
  margin-left: 4px;
}
.ibox-tools {
  display: block;
  float: none;
  margin-top: 0;
  position: relative;
  padding: 0;
  text-align: right;
}
.ibox-tools a {
  cursor: pointer;
  margin-left: 5px;
  color: #c4c4c4;
}
.ibox-tools a.btn-primary {
  color: #fff;
}
.ibox-tools .dropdown-menu > li > a {
  padding: 4px 10px;
  font-size: 12px;
}
.ibox .ibox-tools.open > .dropdown-menu {
  left: auto;
  right: 0;
}
/* BACKGROUNDS */
.gray-bg {
  background-color: #f3f3f4;
}
.white-bg {
  background-color: #ffffff;
}
.navy-bg {
  background-color: #1ab394;
  color: #ffffff;
}
.blue-bg {
  background-color: #1c84c6;
  color: #ffffff;
}
.lazur-bg {
  background-color: #23c6c8;
  color: #ffffff;
}
.yellow-bg {
  background-color: #f8ac59;
  color: #ffffff;
}
.red-bg {
  background-color: #ed5565;
  color: #ffffff;
}
.black-bg {
  background-color: #262626;
}
.panel-primary {
  border-color: #1ab394;
}
.panel-primary > .panel-heading {
  background-color: #1ab394;
  border-color: #1ab394;
}
.panel-success {
  border-color: #1c84c6;
}
.panel-success > .panel-heading {
  background-color: #1c84c6;
  border-color: #1c84c6;
  color: #ffffff;
}
.panel-info {
  border-color: #23c6c8;
}
.panel-info > .panel-heading {
  background-color: #23c6c8;
  border-color: #23c6c8;
  color: #ffffff;
}
.panel-warning {
  border-color: #f8ac59;
}
.panel-warning > .panel-heading {
  background-color: #f8ac59;
  border-color: #f8ac59;
  color: #ffffff;
}
.panel-danger {
  border-color: #ed5565;
}
.panel-danger > .panel-heading {
  background-color: #ed5565;
  border-color: #ed5565;
  color: #ffffff;
}
.progress-bar {
  background-color: #1ab394;
}
.progress-small,
.progress-small .progress-bar {
  height: 10px;
}
.progress-small,
.progress-mini {
  margin-top: 5px;
}
.progress-mini,
.progress-mini .progress-bar {
  height: 5px;
  margin-bottom: 0;
}
.progress-bar-navy-light {
  background-color: #3dc7ab;
}
.progress-bar-success {
  background-color: #1c84c6;
}
.progress-bar-info {
  background-color: #23c6c8;
}
.progress-bar-warning {
  background-color: #f8ac59;
}
.progress-bar-danger {
  background-color: #ed5565;
}
.panel-title {
  font-size: inherit;
}
.jumbotron {
  border-radius: 6px;
  padding: 40px;
}
.jumbotron h1 {
  margin-top: 0;
}
/* COLORS */
.text-navy {
  color: #1ab394;
}
.text-primary {
  color: inherit;
}
.text-success {
  color: #1c84c6;
}
.text-info {
  color: #23c6c8;
}
.text-warning {
  color: #f8ac59;
}
.text-danger {
  color: #ed5565;
}
.text-muted {
  color: #888888;
}
.text-white {
  color: #ffffff;
}
.simple_tag {
  background-color: #f3f3f4;
  border: 1px solid #e7eaec;
  border-radius: 2px;
  color: inherit;
  font-size: 10px;
  margin-right: 5px;
  margin-top: 5px;
  padding: 5px 12px;
  display: inline-block;
}
.img-shadow {
  -webkit-box-shadow: 0 0 3px 0 #919191;
  -moz-box-shadow: 0 0 3px 0 #919191;
  box-shadow: 0 0 3px 0 #919191;
}
/* For handle diferent bg color in AngularJS version */
.dashboards\.dashboard_2 nav.navbar,
.dashboards\.dashboard_3 nav.navbar,
.mailbox\.inbox nav.navbar,
.mailbox\.email_view nav.navbar,
.mailbox\.email_compose nav.navbar,
.dashboards\.dashboard_4_1 nav.navbar,
.metrics nav.navbar,
.metrics\.index nav.navbar,
.dashboards\.dashboard_5 nav.navbar {
  background: #fff;
}
/* For handle diferent bg color in MVC version */
.Dashboard_2 .navbar.navbar-static-top,
.Dashboard_3 .navbar.navbar-static-top,
.Dashboard_4_1 .navbar.navbar-static-top,
.ComposeEmail .navbar.navbar-static-top,
.EmailView .navbar.navbar-static-top,
.Inbox .navbar.navbar-static-top,
.Metrics .navbar.navbar-static-top,
.Dashboard_5 .navbar.navbar-static-top {
  background: #fff;
}
a.close-canvas-menu {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1011;
  color: #a7b1c2;
}
a.close-canvas-menu:hover {
  color: #fff;
}
.close-canvas-menu {
  display: none;
}
.canvas-menu .close-canvas-menu {
  display: block;
}
.light-navbar .navbar.navbar-static-top {
  background-color: #ffffff;
}
/* FULL HEIGHT */
.full-height {
  height: 100%;
}
.fh-breadcrumb {
  height: calc(100% - 196px);
  margin: 0 -15px;
  position: relative;
}
.fh-no-breadcrumb {
  height: calc(100% - 99px);
  margin: 0 -15px;
  position: relative;
}
.fh-column {
  background: #fff;
  height: 100%;
  width: 240px;
  float: left;
}
.modal-backdrop {
  z-index: 2040 !important;
}
.modal {
  z-index: 2050 !important;
}
.spiner-example {
  height: 200px;
  padding-top: 70px;
}
/* MARGINS & PADDINGS */
.p-xxs {
  padding: 5px;
}
.p-xs {
  padding: 10px;
}
.p-sm {
  padding: 15px;
}
.p-m {
  padding: 20px;
}
.p-md {
  padding: 25px;
}
.p-lg {
  padding: 30px;
}
.p-xl {
  padding: 40px;
}
.p-w-xs {
  padding: 0 10px;
}
.p-w-sm {
  padding: 0 15px;
}
.p-w-m {
  padding: 0 20px;
}
.p-w-md {
  padding: 0 25px;
}
.p-w-lg {
  padding: 0 30px;
}
.p-w-xl {
  padding: 0 40px;
}
.m-xxs {
  margin: 2px 4px;
}
.m-xs {
  margin: 5px;
}
.m-sm {
  margin: 10px;
}
.m {
  margin: 15px;
}
.m-md {
  margin: 20px;
}
.m-lg {
  margin: 30px;
}
.m-xl {
  margin: 50px;
}
.m-n {
  margin: 0 !important;
}
.m-l-none {
  margin-left: 0;
}
.m-l-xs {
  margin-left: 5px;
}
.m-l-sm {
  margin-left: 10px;
}
.m-l {
  margin-left: 15px;
}
.m-l-md {
  margin-left: 20px;
}
.m-l-lg {
  margin-left: 30px;
}
.m-l-xl {
  margin-left: 40px;
}
.m-l-n-xxs {
  margin-left: -1px;
}
.m-l-n-xs {
  margin-left: -5px;
}
.m-l-n-sm {
  margin-left: -10px;
}
.m-l-n {
  margin-left: -15px;
}
.m-l-n-md {
  margin-left: -20px;
}
.m-l-n-lg {
  margin-left: -30px;
}
.m-l-n-xl {
  margin-left: -40px;
}
.m-t-none {
  margin-top: 0;
}
.m-t-xxs {
  margin-top: 1px;
}
.m-t-xs {
  margin-top: 5px;
}
.m-t-sm {
  margin-top: 10px;
}
.m-t {
  margin-top: 15px;
}
.m-t-md {
  margin-top: 20px;
}
.m-t-lg {
  margin-top: 30px;
}
.m-t-xl {
  margin-top: 40px;
}
.m-t-n-xxs {
  margin-top: -1px;
}
.m-t-n-xs {
  margin-top: -5px;
}
.m-t-n-sm {
  margin-top: -10px;
}
.m-t-n {
  margin-top: -15px;
}
.m-t-n-md {
  margin-top: -20px;
}
.m-t-n-lg {
  margin-top: -30px;
}
.m-t-n-xl {
  margin-top: -40px;
}
.m-r-none {
  margin-right: 0;
}
.m-r-xxs {
  margin-right: 1px;
}
.m-r-xs {
  margin-right: 5px;
}
.m-r-sm {
  margin-right: 10px;
}
.m-r {
  margin-right: 15px;
}
.m-r-md {
  margin-right: 20px;
}
.m-r-lg {
  margin-right: 30px;
}
.m-r-xl {
  margin-right: 40px;
}
.m-r-n-xxs {
  margin-right: -1px;
}
.m-r-n-xs {
  margin-right: -5px;
}
.m-r-n-sm {
  margin-right: -10px;
}
.m-r-n {
  margin-right: -15px;
}
.m-r-n-md {
  margin-right: -20px;
}
.m-r-n-lg {
  margin-right: -30px;
}
.m-r-n-xl {
  margin-right: -40px;
}
.m-b-none {
  margin-bottom: 0;
}
.m-b-xxs {
  margin-bottom: 1px;
}
.m-b-xs {
  margin-bottom: 5px;
}
.m-b-sm {
  margin-bottom: 10px;
}
.m-b {
  margin-bottom: 15px;
}
.m-b-md {
  margin-bottom: 20px;
}
.m-b-lg {
  margin-bottom: 30px;
}
.m-b-xl {
  margin-bottom: 40px;
}
.m-b-n-xxs {
  margin-bottom: -1px;
}
.m-b-n-xs {
  margin-bottom: -5px;
}
.m-b-n-sm {
  margin-bottom: -10px;
}
.m-b-n {
  margin-bottom: -15px;
}
.m-b-n-md {
  margin-bottom: -20px;
}
.m-b-n-lg {
  margin-bottom: -30px;
}
.m-b-n-xl {
  margin-bottom: -40px;
}
.space-15 {
  margin: 15px 0;
}
.space-20 {
  margin: 20px 0;
}
.space-25 {
  margin: 25px 0;
}
.space-30 {
  margin: 30px 0;
}
.fullscreen-ibox-mode .animated {
  animation: none;
}
body.fullscreen-ibox-mode {
  overflow-y: hidden;
}
.ibox.fullscreen {
  z-index: 2030;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  margin-bottom: 0;
}
.ibox.fullscreen .collapse-link {
  display: none;
}
.ibox.fullscreen .ibox-content {
  min-height: calc(100% - 48px);
}
body.modal-open {
  padding-right: inherit !important;
}
body.modal-open .animated {
  animation-fill-mode: initial;
  z-index: inherit;
}
/* Show profile dropdown on fixed sidebar */
body.mini-navbar.fixed-sidebar .profile-element,
.block {
  display: block !important;
}
body.mini-navbar.fixed-sidebar .nav-header {
  padding: 33px 25px;
}
body.mini-navbar.fixed-sidebar .logo-element {
  display: none;
}
.fullscreen-video .animated {
  animation: none;
}
/* SEARCH PAGE */
.search-form {
  margin-top: 10px;
}
.search-result h3 {
  margin-bottom: 0;
  color: #1E0FBE;
}
.search-result .search-link {
  color: #006621;
}
.search-result p {
  font-size: 12px;
  margin-top: 5px;
}
/* CONTACTS */
.contact-box {
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
}
.contact-box > a {
  color: inherit;
}
.contact-box.center-version {
  border: 1px solid #e7eaec;
  padding: 0;
}
.contact-box.center-version > a {
  display: block;
  background-color: #ffffff;
  padding: 22px 20px 0px 20px;
  text-align: center;
}
.contact-box.center-version > a img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.contact-box.center-version address {
  margin-bottom: 0;
}
.contact-box .contact-box-footer {
  text-align: center;
  background-color: #ffffff;
  border-top: 1px solid #e7eaec;
  padding: 15px 20px;
}
/* INVOICE */
.invoice-table tbody > tr > td:last-child,
.invoice-table tbody > tr > td:nth-child(4),
.invoice-table tbody > tr > td:nth-child(3),
.invoice-table tbody > tr > td:nth-child(2) {
  text-align: right;
}
.invoice-table thead > tr > th:last-child,
.invoice-table thead > tr > th:nth-child(4),
.invoice-table thead > tr > th:nth-child(3),
.invoice-table thead > tr > th:nth-child(2) {
  text-align: right;
}
.invoice-total > tbody > tr > td:first-child {
  text-align: right;
}
.invoice-total > tbody > tr > td {
  border: 0 none;
}
.invoice-total > tbody > tr > td:last-child {
  border-bottom: 1px solid #DDDDDD;
  text-align: right;
  width: 15%;
}
/* ERROR & LOGIN & LOCKSCREEN*/
.middle-box {
  max-width: 400px;
  z-index: 100;
  margin: 0 auto;
  padding-top: 40px;
}
.lockscreen.middle-box {
  width: 200px;
  padding-top: 110px;
}
.loginscreen.middle-box {
  width: 300px;
}
.loginColumns {
  max-width: 800px;
  margin: 0 auto;
  padding: 100px 20px 20px 20px;
}
.passwordBox {
  max-width: 460px;
  margin: 0 auto;
  padding: 100px 20px 20px 20px;
}
.logo-name {
  color: #e6e6e6;
  font-size: 180px;
  font-weight: 800;
  letter-spacing: -10px;
  margin-bottom: 0;
}
.middle-box h1 {
  font-size: 170px;
}
.wrapper .middle-box {
  margin-top: 140px;
}
.lock-word {
  z-index: 10;
  position: absolute;
  top: 110px;
  left: 50%;
  margin-left: -470px;
}
.lock-word span {
  font-size: 100px;
  font-weight: 600;
  color: #e9e9e9;
  display: inline-block;
}
.lock-word .first-word {
  margin-right: 160px;
}
/* DASBOARD */
.dashboard-header {
  border-top: 0;
  padding: 20px 20px 20px 20px;
}
.dashboard-header h2 {
  margin-top: 10px;
  font-size: 26px;
}
.fist-item {
  border-top: none !important;
}
.statistic-box {
  margin-top: 40px;
}
.dashboard-header .list-group-item span.label {
  margin-right: 10px;
}
.list-group.clear-list .list-group-item {
  border-top: 1px solid #e7eaec;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  padding: 10px 0;
}
ul.clear-list:first-child {
  border-top: none !important;
}
/* Intimeline */
.timeline-item .date i {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  width: 30px;
  text-align: center;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  background: #f8f8f8;
}
.timeline-item .date {
  text-align: right;
  width: 110px;
  position: relative;
  padding-top: 30px;
}
.timeline-item .content {
  border-left: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  padding-top: 10px;
  min-height: 100px;
}
.timeline-item .content:hover {
  background: #f6f6f6;
}
/* PIN BOARD */
ul.notes li,
ul.tag-list li {
  list-style: none;
}
ul.notes li h4 {
  margin-top: 20px;
  font-size: 16px;
}
ul.notes li div {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 140px;
  width: 140px;
  padding: 1em;
  position: relative;
}
ul.notes li div small {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}
ul.notes li div a {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: inherit;
}
ul.notes li {
  margin: 10px 40px 50px 0;
  float: left;
}
ul.notes li div p {
  font-size: 12px;
}
ul.notes li div {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 140px;
  width: 140px;
  padding: 1em;
  /* Firefox */
  -moz-box-shadow: 5px 5px 2px #212121;
  /* Safari+Chrome */
  -webkit-box-shadow: 5px 5px 2px rgba(33, 33, 33, 0.7);
  /* Opera */
  box-shadow: 5px 5px 2px rgba(33, 33, 33, 0.7);
}
ul.notes li div {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
}
ul.notes li:nth-child(even) div {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
}
ul.notes li:nth-child(3n) div {
  -o-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  position: relative;
  top: -5px;
}
ul.notes li:nth-child(5n) div {
  -o-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  position: relative;
  top: -10px;
}
ul.notes li div:hover,
ul.notes li div:focus {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  position: relative;
  z-index: 5;
}
ul.notes li div {
  text-decoration: none;
  color: #000;
  background: #ffc;
  display: block;
  height: 175px;
  width: 175px;
  padding: 1em;
  -moz-box-shadow: 5px 5px 7px #212121;
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  -moz-transition: -moz-transform 0.15s linear;
  -o-transition: -o-transform 0.15s linear;
  -webkit-transition: -webkit-transform 0.15s linear;
}
/* FILE MANAGER */
.file-box {
  float: left;
  width: 220px;
}
.file-manager h5 {
  text-transform: uppercase;
}
.file-manager {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
.folder-list li a {
  color: #666666;
  display: block;
  padding: 5px 0;
}
.folder-list li {
  border-bottom: 1px solid #e7eaec;
  display: block;
}
.folder-list li i {
  margin-right: 8px;
  color: #3d4d5d;
}
.category-list li a {
  color: #666666;
  display: block;
  padding: 5px 0;
}
.category-list li {
  display: block;
}
.category-list li i {
  margin-right: 8px;
  color: #3d4d5d;
}
.category-list li a .text-navy {
  color: #1ab394;
}
.category-list li a .text-primary {
  color: #1c84c6;
}
.category-list li a .text-info {
  color: #23c6c8;
}
.category-list li a .text-danger {
  color: #EF5352;
}
.category-list li a .text-warning {
  color: #F8AC59;
}
.file-manager h5.tag-title {
  margin-top: 20px;
}
.tag-list li {
  float: left;
}
.tag-list li a {
  font-size: 10px;
  background-color: #f3f3f4;
  padding: 5px 12px;
  color: inherit;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-right: 5px;
  margin-top: 5px;
  display: block;
}
.file {
  border: 1px solid #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
  margin-right: 20px;
}
.file-manager .hr-line-dashed {
  margin: 15px 0;
}
.file .icon,
.file .image {
  height: 100px;
  overflow: hidden;
}
.file .icon {
  padding: 15px 10px;
  text-align: center;
}
.file-control {
  color: inherit;
  font-size: 11px;
  margin-right: 10px;
}
.file-control.active {
  text-decoration: underline;
}
.file .icon i {
  font-size: 70px;
  color: #dadada;
}
.file .file-name {
  padding: 10px;
  background-color: #f8f8f8;
  border-top: 1px solid #e7eaec;
}
.file-name small {
  color: #676a6c;
}
.corner {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
  border: 0.6em solid transparent;
  border-right: 0.6em solid #f1f1f1;
  border-bottom: 0.6em solid #f1f1f1;
  right: 0em;
  bottom: 0em;
}
a.compose-mail {
  padding: 8px 10px;
}
.mail-search {
  max-width: 300px;
}
/* PROFILE */
.profile-content {
  border-top: none !important;
}
.profile-stats {
  margin-right: 10px;
}
.profile-image {
  width: 120px;
  float: left;
}
.profile-image img {
  width: 140px;
  height: 120px;
}
.profile-info {
  margin-left: 120px;
}
.feed-activity-list .feed-element {
  border-bottom: 1px solid #e7eaec;
}
.feed-element:first-child {
  margin-top: 0;
}
.feed-element {
  padding-bottom: 15px;
}
.feed-element,
.feed-element .media {
  margin-top: 15px;
}
.feed-element,
.media-body {
  overflow: hidden;
}
.feed-element > .pull-left {
  margin-right: 10px;
}
.feed-element img.img-circle,
.dropdown-messages-box img.img-circle {
  width: 38px;
  height: 38px;
}
    .feed-element .well {
        border: 1px solid #e7eaec;
        box-shadow: none;
        margin-top: 10px;
        margin-bottom: 0px;
        padding: 5px 20px 0 20px;
        font-size: 11px;
        line-height: 16px;
        background: #e0e0e0 !important; border-radius:0; 
    }
.feed-element .actions {
  margin-top: 10px;
}
.feed-element .photos {
  margin: 10px 0;
}
.feed-photo {
  max-height: 180px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 10px;
  margin-bottom: 10px;
}
.file-list li {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-bottom: 5px;
}
.file-list li a {
  color: inherit;
}
.file-list li a:hover {
  color: #1ab394;
}
.user-friends img {
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
  margin-right: 5px;
}
/* MAILBOX */
.mail-box {
  background-color: #ffffff;
  border: 1px solid #e7eaec;
  border-top: 0;
  padding: 0;
  margin-bottom: 20px;
}
.mail-box-header {
  background-color: #ffffff;
  border: 1px solid #e7eaec;
  border-bottom: 0;
  padding: 30px 20px 20px 20px;
}
.mail-box-header h2 {
  margin-top: 0;
}
.mailbox-content .tag-list li a {
  background: #ffffff;
}
.mail-body {
  border-top: 1px solid #e7eaec;
  padding: 20px;
}
.mail-text {
  border-top: 1px solid #e7eaec;
}
.mail-text .note-toolbar {
  padding: 10px 15px;
}
.mail-body .form-group {
  margin-bottom: 5px;
}
.mail-text .note-editor .note-toolbar {
  background-color: #F9F8F8;
}
.mail-attachment {
  border-top: 1px solid #e7eaec;
  padding: 20px;
  font-size: 12px;
}
.mailbox-content {
  background: none;
  border: none;
  padding: 10px;
}
.mail-ontact {
  width: 23%;
}
/* PROJECTS */
.project-people,
.project-actions {
  text-align: right;
  vertical-align: middle;
}
dd.project-people {
  text-align: left;
  margin-top: 5px;
}
.project-people img {
  width: 32px;
  height: 32px;
}
.project-title a {
  font-size: 14px;
  color: #676a6c;
  font-weight: 600;
}
.project-list table tr td {
  border-top: none;
  border-bottom: 1px solid #e7eaec;
  padding: 15px 10px;
  vertical-align: middle;
}
.project-manager .tag-list li a {
  font-size: 10px;
  background-color: white;
  padding: 5px 12px;
  color: inherit;
  border-radius: 2px;
  border: 1px solid #e7eaec;
  margin-right: 5px;
  margin-top: 5px;
  display: block;
}
.project-files li a {
  font-size: 11px;
  color: #676a6c;
  margin-left: 10px;
  line-height: 22px;
}
/* FAQ */
.faq-item {
  padding: 20px;
  margin-bottom: 2px;
  background: #fff;
}
.faq-question {
  font-size: 18px;
  font-weight: 600;
  color: #1ab394;
  display: block;
}
.faq-question:hover {
  color: #179d82;
}
.faq-answer {
  margin-top: 10px;
  background: #f3f3f4;
  border: 1px solid #e7eaec;
  border-radius: 3px;
  padding: 15px;
}
.faq-item .tag-item {
  background: #f3f3f4;
  padding: 2px 6px;
  font-size: 10px;
  text-transform: uppercase;
}
/* Chat view */
.message-input {
  height: 90px !important;
}
.chat-avatar {
  white: 36px;
  height: 36px;
  float: left;
  margin-right: 10px;
}
.chat-user-name {
  padding: 10px;
}
.chat-user {
  padding: 8px 10px;
  border-bottom: 1px solid #e7eaec;
}
.chat-user a {
  color: inherit;
}
.chat-view {
  z-index: 20012;
}
.chat-users,
.chat-statistic {
  margin-left: -30px;
}
@media (max-width: 992px) {
  .chat-users,
  .chat-statistic {
    margin-left: 0;
  }
}
.chat-view .ibox-content {
  padding: 0;
}
.chat-message {
  padding: 10px 20px;
}
.message-avatar {
  height: 48px;
  width: 48px;
  border: 1px solid #e7eaec;
  border-radius: 4px;
  margin-top: 1px;
}
.chat-discussion .chat-message.left .message-avatar {
  float: left;
  margin-right: 10px;
}
.chat-discussion .chat-message.right .message-avatar {
  float: right;
  margin-left: 10px;
}
.message {
  background-color: #fff;
  border: 1px solid #e7eaec;
  text-align: left;
  display: block;
  padding: 10px 20px;
  position: relative;
  border-radius: 4px;
}
.chat-discussion .chat-message.left .message-date {
  float: right;
}
.chat-discussion .chat-message.right .message-date {
  float: left;
}
.chat-discussion .chat-message.left .message {
  text-align: left;
  margin-left: 55px;
}
.chat-discussion .chat-message.right .message {
  text-align: right;
  margin-right: 55px;
}
.message-date {
  font-size: 10px;
  color: #888888;
}
.message-content {
  display: block;
}
.chat-discussion {
  background: #eee;
  padding: 15px;
  height: 400px;
  overflow-y: auto;
}
.chat-users {
  overflow-y: auto;
  height: 400px;
}
.chat-message-form .form-group {
  margin-bottom: 0;
}
/* jsTree */
.jstree-open > .jstree-anchor > .fa-folder:before {
  content: "\f07c";
}
.jstree-default .jstree-icon.none {
  width: 0;
}
/* CLIENTS */
.clients-list {
  margin-top: 20px;
}
.clients-list .tab-pane {
  position: relative;
  height: 600px;
}
.client-detail {
  position: relative;
  height: 620px;
}
.clients-list table tr td {
  height: 46px;
  vertical-align: middle;
  border: none;
}
.client-link {
  font-weight: 600;
  color: inherit;
}
.client-link:hover {
  color: inherit;
}
.client-avatar {
  width: 42px;
}
.client-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.contact-type {
  width: 20px;
  color: #c1c3c4;
}
.client-status {
  text-align: left;
}
.client-detail .vertical-timeline-content p {
  margin: 0;
}
.client-detail .vertical-timeline-icon.gray-bg {
  color: #a7aaab;
}
.clients-list .nav-tabs > li.active > a,
.clients-list .nav-tabs > li.active > a:hover,
.clients-list .nav-tabs > li.active > a:focus {
  border-bottom: 1px solid #fff;
}
/* BLOG ARTICLE */
.blog h2 {
  font-weight: 700;
}
.blog h5 {
  margin: 0 0 5px 0;
}
.blog .btn {
  margin: 0 0 5px 0;
}
.article h1 {
  font-size: 48px;
  font-weight: 700;
  color: #2F4050;
}
.article p {
  font-size: 15px;
  line-height: 26px;
}
.article-title {
  text-align: center;
  margin: 0px 0 10px 0;
}

/* ISSUE TRACKER */
.issue-tracker .btn-link {
  color: #1ab394;
}
table.issue-tracker tbody tr td {
  vertical-align: middle;
  height: 50px;
}
.issue-info {
  width: 50%;
}
.issue-info a {
  font-weight: 600;
  color: #676a6c;
}
.issue-info small {
  display: block;
}
/* TEAMS */
.team-members {
  margin: 10px 0;
}
.team-members img.img-circle {
  width: 42px;
  height: 42px;
  margin-bottom: 5px;
}
/* AGILE BOARD */
.sortable-list {
  padding: 10px 0;
}
.agile-list {
  list-style: none;
  margin: 0;
}
.agile-list li {
  background: #FAFAFB;
  border: 1px solid #e7eaec;
  margin: 0 0 10px 0;
  padding: 10px;
  border-radius: 2px;
}
.agile-list li:hover {
  cursor: pointer;
  background: #fff;
}
.agile-list li.warning-element {
  border-left: 3px solid #f8ac59;
}
.agile-list li.danger-element {
  border-left: 3px solid #ed5565;
}
.agile-list li.info-element {
  border-left: 3px solid #1c84c6;
}
.agile-list li.success-element {
  border-left: 3px solid #1ab394;
}
.agile-detail {
  margin-top: 5px;
  font-size: 12px;
}
/* DIFF */
ins {
  background-color: #c6ffc6;
  text-decoration: none;
}
del {
  background-color: #ffc6c6;
}
/* E-commerce */
.product-box {
  padding: 0;
  border: 1px solid #e7eaec;
}
.product-box:hover,
.product-box.active {
  border: 1px solid transparent;
  -webkit-box-shadow: 0 3px 7px 0 #a8a8a8;
  -moz-box-shadow: 0 3px 7px 0 #a8a8a8;
  box-shadow: 0 3px 7px 0 #a8a8a8;
}
.product-imitation {
  text-align: center;

  background-color: #f8f8f9;
  color: #bebec3;
  font-weight: 600;
}
.cart-product-imitation {
  text-align: center;
  padding-top: 30px;
  height: 80px;
  width: 80px;
  background-color: #f8f8f9;
}
.product-imitation.xl {
  padding: 120px 0;
}
.product-desc {
  padding: 20px;
  position: relative;
}
.ecommerce .tag-list {
  padding: 0;
}
.ecommerce .fa-star {
  color: #d1dade;
}
.ecommerce .fa-star.active {
  color: #f8ac59;
}
.ecommerce .note-editor {
  border: 1px solid #e7eaec;
}
table.shoping-cart-table {
  margin-bottom: 0;
}
table.shoping-cart-table tr td {
  border: none;
  text-align: right;
}
table.shoping-cart-table tr td.desc,
table.shoping-cart-table tr td:first-child {
  text-align: left;
}
table.shoping-cart-table tr td:last-child {
  width: 80px;
}
.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #676a6c;
  display: block;
  margin: 2px 0 5px 0;
}
.product-name:hover,
.product-name:focus {
  color: #1ab394;
}
.product-price {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: #1ab394;
  padding: 6px 12px;
  position: absolute;
  top: -32px;
  right: 0;
}
.product-detail .ibox-content {
  padding: 30px 30px 50px 30px;
}
.image-imitation {
  background-color: #f8f8f9;
  text-align: center;
  padding: 200px 0;
}
.product-main-price small {
  font-size: 10px;
}
.product-images {
  margin: 0 20px;
}
/* Social feed */
.social-feed-separated .social-feed-box {
  margin-left: 62px;
}
.social-feed-separated .social-avatar {
  float: left;
  padding: 0;
}
.social-feed-separated .social-avatar img {
  width: 52px;
  height: 52px;
  border: 1px solid #e7eaec;
}
.social-feed-separated .social-feed-box .social-avatar {
  padding: 15px 15px 0 15px;
  float: none;
}
.social-feed-box {
  /*padding: 15px;*/
  border: 1px solid #e7eaec;
  background: #fff;
  margin-bottom: 15px;
}
.article .social-feed-box {
  margin-bottom: 0;
  border-bottom: none;
}
.article .social-feed-box:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid #e7eaec;
}
.article .social-feed-box p {
  font-size: 13px;
  line-height: 18px;
}
.social-action {
  margin: 15px;
}
.social-avatar {
  padding: 15px 15px 0 15px;
}
.social-comment .social-comment {
  margin-left: 45px;
}
.social-avatar img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.social-avatar .media-body a {
  font-size: 14px;
  display: block;
}
.social-body {
  padding: 15px;
}
.social-body img {
  margin-bottom: 10px;
}
.social-footer {
  border-bottom: 1px solid #fff;
  padding: 10px 15px;
 
}
.social-footer .social-comment img {
  width: 32px;
  margin-right: 10px;
}
.social-comment:first-child {
  margin-top: 0;
}
.social-comment {
  margin-top: 15px;
}
.social-comment textarea {
  font-size: 12px;
}
/* Vote list */
.vote-item {
  padding: 20px 25px;
  background: #ffffff;
  border-top: 1px solid #e7eaec;
}
.vote-item:last-child {
  border-bottom: 1px solid #e7eaec;
}
.vote-item:hover {
  background: #fbfbfb;
}
.vote-actions {
  float: left;
  width: 30px;
  margin-right: 15px;
  text-align: center;
}
.vote-actions a {
  color: #1ab394;
  font-weight: 600;
}
.vote-actions {
  font-weight: 600;
}
.vote-title {
  display: block;
  color: inherit;
  font-size: 18px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 2px;
}
.vote-title:hover,
.vote-title:focus {
  color: inherit;
}
.vote-info,
.vote-title {
  margin-left: 45px;
}
.vote-info,
.vote-info a {
  color: #b4b6b8;
  font-size: 12px;
}
.vote-info a {
  margin-right: 10px;
}
.vote-info a:hover {
  color: #1ab394;
}
.vote-icon {
  text-align: right;
  font-size: 38px;
  display: block;
  color: #e8e9ea;
}
.vote-icon.active {
  color: #1ab394;
}
body.body-small .vote-icon {
  display: none;
}
.lightBoxGallery {
  text-align: center;
}
.lightBoxGallery img {
  margin: 1px;
}
#small-chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}
#small-chat .badge {
  position: absolute;
  top: -3px;
  right: -4px;
}
.open-small-chat {
  height: 38px;
  width: 38px;
  display: block;
  background: #1ab394;
  padding: 9px 8px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
}
.open-small-chat:hover {
  color: white;
  background: #1ab394;
}
.small-chat-box {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 75px;
  background: #fff;
  border: 1px solid #e7eaec;
  width: 230px;
  height: 320px;
  border-radius: 4px;
}
.small-chat-box.ng-small-chat {
  display: block;
}
.body-small .small-chat-box {
  bottom: 70px;
  right: 20px;
}
.small-chat-box.active {
  display: block;
}
.small-chat-box .heading {
  background: #2f4050;
  padding: 8px 15px;
  font-weight: bold;
  color: #fff;
}
.small-chat-box .chat-date {
  opacity: 0.6;
  font-size: 10px;
  font-weight: normal;
}
.small-chat-box .content {
  padding: 15px 15px;
}
.small-chat-box .content .author-name {
  font-weight: bold;
  margin-bottom: 3px;
  font-size: 11px;
}
.small-chat-box .content > div {
  padding-bottom: 20px;
}
.small-chat-box .content .chat-message {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 14px;
  max-width: 80%;
  background: #f3f3f4;
  margin-bottom: 10px;
}
.small-chat-box .content .chat-message.active {
  background: #1ab394;
  color: #fff;
}
.small-chat-box .content .left {
  text-align: left;
  clear: both;
}
.small-chat-box .content .left .chat-message {
  float: left;
}
.small-chat-box .content .right {
  text-align: right;
  clear: both;
}
.small-chat-box .content .right .chat-message {
  float: right;
}
.small-chat-box .form-chat {
  padding: 10px 10px;
}
/*
 * metismenu - v2.0.2
 * A jQuery menu plugin
 * https://github.com/onokumus/metisMenu
 *
 * Made by Osman Nuri Okumus
 * Under MIT License
 */
.metismenu .plus-minus,
.metismenu .plus-times {
  float: right;
}
.metismenu .arrow {
  float: right;
  line-height: 1.42857;
}
.metismenu .glyphicon.arrow:before {
  content: "\e079";
}
.metismenu .active > a > .glyphicon.arrow:before {
  content: "\e114";
}
.metismenu .fa.arrow:before {
  content: "\f104";
}
.metismenu .active > a > .fa.arrow:before {
  content: "\f107";
}
.metismenu .ion.arrow:before {
  content: "\f3d2";
}
.metismenu .active > a > .ion.arrow:before {
  content: "\f3d0";
}
.metismenu .fa.plus-minus:before,
.metismenu .fa.plus-times:before {
  content: "\f067";
}
.metismenu .active > a > .fa.plus-times {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.metismenu .active > a > .fa.plus-minus:before {
  content: "\f068";
}
.metismenu .collapse {
  display: none;
}
.metismenu .collapse.in {
  display: block;
}
.metismenu .collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-rotating-plane"></div>
 *
 */
.sk-spinner-rotating-plane.sk-spinner {
  width: 30px;
  height: 30px;
  background-color: #1ab394;
  margin: 0 auto;
  -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
  animation: sk-rotatePlane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
@keyframes sk-rotatePlane {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-double-bounce">
 *      <div class="sk-double-bounce1"></div>
 *      <div class="sk-double-bounce2"></div>
 *    </div>
 *
 */
.sk-spinner-double-bounce.sk-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 0 auto;
}
.sk-spinner-double-bounce .sk-double-bounce1,
.sk-spinner-double-bounce .sk-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #1ab394;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
  animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-spinner-double-bounce .sk-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-doubleBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wave">
 *      <div class="sk-rect1"></div>
 *      <div class="sk-rect2"></div>
 *      <div class="sk-rect3"></div>
 *      <div class="sk-rect4"></div>
 *      <div class="sk-rect5"></div>
 *    </div>
 *
 */
.sk-spinner-wave.sk-spinner {
  margin: 0 auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}
.sk-spinner-wave div {
  background-color: #1ab394;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-wave .sk-rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-wave .sk-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-wave .sk-rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wandering-cubes">
 *      <div class="sk-cube1"></div>
 *      <div class="sk-cube2"></div>
 *    </div>
 *
 */
.sk-spinner-wandering-cubes.sk-spinner {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  position: relative;
}
.sk-spinner-wandering-cubes .sk-cube1,
.sk-spinner-wandering-cubes .sk-cube2 {
  background-color: #1ab394;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
  animation: sk-wanderingCubeMove 1.8s infinite ease-in-out;
}
.sk-spinner-wandering-cubes .sk-cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@-webkit-keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes sk-wanderingCubeMove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    /* Hack to make FF rotate in the right direction */
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-pulse"></div>
 *
 */
.sk-spinner-pulse.sk-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-color: #1ab394;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-chasing-dots">
 *      <div class="sk-dot1"></div>
 *      <div class="sk-dot2"></div>
 *    </div>
 *
 */
.sk-spinner-chasing-dots.sk-spinner {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
}
.sk-spinner-chasing-dots .sk-dot1,
.sk-spinner-chasing-dots .sk-dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #1ab394;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}
.sk-spinner-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@-webkit-keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-chasingDotsBounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-three-bounce">
 *      <div class="sk-bounce1"></div>
 *      <div class="sk-bounce2"></div>
 *      <div class="sk-bounce3"></div>
 *    </div>
 *
 */
.sk-spinner-three-bounce.sk-spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
}
.sk-spinner-three-bounce div {
  width: 18px;
  height: 18px;
  background-color: #1ab394;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  animation: sk-threeBounceDelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sk-spinner-three-bounce .sk-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.sk-spinner-three-bounce .sk-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-threeBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */
.sk-spinner-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}
.sk-spinner-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-spinner-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 20%;
  height: 20%;
  background-color: #1ab394;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sk-spinner-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-spinner-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-spinner-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-spinner-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-spinner-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-spinner-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-spinner-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-spinner-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-spinner-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-spinner-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-spinner-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-spinner-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-spinner-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-spinner-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-spinner-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-spinner-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-spinner-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-spinner-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-spinner-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-circleBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-cube-grid">
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *      <div class="sk-cube"></div>
 *    </div>
 *
 */
.sk-spinner-cube-grid {
  /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
}
.sk-spinner-cube-grid.sk-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.sk-spinner-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #1ab394;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-spinner-cube-grid .sk-cube:nth-child(1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(3) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(4) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(5) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(6) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(7) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(8) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.sk-spinner-cube-grid .sk-cube:nth-child(9) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wordpress">
 *      <span class="sk-inner-circle"></span>
 *    </div>
 *
 */
.sk-spinner-wordpress.sk-spinner {
  background-color: #1ab394;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;
  -webkit-animation: sk-innerCircle 1s linear infinite;
  animation: sk-innerCircle 1s linear infinite;
}
.sk-spinner-wordpress .sk-inner-circle {
  display: block;
  background-color: #fff;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 8px;
  top: 5px;
  left: 5px;
}
@-webkit-keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-fading-circle">
 *      <div class="sk-circle1 sk-circle"></div>
 *      <div class="sk-circle2 sk-circle"></div>
 *      <div class="sk-circle3 sk-circle"></div>
 *      <div class="sk-circle4 sk-circle"></div>
 *      <div class="sk-circle5 sk-circle"></div>
 *      <div class="sk-circle6 sk-circle"></div>
 *      <div class="sk-circle7 sk-circle"></div>
 *      <div class="sk-circle8 sk-circle"></div>
 *      <div class="sk-circle9 sk-circle"></div>
 *      <div class="sk-circle10 sk-circle"></div>
 *      <div class="sk-circle11 sk-circle"></div>
 *      <div class="sk-circle12 sk-circle"></div>
 *    </div>
 *
 */
.sk-spinner-fading-circle.sk-spinner {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}
.sk-spinner-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-spinner-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 18%;
  height: 18%;
  background-color: #1ab394;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sk-spinner-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-spinner-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-spinner-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-spinner-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-spinner-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-spinner-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-spinner-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-spinner-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-spinner-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-spinner-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-spinner-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-spinner-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-spinner-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-spinner-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-spinner-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-spinner-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-spinner-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-spinner-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-spinner-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
/* GLOBAL STYLES
-------------------------------------------------- */
/* PACE PLUGIN
-------------------------------------------------- */
.landing-page.pace .pace-progress {
  background: #fff;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
.pace-inactive {
  display: none;
}
body.landing-page {
  color: #676a6c;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
  background-color: #fff;
}
.landing-page {
  /* CUSTOMIZE THE NAVBAR
  -------------------------------------------------- */
  /* Flip around the padding for proper display in narrow viewports */
  /* BACKGROUNDS SLIDER
  -------------------------------------------------- */
  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */
  /* Carousel base class */
  /* Since positioning the image, we need to help out the caption */
  /* Declare heights because of positioning of img element */
  /* Sections
  ------------------------- */
  /* Buttons - only primary custom button
  ------------------------- */
  /* RESPONSIVE CSS
  -------------------------------------------------- */
}
.landing-page span.navy {
  color: #1ab394;
}
.landing-page p.text-color {
  color: #676a6c;
}
.landing-page a.navy-link {
  color: #1ab394;
  text-decoration: none;
}
.landing-page a.navy-link:hover {
  color: #179d82;
}
.landing-page section p {
 
  font-size: 13px;
}
.landing-page address {
  font-size: 13px;
}
.landing-page h1 {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 200;
}
.landing-page .navy-line {
  width: 60px;
  height: 1px;
  margin: 60px auto 0;
  border-bottom: 2px solid #1ab394;
}
.landing-page .navbar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
}
.landing-page .navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.landing-page .navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.landing-page .navbar-default.navbar-scroll {
  background-color: #fff;
  border-color: #fff;
  padding: 15px 0;
}
.landing-page .navbar-default {
  background-color: transparent;
  border-color: transparent;
  transition: all 0.3s ease-in-out 0s;
}
.landing-page .navbar-default .nav li a {
  color: #fff;
  font-family: 'Open Sans', helvetica, arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
}
.landing-page .navbar-nav > li > a {
  padding-top: 25px;
  border-top: 6px solid transparent;
}
.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover {
  background: transparent;
  color: #fff;
  border-top: 6px solid #1ab394;
}
.landing-page .navbar-default .navbar-nav > li > a:hover,
.landing-page .navbar-default .navbar-nav > li > a:focus {
  color: #1ab394;
  background: inherit;
}
.landing-page .navbar-default .navbar-nav > .active > a:focus {
  background: transparent;
  color: #fff;
}
.landing-page .navbar-default .navbar-nav > .active > a:focus {
  background: transparent;
  color: #ffffff;
}
.landing-page .navbar-default.navbar-scroll .navbar-nav > .active > a:focus {
  background: transparent;
  color: inherit;
}
.landing-page .navbar-default .navbar-brand:hover,
.landing-page .navbar-default .navbar-brand:focus {
  background: #179d82;
  color: #fff;
}
.landing-page .navbar-default .navbar-brand {
  color: #fff;
  height: auto;
  display: block;
  font-size: 14px;
  background: #1ab394;
  padding: 15px 20px 15px 20px;
  border-radius: 0 0 5px 5px;
  font-weight: 700;
  transition: all 0.3s ease-in-out 0s;
}
.landing-page .navbar-scroll.navbar-default .nav li a {
  color: #676a6c;
}
.landing-page .navbar-scroll.navbar-default .nav li a:hover {
  color: #1ab394;
}
.landing-page .navbar-wrapper .navbar.navbar-scroll {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid #e7eaec;
  border-radius: 0;
}
.landing-page .nav > li.active {
  border: none;
  background: inherit;
}
.landing-page .navbar-scroll .navbar-nav > li > a {
  padding: 20px 10px;
}
.landing-page .navbar-default .navbar-nav > .active > a,
.landing-page .navbar-default .navbar-nav > .active > a:hover {
  border-top: 6px solid #1ab394;
}
.landing-page .navbar-fixed-top {
  border: none !important;
}
.landing-page .navbar-fixed-top.navbar-scroll {
  border-bottom: 1px solid #e7eaec !important;
}
.landing-page .navbar.navbar-scroll .navbar-brand {
  margin-top: 15px;
  border-radius: 5px;
  font-size: 12px;
  padding: 10px;
  height: auto;
}
.landing-page .header-back {
  height: 470px;
  width: 100%;
}
.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') 50% 0 no-repeat;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') 50% 0 no-repeat;
}
.landing-page .carousel {
  height: 470px;
}
.landing-page .carousel-caption {
  z-index: 10;
}
.landing-page .carousel .item {
  height: 470px;
  background-color: #777;
}
.landing-page .carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 470px;
}
.landing-page .carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.landing-page .carousel-fade .carousel-inner .active {
  opacity: 1;
}
.landing-page .carousel-fade .carousel-inner .active.left,
.landing-page .carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.landing-page .carousel-fade .carousel-inner .next.left,
.landing-page .carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.landing-page .carousel-fade .carousel-control {
  z-index: 2;
}
.landing-page .carousel-control.left,
.landing-page .carousel-control.right {
  background: none;
}
.landing-page .carousel-control {
  width: 6%;
}
.landing-page .carousel-inner .container {
  position: relative;
}
.landing-page .carousel-inner {
  overflow: visible;
}
.landing-page .carousel-caption {
  position: absolute;
  top: 100px;
  left: 0;
  bottom: auto;
  right: auto;
  text-align: left;
}
.landing-page .carousel-caption {
  position: absolute;
  top: 100px;
  left: 0;
  bottom: auto;
  right: auto;
  text-align: left;
}
.landing-page .carousel-caption.blank {
  top: 140px;
}
.landing-page .carousel-image {
  position: absolute;
  right: 10px;
  top: 150px;
}
.landing-page .carousel-indicators {
  padding-right: 60px;
}
.landing-page .carousel-caption h1 {
  font-weight: 700;
  font-size: 38px;
  text-transform: uppercase;
  text-shadow: none;
  letter-spacing: -1.5px;
}
.landing-page .carousel-caption p {
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: none;
}
.landing-page .caption-link {
  color: #fff;
  margin-left: 10px;
  text-transform: capitalize;
  font-weight: 400;
}
.landing-page .caption-link:hover {
  text-decoration: none;
  color: inherit;
}
.landing-page .services {
  padding-top: 60px;
}
.landing-page .services h2 {
  font-size: 20px;
  letter-spacing: -1px;
  font-weight: 600;
  text-transform: uppercase;
}
.landing-page .features-block {
  margin-top: 40px;
}
.landing-page .features-text {
  margin-top: 40px;
}
.landing-page .features small {
  color: #1ab394;
}
.landing-page .features h2 {
  font-size: 18px;
  margin-top: 5px;
}
.landing-page .features-text-alone {
  margin: 40px 0;
}
.landing-page .features-text-alone h1 {
  font-weight: 200;
}
.landing-page .features-icon {
  color: #1ab394;
  font-size: 40px;
}
.landing-page .navy-section {
  margin-top: 60px;
  background: #1ab394;
  color: #fff;
  padding: 20px 0;
}
.landing-page .gray-section {
  background: #f4f4f4;
  margin-top: 60px;
}
.landing-page .team-member {
  text-align: center;
}
.landing-page .team-member img {
  margin: auto;
}
.landing-page .social-icon a {
  background: #1ab394;
  color: #fff;
  padding: 4px 8px;
  height: 28px;
  width: 28px;
  display: block;
  border-radius: 50px;
}
.landing-page .social-icon a:hover {
  background: #179d82;
}
.landing-page .img-small {
  height: 88px;
  width: 88px;
}
.landing-page .pricing-plan {
  margin: 20px 30px 0 30px;
  border-radius: 4px;
}
.landing-page .pricing-plan.selected {
  transform: scale(1.1);
  background: #f4f4f4;
}
.landing-page .pricing-plan li {
  padding: 10px 16px;
  border-top: 1px solid #e7eaec;
  text-align: center;
  color: #aeaeae;
}
.landing-page .pricing-plan .pricing-price span {
  font-weight: 700;
  color: #1ab394;
}
.landing-page li.pricing-desc {
  font-size: 13px;
  border-top: none;
  padding: 20px 16px;
}
.landing-page li.pricing-title {
  background: #1ab394;
  color: #fff;
  padding: 10px;
  border-radius: 4px 4px 0 0;
  font-size: 22px;
  font-weight: 600;
}
.landing-page .testimonials {
  padding-top: 80px;
  padding-bottom: 90px;
  background-color: #1ab394;
  background-image: url('../img/landing/avatar_all.png');
}
.landing-page .big-icon {
  font-size: 56px !important;
}
.landing-page .features .big-icon {
  color: #1ab394 !important;
}
.landing-page .contact {
  background-image: url('../img/landing/word_map.png');
  background-position:50% 40%;
  background-repeat: no-repeat;
  margin-top: 0px; padding-top:25px; padding-bottom:30px; height:150px;
  
}
.landing-page section.timeline {
  padding-bottom: 30px;
}
.landing-page section.comments {
  padding-bottom: 80px;
}
.landing-page .comments-avatar {
  margin-top: 25px;
  margin-left: 22px;
}
.landing-page .comments-avatar .commens-name {
  font-weight: 600;
  font-size: 14px;
}
.landing-page .comments-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-right: 10px;
}
.landing-page .bubble {
  position: relative;
  height: 120px;
  padding: 20px;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-style: italic;
  font-size: 14px;
}
.landing-page .bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 14px 0;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
  z-index: 1;
  bottom: -15px;
  left: 30px;
}
.landing-page .btn-primary.btn-outline:hover,
.landing-page .btn-success.btn-outline:hover,
.landing-page .btn-info.btn-outline:hover,
.landing-page .btn-warning.btn-outline:hover,
.landing-page .btn-danger.btn-outline:hover {
  color: #fff;
}
.landing-page .btn-primary {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #FFFFFF;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 600;
}
.landing-page .btn-primary:hover,
.landing-page .btn-primary:focus,
.landing-page .btn-primary:active,
.landing-page .btn-primary.active,
.landing-page .open .dropdown-toggle.btn-primary {
  background-color: #179d82;
  border-color: #179d82;
  color: #FFFFFF;
}
.landing-page .btn-primary:active,
.landing-page .btn-primary.active,
.landing-page .open .dropdown-toggle.btn-primary {
  background-image: none;
}
.landing-page .btn-primary.disabled,
.landing-page .btn-primary.disabled:hover,
.landing-page .btn-primary.disabled:focus,
.landing-page .btn-primary.disabled:active,
.landing-page .btn-primary.disabled.active,
.landing-page .btn-primary[disabled],
.landing-page .btn-primary[disabled]:hover,
.landing-page .btn-primary[disabled]:focus,
.landing-page .btn-primary[disabled]:active,
.landing-page .btn-primary.active[disabled],
.landing-page fieldset[disabled] .btn-primary,
.landing-page fieldset[disabled] .btn-primary:hover,
.landing-page fieldset[disabled] .btn-primary:focus,
.landing-page fieldset[disabled] .btn-primary:active,
.landing-page fieldset[disabled] .btn-primary.active {
  background-color: #1dc5a3;
  border-color: #1dc5a3;
}
@media (min-width: 768px) {
  .landing-page {
    /* Navbar positioning foo */
    /* The navbar becomes detached from the top, so we round the corners */
    /* Bump up size of carousel content */
  }
  .landing-page .navbar-wrapper {
    margin-top: 20px;
  }
  .landing-page .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .landing-page .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }
  .landing-page .navbar-wrapper .navbar {
    border-radius: 4px;
  }
  .landing-page .carousel-caption p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.4;
  }
  .landing-page .featurette-heading {
    font-size: 50px;
  }
}
@media (max-width: 992px) {
  .landing-page .carousel-image {
    display: none;
  }
}
@media (max-width: 768px) {
  .landing-page .carousel-caption,
  .landing-page .carousel-caption.blank {
    left: 5%;
    top: 80px;
  }
  .landing-page .carousel-caption h1 {
    font-size: 28px;
  }
  .landing-page .navbar.navbar-scroll .navbar-brand {
    margin-top: 6px;
  }
  .landing-page .navbar-default {
    background-color: #fff;
    border-color: #fff;
    padding: 15px 0;
  }
  .landing-page .navbar-default .navbar-nav > .active > a:focus {
    background: transparent;
    color: inherit;
  }
  .landing-page .navbar-default .nav li a {
    color: #676a6c;
  }
  .landing-page .navbar-default .nav li a:hover {
    color: #1ab394;
  }
  .landing-page .navbar-wrapper .navbar {
    padding-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e7eaec;
    border-radius: 0;
  }
  .landing-page .nav > li > a {
    padding: 25px 10px 15px 10px;
  }
  .landing-page .navbar-nav > li > a {
    padding: 20px 10px;
  }
  .landing-page .navbar .navbar-brand {
    margin-top: 6px;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px;
    height: auto;
  }
  .landing-page .navbar-wrapper .navbar {
    padding-left: 15px;
    padding-right: 5px;
  }
  .landing-page .navbar-default .navbar-nav > .active > a,
  .landing-page .navbar-default .navbar-nav > .active > a:hover {
    color: inherit;
  }
  .landing-page .carousel-control {
    display: none;
  }
}
@media (min-width: 992px) {
  .landing-page .featurette-heading {
    margin-top: 120px;
  }
}
@media (max-width: 768px) {
  .landing-page .navbar .navbar-header {
    display: block;
    float: none;
  }
  .landing-page .navbar .navbar-header .navbar-toggle {
    background-color: #ffffff;
    padding: 9px 10px;
    border: none;
  }
}
body.rtls {
  /* Theme config */
}
body.rtls #page-wrapper {
  margin: 0 220px 0 0;
}
body.rtls .nav-second-level li a {
  padding: 7px 35px 7px 10px;
}
body.rtls .ibox-title h5 {
  float: right;
}
body.rtls .pull-right {
  float: left !important;
}
body.rtls .pull-left {
  float: right !important;
}
body.rtls .ibox-tools {
  float: left;
}
body.rtls .stat-percent {
  float: left;
}
body.rtls .navbar-right {
  float: left !important;
}
body.rtls .navbar-top-links li:last-child {
  margin-left: 40px;
  margin-right: 0;
}
body.rtls .minimalize-styl-2 {
  float: right;
  margin: 14px 20px 5px 5px;
}
body.rtls .feed-element > .pull-left {
  margin-left: 10px;
  margin-right: 0;
}
body.rtls .timeline-item .date {
  text-align: left;
}
body.rtls .timeline-item .date i {
  left: 0;
  right: auto;
}
body.rtls .timeline-item .content {
  border-right: 1px solid #e7eaec;
  border-left: none;
}
body.rtls .theme-config {
  left: 0;
  right: auto;
}
body.rtls .spin-icon {
  border-radius: 0 20px 20px 0;
}
body.rtls .toast-close-button {
  float: left;
}
body.rtls #toast-container > .toast:before {
  margin: auto -1.5em auto 0.5em;
}
body.rtls #toast-container > div {
  padding: 15px 50px 15px 15px;
}
body.rtls .center-orientation .vertical-timeline-icon i {
  margin-left: 0;
  margin-right: -12px;
}
body.rtls .vertical-timeline-icon i {
  right: 50%;
  left: auto;
  margin-left: auto;
  margin-right: -12px;
}
body.rtls .file-box {
  float: right;
}
body.rtls ul.notes li {
  float: right;
}
body.rtls .chat-users,
body.rtls .chat-statistic {
  margin-right: -30px;
  margin-left: auto;
}
body.rtls .dropdown-menu > li > a {
  text-align: right;
}
body.rtls .b-r {
  border-left: 1px solid #e7eaec;
  border-right: none;
}
body.rtls .dd-list .dd-list {
  padding-right: 30px;
  padding-left: 0;
}
body.rtls .dd-item > button {
  float: right;
}
body.rtls .theme-config-box {
  margin-left: -220px;
  margin-right: 0;
}
body.rtls .theme-config-box.show {
  margin-left: 0;
  margin-right: 0;
}
body.rtls .spin-icon {
  right: 0;
  left: auto;
}
body.rtls .skin-setttings {
  margin-right: 40px;
  margin-left: 0;
}
body.rtls .skin-setttings {
  direction: ltr;
}
body.rtls .footer.fixed {
  margin-right: 220px;
  margin-left: 0;
}
@media (max-width: 992px) {
  body.rtls .chat-users,
  body.rtls .chat-statistic {
    margin-right: 0;
  }
}
body.rtls.mini-navbar .footer.fixed,
body.body-small.mini-navbar .footer.fixed {
  margin: 0 70px 0 0;
}
body.rtls.mini-navbar.fixed-sidebar .footer.fixed,
body.body-small.mini-navbar .footer.fixed {
  margin: 0 0 0 0;
}
body.rtls.top-navigation .navbar-toggle {
  float: right;
  margin-left: 15px;
  margin-right: 15px;
}
.body-small.rtls.top-navigation .navbar-header {
  float: none;
}
body.rtls.top-navigation #page-wrapper {
  margin: 0;
}
body.rtls.mini-navbar #page-wrapper {
  margin: 0 70px 0 0;
}
body.rtls.mini-navbar.fixed-sidebar #page-wrapper {
  margin: 0 0 0 0;
}
body.rtls.body-small.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 220px 0 0;
}
body.rtls.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 220px;
}
.body-small.rtls .navbar-fixed-top {
  margin-right: 0;
}
.body-small.rtls .navbar-header {
  float: right;
}
body.rtls .navbar-top-links li:last-child {
  margin-left: 20px;
}
body.rtls .top-navigation #page-wrapper,
body.rtls.mini-navbar .top-navigation #page-wrapper,
body.rtls.mini-navbar.top-navigation #page-wrapper {
  margin: 0;
}
body.rtls .top-navigation .footer.fixed,
body.rtls.top-navigation .footer.fixed {
  margin: 0;
}
@media (max-width: 768px) {
  body.rtls .navbar-top-links li:last-child {
    margin-left: 20px;
  }
  .body-small.rtls #page-wrapper {
    position: inherit;
    margin: 0 0 0 0;
    min-height: 1000px;
  }
  .body-small.rtls .navbar-static-side {
    display: none;
    z-index: 2001;
    position: absolute;
    width: 70px;
  }
  .body-small.rtls.mini-navbar .navbar-static-side {
    display: block;
  }
  .rtls.fixed-sidebar.body-small .navbar-static-side {
    display: none;
    z-index: 2001;
    position: fixed;
    width: 220px;
  }
  .rtls.fixed-sidebar.body-small.mini-navbar .navbar-static-side {
    display: block;
  }
}
.rtls .ltr-support {
  direction: ltr;
}
.rtls.mini-navbar .nav-second-level,
.rtls.mini-navbar li.active .nav-second-level {
  left: auto;
  right: 70px;
}
.rtls #right-sidebar {
  left: -260px;
  right: auto;
}
.rtls #right-sidebar.sidebar-open {
  left: 0;
}
/*
 *
 *   This is style for skin config
 *   Use only in demo theme
 *
*/
.theme-config {
  position: absolute;
  top: 90px;
  right: 0;
  overflow: hidden;
}
.theme-config-box {
  margin-right: -220px;
  position: relative;
  z-index: 2000;
  transition-duration: 0.8s;
}
.theme-config-box.show {
  margin-right: 0;
}
.spin-icon {
  background: #1ab394;
  position: absolute;
  padding: 7px 10px 7px 13px;
  border-radius: 20px 0 0 20px;
  font-size: 16px;
  top: 0;
  left: 0;
  width: 40px;
  color: #fff;
  cursor: pointer;
}
.skin-setttings {
  width: 220px;
  margin-left: 40px;
  background: #f3f3f4;
}
.skin-setttings .title {
  background: #efefef;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  padding: 10px 15px;
  font-size: 12px;
}
.setings-item {
  padding: 10px 30px;
}
.setings-item.skin {
  text-align: center;
}
.setings-item .switch {
  float: right;
}
.skin-name a {
  text-transform: uppercase;
}
.setings-item a {
  color: #fff;
}
.default-skin,
.blue-skin,
.ultra-skin,
.yellow-skin {
  text-align: center;
}
.default-skin {
  font-weight: 600;
  background: #283A49;
}
.default-skin:hover {
  background: #1e2e3d;
}
.blue-skin {
  font-weight: 600;
  background: url("patterns/header-profile-skin-1.png") repeat scroll 0 0;
}
.blue-skin:hover {
  background: #0d8ddb;
}
.yellow-skin {
  font-weight: 600;
  background: url("patterns/header-profile-skin-3.png") repeat scroll 0 100%;
}
.yellow-skin:hover {
  background: #ce8735;
}
.ultra-skin {
  padding: 20px 10px;
  font-weight: 600;
  background: url("patterns/3.png") repeat scroll 0 0;
}
.ultra-skin:hover {
  background: url("patterns/4.png") repeat scroll 0 0;
}
/*
 *
 *   SKIN 1 - INSPINIA - Responsive Admin Theme
 *   NAME - Blue light
 *
*/
.skin-1 .minimalize-styl-2 {
  margin: 14px 5px 5px 30px;
}
.skin-1 .navbar-top-links li:last-child {
  margin-right: 30px;
}
.skin-1.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.skin-1 .spin-icon {
  background: #0e9aef !important;
}
.skin-1 .nav-header {
  background: #0e9aef;
  background: url('patterns/header-profile-skin-1.png');
}
.skin-1.mini-navbar .nav-second-level {
  background: #3e495f;
}
.skin-1 .breadcrumb {
  background: transparent;
}
.skin-1 .page-heading {
  border: none;
}
.skin-1 .nav > li.active {
  background: #3a4459;
}
.skin-1 .nav > li > a {
  color: #9ea6b9;
}
.skin-1 .nav > li.active > a {
  color: #fff;
}
.skin-1 .navbar-minimalize {
  background: #0e9aef;
  border-color: #0e9aef;
}
body.skin-1 {
  background: #3e495f;
}
.skin-1 .navbar-static-top {
  background: #ffffff;
}
.skin-1 .dashboard-header {
  background: transparent;
  border-bottom: none !important;
  border-top: none;
  padding: 20px 30px 10px 30px;
}
.fixed-nav.skin-1 .navbar-fixed-top {
  background: #fff;
}
.skin-1 .wrapper-content {
  padding: 30px 15px;
}
.skin-1 #page-wrapper {
  background: #f4f6fa;
}
.skin-1 .ibox-title,
.skin-1 .ibox-content {
  border-width: 1px;
}
.skin-1 .ibox-content:last-child {
  border-style: solid solid solid solid;
}
.skin-1 .nav > li.active {
  border: none;
}
.skin-1 .nav-header {
  padding: 35px 25px 25px 25px;
}
.skin-1 .nav-header a.dropdown-toggle {
  color: #fff;
  margin-top: 10px;
}
.skin-1 .nav-header a.dropdown-toggle .text-muted {
  color: #fff;
  opacity: 0.8;
}
.skin-1 .profile-element {
  text-align: center;
}
.skin-1 .img-circle {
  border-radius: 5px;
}
.skin-1 .navbar-default .nav > li > a:hover,
.skin-1 .navbar-default .nav > li > a:focus {
  background: #3a4459;
  color: #fff;
}
.skin-1 .nav.nav-tabs > li.active > a {
  color: #555;
}
.skin-1 .nav.nav-tabs > li.active {
  background: transparent;
}
/*
 *
 *   SKIN 2 - INSPINIA - Responsive Admin Theme
 *   NAME - Inspinia Ultra
 *
*/
body.skin-2 {
  color: #565758 !important;
}
.skin-2 .minimalize-styl-2 {
  margin: 14px 5px 5px 25px;
}
.skin-2 .navbar-top-links li:last-child {
  margin-right: 25px;
}
.skin-2 .spin-icon {
  background: #23c6c8 !important;
}
.skin-2 .nav-header {
  background: #23c6c8;
  background: url('patterns/header-profile-skin-2.png');
}
.skin-2.mini-navbar .nav-second-level {
  background: #ededed;
}
.skin-2 .breadcrumb {
  background: transparent;
}
.skin-2.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.skin-2 .page-heading {
  border: none;
  background: rgba(255, 255, 255, 0.7);
}
.skin-2 .nav > li.active {
  background: #e0e0e0;
}
.skin-2 .logo-element {
  padding: 17px 0;
}
.skin-2 .nav > li > a,
.skin-2 .welcome-message {
  color: #edf6ff;
}
.skin-2 #top-search::-moz-placeholder {
  color: #edf6ff;
  opacity: 0.5;
}
.skin-2 #side-menu > li > a,
.skin-2 .nav.nav-second-level > li > a {
  color: #586b7d;
}
.skin-2 .nav > li.active > a {
  color: #213a53;
}
.skin-2.mini-navbar .nav-header {
  background: #213a53;
}
.skin-2 .navbar-minimalize {
  background: #23c6c8;
  border-color: #23c6c8;
}
.skin-2 .border-bottom {
  border-bottom: none !important;
}
.skin-2 #top-search {
  color: #fff;
}
body.skin-2 #wrapper {
  background-color: #ededed;
}
.skin-2 .navbar-static-top {
  background: #213a53;
}
.fixed-nav.skin-2 .navbar-fixed-top {
  background: #213a53;
  border-bottom: none !important;
}
.skin-2 .nav-header {
  padding: 30px 25px 30px 25px;
}
.skin-2 .dashboard-header {
  background: rgba(255, 255, 255, 0.4);
  border-bottom: none !important;
  border-top: none;
  padding: 20px 30px 20px 30px;
}
.skin-2 .wrapper-content {
  padding: 30px 15px;
}
.skin-2 .dashoard-1 .wrapper-content {
  padding: 0 30px 25px 30px;
}
.skin-2 .ibox-title {
  background: rgba(255, 255, 255, 0.7);
  border: none;
  margin-bottom: 1px;
}
.skin-2 .ibox-content {
  background: rgba(255, 255, 255, 0.4);
  border: none !important;
}
.skin-2 #page-wrapper {
  background: #f6f6f6;
  background: -webkit-radial-gradient(center, ellipse cover, #f6f6f6 20%, #d5d5d5 100%);
  background: -o-radial-gradient(center, ellipse cover, #f6f6f6 20%, #d5d5d5 100%);
  background: -ms-radial-gradient(center, ellipse cover, #f6f6f6 20%, #d5d5d5 100%);
  background: radial-gradient(ellipse at center, #f6f6f6 20%, #d5d5d5 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6, endColorstr=#d5d5d5)";
}
.skin-2 .ibox-title,
.skin-2 .ibox-content {
  border-width: 1px;
}
.skin-2 .ibox-content:last-child {
  border-style: solid solid solid solid;
}
.skin-2 .nav > li.active {
  border: none;
}
.skin-2 .nav-header a.dropdown-toggle {
  color: #edf6ff;
  margin-top: 10px;
}
.skin-2 .nav-header a.dropdown-toggle .text-muted {
  color: #edf6ff;
  opacity: 0.8;
}
.skin-2 .img-circle {
  border-radius: 10px;
}
.skin-2 .nav.navbar-top-links > li > a:hover,
.skin-2 .nav.navbar-top-links > li > a:focus {
  background: #1a2d41;
}
.skin-2 .navbar-default .nav > li > a:hover,
.skin-2 .navbar-default .nav > li > a:focus {
  background: #e0e0e0;
  color: #213a53;
}
.skin-2 .nav.nav-tabs > li.active > a {
  color: #555;
}
.skin-2 .nav.nav-tabs > li.active {
  background: transparent;
}
/*
 *
 *   SKIN 3 - INSPINIA - Responsive Admin Theme
 *   NAME - Yellow/purple
 *
*/
.skin-3 .minimalize-styl-2 {
  margin: 14px 5px 5px 30px;
}
.skin-3 .navbar-top-links li:last-child {
  margin-right: 30px;
}
.skin-3.fixed-nav .minimalize-styl-2 {
  margin: 14px 5px 5px 15px;
}
.skin-3 .spin-icon {
  background: #ecba52 !important;
}
body.boxed-layout.skin-3 #wrapper {
  background: #3e2c42;
}
.skin-3 .nav-header {
  background: #ecba52;
  background: url('patterns/header-profile-skin-3.png');
}
.skin-3.mini-navbar .nav-second-level {
  background: #3e2c42;
}
.skin-3 .breadcrumb {
  background: transparent;
}
.skin-3 .page-heading {
  border: none;
}
.skin-3 .nav > li.active {
  background: #38283c;
}
.fixed-nav.skin-3 .navbar-fixed-top {
  background: #fff;
}
.skin-3 .nav > li > a {
  color: #948b96;
}
.skin-3 .nav > li.active > a {
  color: #fff;
}
.skin-3 .navbar-minimalize {
  background: #ecba52;
  border-color: #ecba52;
}
body.skin-3 {
  background: #3e2c42;
}
.skin-3 .navbar-static-top {
  background: #ffffff;
}
.skin-3 .dashboard-header {
  background: transparent;
  border-bottom: none !important;
  border-top: none;
  padding: 20px 30px 10px 30px;
}
.skin-3 .wrapper-content {
  padding: 30px 15px;
}
.skin-3 #page-wrapper {
  background: #f4f6fa;
}
.skin-3 .ibox-title,
.skin-3 .ibox-content {
  border-width: 1px;
}
.skin-3 .ibox-content:last-child {
  border-style: solid solid solid solid;
}
.skin-3 .nav > li.active {
  border: none;
}
.skin-3 .nav-header {
  padding: 35px 25px 25px 25px;
}
.skin-3 .nav-header a.dropdown-toggle {
  color: #fff;
  margin-top: 10px;
}
.skin-3 .nav-header a.dropdown-toggle .text-muted {
  color: #fff;
  opacity: 0.8;
}
.skin-3 .profile-element {
  text-align: center;
}
.skin-3 .img-circle {
  border-radius: 5px;
}
.skin-3 .navbar-default .nav > li > a:hover,
.skin-3 .navbar-default .nav > li > a:focus {
  background: #38283c;
  color: #fff;
}
.skin-3 .nav.nav-tabs > li.active > a {
  color: #555;
}
.skin-3 .nav.nav-tabs > li.active {
  background: transparent;
}
body.md-skin {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #ffffff;
}
.md-skin .nav-header {
  background: url("patterns/4.png") no-repeat;
}
.md-skin .label,
.md-skin .badge {
  font-family: 'Roboto';
}
.md-skin .font-bold {
  font-weight: 500;
}
.md-skin .wrapper-content {
  padding: 30px 20px 40px;
}
@media (max-width: 768px) {
  .md-skin .wrapper-content {
    padding: 30px 0 40px;
  }
}
.md-skin .page-heading {
  border-bottom: none !important;
  border-top: 0;
  padding: 0 10px 20px 10px;
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.34), 0 0 6px 0 rgba(0, 0, 0, 0.14);
}
.md-skin .full-height-layout .page-heading {
  border-bottom: 1px solid #e7eaec !important;
}
.md-skin .ibox {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .ibox.border-bottom {
  border-bottom: none !important;
}
.md-skin .ibox-title,
.md-skin .ibox-content {
  border-style: none;
}
.md-skin .ibox-title h5 {
  font-size: 16px;
  font-weight: 400;
}
.md-skin a.close-canvas-menu {
  color: #ffffff;
}
.md-skin .welcome-message {
  color: #ffffff;
  font-weight: 300;
}
.md-skin #top-search::-moz-placeholder {
  color: #ffffff;
}
.md-skin #top-search::-webkit-input-placeholder {
  color: #ffffff;
}
.md-skin #nestable-output,
.md-skin #nestable2-output {
  font-family: 'Roboto', lucida grande, lucida sans unicode, helvetica, arial, sans-serif;
}
.md-skin .landing-page {
  font-family: 'Roboto', helvetica, arial, sans-serif;
}
.md-skin .landing-page.navbar-default.navbar-scroll {
  background-color: #fff !important;
}
.md-skin .landing-page.navbar-default {
  background-color: transparent !important;
  box-shadow: none;
}
.md-skin .landing-page.navbar-default .nav li a {
  font-family: 'Roboto', helvetica, arial, sans-serif;
}
.md-skin .nav > li > a {
  color: #676a6c;
  padding: 14px 20px 14px 25px;
}
.md-skin .nav.navbar-right > li > a {
  color: #ffffff;
}
.md-skin .nav > li.active > a {
  color: #5b5d5f;
  font-weight: 700;
}
.md-skin .navbar-default .nav > li > a:hover,
.md-skin .navbar-default .nav > li > a:focus {
  font-weight: 700;
  color: #5b5d5f;
}
.md-skin .nav .open > a,
.md-skin .nav .open > a:hover,
.md-skin .nav .open > a:focus {
  background: #1ab394;
}
.md-skin .navbar-top-links li {
  display: inline-table;
}
.md-skin .navbar-top-links .dropdown-menu li {
  display: block;
}
.md-skin .pace-done .nav-header {
  transition: all 0.4s;
}
.md-skin .nav > li.active {
  background: #f8f8f9;
}
.md-skin .nav-second-level li a {
  padding: 7px 10px 7px 52px;
}
.md-skin .navbar-top-links li a {
  padding: 20px 10px;
  min-height: 50px;
}
.md-skin .nav > li > a {
  font-weight: 400;
}
.md-skin .navbar-static-side .nav > li > a:focus,
.md-skin .navbar-static-side .nav > li > a:hover {
  background-color: inherit;
}
.md-skin .navbar-top-links .dropdown-menu li a {
  padding: 3px 20px;
  min-height: inherit;
}
.md-skin .nav-header .navbar-fixed-top a {
  color: #ffffff;
}
.md-skin .nav-header .text-muted {
  color: #ffffff;
}
.md-skin .navbar-form-custom .form-control {
  font-weight: 300;
}
.md-skin .mini-navbar .nav-second-level {
  background-color: inherit;
}
.md-skin .mini-navbar li.active .nav-second-level {
  left: 65px;
}
.md-skin .canvas-menu.mini-navbar .nav-second-level {
  background: inherit;
}
.md-skin .pace-done .navbar-static-side,
.md-skin .pace-done .nav-header,
.md-skin .pace-done li.active,
.md-skin .pace-done #page-wrapper,
.md-skin .pace-done .footer {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.md-skin .navbar-fixed-top {
  background: #fff;
  transition-duration: 0.4s;
  z-index: 2030;
  border-bottom: none !important;
}
.md-skin .navbar-fixed-top,
.md-skin .navbar-static-top {
  background-color: #1ab394 !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .navbar-static-side {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin #right-sidebar {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border: none;
  z-index: 900;
}
.md-skin .white-bg .navbar-fixed-top,
.md-skin .white-bg .navbar-static-top {
  background: #fff !important;
}
.md-skin .contact-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border: none;
}
.md-skin .dashboard-header {
  border-bottom: none !important;
  border-top: 0;
  padding: 20px 20px 20px 20px;
  margin: 30px 20px 0 20px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
  .md-skin .dashboard-header {
    margin: 20px 0 0 0;
  }
}
.md-skin ul.notes li div {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .file {
  border: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin .mail-box {
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 0;
  margin-bottom: 20px;
  border: none;
}
.md-skin .mail-box-header {
  border: none;
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 30px 20px 20px 20px;
}
.md-skin .mailbox-content {
  border: none;
  padding: 20px;
  background: #ffffff;
}
.md-skin .social-feed-box {
  border: none;
  background: #fff;
  margin-bottom: 15px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin.landing-page .navbar-default {
  background-color: transparent !important;
  border-color: transparent;
  transition: all 0.3s ease-in-out 0s;
  box-shadow: none;
}
.md-skin.landing-page .navbar-default.navbar-scroll,
.md-skin.landing-page.body-small .navbar-default {
  background-color: #ffffff !important;
}
.md-skin.landing-page .nav > li.active {
  background: inherit;
}
.md-skin.landing-page .navbar-scroll .navbar-nav > li > a {
  padding: 20px 10px;
}
.md-skin.landing-page .navbar-default .nav li a {
  font-family: 'Roboto', helvetica, arial, sans-serif;
}
.md-skin.landing-page .nav > li > a {
  padding: 25px 10px 15px 10px;
}
.md-skin.landing-page .navbar-default .navbar-nav > li > a:hover,
.md-skin.landing-page .navbar-default .navbar-nav > li > a:focus {
  background: inherit;
  color: #1ab394;
}
.md-skin.landing-page.body-small .nav.navbar-right > li > a {
  color: #676a6c;
}
.md-skin .landing_link a,
.md-skin .special_link a {
  color: #ffffff !important;
}
.md-skin.canvas-menu.mini-navbar .nav-second-level {
  background: #f8f8f9;
}
.md-skin.mini-navbar .nav-second-level {
  background-color: #ffffff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.md-skin.mini-navbar .nav-second-level li a {
  padding-left: 0;
}
.md-skin.mini-navbar.fixed-sidebar .nav-second-level li a {
  padding-left: 52px;
}
.md-skin.top-navigation .nav.navbar-right > li > a {
  padding: 15px 20px;
  color: #676a6c;
}
.md-skin.top-navigation .nav > li a:hover,
.md-skin .top-navigation .nav > li a:focus,
.md-skin.top-navigation .nav .open > a,
.md-skin.top-navigation .nav .open > a:hover,
.md-skin.top-navigation .nav .open > a:focus {
  color: #1ab394;
  background: #ffffff;
}
.md-skin.top-navigation .nav > li.active a {
  color: #1ab394;
  background: #ffffff;
}
.md-skin.fixed-nav #wrapper.top-navigation #page-wrapper {
  margin-top: 0;
}
.md-skin.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 0;
}
.md-skin.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 0;
}
.md-skin.body-small.fixed-sidebar.mini-navbar #page-wrapper {
  margin: 0 0 0 0;
}
.md-skin.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
  width: 220px;
  background-color: #ffffff;
}
.md-skin.canvas-menu nav.navbar-static-side {
  z-index: 2001;
  background: #ffffff;
  height: 100%;
  position: fixed;
  display: none;
}
@media (min-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 220px;
    min-height: 1200px;
  }
  .navbar-static-side {
    z-index: 2001;
    position: absolute;
    width: 220px;
  }
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}
@media (max-width: 768px) {
  #page-wrapper {
    position: inherit;
    margin: 0 0 0 0;
    min-height: 1000px;
  }
  .body-small .navbar-static-side {
    display: none;
    z-index: 2001;
    position: absolute;
    width: 70px;
  }
  .body-small.mini-navbar .navbar-static-side {
    display: block;
  }
  .lock-word {
    display: none;
  }
  .navbar-form-custom {
    display: none;
  }
  .navbar-header {
    display: inline;
    float: left;
  }
  .sidebard-panel {
    z-index: 2;
    position: relative;
    width: auto;
    min-height: 100% !important;
  }
  .sidebar-content .wrapper {
    padding-right: 0;
    z-index: 1;
  }
  .fixed-sidebar.body-small .navbar-static-side {
    display: none;
    z-index: 2001;
    position: fixed;
    width: 220px;
  }
  .fixed-sidebar.body-small.mini-navbar .navbar-static-side {
    display: block;
  }
  .ibox-tools {
    float: none;
    text-align: right;
    display: block;
  }
}
@media (max-width: 350px) {
  .timeline-item .date {
    text-align: left;
    width: 110px;
    position: relative;
    padding-top: 30px;
  }
  .timeline-item .date i {
    position: absolute;
    top: 0;
    left: 15px;
    padding: 5px;
    width: 30px;
    text-align: center;
    border: 1px solid #e7eaec;
    background: #f8f8f8;
  }
  .timeline-item .content {
    border-left: none;
    border-top: 1px solid #e7eaec;
    padding-top: 10px;
    min-height: 100px;
  }
  .nav.navbar-top-links li.dropdown {
    display: none;
  }
  .ibox-tools {
    float: none;
    text-align: left;
    display: inline-block;
  }
}
/* Only demo */
@media (max-width: 1000px) {
  .welcome-message {
    display: none;
  }
}
@media print {
  nav.navbar-static-side {
    display: none;
  }
  #page-wrapper {
    margin: 0;
  }
}


/**** css added by Abhishek ******/
.paddingLftRgtZero{padding-left:0; padding-right:0;}
.text-white{color:#fff;}
a.MainLabel {
    color: #fff !important;
    font-family: 'Bradley Hand ITC';
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;  margin-left:30px;
}
.MainLabel:hover{color: white;}

/****main page**/
.info-box {
    display: block;
    min-height: 90px;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 2px;
    margin-bottom: 15px;
}
.info-box-content {
    padding: 5px 10px;
    margin-left: 90px;
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
    background-color: #00c0ef !important;
}
.info-box-number {
    display: block;
    font-weight: bold;
    font-size: 18px;
}

.info-box-icon {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(0,0,0,0.2); color:#fff;
}
.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body {
    background-color: #dd4b39 !important;
}
.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
    background-color: #00a65a !important;
}
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
    background-color: #f39c12 !important;
}
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
    background-color: #f39c12 !important;
}
.small-box > .inner {
    padding: 10px;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}
.small-box > .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255,255,255,0.8);
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}
.info-box .progress, .info-box .progress .progress-bar {
    border-radius: 0;
}
    .info-box .progress .progress-bar {
        background: #fff;
    }
.info-box .progress {
    background: rgba(0,0,0,0.2);
    margin: 5px -10px 5px -10px;
    height: 2px;
}
.info-box-text {
    text-transform: uppercase;
}

 .progress-description, .info-box-text {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.small-box h3, .small-box p {
    z-index: 5;
}
.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0; color:#fff;
}
.paddingRgtZero { padding-right: 0;}
.paddingLftZero {
    padding-left: 0;
}
.navbar-form.paddingbotZero {
    margin-bottom: 0 !important;
}
marquee.top10 {
    padding-top: 8px;
}
.text-white {
    color: #fff;
}
.adbottom728 { margin-top:10px; }
.admid728 {
    margin-top: 0px;
    margin-bottom: 20px;
}
.borderRadiusZero{border-radius:0;}
.astroMinHeight { height:312px; overflow:auto;
}
.innerBreadCrum h2{margin-top:0 !important;}
.commentBg {
    background: #DDDDE2;
    padding: 10px;
}
.marginBottom30{margin-bottom:30px;}
img.bottomTwoImg{width:49.5%; display:inline-block; margin-left:0; margin-right:0;}
.close {
    opacity: .9 !important;
    font-size: 25px !important;
}
.customPopUp .social-feed-box {
    margin-bottom: 0px !important;
}
.customPopUp .modal-content{padding:5px;}

/***** custom css Added by Abhishek ******/

/**** Registration page css starts */

.MainLabel {
    color: white;
    font-family: 'Bradley Hand ITC';
    font-weight: bold;
    font-size: x-large;
    cursor: pointer;
}
.logo.MainLabel {line-height:50px; font-size:18px; 
}
.countryFlag { position:absolute; top:20px; left:220px;
}
.adminIcon {
    width: 30px;
    height: 30px;
    margin-top: 14px;
}
.marginTop20 {margin-top:20px;}
.marginTop10 {
    margin-top: 10px;
}

.marginTop56 {margin-top: 40px !important;}

.marginTop50 {
    margin-top: 50px !important;
}

.marginTop60 {
    margin-top: 60px !important;
}

.marginBot20 {margin-bottom: 20px;}

marquee ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    marquee ul li {
        float: left;
        display: inline-block;
        margin-right: 4px;
        text-align: center;
        background: #fff;
        padding: 2px;
    }

.customNav {
    background: #ccc;
    border-bottom: 1px solid #fff;
    border-radius: 0px;
}
.registerPageImg {
    width: 150px;
    height: 150px;
}

.navbar-default .navbar-nav > li > a {color:#000 !important;}
.colorgraph {
    height: 5px;
    border-top: 0;
    background: #c4e17f;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
.wrapper-content.viewSociety {padding-top:5px;}
@media (min-width: 992px) {
    .customPopUp .modal-lg {
        width: 90%;
    }
}
.ibox-content.viewtopSec {
    border: 3px solid #d3d6d8;
    border-bottom: none;
}
.viewtopSec .m-b-lg {
    margin-bottom: 10px;
}

.viewtopSec .m-t-lg {
    margin-top: 10px;
}
.form-control.input-sm {margin-top:5px;
}
a.remove_field {
    position: relative;
    float: right;
    margin-top: -30px;
    font-size: 20px;
    right: 5px;
}
a.remove_field1 {
    position: relative;
    float: right;
    margin-top: -30px;
    font-size: 20px;
    right: 5px;
}

.clickView { position:absolute; top:0; width:100%; height:100%; 
}
.pinBg {
    background-color: rgba(0, 0, 0, .1)
}
.ddBg{background:#ddd; padding:5px;}

.contactsBg .contact-box.center-version > a {
    background-color: #e7eaec !important;
}
.contactsBg .contact-box.center-version {
    border: 1px solid #9e9eb0;
    padding: 0;
    background: #e7eaec !important;
}

.contactsBg .contact-box .contact-box-footer {
    text-align: center;
    background-color: #ddd;
    border-top: 1px solid #9e9eb0;
    padding: 15px 20px;
}

.breadcrumb .pagination {margin:0 !important;}

.feed-element, .media-body.detailMouseOver {
    overflow: visible !important;
}
.dropCont {  left:47px;}
.imgThumbnail{position:relative; margin-top:-50px; z-index:9999; left:10px; text-align:center; }
.coverImage{height:150px; width:100%;}
.newThumbnail{width:90px; height:90px;}

.boxoutHeading a{font-size: 26px;
color: #000;
text-align: center;
display: block;
font-weight: 200;
}
a.linkText{font-size:20px; color:#676a6c;}
a.linkText2 {
    font-size: 14px;
    color: #676a6c; font-weight:600; 
}
a :hover{text-decoration:underline;}
#myCarousel2 .carousel-caption {
    background: rgba(0, 0,0,.5);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#myCarousel2 .carousel-indicators{bottom:-10px;}
.nationalNews .ibox-content{padding:0 !important;}
#myCarousel2{margin-top:-10px;}


#myCarousel1 .carousel-caption {
    background: rgba(0, 0,0,.5);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#myCarousel1 .carousel-indicators {
    bottom: -10px;
}

.nationalNews .ibox-content {
    padding: 0 !important;
}

#myCarousel1 {
    margin-top: -10px;
}


table#ctl00_ContentPlaceHolder1_GrdComment{width:100%;}
table#ctl00_ContentPlaceHolder1_GrdComment tr::alternate { background:#fff;
}
.commentBg {
    background: #f9f9f9;
}
.marginTopZeroh2 h2{margin-top:0;}
.customPopUp {background:#fff; padding:30px; border:2px solid #ddd;}
.modalBackground{background:rgba(0,0,0,.5)}
.marginTopten { margin-top:10px;}
.marginBotten {margin-top: 10px;}
.marginRgt15 {
    margin-right: 15px;
}
.thumbsupHover {
    border: 1px solid #ddd;
    padding: 3px 10px;
    display: none;
    border-radius: 25px;
    position: absolute;
    top: -33px;
    width: 155px;
    left: -121px;
    font-size: 20px;
    background: #fff;
}

    .thumbsupHover a {
        margin-left: 2px;
        margin-right: 2px;
    }

a.thumbsUp {
    padding: 5px;
}

    a.thumbsUp:hover + div.thumbsupHover {
        display: block;
    }


.thumbsDownHover {
    border: 1px solid #ddd;
    padding: 3px 10px;
    display: none;
    border-radius: 25px;
    position: absolute;
    top: -33px;
    width: 198px;
    left: -121px;
    font-size: 20px;
    background: #fff;
}

    .thumbsDownHover a {
        margin-left: 2px;
        margin-right: 2px;
    }

a.thumbsDown {
    padding: 5px;
}

a.comment {
    padding: 5px;
}

a.thumbsDown:hover + div.thumbsDownHover {
    display: block;
}
.height15{height:15px;}
.profileImg{width:100px; height:100px;}
.grayBGcc{background:#ccc;}

ul.btnJustify {margin:0; padding:0;}
ul.btnJustify li.btn { width:19.7%;}
ul.btnJustify li.btn.btn-default{border:1px solid #fff;}
ul.btnJustify li.btn a {color: #000;}


ul.membersJustified {margin:0; padding:0;}
ul.membersJustified li.btn { width:24.7%;}
ul.membersJustified li.btn.btn-default{border:1px solid #fff;}
ul.membersJustified li.btn a {color: #000;}
.margin15{margin:15px;}
.bottomSpacing {padding: 0 0px 40px 0}
.badge.subHeading {
    font-size: 25px;
    padding: 5px 20px; border-radius:20px; margin-top:10px;
}
.paddingtop5{padding-top:5px;}
.paddingtop10 {
    padding-top: 10px;
}
.whiteBorder{border-top:1px solid #ccc!important ;}
.bizBoxes{border:1px solid #ddd; padding:15px 0 0 0; margin:5px; background:#fff;}
.bizBoxes .title {
    padding: 10px;
    min-height: 77px;
    background: #f5f5f5;
    margin: 0;
    color: #000;
    font-size: 20px;
    border-top: 0;
    text-align: center; margin-top:15px;
}
.bizCate tr td {width: 25%;}
.PageTitle{font-size:30px; color:#333;}
.form-inline  .custWidth{width:143px !important;}
.marginBotZero{margin-bottom:0;}
.newClass h5{margin-top:0; text-transform:capitalize;}
.newClass btn{padding-left:8px;}
.paddingLftFour{padding-left:4px;}
.ibox.newClass{margin-bottom:15px;}
.radioButtonInline table tr td{padding:5px;}
.checkbox label, .radio label {
    padding-left: 10px !important;
}
.text-center {
    text-align:center;
    margin : 0px auto;
}

/* SAVVYGREAT SEMANTIC CONVERSION — structural legacy classes retained for compatibility. */
:root{--sg-primary:#6750a4;--sg-on-primary:#fff;--sg-primary-container:#eaddff;--sg-on-primary-container:#21005d;--sg-secondary-container:#e8def8;--sg-on-secondary-container:#1d192b;--sg-surface:#fffbfe;--sg-surface-low:#f7f2fa;--sg-surface-container:#f3edf7;--sg-surface-high:#ece6f0;--sg-on-surface:#1d1b20;--sg-on-surface-variant:#49454f;--sg-outline:#79747e;--sg-outline-variant:#cac4d0;--sg-error:#b3261e;--sg-radius-sm:12px;--sg-radius-md:18px;--sg-radius-lg:28px;--sg-shadow:0 10px 30px rgba(29,27,32,.09)}
html,body{background:var(--sg-surface-low);color:var(--sg-on-surface);font-family:'Roboto Flex','Segoe UI',Arial,sans-serif}h1,h2,h3,h4,h5,h6{color:var(--sg-on-surface);font-family:inherit;font-weight:650;letter-spacing:-.015em}.gray-bg,.white-bg,.wrapper-content,.ibox-content{background:var(--sg-surface-low)}a,.text-navy{color:var(--sg-primary)}.nav>li>a{border-radius:var(--sg-radius-sm);color:var(--sg-on-surface-variant)}.nav>li>a:hover,.nav>li>a:focus,.nav>li.active>a,.navbar-default .nav>li>a:hover,.navbar-default .nav>li>a:focus{background:var(--sg-secondary-container);color:var(--sg-on-secondary-container)}.navbar-default,.navbar-static-side{background:var(--sg-surface);border-color:var(--sg-outline-variant)}.navbar-static-top,.top-navigation .navbar{background:var(--sg-surface);border-bottom:1px solid var(--sg-outline-variant)}#page-wrapper{background:var(--sg-surface-low)}.page-heading{border-color:var(--sg-outline-variant);background:var(--sg-surface)}.ibox,.panel,.well,.modal-content,.dropdown-menu{border:1px solid var(--sg-outline-variant);border-radius:var(--sg-radius-md);background:var(--sg-surface);box-shadow:var(--sg-shadow)}.ibox-title,.panel-heading,.modal-header,.modal-footer{border-color:var(--sg-outline-variant);background:transparent}.ibox-content{border:0;border-radius:0 0 var(--sg-radius-md) var(--sg-radius-md);background:var(--sg-surface)}.form-control,.single-line,.select2-container .select2-choice{min-height:48px;border:1px solid var(--sg-outline);border-radius:var(--sg-radius-sm);background:var(--sg-surface);color:var(--sg-on-surface);box-shadow:none}.form-control:focus,.single-line:focus{border-color:var(--sg-primary);box-shadow:0 0 0 3px rgba(103,80,164,.16)}.btn{min-height:42px;border-radius:21px;font-weight:650;box-shadow:none}.btn-primary,.btn-success,.label-primary,.badge-primary{border-color:var(--sg-primary);background:var(--sg-primary);color:var(--sg-on-primary)}.btn-default,.btn-white{border-color:var(--sg-outline-variant);background:var(--sg-surface);color:var(--sg-primary)}.btn-danger,.label-danger{border-color:var(--sg-error);background:var(--sg-error);color:#fff}.table>thead>tr>th,.table>tbody>tr>td{border-color:var(--sg-outline-variant)}.table-striped>tbody>tr:nth-of-type(odd){background:var(--sg-surface-low)}.pagination>li>a,.pagination>li>span{border-color:var(--sg-outline-variant);color:var(--sg-primary)}.pagination>.active>a,.pagination>.active>a:hover{border-color:var(--sg-primary);background:var(--sg-primary)}.alert{border-radius:var(--sg-radius-sm)}.footer{border-color:var(--sg-outline-variant);background:var(--sg-surface);color:var(--sg-on-surface-variant)}.breadcrumb{background:transparent}.breadcrumb>li>a{color:var(--sg-primary)}.text-muted{color:var(--sg-on-surface-variant)}input[type=checkbox],input[type=radio]{accent-color:var(--sg-primary)}@media(max-width:768px){.ibox,.panel,.modal-content{border-radius:var(--sg-radius-sm)}.wrapper-content{padding:16px}.navbar-top-links li:last-child{margin-right:8px}}
/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes
Global Material 3 typography and icon system

Documentation imposed
- Sources: index-6.html#styles/typography and index-6.html#styles/icons.
- Google Sans is the brand family for display, headline, and title roles.
- Google Sans Text is the plain family for body, label, table, and control roles.
- Material Symbols Rounded uses FILL, weight, grade, and optical-size axes.
- Font Awesome, Glyphicons, and Ionicons remain isolated for legacy compatibility.

Files/components affected
- CodeBehind/css/SgStyleCss.css and every page that loads it.
- CodeBehind/fonts/google-sans-475.woff2
- CodeBehind/fonts/google-sans-text-400.woff2
- CodeBehind/fonts/google-sans-text-variable.woff2

Remaining conversion work
- Replace legacy icon markup page-by-page, then remove its font exceptions.
===============================================================================
*/
@font-face {
  font-family: "Google Sans";
  src: url("../fonts/google-sans-475.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes - View Business discovery

Layout and responsive behavior
- sgviewbiz-m3 owns a fluid hero, sticky equal-width primary tabs, search/filter
  controls, and auto-fit directories. Result areas use browser page scrolling.
- The hero uses compact action-first sizing so navigation and directory content
  remain visible in the initial desktop, tablet, and phone viewport.
- Expanded, medium, compact, and narrow-phone layouts keep controls visible and
  remove page-level horizontal overflow.

M3 components and states
- Primary tabs, search fields, filter chips, filled/outlined cards, icon buttons,
  metric widgets, result status, and empty states use native semantic controls.
- Hover, focus-visible, pressed, selected, filtered, empty, and disabled states
  follow programmatic aria-selected/aria-pressed/hidden values.

Color roles and design tokens
- Primary, secondary, tertiary, error, surface-container, outline, and matching
  on-color roles are consumed from the shared SavvyGreat M3 token system.

Typography
- Google Sans/Roboto fallbacks and M3 display, headline, title, body, label, and
  supporting roles are inherited from the shared typography system.

Shape and elevation
- Full chip shapes, large/extra-large containers, outlined cards, and low
  elevation use shared M3 shape and semantic surface rules.

Spacing and sizing
- An 8dp-derived rhythm, fluid gutters, readable line lengths, and 48px primary
  interaction targets are preserved across pointer and touch layouts.

Icons and imagery
- Material Symbols Rounded are explicitly sized, centered, role-colored, and
  hidden from accessibility APIs when a nearby text label supplies the meaning.

Motion and interactions
- Spatial changes use emphasized easing; color/opacity use effects motion.
  Reduced-motion removes decorative transforms and animations.

Accessibility
- Visible focus, native tab/search/button behavior, high-contrast support,
  logical source order, and no content-only color dependency are maintained.

Files/components affected
- Areas/Users/Views/StartNewBiz/ViewBiz.cshtml
- Areas/Users/Views/Shared/_SGBizViewBiz.cshtml
- CodeBehind/css/SgStyleCss.css

Temporary compatibility or repair work
- Existing database/session/profile-link contracts remain unchanged.

Remaining conversion work
- Public profile destinations are separate pages and are not styled by this block.
===============================================================================
*/

.sgviewbiz-m3,
.sgviewbiz-m3 *,
.sgviewbiz-m3 *::before,
.sgviewbiz-m3 *::after {
    box-sizing: border-box;
}

.sgviewbiz-m3 {
    width: min(100%, 1440px);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(12px, 2.4vw, 32px);
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
}

.sgviewbiz-m3 > * + * {
    margin-top: clamp(12px, 1.5vw, 20px);
}

.sgviewbiz-m3 [hidden] {
    display: none !important;
}

.sgviewbiz-m3 button,
.sgviewbiz-m3 input {
    font: inherit;
}

.sgviewbiz-m3-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .28fr);
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    min-width: 0;
    min-height: 220px;
    padding: clamp(22px, 3vw, 36px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--md-sys-color-tertiary-container) 86%, transparent) 0 12%, transparent 34%),
        linear-gradient(135deg, var(--md-sys-color-primary-container), color-mix(in srgb, var(--md-sys-color-secondary-container) 76%, var(--md-sys-color-surface)));
    color: var(--md-sys-color-on-primary-container);
}

.sgviewbiz-m3-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    right: -110px;
    bottom: -170px;
    border: 38px solid color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
    border-radius: 50%;
}

.sgviewbiz-m3-hero-copy {
    min-width: 0;
    max-width: 780px;
}

.sgviewbiz-m3-overline,
.sgviewbiz-m3-section-overline {
    display: block;
    margin: 0 0 8px;
    color: var(--md-sys-color-primary);
    font: 650 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgviewbiz-m3-hero h1 {
    max-width: 18ch;
    margin: 0;
    color: inherit;
    font: 475 clamp(32px, 3.6vw, 50px)/1.06 var(--m3-font-brand);
    letter-spacing: -.8px;
    text-wrap: balance;
}

.sgviewbiz-m3-hero-copy > p {
    max-width: 62ch;
    margin: 10px 0 0;
    color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 84%, transparent);
    font: 400 15px/23px var(--m3-font-plain);
}

.sgviewbiz-m3-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.sgviewbiz-m3-metric {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: min(190px, 100%);
    min-height: 60px;
    padding: 8px 13px 8px 8px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 74%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 76%, transparent);
    color: var(--md-sys-color-on-surface);
    backdrop-filter: blur(12px);
}

.sgviewbiz-m3-metric > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-secondary);
    font-size: 22px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 24;
}

.sgviewbiz-m3-metric:nth-child(2) > .material-symbols-rounded {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
}

.sgviewbiz-m3-metric > span:last-child {
    display: grid;
    min-width: 0;
}

.sgviewbiz-m3-metric strong {
    color: var(--md-sys-color-on-surface);
    font: 600 20px/24px var(--m3-font-brand);
}

.sgviewbiz-m3-metric small {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/16px var(--m3-font-plain);
}

.sgviewbiz-m3-hero-visual {
    position: relative;
    justify-self: center;
    width: min(100%, 210px);
    height: 170px;
}

.sgviewbiz-m3-hero-orbit {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 68%, transparent);
    border-radius: 50%;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent),
        0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.sgviewbiz-m3-hero-orbit > .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 420, "GRAD" 0, "opsz" 48;
}

.sgviewbiz-m3-hero-orbit-primary {
    inset: 30px auto auto 8px;
    width: 110px;
    height: 110px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
}

.sgviewbiz-m3-hero-orbit-primary > .material-symbols-rounded {
    font-size: 48px;
}

.sgviewbiz-m3-hero-orbit-secondary {
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-secondary);
}

.sgviewbiz-m3-hero-orbit-secondary > .material-symbols-rounded {
    font-size: 30px;
}

.sgviewbiz-m3-hero-orbit-tertiary {
    right: 18px;
    bottom: 0;
    width: 76px;
    height: 76px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
}

.sgviewbiz-m3-hero-orbit-tertiary > .material-symbols-rounded {
    font-size: 34px;
}

.sgviewbiz-m3-navigation.is-stuck {
    position: sticky;
    top: calc(var(--sgm3-top, 72px) + 8px);
    z-index: 24;
    width: 100%;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 82%, transparent);
    border-radius: 26px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent),
        0 6px 18px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    backdrop-filter: blur(18px);
}

.sgviewbiz-m3-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

.sgviewbiz-m3-tab {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 72px;
    padding: 8px 14px 8px 8px;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    text-align: left;
    cursor: pointer;
    transition:
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgviewbiz-m3-tab::after,
.sgviewbiz-m3-filter-chip::after,
.sgviewbiz-m3-search button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgviewbiz-m3-tab:hover::after,
.sgviewbiz-m3-filter-chip:hover::after,
.sgviewbiz-m3-search button:hover::after {
    opacity: .08;
}

.sgviewbiz-m3-tab:active,
.sgviewbiz-m3-filter-chip:active,
.sgviewbiz-m3-search button:active {
    transform: scale(.98);
}

.sgviewbiz-m3-tab.is-selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgviewbiz-m3-tab > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
    font-size: 25px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgviewbiz-m3-tab.is-selected > .material-symbols-rounded {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 24;
}

.sgviewbiz-m3-tab-copy {
    display: grid;
    min-width: 0;
}

.sgviewbiz-m3-tab-copy strong {
    overflow: hidden;
    font: 600 14px/20px var(--m3-font-plain);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgviewbiz-m3-tab-copy small {
    overflow: hidden;
    color: inherit;
    font: 400 12px/16px var(--m3-font-plain);
    opacity: .8;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgviewbiz-m3-tab-count {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding-inline: 8px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 650 12px/16px var(--m3-font-plain);
}

.sgviewbiz-m3-panel {
    min-width: 0;
    padding: clamp(20px, 3.5vw, 44px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 32px;
    background: var(--md-sys-color-surface-container-low);
    animation: sgviewbiz-m3-panel-enter 360ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgviewbiz-m3-section-heading {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    max-width: 900px;
}

.sgviewbiz-m3-section-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 24px 24px 24px 8px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.sgviewbiz-m3-section-heading-buyers .sgviewbiz-m3-section-icon {
    border-radius: 24px 24px 8px 24px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
}

.sgviewbiz-m3-section-icon > .material-symbols-rounded {
    font-size: 34px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 32;
}

.sgviewbiz-m3-section-heading h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 clamp(28px, 3.2vw, 40px)/1.16 var(--m3-font-brand);
    letter-spacing: -.4px;
}

.sgviewbiz-m3-section-heading p {
    max-width: 68ch;
    margin: 6px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 15px/22px var(--m3-font-plain);
}

.sgviewbiz-m3-section-heading .sgviewbiz-m3-section-overline {
    margin-bottom: 2px;
}

.sgviewbiz-m3-discovery-controls {
    display: grid;
    gap: 18px;
    margin: 28px 0;
    padding: clamp(14px, 2vw, 22px);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
}

.sgviewbiz-m3-search {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    min-width: 0;
    min-height: 64px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        box-shadow var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgviewbiz-m3-search:focus-within {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgviewbiz-m3-search > .material-symbols-rounded {
    justify-self: center;
    font-size: 25px;
}

.sgviewbiz-m3-search input {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 400 16px/24px var(--m3-font-plain);
}

.sgviewbiz-m3-search input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: .82;
}

.sgviewbiz-m3-search input::-webkit-search-cancel-button {
    display: none;
}

.sgviewbiz-m3-search button {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}

.sgviewbiz-m3-search button > .material-symbols-rounded {
    font-size: 23px;
}

.sgviewbiz-m3-filter-group {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.sgviewbiz-m3-filter-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sgviewbiz-m3-filter-heading > span {
    color: var(--md-sys-color-on-surface);
    font: 600 14px/20px var(--m3-font-plain);
}

.sgviewbiz-m3-filter-heading > p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 12px/16px var(--m3-font-plain);
    text-align: right;
}

.sgviewbiz-m3-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.sgviewbiz-m3-filter-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 48px;
    min-height: 48px;
    padding: 0 15px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 13px/18px var(--m3-font-plain);
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        border-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgviewbiz-m3-filter-chip > .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.sgviewbiz-m3-filter-chip.is-selected {
    border-color: transparent;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgviewbiz-m3-filter-chip.is-selected > .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 20;
}

.sgviewbiz-m3-business-grid,
.sgviewbiz-m3-buyer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: clamp(14px, 2vw, 22px);
    min-width: 0;
}

.sgviewbiz-m3-business-card,
.sgviewbiz-m3-buyer-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 48px;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    gap: 14px;
    min-width: 0;
    min-height: 288px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    transition:
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        border-radius var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        border-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        box-shadow var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgviewbiz-m3-buyer-card {
    min-height: 304px;
}

.sgviewbiz-m3-business-card:hover,
.sgviewbiz-m3-buyer-card:hover {
    z-index: 1;
    border-color: var(--md-sys-color-primary);
    border-radius: 24px 24px 24px 10px;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent),
        0 10px 26px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    transform: translateY(-3px);
}

.sgviewbiz-m3-card-state {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--md-sys-color-primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgviewbiz-m3-business-card:hover .sgviewbiz-m3-card-state,
.sgviewbiz-m3-buyer-card:hover .sgviewbiz-m3-card-state {
    opacity: .04;
}

.sgviewbiz-m3-avatar {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1;
    width: 64px;
    height: 64px;
    border-radius: 20px 20px 20px 7px;
    font: 600 26px/32px var(--m3-font-brand);
}

.sgviewbiz-m3-avatar-tone-1 {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgviewbiz-m3-avatar-tone-2 {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgviewbiz-m3-avatar-tone-3 {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgviewbiz-m3-avatar-tone-4 {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-primary);
}

.sgviewbiz-m3-avatar-tone-5 {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgviewbiz-m3-avatar-tone-6 {
    background: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

.sgviewbiz-m3-card-launch {
    display: grid;
    place-items: center;
    grid-column: 3;
    grid-row: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 23px;
    transition:
        color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgviewbiz-m3-business-card:hover .sgviewbiz-m3-card-launch,
.sgviewbiz-m3-buyer-card:hover .sgviewbiz-m3-card-launch {
    color: var(--md-sys-color-primary);
    transform: translate(2px, -2px);
}

.sgviewbiz-m3-card-copy {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
}

.sgviewbiz-m3-card-copy > small {
    overflow: hidden;
    color: var(--md-sys-color-primary);
    font: 600 12px/17px var(--m3-font-plain);
    letter-spacing: .25px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgviewbiz-m3-card-copy > strong {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font: 475 22px/28px var(--m3-font-brand);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sgviewbiz-m3-card-details,
.sgviewbiz-m3-buyer-contact {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 3;
    align-content: start;
    gap: 9px;
    min-width: 0;
}

.sgviewbiz-m3-card-details > span,
.sgviewbiz-m3-buyer-contact > span {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgviewbiz-m3-card-details .material-symbols-rounded,
.sgviewbiz-m3-buyer-contact .material-symbols-rounded {
    width: 24px;
    height: 24px;
    color: var(--md-sys-color-secondary);
    font-size: 20px;
    line-height: 24px;
}

.sgviewbiz-m3-card-details > span > span:last-child,
.sgviewbiz-m3-buyer-contact > span > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sgviewbiz-m3-card-action {
    display: inline-flex;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    gap: 8px;
    min-height: 40px;
    margin-top: 2px;
    padding: 0 14px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 600 13px/18px var(--m3-font-plain);
}

.sgviewbiz-m3-card-action > .material-symbols-rounded {
    font-size: 20px;
    transition: transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgviewbiz-m3-business-card:hover .sgviewbiz-m3-card-action > .material-symbols-rounded,
.sgviewbiz-m3-buyer-card:hover .sgviewbiz-m3-card-action > .material-symbols-rounded {
    transform: translateX(4px);
}

.sgviewbiz-m3-empty {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 144px;
    padding: 24px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.sgviewbiz-m3-empty > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 30px;
}

.sgviewbiz-m3-empty h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 20px/26px var(--m3-font-brand);
}

.sgviewbiz-m3-empty p {
    margin: 4px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgviewbiz-m3-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sgviewbiz-m3-tab:focus-visible,
.sgviewbiz-m3-filter-chip:focus-visible,
.sgviewbiz-m3-search button:focus-visible,
.sgviewbiz-m3-business-card:focus-visible,
.sgviewbiz-m3-buyer-card:focus-visible,
.sgviewbiz-m3-panel:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

@keyframes sgviewbiz-m3-panel-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 980px) {
    .sgviewbiz-m3-hero {
        grid-template-columns: minmax(0, 1fr) 170px;
        min-height: 210px;
        gap: 18px;
    }

    .sgviewbiz-m3-hero-visual {
        width: 170px;
        height: 150px;
    }

    .sgviewbiz-m3-hero-orbit-primary {
        left: 0;
        width: 98px;
        height: 98px;
    }

    .sgviewbiz-m3-hero-orbit-secondary {
        width: 58px;
        height: 58px;
    }

    .sgviewbiz-m3-hero-orbit-tertiary {
        right: 8px;
        width: 68px;
        height: 68px;
    }
}

@media (max-width: 760px) {
    .sgviewbiz-m3 {
        padding: 16px;
    }

    .sgviewbiz-m3-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        padding: 24px;
        border-radius: 28px;
    }

    .sgviewbiz-m3-hero h1 {
        max-width: 16ch;
        font-size: clamp(32px, 8vw, 44px);
        line-height: 1.08;
    }

    .sgviewbiz-m3-hero-visual {
        display: none;
    }

    .sgviewbiz-m3-metric {
        flex: 1 1 190px;
    }

    .sgviewbiz-m3-tab {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 68px;
        padding: 8px;
    }

    .sgviewbiz-m3-tab > .material-symbols-rounded {
        width: 44px;
        height: 44px;
    }

    .sgviewbiz-m3-tab-count {
        display: none;
    }

    .sgviewbiz-m3-panel {
        padding: 24px 20px;
        border-radius: 28px;
    }

    .sgviewbiz-m3-section-heading {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
    }

    .sgviewbiz-m3-section-icon {
        width: 64px;
        height: 64px;
        border-radius: 21px 21px 21px 7px;
    }

    .sgviewbiz-m3-filter-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .sgviewbiz-m3-filter-heading > p {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .sgviewbiz-m3 {
        padding: 8px;
    }

    .sgviewbiz-m3 > * + * {
        margin-top: 14px;
    }

    .sgviewbiz-m3-hero {
        padding: 22px 18px;
        border-radius: 24px;
    }

    .sgviewbiz-m3-hero h1 {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -.6px;
    }

    .sgviewbiz-m3-hero-copy > p {
        margin-top: 12px;
        font-size: 15px;
        line-height: 23px;
    }

    .sgviewbiz-m3-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 20px;
    }

    .sgviewbiz-m3-metric {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        min-width: 0;
        min-height: 64px;
        padding: 8px;
        border-radius: 18px;
    }

    .sgviewbiz-m3-metric > .material-symbols-rounded {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 22px;
    }

    .sgviewbiz-m3-metric strong {
        font-size: 18px;
        line-height: 22px;
    }

    .sgviewbiz-m3-metric small {
        font-size: 10px;
        line-height: 14px;
    }

    .sgviewbiz-m3-navigation.is-stuck {
        top: calc(var(--sgm3-top, 72px) + 4px);
        padding: 4px;
        border-radius: 22px;
    }

    .sgviewbiz-m3-tabs {
        gap: 4px;
    }

    .sgviewbiz-m3-tab {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 7px;
        min-height: 60px;
        padding: 6px;
        border-radius: 18px;
    }

    .sgviewbiz-m3-tab > .material-symbols-rounded {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 21px;
    }

    .sgviewbiz-m3-tab-copy strong {
        font-size: 12px;
        line-height: 16px;
        white-space: normal;
    }

    .sgviewbiz-m3-tab-copy small {
        display: none;
    }

    .sgviewbiz-m3-panel {
        padding: 20px 14px;
        border-radius: 24px;
    }

    .sgviewbiz-m3-section-heading {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }

    .sgviewbiz-m3-section-icon {
        width: 52px;
        height: 52px;
        border-radius: 17px 17px 17px 6px;
    }

    .sgviewbiz-m3-section-icon > .material-symbols-rounded {
        font-size: 28px;
    }

    .sgviewbiz-m3-section-heading h2 {
        font-size: 25px;
        line-height: 31px;
    }

    .sgviewbiz-m3-section-heading p {
        grid-column: 1 / -1;
        font-size: 14px;
        line-height: 20px;
    }

    .sgviewbiz-m3-discovery-controls {
        gap: 15px;
        margin: 20px 0;
        padding: 10px;
        border-radius: 20px;
    }

    .sgviewbiz-m3-search {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        min-height: 56px;
    }

    .sgviewbiz-m3-search input {
        min-height: 54px;
        font-size: 14px;
        line-height: 20px;
    }

    .sgviewbiz-m3-search button {
        width: 44px;
        height: 44px;
    }

    .sgviewbiz-m3-filter-chips {
        gap: 6px;
    }

    .sgviewbiz-m3-filter-chip {
        flex: 1 0 48px;
        min-width: 48px;
        min-height: 48px;
        padding-inline: 10px;
    }

    .sgviewbiz-m3-filter-chip:first-child {
        flex-grow: 1.4;
    }

    .sgviewbiz-m3-business-grid,
    .sgviewbiz-m3-buyer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sgviewbiz-m3-business-card,
    .sgviewbiz-m3-buyer-card {
        grid-template-columns: 56px minmax(0, 1fr) 44px;
        min-height: 264px;
        padding: 16px;
        border-radius: 22px;
    }

    .sgviewbiz-m3-avatar {
        width: 56px;
        height: 56px;
        border-radius: 18px 18px 18px 6px;
        font-size: 23px;
    }

    .sgviewbiz-m3-card-launch {
        width: 44px;
        height: 44px;
    }

    .sgviewbiz-m3-card-copy > strong {
        font-size: 20px;
        line-height: 26px;
    }

    .sgviewbiz-m3-empty {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .sgviewbiz-m3-empty > .material-symbols-rounded {
        width: 52px;
        height: 52px;
        border-radius: 17px;
    }
}

/* =============================================================================
Design M3 Changes - CommonVisitors Profile relationship canvas launcher
============================================================================= */

.sgprofile-m3-canvas {
    min-width: 0;
    padding: clamp(16px, 2.3vw, 24px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background:
        radial-gradient(
            circle at 92% 8%,
            color-mix(in srgb, var(--md-sys-color-tertiary-container) 62%, transparent) 0 12%,
            transparent 36%
        ),
        var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-canvas-actions,
.sgprofile-m3-canvas-library > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sgprofile-m3-canvas-actions h3,
.sgprofile-m3-canvas-actions p,
.sgprofile-m3-canvas-library h3,
.sgprofile-m3-canvas-library p {
    margin: 0;
}

.sgprofile-m3-canvas-actions h3,
.sgprofile-m3-canvas-library h3 {
    color: var(--md-sys-color-on-surface);
    font: 650 20px/1.25 var(--m3-font-brand);
}

.sgprofile-m3-canvas-actions p,
.sgprofile-m3-canvas-library p {
    margin-top: 4px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 13px/1.4 var(--m3-font-plain);
}

.sgprofile-m3-canvas-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 10px;
    margin-top: 18px;
}

.sgprofile-m3-canvas-category,
.sgprofile-m3-canvas-item {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    text-align: left;
    cursor: pointer;
    transition:
        transform var(--m3-motion-duration-medium2) var(--m3-motion-easing-emphasized),
        border-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        box-shadow var(--m3-motion-duration-medium2) var(--m3-motion-easing-emphasized);
}

.sgprofile-m3-canvas-category {
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    min-height: 82px;
    padding: 14px;
    border-radius: var(--md-sys-shape-large);
}

.sgprofile-m3-canvas-category:hover,
.sgprofile-m3-canvas-item:hover {
    border-color: var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-level1);
    transform: translateY(-2px);
}

.sgprofile-m3-canvas-category:focus-visible,
.sgprofile-m3-canvas-item:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgprofile-m3-canvas-category > .material-symbols-rounded:first-child {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 28px;
}

.sgprofile-m3-canvas-category > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.sgprofile-m3-canvas-category strong {
    overflow: hidden;
    font: 650 15px/1.3 var(--m3-font-brand);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-canvas-category small {
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/1.2 var(--m3-font-plain);
}

.sgprofile-m3-canvas-category > .material-symbols-rounded:last-child,
.sgprofile-m3-canvas-item > .material-symbols-rounded:last-child {
    font-size: 21px;
    color: var(--md-sys-color-primary);
}

.sgprofile-m3-canvas-library {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-canvas-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 10px;
    margin-top: 16px;
}

.sgprofile-m3-canvas-item {
    grid-template-columns: 36px minmax(0, 1fr) 24px;
    min-height: 60px;
    padding: 10px 14px;
    border-radius: var(--md-sys-shape-medium);
}

.sgprofile-m3-canvas-item > .material-symbols-rounded:first-child {
    color: var(--md-sys-color-tertiary);
    font-size: 26px;
}

.sgprofile-m3-canvas-item > span:nth-child(2) {
    overflow: hidden;
    font: 600 14px/1.3 var(--m3-font-plain);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-canvas > .sgprofile-m3-form-status {
    display: block;
    margin: 14px 0 0;
}

@media (max-width: 620px) {
    .sgprofile-m3-canvas-actions,
    .sgprofile-m3-canvas-library > div:first-child {
        align-items: stretch;
        flex-direction: column;
    }

    .sgprofile-m3-canvas-actions > a {
        width: 100%;
    }

    .sgprofile-m3-canvas-categories,
    .sgprofile-m3-canvas-list {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
Design M3 Changes - CommonVisitors Profile Snapic image dialog
============================================================================= */

body.sgprofile-m3-dialog-open {
    overflow: hidden;
}

.sgprofile-m3-snapic-dialog {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    padding: clamp(8px, 2vw, 24px);
    overflow: auto;
    background: color-mix(in srgb, #000 52%, transparent);
    backdrop-filter: blur(3px);
}

.sgprofile-m3-snapic-dialog.is-open {
    display: grid;
    place-items: center;
}

.sgprofile-m3-snapic-dialog-surface {
    width: min(1100px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level5);
}

.sgprofile-m3-snapic-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: color-mix(
        in srgb,
        var(--md-sys-color-surface-container-high) 92%,
        transparent
    );
    backdrop-filter: blur(12px);
}

.sgprofile-m3-snapic-dialog-header > img {
    width: 48px;
    height: 48px;
    border-radius: var(--md-sys-shape-full);
    object-fit: cover;
}

.sgprofile-m3-snapic-dialog-header > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.sgprofile-m3-snapic-dialog-header strong,
.sgprofile-m3-snapic-dialog-header time,
.sgprofile-m3-snapic-dialog-header h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-snapic-dialog-header strong {
    font: 650 14px/1.25 var(--m3-font-plain);
}

.sgprofile-m3-snapic-dialog-header time {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 11px/1.25 var(--m3-font-plain);
}

.sgprofile-m3-snapic-dialog-header h2 {
    font: 650 18px/1.25 var(--m3-font-brand);
}

.sgprofile-m3-snapic-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .8fr);
    min-height: 420px;
}

.sgprofile-m3-snapic-dialog-body > figure {
    display: grid;
    min-width: 0;
    min-height: 420px;
    margin: 0;
    place-items: center;
    overflow: hidden;
    background: var(--md-sys-color-inverse-surface);
}

.sgprofile-m3-snapic-dialog-body > figure > img {
    display: block;
    width: 100%;
    height: min(72vh, 760px);
    object-fit: contain;
}

.sgprofile-m3-snapic-dialog-body > aside {
    min-width: 0;
    padding: 18px;
    overflow: auto;
    border-left: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-snapic-dialog-body > aside > h3 {
    margin: 0 0 12px;
    font: 650 20px/1.25 var(--m3-font-brand);
}

.sgprofile-m3-modal-comments {
    display: grid;
    gap: 8px;
    max-height: 430px;
    overflow: auto;
    overscroll-behavior: contain;
}

.sgprofile-m3-modal-comments > .sgprofile-m3-snapic-comment {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-modal-comments .sgprofile-m3-snapic-comment-avatar {
    width: 40px;
    height: 40px;
}

.sgprofile-m3-snapic-dialog #modalCommentSection {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

@media (max-width: 780px) {
    .sgprofile-m3-snapic-dialog {
        padding: 0;
    }

    .sgprofile-m3-snapic-dialog-surface {
        width: 100%;
        min-height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .sgprofile-m3-snapic-dialog-body {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-snapic-dialog-body > figure {
        min-height: 280px;
    }

    .sgprofile-m3-snapic-dialog-body > figure > img {
        height: min(52vh, 520px);
    }

    .sgprofile-m3-snapic-dialog-body > aside {
        border-top: 1px solid var(--md-sys-color-outline-variant);
        border-left: 0;
    }
}

/*
===============================================================================
Design M3 Changes - compact profile FAB section navigation

SavvyGreat M3 FAB mapping
- Standard FAB: 64x64, 20px shape, primary-container/on-primary-container.
- Extended FAB: 64px height, 24px horizontal padding, icon plus selected label.
- The complete section menu uses extended FAB actions above the trigger.

Responsive behavior
- The desktop/tablet tablist remains authoritative above 650px.
- At compact width the grid is removed from layout. The FAB pair appears only
  after the user reaches the section-navigation position, then floats at the
  bottom-end without reducing the post/content width.

States and accessibility
- Hover, pressed, selected, open, focus-visible, forced-colors, safe-area, and
  reduced-motion states use semantic M3 color and motion roles.
===============================================================================
*/

.sgprofile-m3-mobile-fab-sentinel,
.sgprofile-m3-mobile-fab-nav {
    display: none;
}

@media (max-width: 650px) {
    .sgprofile-m3 .sgprofile-m3-tabs {
        display: none !important;
    }

    .sgprofile-m3-mobile-fab-sentinel {
        display: block;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    .sgprofile-m3-mobile-fab-nav {
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        max-width: calc(100vw - 32px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(24px) scale(.94);
        pointer-events: none;
        transition:
            opacity 180ms linear,
            visibility 0s linear 320ms,
            transform 450ms cubic-bezier(.2, 0, 0, 1);
    }

    .sgprofile-m3-mobile-fab-nav.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .sgprofile-m3-mobile-fab,
    .sgprofile-m3-mobile-extended-fab,
    .sgprofile-m3-mobile-fab-menu > button {
        position: relative;
        isolation: isolate;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 64px;
        margin: 0;
        border: 0;
        border-radius: 20px;
        outline: 0;
        background: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
        font: 500 var(--m3-title-medium-size) /
            var(--m3-title-medium-line) var(--m3-font-plain);
        letter-spacing: 0;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
        box-shadow: var(--sgcv-m3-elevation-3);
        -webkit-tap-highlight-color: transparent;
        transition:
            border-radius 300ms cubic-bezier(.2, 0, 0, 1),
            background-color 180ms linear,
            color 180ms linear,
            transform 300ms cubic-bezier(.2, 0, 0, 1),
            box-shadow 180ms linear;
    }

    .sgprofile-m3-mobile-fab::after,
    .sgprofile-m3-mobile-extended-fab::after,
    .sgprofile-m3-mobile-fab-menu > button::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: currentColor;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms linear;
    }

    .sgprofile-m3-mobile-fab {
        width: 64px;
        min-width: 64px;
        height: 64px;
        padding: 0;
        flex: 0 0 64px;
    }

    .sgprofile-m3-mobile-extended-fab {
        width: auto;
        max-width: min(220px, calc(100vw - 104px));
        height: 64px;
        padding: 0 24px;
    }

    .sgprofile-m3-mobile-extended-fab > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sgprofile-m3-mobile-fab .material-symbols-rounded,
    .sgprofile-m3-mobile-extended-fab .material-symbols-rounded,
    .sgprofile-m3-mobile-fab-menu .material-symbols-rounded {
        flex: 0 0 auto;
        font-size: 24px;
        font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    }

    .sgprofile-m3-mobile-fab-nav.is-open
        .sgprofile-m3-mobile-fab {
        border-radius: 50%;
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
    }

    .sgprofile-m3-mobile-fab-menu {
        position: absolute;
        right: 0;
        bottom: calc(100% + 12px);
        display: grid;
        justify-items: end;
        gap: 8px;
        width: max-content;
        max-width: calc(100vw - 32px);
        max-height: calc(100dvh - 116px);
        padding: 4px;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    .sgprofile-m3-mobile-fab-menu[hidden] {
        display: none;
    }

    .sgprofile-m3-mobile-fab-menu::-webkit-scrollbar {
        display: none;
    }

    .sgprofile-m3-mobile-fab-menu > button {
        justify-content: flex-start;
        width: max-content;
        min-width: 184px;
        max-width: calc(100vw - 40px);
        min-height: 56px;
        padding: 0 20px;
        border-radius: 18px;
        background: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
        box-shadow: var(--sgcv-m3-elevation-2);
    }

    .sgprofile-m3-mobile-fab-menu > button.is-selected {
        background: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
    }

    .sgprofile-m3-mobile-fab-menu
        > button.is-selected
        .material-symbols-rounded {
        font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
    }

    .sgprofile-m3-mobile-fab:hover::after,
    .sgprofile-m3-mobile-extended-fab:hover::after,
    .sgprofile-m3-mobile-fab-menu > button:hover::after {
        opacity: .08;
    }

    .sgprofile-m3-mobile-fab:active,
    .sgprofile-m3-mobile-extended-fab:active,
    .sgprofile-m3-mobile-fab-menu > button:active {
        border-radius: 14px;
        transform: scale(.96);
        box-shadow: var(--sgcv-m3-elevation-1);
    }

    .sgprofile-m3-mobile-fab:focus-visible,
    .sgprofile-m3-mobile-extended-fab:focus-visible,
    .sgprofile-m3-mobile-fab-menu > button:focus-visible {
        outline: 3px solid var(--md-sys-color-primary);
        outline-offset: 3px;
    }
}

@media (max-width: 380px) {
    .sgprofile-m3-mobile-extended-fab {
        max-width: calc(100vw - 96px);
        padding-inline: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3-mobile-fab-nav,
    .sgprofile-m3-mobile-fab,
    .sgprofile-m3-mobile-extended-fab,
    .sgprofile-m3-mobile-fab-menu > button {
        transition-duration: 1ms !important;
    }
}

@media (forced-colors: active) {
    .sgprofile-m3-mobile-fab,
    .sgprofile-m3-mobile-extended-fab,
    .sgprofile-m3-mobile-fab-menu > button {
        border: 1px solid ButtonText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgviewbiz-m3-panel {
        animation: none;
    }

    .sgviewbiz-m3-tab,
    .sgviewbiz-m3-filter-chip,
    .sgviewbiz-m3-business-card,
    .sgviewbiz-m3-buyer-card,
    .sgviewbiz-m3-card-launch,
    .sgviewbiz-m3-card-action > .material-symbols-rounded {
        transition-duration: 0.01ms !important;
    }

    .sgviewbiz-m3-business-card:hover,
    .sgviewbiz-m3-buyer-card:hover,
    .sgviewbiz-m3-tab:active,
    .sgviewbiz-m3-filter-chip:active,
    .sgviewbiz-m3-search button:active {
        transform: none;
    }
}

/*
===============================================================================
Design M3 Changes - Profile three-column composition and readable type

Layout
- A bounded summary rail, flexible activity column, and 300px sponsored rail
  replace the former 1fr/3fr split. Both side rails use the document scrollbar.
- The sponsored rail is sticky only when three columns fit. It becomes a
  horizontal placement on tablet and a normal compact placement on mobile.

Typography, color, spacing, and icons
- Profile surfaces use the shared SavvyGreat M3 brand/plain families, readable
  on-surface roles, 15px body copy, 13px metadata, and M3 heading scales.
- The sponsored label uses a filled Material Symbol and tertiary color roles.
===============================================================================
*/

.sgprofile-m3-layout {
    grid-template-columns:
        minmax(224px, 272px)
        minmax(0, 1fr)
        minmax(240px, 300px);
    gap: clamp(16px, 1.8vw, 24px);
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
    font-size: 15px;
    line-height: 1.55;
}

.sgprofile-m3-sidebar,
.sgprofile-m3-content,
.sgprofile-m3-ad-rail {
    width: 100%;
    min-width: 0;
}

.sgprofile-m3-layout :where(
    .sgprofile-m3-identity-card,
    .sgprofile-m3-edit-card,
    .sgprofile-m3-bio-card,
    .sgprofile-m3-bio-form,
    .sgprofile-m3-panel,
    .sgprofile-m3-ad-card
) {
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-layout :where(h2, h3, h4) {
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
}

.sgprofile-m3-layout :where(
    .sgprofile-m3-section-heading p,
    .sgprofile-m3-bio-card > p,
    .sgprofile-m3-supporting-text,
    .sgprofile-m3-field-support
) {
    color: color-mix(
        in srgb,
        var(--md-sys-color-on-surface) 82%,
        var(--md-sys-color-surface)
    );
    font-size: 15px;
    line-height: 1.55;
}

.sgprofile-m3-layout :where(small, time, .sgprofile-m3-overline) {
    font-size: 13px;
    line-height: 1.45;
}

.sgprofile-m3-content {
    gap: clamp(16px, 2vw, 22px);
}

.sgprofile-m3-ad-rail {
    position: sticky;
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-category-height, 64px) +
        var(--sgcv-m3-context-height, 116px) +
        12px
    );
    align-self: start;
}

.sgprofile-m3-ad-card {
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-m3-ad-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    color: var(--md-sys-color-on-surface-variant);
    font: 650 13px/1.3 var(--m3-font-plain);
    letter-spacing: .02em;
}

.sgprofile-m3-ad-label .material-symbols-rounded {
    color: var(--md-sys-color-tertiary);
    font-size: 24px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3-ad-media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-ad-media img {
    display: block;
    width: 100%;
    height: min(
        600px,
        calc(
            100vh -
            var(--sgcv-m3-topbar-height, 76px) -
            var(--sgcv-m3-category-height, 64px) -
            var(--sgcv-m3-context-height, 116px) -
            86px
        )
    );
    min-height: 320px;
    object-fit: contain;
}

.sgprofile-m3-timeline-presentation .sgprofile-m3-ad-rail {
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        12px
    );
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgprofile-m3-ad-rail {
    top: calc(var(--sgcv-m3-context-height, 116px) + 12px);
}

@media (max-width: 1180px) {
    .sgprofile-m3-layout {
        grid-template-columns: minmax(224px, 272px) minmax(0, 1fr);
    }

    .sgprofile-m3-ad-rail {
        position: static;
        grid-column: 1 / -1;
    }

    .sgprofile-m3-ad-card {
        padding: 10px;
    }

    .sgprofile-m3-ad-media img {
        height: auto;
        min-height: 90px;
        max-height: 180px;
        object-fit: contain;
    }
}

@media (max-width: 900px) {
    .sgprofile-m3-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgprofile-m3-sidebar,
    .sgprofile-m3-ad-rail {
        position: static;
    }
}

/*
===============================================================================
Design M3 Changes - Material 3 website typography

Source roles
- Google Sans/Google Sans Text match the Material 3 documentation website.
- Display, headline, title, body, and label sizes use the official 15-role
  Material 3 scale without custom intermediate sizes.

Profile mapping
- Page identity: headline-large 32/40.
- Card and panel headings: title-large 22/28 and title-medium 16/24.
- Reading copy and fields: body-large 16/24.
- Supporting copy and metadata: body-medium 14/20.
- Tabs, buttons, and controls: label-large 14/20.
- Compact overlines and advertisement labels: label-medium 12/16.

Accessibility and compatibility
- Semantic color roles remain unchanged. Browser text scaling remains enabled.
- Material Symbols retain their independent icon font and optical-size axes.
===============================================================================
*/

:root {
    --m3-font-brand: "Google Sans", Arial, sans-serif;
    --m3-font-plain: "Google Sans Text", Arial, sans-serif;
}

html,
body {
    font-family: var(--m3-font-plain);
    font-size: var(--m3-body-large-size);
    font-weight: 400;
    line-height: var(--m3-body-large-line);
}

h1 {
    font: 400 var(--m3-headline-large-size) /
        var(--m3-headline-large-line) var(--m3-font-brand);
}

h2 {
    font: 400 var(--m3-headline-medium-size) /
        var(--m3-headline-medium-line) var(--m3-font-brand);
}

h3 {
    font: 400 var(--m3-headline-small-size) /
        var(--m3-headline-small-line) var(--m3-font-brand);
}

h4 {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

h5 {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

h6 {
    font: 500 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-brand);
}

button,
input,
textarea,
select {
    font-family: var(--m3-font-plain);
}

.sgprofile-m3,
.sgprofile-m3-layout {
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
}

.sgprofile-m3-hero-copy h1 {
    font: 400 var(--m3-headline-large-size) /
        var(--m3-headline-large-line) var(--m3-font-brand);
    letter-spacing: 0;
}

.sgprofile-m3 :where(
    .sgprofile-m3-identity-copy h2,
    .sgprofile-m3-section-heading h2,
    .sgprofile-m3-feedback-heading h2,
    .sgprofile-m3-bio-form > h2
) {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
    letter-spacing: 0;
}

.sgprofile-m3 :where(
    .sgprofile-m3-section-heading h3,
    .sgprofile-m3-privacy-card h3
) {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
    letter-spacing: .15px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-hero-copy > p,
    .sgprofile-m3-identity-copy > p,
    .sgprofile-m3-bio-card > p,
    .sgprofile-m3-email,
    .sgprofile-m3-outlined-field > input,
    .sgprofile-m3-outlined-field > textarea,
    .sgprofile-m3-outlined-field > select
) {
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
    letter-spacing: .5px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-section-heading p,
    .sgprofile-m3-feedback-heading p,
    .sgprofile-m3-metadata dt,
    .sgprofile-m3-metadata dd,
    .sgprofile-m3-supporting-text,
    .sgprofile-m3-field-support,
    .sgprofile-m3-form-status,
    .sgprofile-m3-privacy-card p,
    time
) {
    font: 400 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
    letter-spacing: .25px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-overline,
    .sgprofile-m3-ad-label,
    .sgprofile-m3-labeled-icon > span:last-child
) {
    font: 500 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
    letter-spacing: .5px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-tabs > li > a,
    .sgprofile-m3-more-trigger,
    .sgprofile-m3-filled-button,
    .sgprofile-m3-tonal-button,
    .sgprofile-m3-outlined-button,
    .sgprofile-m3-text-button,
    .sgprofile-m3-card-actions button
) {
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    letter-spacing: .1px;
}

.sgprofile-m3-follow-metrics dd {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

@media (max-width: 620px) {
    .sgprofile-m3-layout {
        gap: 14px;
        font-size: 15px;
    }

    .sgprofile-m3-layout :where(
        .sgprofile-m3-identity-card,
        .sgprofile-m3-edit-card,
        .sgprofile-m3-bio-card,
        .sgprofile-m3-bio-form
    ) {
        padding: 16px;
    }

    .sgprofile-m3-ad-card {
        border-radius: 20px;
    }

    .sgprofile-m3-ad-media {
        border-radius: 14px;
    }

    .sgprofile-m3-ad-media img {
        width: min(100%, 300px);
        min-height: 0;
        max-height: 250px;
        margin-inline: auto;
    }
}

@media (forced-colors: active) {
    .sgviewbiz-m3-tab,
    .sgviewbiz-m3-filter-chip,
    .sgviewbiz-m3-search,
    .sgviewbiz-m3-business-card,
    .sgviewbiz-m3-buyer-card,
    .sgviewbiz-m3-empty {
        border: 1px solid CanvasText;
    }

    .sgviewbiz-m3-tab.is-selected,
    .sgviewbiz-m3-filter-chip.is-selected {
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }
}
@font-face {
  font-family: "Google Sans Text";
  src: url("../fonts/google-sans-text-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Text";
  src: url("../fonts/google-sans-text-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}
:root {
  --m3-font-brand: "Google Sans", "Roboto Flex", Roboto, Arial, sans-serif;
  --m3-font-plain: "Google Sans Text", "Roboto Flex", Roboto, Arial, sans-serif;
  --m3-display-large-size: 57px;
  --m3-display-large-line: 64px;
  --m3-display-medium-size: 45px;
  --m3-display-medium-line: 52px;
  --m3-display-small-size: 36px;
  --m3-display-small-line: 44px;
  --m3-headline-large-size: 32px;
  --m3-headline-large-line: 40px;
  --m3-headline-medium-size: 28px;
  --m3-headline-medium-line: 36px;
  --m3-headline-small-size: 24px;
  --m3-headline-small-line: 32px;
  --m3-title-large-size: 22px;
  --m3-title-large-line: 28px;
  --m3-title-medium-size: 16px;
  --m3-title-medium-line: 24px;
  --m3-title-small-size: 14px;
  --m3-title-small-line: 20px;
  --m3-body-large-size: 16px;
  --m3-body-large-line: 24px;
  --m3-body-medium-size: 14px;
  --m3-body-medium-line: 20px;
  --m3-body-small-size: 12px;
  --m3-body-small-line: 16px;
  --m3-label-large-size: 14px;
  --m3-label-large-line: 20px;
  --m3-label-medium-size: 12px;
  --m3-label-medium-line: 16px;
  --m3-label-small-size: 11px;
  --m3-label-small-line: 16px;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  font-family: var(--m3-font-plain);
  font-size: var(--m3-body-large-size);
  font-weight: 400;
  line-height: var(--m3-body-large-line);
  letter-spacing: 0;
  font-variation-settings: "GRAD" 0, "opsz" 17;
}
h1,
h2,
h3,
h4,
h5,
h6,
.PageTitle {
  margin-block-start: 0;
  color: var(--sg-on-surface);
  font-family: var(--m3-font-brand);
  letter-spacing: 0;
  font-variation-settings: "GRAD" 0, "opsz" 18;
}
h1,
.PageTitle {
  font-size: var(--m3-headline-large-size);
  font-weight: 475;
  line-height: var(--m3-headline-large-line);
}
h2 {
  font-size: var(--m3-headline-medium-size);
  font-weight: 475;
  line-height: var(--m3-headline-medium-line);
}
h3 {
  font-size: var(--m3-headline-small-size);
  font-weight: 475;
  line-height: var(--m3-headline-small-line);
}
h4 {
  font-size: var(--m3-title-large-size);
  font-weight: 400;
  line-height: var(--m3-title-large-line);
}
h5 {
  font-size: var(--m3-title-medium-size);
  font-weight: 500;
  line-height: var(--m3-title-medium-line);
}
h6 {
  font-size: var(--m3-title-small-size);
  font-weight: 500;
  line-height: var(--m3-title-small-line);
}
p,
li,
dd,
dt {
  font-family: var(--m3-font-plain);
  font-size: var(--m3-body-large-size);
  line-height: var(--m3-body-large-line);
  letter-spacing: 0;
}
table,
th,
td,
.table {
  font-family: var(--m3-font-plain);
  font-size: var(--m3-body-medium-size);
  line-height: var(--m3-body-medium-line);
  letter-spacing: 0;
}
small,
.small,
.help-block,
.text-muted {
  font-family: var(--m3-font-plain);
  font-size: var(--m3-body-small-size);
  line-height: var(--m3-body-small-line);
  letter-spacing: 0;
}
button,
.btn,
[role="button"],
label,
.label,
.badge,
.nav > li > a,
.dropdown-menu > li > a,
.pagination > li > a,
.pagination > li > span {
  font-family: var(--m3-font-plain);
  font-size: var(--m3-label-large-size);
  font-weight: 500;
  line-height: var(--m3-label-large-line);
  letter-spacing: 0;
}
input,
select,
textarea,
.form-control {
  font-family: var(--m3-font-plain);
  font-size: var(--m3-body-large-size);
  font-weight: 400;
  line-height: var(--m3-body-large-line);
  letter-spacing: 0;
}
.material-symbols-rounded,
.material-symbols-outlined {
  display: inline-block;
  overflow: hidden;
  width: 1em;
  height: 1em;
  font-family: "Material Symbols Rounded";
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}
[aria-current="page"] > .material-symbols-rounded,
[aria-current="page"] > .material-symbols-outlined,
[aria-pressed="true"] > .material-symbols-rounded,
[aria-pressed="true"] > .material-symbols-outlined,
[aria-selected="true"] > .material-symbols-rounded,
[aria-selected="true"] > .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}
.fa,
.fa::before,
.glyphicon,
.glyphicon::before,
[class^="ion-"],
[class*=" ion-"] {
  font-variation-settings: normal;
}
.fa,
.fa::before {
  font-family: FontAwesome;
}
.glyphicon,
.glyphicon::before {
  font-family: "Glyphicons Halflings";
}
@media (max-width: 600px) {
  h1,
  .PageTitle {
    font-size: var(--m3-headline-medium-size);
    line-height: var(--m3-headline-medium-line);
  }
  h2 {
    font-size: var(--m3-headline-small-size);
    line-height: var(--m3-headline-small-line);
  }
}
/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes — News experience

M3 documentation applied
- Cards: filled/outlined containers, separate actions, adaptive collections.
- Carousel: M3 multi-browse dynamic widths, direct manipulation, scroll snapping,
  labeled controls, stable order, position status, and an accessible View all mode.
- Motion: restores the seven-image notifications-inspired hero morph, its random
  shape/origin/overlap settings, working playback controls, and reduced-motion state.
  The carousel separately retains its current M3 spatial/effects spring behavior.
- Chips: semantic category labels with adequate targets and contrast.
- Buttons/icon buttons: native controls, 48px targets, state layers, clear labels.
- Typography: global M3 brand/plain roles and responsive type scale.
- Accessibility: visible focus, semantic landmarks, Arrow key control, named slides,
  polite position status, 48px targets, reduced motion, and responsive reflow.

Files/components affected
- All Areas/Users/Views/News views.
- Shared _NationalNews and _InternationalNews partials.
- Scoped globally here so News Razor pages contain no page-level style blocks.

Remaining conversion work
- Replace representative category/description content with service-backed models.
- Bind timestamps and interaction counts to authoritative application data.
===============================================================================
*/
.sg-news {
  display: grid;
  gap: 32px;
  width: 100%;
  min-width: 0;
  color: var(--sg-on-surface);
}
.sg-news-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 320px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--sg-primary-container);
  color: var(--sg-on-primary-container);
}
.sg-news-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 64px);
}
.sg-news-kicker {
  margin: 0;
  color: var(--sg-primary);
  font: 500 var(--m3-label-large-size)/var(--m3-label-large-line) var(--m3-font-plain);
}
.sg-news-hero h1 {
  margin: 0;
  font: 475 clamp(40px, 7vw, 72px)/1 var(--m3-font-brand);
  font-variation-settings: "GRAD" 0, "opsz" 18;
}
.sg-news-hero p {
  max-width: 680px;
  margin: 0;
}
.sg-news-hero-art {
  position: relative;
  isolation: isolate;
  min-height: 280px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--sg-primary), #ff6d00);
}
.sg-news-hero-art img {
  position: absolute;
  display: block;
  width: 50%;
  height: 68%;
  border: 2px solid color-mix(in srgb, var(--sg-surface) 48%, transparent);
  object-fit: cover;
  box-shadow: 0 12px 32px rgb(29 27 32 / .22);
  will-change: transform;
}
.sg-news-hero-art img:nth-child(1) {
  z-index: 0;
  top: -30%;
  left: -25%;
  width: 150%;
  height: 160%;
  animation: sg-news-blob-1 6s linear infinite, sg-news-blob-shape-a 6s linear infinite;
}
.sg-news-hero-art img:nth-child(2) {
  z-index: 2;
  top: -24%;
  left: 18%;
  animation: sg-news-blob-2 6s linear infinite, sg-news-blob-shape-b 6s linear infinite;
}
.sg-news-hero-art img:nth-child(3) {
  z-index: 4;
  top: -20%;
  right: -14%;
  animation: sg-news-blob-3 6s linear infinite, sg-news-blob-shape-a 6s linear infinite;
}
.sg-news-hero-art img:nth-child(4) {
  z-index: 1;
  right: -15%;
  bottom: -25%;
  width: 56%;
  height: 76%;
  animation: sg-news-blob-4 6s linear infinite, sg-news-blob-shape-b 6s linear infinite;
}
.sg-news-hero-art img:nth-child(5) {
  z-index: 5;
  bottom: -27%;
  left: 24%;
  width: 52%;
  height: 72%;
  animation: sg-news-blob-5 6s linear infinite, sg-news-blob-shape-a 6s linear infinite;
}
.sg-news-hero-art img:nth-child(6) {
  z-index: 2;
  bottom: -25%;
  left: -12%;
  width: 52%;
  height: 70%;
  animation: sg-news-blob-6 6s linear infinite, sg-news-blob-shape-b 6s linear infinite;
}
.sg-news-hero-art img:nth-child(7) {
  z-index: 6;
  right: 20%;
  bottom: 18%;
  width: 36%;
  height: 52%;
  animation: sg-news-blob-7 6s linear infinite, sg-news-blob-shape-a 6s linear infinite;
}
.sg-news-motion-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--sg-surface);
}
.sg-news-motion-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--sg-outline);
  border-radius: 999px;
  background: var(--sg-surface);
  color: var(--sg-primary);
  font-weight: 650;
}
.sg-news-motion-controls label {
  display: grid;
  grid-template-columns: auto minmax(120px, 240px) auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--sg-on-surface-variant);
  font: 500 var(--m3-label-large-size)/var(--m3-label-large-line) var(--m3-font-plain);
}
.sg-news-motion-controls input {
  accent-color: var(--sg-primary);
}
.sg-news-motion-controls output {
  min-width: 76px;
}
.sg-news-motion-controls details {
  width: 100%;
  border-top: 1px solid var(--sg-outline-variant);
  padding-top: 8px;
}
.sg-news-motion-controls summary {
  width: max-content;
  min-height: 40px;
  color: var(--sg-primary);
  font-weight: 650;
  cursor: pointer;
}
.sg-news-motion-controls details > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.sg-news-motion-controls details label {
  grid-template-columns: 120px minmax(100px, 1fr) 72px;
  width: auto;
  margin: 0;
}
/*
  Six-second M3 Expressive spatial cycle, matched to notifications/v001.mp4.
  42/46% and 92/96% provide spring-like overshoot before each arrangement settles.
*/
@keyframes sg-news-blob-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(94%, 12%, 0) scale(.72) rotate(10deg); }
  46%, 50% { transform: translate3d(86%, 8%, 0) scale(.76) rotate(7deg); }
  92% { transform: translate3d(-8%, -4%, 0) scale(1.04) rotate(-3deg); }
  96% { transform: translate3d(2%, 1%, 0) scale(.99) rotate(1deg); }
}
@keyframes sg-news-blob-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(-82%, 82%, 0) scale(1.28) rotate(-12deg); }
  46%, 50% { transform: translate3d(-74%, 74%, 0) scale(1.2) rotate(-8deg); }
  92% { transform: translate3d(7%, -6%, 0) scale(.96) rotate(3deg); }
  96% { transform: translate3d(-2%, 2%, 0) scale(1.01) rotate(-1deg); }
}
@keyframes sg-news-blob-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(-42%, 88%, 0) scale(.7) rotate(15deg); }
  46%, 50% { transform: translate3d(-38%, 80%, 0) scale(.76) rotate(10deg); }
  92% { transform: translate3d(6%, -5%, 0) scale(1.04) rotate(-3deg); }
  96% { transform: translate3d(-1%, 1%, 0) scale(.99) rotate(1deg); }
}
@keyframes sg-news-blob-4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(-86%, -74%, 0) scale(1.16) rotate(-9deg); }
  46%, 50% { transform: translate3d(-78%, -68%, 0) scale(1.1) rotate(-6deg); }
  92% { transform: translate3d(7%, 5%, 0) scale(1.04) rotate(3deg); }
  96% { transform: translate3d(-2%, -1%, 0) scale(.99) rotate(-1deg); }
}
@keyframes sg-news-blob-5 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(76%, -112%, 0) scale(.7) rotate(13deg); }
  46%, 50% { transform: translate3d(68%, -102%, 0) scale(.76) rotate(8deg); }
  92% { transform: translate3d(-6%, 7%, 0) scale(1.05) rotate(-3deg); }
  96% { transform: translate3d(2%, -2%, 0) scale(.99) rotate(1deg); }
}
@keyframes sg-news-blob-6 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(126%, -68%, 0) scale(1.12) rotate(-14deg); }
  46%, 50% { transform: translate3d(116%, -62%, 0) scale(1.06) rotate(-9deg); }
  92% { transform: translate3d(-7%, 5%, 0) scale(1.04) rotate(3deg); }
  96% { transform: translate3d(2%, -1%, 0) scale(.99) rotate(-1deg); }
}
@keyframes sg-news-blob-7 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  42% { transform: translate3d(-154%, -138%, 0) scale(.68) rotate(16deg); }
  46%, 50% { transform: translate3d(-142%, -126%, 0) scale(.74) rotate(10deg); }
  92% { transform: translate3d(7%, 7%, 0) scale(1.06) rotate(-4deg); }
  96% { transform: translate3d(-2%, -2%, 0) scale(.99) rotate(1deg); }
}
@keyframes sg-news-blob-shape-a {
  0%, 100% { border-radius: 48% 52% 38% 62% / 58% 36% 64% 42%; }
  42% { border-radius: 26% 74% 66% 34% / 72% 28% 72% 28%; }
  46%, 50% { border-radius: 32% 68% 60% 40% / 66% 34% 68% 32%; }
  92% { border-radius: 54% 46% 34% 66% / 52% 42% 58% 48%; }
  96% { border-radius: 46% 54% 40% 60% / 60% 34% 66% 40%; }
}
@keyframes sg-news-blob-shape-b {
  0%, 100% { border-radius: 64% 36% 56% 44% / 34% 66% 34% 66%; }
  42% { border-radius: 38% 62% 26% 74% / 70% 30% 70% 30%; }
  46%, 50% { border-radius: 44% 56% 32% 68% / 64% 36% 64% 36%; }
  92% { border-radius: 68% 32% 62% 38% / 28% 72% 28% 72%; }
  96% { border-radius: 62% 38% 54% 46% / 36% 64% 36% 64%; }
}
.sg-news-toolbar,
.sg-news-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sg-news-section {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.sg-news-carousel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sg-carousel-controls > div {
  display: flex;
  gap: 8px;
}
.sg-news-carousel-button,
.sg-news-view-all {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--sg-outline);
  border-radius: 999px;
  background: transparent;
  color: var(--sg-primary);
  font: 500 var(--m3-label-large-size)/var(--m3-label-large-line) var(--m3-font-plain);
  cursor: pointer;
}
.sg-news-view-all {
  padding-inline: 20px;
  justify-self: end;
  margin-inline-end: 4px;
  border-color: transparent;
  background: transparent;
}
.sg-news-carousel-button:hover,
.sg-news-view-all:hover,
.sg-news-carousel-button:focus-visible,
.sg-news-view-all:focus-visible,
.sg-news-view-all[aria-pressed="true"] {
  background: var(--sg-secondary-container);
  color: var(--sg-on-secondary-container);
}
.sg-news-carousel-button:disabled {
  border-color: transparent;
  color: color-mix(in srgb, var(--sg-on-surface) 38%, transparent);
  cursor: default;
}
.sg-news-carousel-shell {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 20px;
  border-radius: 24px;
  background: var(--sg-surface-container);
}
.sg-news-section h2 {
  margin: 0;
  font-size: var(--m3-headline-medium-size);
  line-height: var(--m3-headline-medium-line);
}
.sg-news-link,
.sg-news-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--sg-primary);
  color: var(--sg-on-primary);
  font: 500 var(--m3-label-large-size)/var(--m3-label-large-line) var(--m3-font-plain);
  text-decoration: none;
}
.sg-news-link.tonal,
.sg-news-button.tonal {
  background: var(--sg-secondary-container);
  color: var(--sg-on-secondary-container);
}
.sg-news-link:hover,
.sg-news-link:focus,
.sg-news-button:hover,
.sg-news-button:focus {
  color: var(--sg-on-primary);
  text-decoration: none;
  filter: brightness(.96);
}
.sg-news-link.tonal:hover,
.sg-news-link.tonal:focus {
  color: var(--sg-on-secondary-container);
}
.sg-news-carousel {
  display: flex;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 12%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  padding: 16px 12%;
}
.sg-news-carousel > .sg-news-card {
  flex: 0 0 clamp(260px, 30%, 380px);
  min-height: 300px;
  scroll-snap-align: center;
  transform: scale(.92);
  transform-origin: center;
  opacity: .82;
  transition:
    flex-basis var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
    transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
    border-radius var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
    opacity var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
    background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
    box-shadow var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}
.sg-news-carousel > .sg-news-card.is-centered {
  flex-basis: clamp(360px, 52%, 620px);
  transform: scale(1);
  opacity: 1;
  border-radius: 32px;
  box-shadow: 0 12px 32px rgb(29 27 32 / .16);
}
.sg-news-carousel > .sg-news-card:hover {
  transform: scale(.95) translateY(-2px);
}
.sg-news-carousel > .sg-news-card.is-centered:hover {
  transform: scale(1) translateY(-2px);
}
.sg-news-carousel-status {
  margin: 0;
  padding-inline: 4px;
  color: var(--sg-on-surface-variant);
  font: 500 var(--m3-label-medium-size)/var(--m3-label-medium-line) var(--m3-font-plain);
}
.sg-news-carousel-shell.show-all .sg-news-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
.sg-news-carousel-shell.show-all .sg-news-card {
  width: auto;
  min-height: 0;
  transform: none;
  opacity: 1;
}
.sg-news-carousel-shell.show-all .sg-news-carousel-status {
  display: none;
}
.sg-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sg-news-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--sg-outline-variant);
  border-radius: 24px;
  background: var(--sg-surface);
  color: var(--sg-on-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / .06);
  transition:
    transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
    border-radius var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
    background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
    box-shadow var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}
.sg-news-card:hover {
  border-radius: 28px;
  background: color-mix(in srgb, var(--sg-surface) 92%, var(--sg-on-surface));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / .12);
}
.sg-news-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sg-surface-container);
}
.sg-news-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sg-news-card-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
}
.sg-news-card-title {
  margin: 0;
  color: var(--sg-on-surface);
  font: 475 var(--m3-title-large-size)/var(--m3-title-large-line) var(--m3-font-brand);
}
.sg-news-card-title a {
  color: inherit;
  text-decoration: none;
}
.sg-news-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sg-news-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--sg-on-surface-variant);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sg-news-card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.sg-news-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sg-outline);
  border-radius: 10px;
  color: var(--sg-on-surface-variant);
  font: 500 var(--m3-label-large-size)/var(--m3-label-large-line) var(--m3-font-plain);
}
.sg-news-empty {
  grid-column: 1 / -1;
  padding: 32px;
  border-radius: 24px;
  background: var(--sg-surface-container);
  color: var(--sg-on-surface-variant);
  text-align: center;
}
.sg-news-detail {
  display: grid;
  gap: 24px;
  width: min(920px, 100%);
  margin-inline: auto;
}
.sg-news-detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sg-news-detail article {
  overflow: hidden;
  border: 1px solid var(--sg-outline-variant);
  border-radius: 32px;
  background: var(--sg-surface);
}
.sg-news-detail-image {
  display: block;
  width: 100%;
  max-height: 540px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--sg-surface-container);
}
.sg-news-detail-copy {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 5vw, 56px);
}
.sg-news-detail-copy h1 {
  margin: 0;
  font: 475 clamp(36px, 6vw, 64px)/1.08 var(--m3-font-brand);
}
.sg-news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--sg-on-surface-variant);
}
.sg-news-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sg-news-prose {
  color: var(--sg-on-surface);
  font-size: 18px;
  line-height: 30px;
  white-space: pre-line;
}
.sg-news-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sg-news-comments {
  display: grid;
  gap: 12px;
}
.sg-news-comment {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: var(--sg-surface-container);
}
.sg-news-comment img,
.sg-news-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sg-primary-container);
  color: var(--sg-on-primary-container);
  font-weight: 700;
}
.sg-news-comment-body {
  min-width: 0;
}
.sg-news-comment-body p {
  margin: 4px 0;
}
.sg-news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sg-news :where(a, button):focus-visible {
  outline: 3px solid var(--sg-primary);
  outline-offset: 3px;
}
@media (max-width: 1000px) {
  .sg-news-grid,
  .sg-news-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sg-news-carousel > .sg-news-card {
    flex-basis: 38%;
  }
  .sg-news-carousel > .sg-news-card.is-centered {
    flex-basis: 64%;
  }
  .sg-news-carousel-shell.show-all .sg-news-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .sg-news {
    gap: 24px;
  }
  .sg-news-hero {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }
  .sg-news-hero-art {
    min-height: 220px;
  }
  .sg-news-motion-controls label {
    grid-template-columns: 1fr auto;
    width: 100%;
    margin-left: 0;
  }
  .sg-news-motion-controls input {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .sg-news-motion-controls details > div {
    grid-template-columns: 1fr;
  }
  .sg-news-motion-controls details label {
    grid-template-columns: 1fr auto;
  }
  .sg-news-toolbar,
  .sg-news-section-head,
  .sg-news-detail-nav {
    align-items: flex-start;
    flex-direction: column;
  }
  .sg-news-section-head {
    width: 100%;
  }
  .sg-news-carousel-shell {
    padding: 12px;
  }
  .sg-news-carousel {
    scroll-padding-inline: 7%;
    padding-inline: 7%;
  }
  .sg-news-carousel > .sg-news-card {
    flex-basis: 68%;
  }
  .sg-news-carousel > .sg-news-card.is-centered {
    flex-basis: 86%;
  }
  .sg-news-carousel-shell.show-all .sg-news-carousel {
    grid-template-columns: 1fr;
  }
  .sg-news-grid,
  .sg-news-category-grid {
    grid-template-columns: 1fr;
  }
  .sg-news-detail article {
    border-radius: 24px;
  }
}
@media (max-width: 400px) {
  .sg-news-carousel > .sg-news-card {
    flex-basis: 72%;
  }
  .sg-news-carousel > .sg-news-card.is-centered {
    flex-basis: 92%;
  }
  .sg-news-card-body,
  .sg-news-detail-copy {
    padding: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sg-news-card {
    transition: none;
  }
  .sg-news-hero-art img {
    animation: none;
    will-change: auto;
  }
  .sg-news-carousel {
    scroll-behavior: auto;
  }
  .sg-news-card:hover {
    transform: none;
  }
}


/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes — shared _SgTemplate shell
- SavvyGreat original application implementation. All SavvyGreat-specific rights
  remain with SavvyGreat; Material guidance and open-source dependencies retain
  their respective Google/open-source notices and licenses.
- Moved from the Razor inline <style> block into the single site stylesheet.
- Covers M3 layout, navigation, flyouts, tokens, states, responsive behavior,
  accessibility focus, dark theme, and reduced-motion compatibility.
- Source link: /CodeBehind/css/SgStyleCss.css
===============================================================================
*/
:root {
    --sgm3-rail: 88px;
    --sgm3-top: 72px;
    --m3-font-brand: "Google Sans", "Roboto Flex", Roboto, Arial, sans-serif;
    --m3-font-plain: "Google Sans Text", "Roboto Flex", Roboto, Arial, sans-serif;
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #eaddff;
    --md-sys-color-on-primary-container: #21005d;
    --md-sys-color-secondary: #625b71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1d192b;
    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd8e4;
    --md-sys-color-on-tertiary-container: #31111d;
    --md-sys-color-surface: #fffbfe;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-on-surface-variant: #49454f;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-error: #b3261e;
    --md-sys-shape-full: 999px;
    --md-sys-shape-large: 24px;
    --md-sys-shape-medium: 12px;
    --md-sys-easing-emphasized: cubic-bezier(.2,0,0,1);
    --md-sys-motion-spatial-default-duration: 450ms;
    --md-sys-motion-effects-default-duration: 180ms;
    --md-sys-motion-spatial-default: cubic-bezier(.2,0,0,1);
    --md-sys-motion-effects-default: linear;
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        /* Mobile M3 Expressive default spatial spring: damping .8, stiffness 380. */
        --md-sys-motion-spatial-default: linear(0, .0913, .2802, .4832, .6598, .7958, .8912, .9526, .9883, 1.0066, 1.014, 1.0151, 1.0131, 1.0101, 1.0071, 1.0046, 1.0027, 1.0014, 1);
        /* Mobile M3 default effects spring: non-bouncy, stiffness 1600. */
        --md-sys-motion-effects-default: linear(0, .1219, .3374, .5372, .6916, .8009, .8743, .922, .9523, .9711, .9826, .9897, 1);
    }
}

/* ==========================================================================
   Temporary repair-stage marker: Design M3 Changes - linked business tools
   Owner: SavvyGreat

   Layout/responsive: adaptive heroes, cards, wrapping toolbars, field grids,
   overflow-safe tables, all-visible mobile actions, and viewport-safe dialogs.
   Components/states: filters, buttons, icon buttons, chips, checkboxes, fields,
   data tables, empty/supporting/status surfaces, progress, and native dialogs.
   Color/tokens: shared --md-sys-color-* semantic roles only.
   Typography: shared M3 brand/plain families and display/title/body/label roles.
   Shape/elevation: shared medium/large/full shapes and M3 surface elevation.
   Spacing/sizing: 8dp-derived rhythm and minimum 44px/48px interaction targets.
   Icons/imagery: Material Symbols Rounded, responsive thumbnails, and placeholders.
   Motion/interactions: emphasized easing, state layers, visible progress, dialog
   entry, focus-visible treatment, and reduced-motion fallback.
   Accessibility: native controls/dialogs, labelled regions, semantic tables,
   live loading/error states, keyboard focus, touch-safe targets, and contrast.
   Files/components: SGBizApp, CreateOwnGrid, _ItemPublishGrid, _OrderSection,
   _OrderGrid, Print/Index, AppAccounts/AccFinYear/Index, and SgStyleCss.
   Compatibility: existing MVC routes, IDs, form names, AJAX payloads, session
   data, order transitions, and financial-year workflows remain unchanged.
   Remaining conversion: secondary edit/create modals opened from inventory tools
   retain their current behavior until their dedicated page conversion.
   ========================================================================== */

.sgbiz-linked-m3,
.sgbiz-linked-m3 *,
.sgbiz-linked-m3 *::before,
.sgbiz-linked-m3 *::after,
.sgbiz-linked-m3-dialog,
.sgbiz-linked-m3-dialog *,
.sgbiz-linked-m3-dialog *::before,
.sgbiz-linked-m3-dialog *::after,
.sgbiz-linked-m3-queue,
.sgbiz-linked-m3-queue *,
.sgbiz-linked-m3-queue *::before,
.sgbiz-linked-m3-queue *::after,
.sgbiz-order-m3-grid,
.sgbiz-order-m3-grid *,
.sgbiz-order-m3-grid *::before,
.sgbiz-order-m3-grid *::after {
    box-sizing: border-box;
}

.sgbiz-linked-m3,
.sgbiz-linked-m3-dialog,
.sgbiz-linked-m3-queue,
.sgbiz-order-m3-grid {
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
}

.sgbiz-linked-m3 {
    display: grid;
    gap: 24px;
    min-width: 0;
    padding: clamp(16px, 3vw, 28px);
}

.sgbiz-linked-m3-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: clamp(24px, 4vw, 36px);
    overflow: hidden;
    border-radius: 28px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbiz-linked-m3-hero h2 {
    margin: 0 0 8px;
    color: inherit;
    font: 475 clamp(30px, 5vw, 44px)/1.14 var(--m3-font-brand);
    letter-spacing: -.4px;
}

.sgbiz-linked-m3-hero p {
    max-width: 68ch;
    margin: 0;
    color: inherit;
    font: 400 16px/24px var(--m3-font-plain);
}

.sgbiz-linked-m3-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding: 0;
    border-radius: 22px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
    font-size: 36px;
    line-height: 1;
    text-align: center;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 36;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-linked-m3-overline {
    display: block;
    margin-bottom: 6px;
    color: inherit;
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgbiz-linked-m3-button,
.sgbiz-linked-m3-icon-button,
.sgbiz-order-m3-filter,
.sgbiz-order-m3-invoice {
    position: relative;
    isolation: isolate;
    border: 0;
    font-family: var(--m3-font-plain);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sgbiz-linked-m3-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    font: 600 14px/20px var(--m3-font-plain);
    letter-spacing: .1px;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 180ms linear,
        box-shadow 200ms var(--md-sys-easing-emphasized),
        color 180ms linear,
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-linked-m3-button::before,
.sgbiz-linked-m3-icon-button::before,
.sgbiz-order-m3-filter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity 150ms linear;
}

.sgbiz-linked-m3-button:hover::before,
.sgbiz-linked-m3-icon-button:hover::before,
.sgbiz-order-m3-filter:hover::before {
    opacity: .08;
}

.sgbiz-linked-m3-button:active,
.sgbiz-linked-m3-icon-button:active,
.sgbiz-order-m3-filter:active {
    transform: scale(.97);
}

.sgbiz-linked-m3-button:active::before,
.sgbiz-linked-m3-icon-button:active::before,
.sgbiz-order-m3-filter:active::before {
    opacity: .12;
}

.sgbiz-linked-m3-button-filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent);
}

.sgbiz-linked-m3-button-filled:hover,
.sgbiz-linked-m3-button-filled:focus {
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
}

.sgbiz-linked-m3-button-tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbiz-linked-m3-button-tonal:hover,
.sgbiz-linked-m3-button-tonal:focus {
    color: var(--md-sys-color-on-secondary-container);
    text-decoration: none;
}

.sgbiz-linked-m3-button-text {
    background: transparent;
    color: var(--md-sys-color-primary);
}

.sgbiz-linked-m3-button-error {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-primary);
}

.sgbiz-linked-m3-button:disabled,
.sgbiz-linked-m3-icon-button:disabled,
.sgbiz-order-m3-filter:disabled {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    box-shadow: none;
    cursor: not-allowed;
}

.sgbiz-linked-m3-button .material-symbols-rounded {
    flex: none;
    font-size: 20px;
}

.sgbiz-linked-m3-icon-button {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-primary);
    transition:
        background-color 180ms linear,
        color 180ms linear,
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-linked-m3-icon-button .material-symbols-rounded {
    font-size: 24px;
}

.sgbiz-linked-m3-icon-button-error {
    color: var(--md-sys-color-error);
}

.sgbiz-linked-m3-button:focus-visible,
.sgbiz-linked-m3-icon-button:focus-visible,
.sgbiz-order-m3-filter:focus-visible,
.sgbiz-order-m3-invoice:focus-visible,
.sgbiz-linked-m3 :where(input, select, textarea, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgbiz-linked-m3-status {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 500 14px/20px var(--m3-font-plain);
}

.sgbiz-linked-m3-status.is-error,
.sgbiz-linked-m3-error {
    background: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

.sgbiz-linked-m3-status.is-success {
    background: color-mix(in srgb, #386a20 16%, var(--md-sys-color-surface));
    color: color-mix(in srgb, #386a20 86%, var(--md-sys-color-on-surface));
}

.sgbiz-linked-m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/18px var(--m3-font-plain);
    white-space: nowrap;
}

.sgbiz-linked-m3-chip .material-symbols-rounded {
    flex: none;
    font-size: 17px;
}

.sgbiz-linked-m3-chip.is-success {
    border-color: color-mix(in srgb, #386a20 34%, transparent);
    background: color-mix(in srgb, #386a20 12%, var(--md-sys-color-surface));
    color: color-mix(in srgb, #386a20 88%, var(--md-sys-color-on-surface));
}

.sgbiz-linked-m3-chip.is-error {
    border-color: color-mix(in srgb, var(--md-sys-color-error) 34%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

.sgbiz-linked-m3-chip.is-warning {
    border-color: color-mix(in srgb, #8a5100 34%, transparent);
    background: color-mix(in srgb, #ffdea5 62%, var(--md-sys-color-surface));
    color: #5f3700;
}

.sgbiz-linked-m3-table-region {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sgbiz-linked-m3-table-region::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sgbiz-linked-m3-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--md-sys-color-on-surface);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-linked-m3-wide-table {
    min-width: 2300px;
}

.sgbiz-linked-m3-table th,
.sgbiz-linked-m3-table td {
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    text-align: left;
    vertical-align: middle;
}

.sgbiz-linked-m3-table th {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font: 600 13px/18px var(--m3-font-plain);
    white-space: nowrap;
}

.sgbiz-linked-m3-table tbody tr {
    background: var(--md-sys-color-surface);
    transition: background-color 150ms linear;
}

.sgbiz-linked-m3-table tbody tr:hover {
    background: var(--md-sys-color-surface-container-low);
}

.sgbiz-linked-m3-table tbody tr:last-child td,
.sgbiz-linked-m3-table tfoot tr:last-child > * {
    border-bottom: 0;
}

.sgbiz-linked-m3-table tfoot {
    background: var(--md-sys-color-surface-container);
}

.sgbiz-linked-m3-value {
    color: var(--md-sys-color-primary);
    font-weight: 700;
}

.sgbiz-linked-m3-thumbnail {
    display: block;
    width: 64px;
    height: 64px;
    padding: 4px;
    object-fit: cover;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container-low);
}

.sgbiz-linked-m3-image-placeholder {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 28px;
}

.sgbiz-linked-m3-icon-actions,
.sgbiz-accounts-m3-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.sgbiz-linked-m3-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 180px;
    padding: 28px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}

.sgbiz-linked-m3-empty > .material-symbols-rounded {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
}

.sgbiz-linked-m3-empty h3,
.sgbiz-linked-m3-supporting h3 {
    margin: 0 0 4px;
    color: var(--md-sys-color-on-surface);
    font: 475 20px/28px var(--m3-font-brand);
}

.sgbiz-linked-m3-empty p,
.sgbiz-linked-m3-supporting p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-linked-m3-supporting {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-linked-m3-supporting > .material-symbols-rounded {
    flex: none;
    color: var(--md-sys-color-primary);
    font-size: 24px;
}

.sgbiz-linked-m3-supporting strong {
    display: block;
    margin-bottom: 3px;
    font: 600 14px/20px var(--m3-font-plain);
}

.sgbiz-linked-m3-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 600 13px/18px var(--m3-font-plain);
}

.sgbiz-linked-m3-field :where(input, select, textarea),
.sgbiz-order-m3-readonly {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 15px/22px var(--m3-font-plain);
    box-shadow: none;
    transition:
        border-color 150ms linear,
        box-shadow 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-linked-m3-field textarea {
    min-height: 108px;
    resize: vertical;
}

.sgbiz-linked-m3-field :where(input, select, textarea):hover {
    border-color: var(--md-sys-color-on-surface);
}

.sgbiz-linked-m3-field :where(input, select, textarea):focus {
    border-color: var(--md-sys-color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
}

.sgbiz-linked-m3-field small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 12px/17px var(--m3-font-plain);
}

.sgbiz-linked-m3-readonly-field {
    display: grid;
    align-content: center;
    gap: 7px;
    min-height: 79px;
    padding: 12px 14px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
}

.sgbiz-linked-m3-readonly-field > span {
    color: var(--md-sys-color-on-surface-variant);
    font: 600 13px/18px var(--m3-font-plain);
}

.sgbiz-linked-m3-readonly-field > strong {
    font: 500 15px/22px var(--m3-font-plain);
}

.sgbiz-linked-m3-checkbox {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: -10px;
    cursor: pointer;
}

.sgbiz-linked-m3-checkbox input {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--md-sys-color-on-surface-variant);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.sgbiz-linked-m3-checkbox > .material-symbols-rounded {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--md-sys-color-on-primary);
    font-size: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.sgbiz-linked-m3-checkbox input:checked {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
}

.sgbiz-linked-m3-checkbox input:checked + .material-symbols-rounded {
    opacity: 1;
}

.sgbiz-linked-m3-checkbox input:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 4px;
}

.sgbiz-linked-m3-visually-hidden,
.sgbiz-linked-m3-token {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.sgbiz-linked-m3-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 13px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 700 14px/20px var(--m3-font-plain);
}

.sgbiz-linked-m3-queue {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: clamp(16px, 3vw, 24px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
}

.sgbiz-linked-m3-queue-heading,
.sgbiz-print-m3-section-heading,
.sgbiz-accounts-m3-card-heading,
.sgbiz-order-m3-grid-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.sgbiz-linked-m3-queue-heading h3,
.sgbiz-print-m3-section-heading h3,
.sgbiz-accounts-m3-card-heading h3,
.sgbiz-order-m3-grid-heading h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 24px/32px var(--m3-font-brand);
}

.sgbiz-linked-m3-queue-actions,
.sgbiz-linked-m3-dialog-actions,
.sgbiz-accounts-m3-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 18px;
}

.sgbiz-linked-m3-dialog {
    width: min(900px, calc(100vw - 32px));
    max-width: none;
    max-height: min(860px, calc(100dvh - 32px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent),
        0 2px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
}

.sgbiz-linked-m3-dialog::backdrop {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 44%, transparent);
    backdrop-filter: blur(2px);
}

.sgbiz-linked-m3-dialog[open] {
    animation: sgbiz-linked-m3-dialog-enter 260ms var(--md-sys-easing-emphasized);
}

.sgbiz-linked-m3-dialog-container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(860px, calc(100dvh - 32px));
}

.sgbiz-linked-m3-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgbiz-linked-m3-dialog-header h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 28px/36px var(--m3-font-brand);
}

.sgbiz-linked-m3-dialog-content {
    display: grid;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sgbiz-linked-m3-dialog-content::-webkit-scrollbar {
    display: none;
}

.sgbiz-linked-m3-dialog-actions {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.sgbiz-linked-m3-error {
    min-height: 0;
    padding: 0;
    font: 500 13px/19px var(--m3-font-plain);
}

.sgbiz-linked-m3-error:empty {
    display: none;
}

.sgbiz-linked-m3-inline-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 180px;
    padding: 24px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 14px/20px var(--m3-font-plain);
}

.sgbiz-order-m3-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgbiz-order-m3-filter {
    min-height: 44px;
    padding: 0 16px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 13px/18px var(--m3-font-plain);
    transition:
        background-color 180ms linear,
        color 180ms linear,
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-order-m3-filter[aria-pressed="true"] {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgbiz-order-m3-grid-container {
    min-width: 0;
}

.sgbiz-order-m3-unselected {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 180px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}

.sgbiz-order-m3-unselected > .material-symbols-rounded {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 28;
}

.sgbiz-order-m3-unselected h3 {
    margin: 0 0 4px;
    color: var(--md-sys-color-on-surface);
    font: 475 22px/28px var(--m3-font-brand);
}

.sgbiz-order-m3-unselected p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-order-m3-grid {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.sgbiz-order-m3-grid-heading {
    padding-inline: 4px;
}

.sgbiz-order-m3-grid-heading > .material-symbols-rounded,
.sgbiz-accounts-m3-card-heading > .material-symbols-rounded {
    flex: none;
    color: var(--md-sys-color-primary);
    font-size: 30px;
}

.sgbiz-order-m3-invoice {
    min-height: 44px;
    padding: 0;
    background: transparent;
    color: var(--md-sys-color-primary);
    font: 600 14px/20px var(--m3-font-plain);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sgbiz-order-m3-metadata {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.sgbiz-order-m3-metadata > div {
    min-width: 0;
    padding: 14px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container-low);
}

.sgbiz-order-m3-metadata dt {
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/17px var(--m3-font-plain);
}

.sgbiz-order-m3-metadata dd {
    margin: 4px 0 0;
    color: var(--md-sys-color-on-surface);
    font: 500 15px/21px var(--m3-font-plain);
    overflow-wrap: anywhere;
}

.sgbiz-order-m3-status-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
    gap: 16px;
}

.sgbiz-order-m3-readonly {
    min-width: 180px;
    min-height: 44px;
    padding: 9px 12px;
}

.sgbiz-order-m3-confirm-dialog {
    width: min(560px, calc(100vw - 32px));
}

.sgbiz-print-m3-section,
.sgbiz-accounts-m3-card {
    display: grid;
    gap: 18px;
    min-width: 0;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.sgbiz-print-m3-section-heading .sgbiz-linked-m3-overline,
.sgbiz-accounts-m3-card-heading .sgbiz-linked-m3-overline,
.sgbiz-linked-m3-queue-heading .sgbiz-linked-m3-overline,
.sgbiz-order-m3-grid-heading .sgbiz-linked-m3-overline {
    color: var(--md-sys-color-primary);
}

.sgbiz-print-m3-dialog {
    width: min(980px, calc(100vw - 32px));
}

.sgbiz-accounts-m3-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.sgbiz-accounts-m3-create-form {
    display: grid;
    gap: 4px;
}

.sgbiz-accounts-m3-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sgbiz-accounts-m3-form-actions {
    padding-top: 20px;
}

.sgbiz-accounts-m3-row-actions form {
    margin: 0;
}

.sgbiz-accounts-m3-row-actions .sgbiz-linked-m3-button {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 12px;
}

.sgbiz-accounts-m3-guidance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sgbiz-accounts-m3-guidance .sgbiz-linked-m3-supporting {
    padding: 20px;
}

.sgbiz-accounts-m3-guidance dl {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
}

.sgbiz-accounts-m3-guidance dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
}

.sgbiz-accounts-m3-guidance dt {
    font-weight: 700;
}

.sgbiz-accounts-m3-guidance dd {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
}

.sgbiz-accounts-m3-guidance ol {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding-left: 22px;
    color: var(--md-sys-color-on-surface-variant);
}

@keyframes sgbiz-linked-m3-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 760px) {
    .sgbiz-linked-m3 {
        gap: 16px;
        padding: 12px;
    }

    .sgbiz-linked-m3-hero {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 20px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-linked-m3-hero-icon {
        grid-row: 1;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 28px;
    }

    .sgbiz-order-m3-filters {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }

    .sgbiz-order-m3-filter {
        width: 100%;
        padding-inline: 10px;
    }

    /*
       Temporary repair-stage marker: Design M3 Changes - mobile order records
       - Retains semantic table markup while presenting each row as a compact record card.
       - Invoice date is omitted; labels identify the four remaining fields without
         depending on column position or color.
    */
    .sgbiz-order-m3-grid .sgbiz-linked-m3-table-region {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .sgbiz-order-m3-table,
    .sgbiz-order-m3-table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .sgbiz-order-m3-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sgbiz-order-m3-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
        padding: 16px;
        overflow: hidden;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 20px;
        background: var(--md-sys-color-surface);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
    }

    .sgbiz-order-m3-table tbody td {
        display: grid;
        align-content: start;
        justify-items: start;
        gap: 5px;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .sgbiz-order-m3-table tbody td::before {
        content: attr(data-label);
        color: var(--md-sys-color-on-surface-variant);
        font: 600 11px/16px var(--m3-font-plain);
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .sgbiz-order-m3-table .sgbiz-order-m3-invoice-date {
        display: none;
    }

    .sgbiz-order-m3-table .sgbiz-linked-m3-chip {
        width: fit-content;
        max-width: 100%;
    }

    .sgbiz-order-m3-table td[data-label="Action"] {
        align-content: end;
    }

    .sgbiz-order-m3-table td[data-label="Action"] .sgbiz-linked-m3-button {
        width: 100%;
    }

    .sgbiz-linked-m3-queue-heading,
    .sgbiz-print-m3-section-heading,
    .sgbiz-accounts-m3-card-heading,
    .sgbiz-order-m3-grid-heading {
        align-items: flex-start;
    }

    .sgbiz-order-m3-metadata,
    .sgbiz-order-m3-status-control,
    .sgbiz-accounts-m3-field-grid,
    .sgbiz-accounts-m3-guidance {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-accounts-m3-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-accounts-m3-form > .sgbiz-linked-m3-button {
        width: 100%;
    }

    .sgbiz-linked-m3-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-linked-m3-dialog-container {
        max-height: calc(100dvh - 16px);
    }

    .sgbiz-linked-m3-dialog-header,
    .sgbiz-linked-m3-dialog-content,
    .sgbiz-linked-m3-dialog-actions {
        padding-inline: 18px;
    }

    .sgbiz-linked-m3-dialog-actions {
        flex-wrap: wrap;
    }

    .sgbiz-linked-m3-dialog-actions .sgbiz-linked-m3-button {
        flex: 1 1 auto;
    }

    .sgbiz-accounts-m3-guidance dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

@media (max-width: 480px) {
    .sgbiz-linked-m3-empty,
    .sgbiz-linked-m3-supporting {
        align-items: flex-start;
    }

    .sgbiz-linked-m3-queue-heading,
    .sgbiz-print-m3-section-heading,
    .sgbiz-accounts-m3-card-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-print-m3-section-heading .sgbiz-linked-m3-button {
        width: 100%;
    }

    .sgbiz-linked-m3-queue-actions .sgbiz-linked-m3-button,
    .sgbiz-accounts-m3-form-actions .sgbiz-linked-m3-button {
        width: 100%;
    }

    .sgbiz-order-m3-unselected {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .sgbiz-order-m3-table tbody tr {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .sgbiz-print-m3,
    .sgbiz-print-m3-section,
    .sgbiz-print-m3-document {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .sgbiz-print-m3-screen-only,
    .sgbiz-print-m3 button,
    .sgbiz-print-m3 dialog:not([open]) {
        display: none !important;
    }

    .sgbiz-print-m3-section-heading {
        display: block !important;
        margin-bottom: 16px;
    }

    .sgbiz-print-m3 .sgbiz-linked-m3-table-region,
    .sgbiz-print-m3 .sgbiz-linked-m3-table {
        overflow: visible !important;
        border-color: #777 !important;
        color: #000 !important;
    }

    .sgbiz-print-m3 .sgbiz-linked-m3-table {
        min-width: 0 !important;
        font-size: 10pt !important;
    }

    .sgbiz-print-m3 .sgbiz-linked-m3-table th,
    .sgbiz-print-m3 .sgbiz-linked-m3-table td {
        padding: 6px 8px !important;
        border-color: #aaa !important;
        background: #fff !important;
        color: #000 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgbiz-linked-m3 *,
    .sgbiz-linked-m3 *::before,
    .sgbiz-linked-m3 *::after,
    .sgbiz-linked-m3-dialog,
    .sgbiz-linked-m3-dialog *,
    .sgbiz-linked-m3-dialog *::before,
    .sgbiz-linked-m3-dialog *::after,
    .sgbiz-linked-m3-queue *,
    .sgbiz-linked-m3-queue *::before,
    .sgbiz-linked-m3-queue *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}
html.sgm3-dark {
    color-scheme: dark;
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #eaddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-container: #ffd8e4;
    --md-sys-color-surface: #141218;
    --md-sys-color-surface-container-low: #1d1b20;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-high: #2b2930;
    --md-sys-color-on-surface: #e6e0e9;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454f;
    --md-sys-color-error: #f2b8b5;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body.sgm3-app {
    margin: 0;
    overflow-x: hidden;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 16px/24px var(--m3-font-plain);
}
body.sgm3-no-motion *, body.sgm3-no-motion *::before, body.sgm3-no-motion *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
}
.material-symbols-rounded {
    display: inline-block;
    overflow: hidden;
    width: 1em;
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
    transition: font-variation-settings .2s var(--md-sys-easing-emphasized);
}
button, input, select, textarea { font: inherit; }
a { color: var(--md-sys-color-primary); }
.sgm3-skip {
    position: fixed; top: 8px; left: 16px; z-index: 1000;
    transform: translateY(-160%); padding: 10px 16px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-on-surface); color: var(--md-sys-color-surface);
    transition: transform .2s var(--md-sys-easing-emphasized);
}
.sgm3-skip:focus { transform: none; }
.sgm3-rail {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    display: flex; flex-direction: column; justify-content: space-between;
    width: var(--sgm3-rail); height: 100%; padding: 8px 6px;
    overflow: hidden auto; scrollbar-width: none;
    background: var(--md-sys-color-surface-container);
    transition: width .35s var(--md-sys-easing-emphasized), transform .35s var(--md-sys-easing-emphasized);
}
.sgm3-rail::-webkit-scrollbar { display: none; }
.sgm3-nav { display: grid; gap: 4px; }
.sgm3-nav > [hidden] { display: none !important; }
.sgm3-destination, .sgm3-nav-trigger {
    position: relative; display: grid; place-items: center; gap: 3px;
    width: 100%; min-height: 64px; padding: 6px 2px;
    border: 0; border-radius: 20px; background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 11px/16px var(--m3-font-plain);
    text-align: center; text-decoration: none; cursor: pointer;
}
body.m6-rail-expanded .sgm3-rail { width: 280px; padding-inline: 12px; }
body.m6-rail-expanded .sgm3-brand {
    grid-template-columns: 48px minmax(0, 1fr); justify-items: start;
    padding-inline: 10px; font-size: 18px;
}
body.m6-rail-expanded .sgm3-destination,
body.m6-rail-expanded .sgm3-nav-trigger {
    grid-template-columns: 48px minmax(0, 1fr); justify-items: start;
    min-height: 56px; padding: 4px 16px; font-size: 14px; text-align: left;
}
body.m6-rail-expanded .sgm3-top { left: 280px; }
body.m6-rail-expanded .sgm3-main { margin-left: 280px; }
.sgm3-destination::before, .sgm3-nav-trigger::before, .sgm3-icon-button::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: currentColor; opacity: 0; pointer-events: none;
}
.sgm3-destination:hover::before, .sgm3-nav-trigger:hover::before,
.sgm3-icon-button:hover::before { opacity: .08; }
.sgm3-destination:active::before, .sgm3-nav-trigger:active::before,
.sgm3-icon-button:active::before { opacity: .12; }
.sgm3-destination[aria-current="page"], .sgm3-nav-trigger[aria-expanded="true"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.sgm3-destination[aria-current="page"] .material-symbols-rounded,
.sgm3-nav-trigger[aria-expanded="true"] .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}
.sgm3-brand {
    display: grid; place-items: center; gap: 4px; min-height: 64px;
    margin-bottom: 4px; color: var(--md-sys-color-on-surface); text-decoration: none;
    font-size: 10px; font-weight: 700;
}
.sgm3-mark {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 16px 8px; background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary); font-size: 17px;
}
.sgm3-rail-controls { display: grid; gap: 6px; padding-top: 8px; }
.sgm3-icon-button {
    position: relative; display: grid; place-items: center;
    width: 48px; height: 48px; margin: auto; padding: 0;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant); cursor: pointer;
}
.sgm3-icon-button[aria-checked="true"] {
    border-color: transparent; background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
:where(a, button, input):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}
.sgm3-top {
    position: fixed; inset: 0 0 auto var(--sgm3-rail); z-index: 40;
    display: flex; align-items: center; gap: 12px; height: var(--sgm3-top);
    padding: 0 24px; border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
    box-shadow: 0 1px 2px rgb(0 0 0 / .04); backdrop-filter: blur(16px);
    transition: left .35s var(--md-sys-easing-emphasized);
}
.sgm3-menu, .m5-icon.m6-menu {
    position: relative; display: grid; place-items: center; flex: none;
    width: 48px; height: 48px; margin: 0; padding: 0;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant); cursor: pointer;
}
.m5-icon.m6-menu:hover { background: var(--md-sys-color-secondary-container); }
.m6-country {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px;
    border-radius: var(--md-sys-shape-full); color: inherit;
    font-size: 24px; line-height: 1; text-decoration: none;
}
.m6-country:hover { background: var(--md-sys-color-secondary-container); }
.m6-country img { display: block; width: 28px; height: auto; }
.sgm3-search {
    display: flex; align-items: center; gap: 10px; flex: 1;
    max-width: 580px; height: 48px; padding: 0 16px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}
.sgm3-search:focus-within {
    box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}
.sgm3-search input {
    width: 100%; height: 100%; border: 0; outline: 0;
    background: transparent; color: var(--md-sys-color-on-surface);
}
.sgm3-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sgm3-action {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    min-height: 48px; padding: 0 12px; border: 0;
    border-radius: var(--md-sys-shape-full); background: transparent;
    color: var(--md-sys-color-on-surface-variant); text-decoration: none;
}
.sgm3-action:hover { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sgm3-count {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    padding: 0 5px; border-radius: 10px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container); font-size: 10px;
}
.sgm3-avatar {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 14px; background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.sgm3-country img { display: block; width: 24px; height: auto; }
.sgm3-popover {
    position: fixed; z-index: 120; left: 88px; right: auto; top: 0; bottom: 0;
    display: flex; flex-direction: column;
    width: min(240px, calc(100vw - 88px)); min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 8px 24px;
    border: 0; border-left: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
    border-radius: 0 20px 20px 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: 4px 0 8px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
    opacity: 1; visibility: visible; transform: translateX(0);
    transition: opacity 150ms linear, transform 300ms var(--md-sys-easing-emphasized), visibility 0s;
}
.sgm3-popover::before {
    content: ""; position: fixed; left: 76px; top: 0; bottom: 0;
    width: 14px; background: transparent;
}
body.m6-rail-expanded .sgm3-popover { left: 280px; width: min(240px, calc(100vw - 280px)); }
body.m6-rail-expanded .sgm3-popover::before { left: 268px; }
.sgm3-popover[hidden] {
    display: flex; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-12px);
    transition: opacity 150ms linear, transform 300ms var(--md-sys-easing-emphasized), visibility 0s linear 300ms;
}
.sgm3-popover h2 { margin: 12px 18px 8px; font-size: 20px; line-height: 28px; }
.sgm3-popover a {
    display: flex; align-items: center; flex: 0 0 48px; min-height: 48px; padding: 2px 18px;
    border-radius: var(--md-sys-shape-full); color: var(--md-sys-color-on-surface);
    text-decoration: none;
}
.sgm3-popover a:hover { background: var(--md-sys-color-secondary-container); }
.sgm3-main {
    min-height: 100vh; margin-left: var(--sgm3-rail);
    padding: calc(var(--sgm3-top) + 28px) clamp(16px, 3vw, 40px) 36px;
    background: var(--md-sys-color-surface);
    transition: margin-left .35s var(--md-sys-easing-emphasized);
}
.sgm3-context { margin: 0 0 24px; }
.sgm3-context h1 {
    margin: 0; color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand); font-size: clamp(28px, 3vw, 36px);
    font-weight: 475; line-height: 1.25; font-variation-settings: "GRAD" 0, "opsz" 18;
}
.sgm3-context p { margin: 6px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }
.sgm3-page { min-height: calc(100vh - 220px); }
.sgm3-footer {
    display: flex; justify-content: space-between; gap: 20px;
    margin-top: 32px; padding: 24px 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
}
.sgm3-scrim { display: none; }
.form-control { min-height: 48px; border-color: var(--md-sys-color-outline); border-radius: var(--md-sys-shape-medium); box-shadow: none; }
.form-control:focus { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 3px rgb(103 80 164 / .16); }
.btn { min-height: 48px; border-radius: var(--md-sys-shape-full); font-weight: 600; }
.btn-primary, .btn-success { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.panel, .ibox, .modal-content, .dropdown-menu {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large); background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface); box-shadow: 0 3px 12px rgb(0 0 0 / .10);
}
.modal-header, .modal-footer, .table > thead > tr > th, .table > tbody > tr > td { border-color: var(--md-sys-color-outline-variant); }
.alert { border-radius: var(--md-sys-shape-medium); }
.text-danger, .field-validation-error, .validation-summary-errors { color: var(--md-sys-color-error); }
@media (max-width: 1050px) {
    .sgm3-action-label, .sgm3-welcome { display: none; }
    .sgm3-action { width: 48px; padding: 0; justify-content: center; }
}
@media (max-width: 700px) {
    :root { --sgm3-rail: 0px; --sgm3-bottom: 80px; }
    body.sgm3-app { padding-bottom: calc(var(--sgm3-bottom) + env(safe-area-inset-bottom)); }
    .sgm3-rail {
        inset: auto 0 0; z-index: 50; display: block;
        width: 100%; height: calc(var(--sgm3-bottom) + env(safe-area-inset-bottom));
        padding: 6px 8px env(safe-area-inset-bottom);
        overflow-x: auto; overflow-y: hidden;
        border-top: 1px solid var(--md-sys-color-outline-variant);
        transform: none !important;
    }
    .sgm3-brand, .sgm3-rail-controls { display: none; }
    .sgm3-nav { display: flex; width: max-content; min-width: 100%; gap: 4px; }
    .sgm3-destination, .sgm3-nav-trigger { flex: 0 0 72px; min-height: 64px; }
    .sgm3-top { left: 0; padding: 0 12px; }
    .sgm3-search { max-width: none; }
    .sgm3-main { margin-left: 0; padding: calc(var(--sgm3-top) + 20px) 16px 28px; }
    .sgm3-popover {
        left: 0; right: auto; top: 0; bottom: 0;
        width: min(320px, calc(100vw - 24px)); max-height: none; min-height: 100dvh;
        border-radius: 0 20px 20px 0;
    }
    .sgm3-popover::before { display: none; }
    body.m6-rail-expanded .sgm3-popover { left: 0; width: min(320px, calc(100vw - 24px)); }
    body.sgm3-nav-open .sgm3-rail {
        inset: 0 auto 0 0; z-index: 80; display: flex;
        width: min(360px, 88vw); height: 100%; padding: 16px 12px;
        overflow: auto; border: 0; border-radius: 0 28px 28px 0;
        box-shadow: 0 8px 28px rgb(0 0 0 / .24);
    }
    body.sgm3-nav-open .sgm3-brand { display: grid; }
    body.sgm3-nav-open .sgm3-nav { display: grid; width: 100%; }
    body.sgm3-nav-open .sgm3-destination,
    body.sgm3-nav-open .sgm3-nav-trigger {
        grid-template-columns: 48px 1fr; justify-items: start;
        width: 100%; min-height: 56px; padding: 4px 16px; font-size: 14px; text-align: left;
    }
    body.sgm3-nav-open .sgm3-scrim {
        position: fixed; inset: 0; z-index: 75; display: block;
        width: 100%; height: 100%; border: 0; background: rgb(0 0 0 / .45);
    }
}
@media (max-width: 520px) {
    .sgm3-search { min-width: 0; }
    .sgm3-actions .sgm3-country, .sgm3-actions .sgm3-mail { display: none; }
    .sgm3-context h1 { font-size: 28px; line-height: 36px; }
    .sgm3-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==========================================================================
   Temporary repair-stage marker: Design M3 Changes — SGBizReg1
   Owner: SavvyGreat

   Layout/responsive: adaptive hero, fluid catalogue grid, overflow-safe data
   surfaces, compact single-column detail presentation.
   Components/states: M3 cards, chips, filled/tonal buttons, icon buttons,
   live banners, empty state, dialog, tables, fields and modal compatibility.
   Color/tokens: all colors resolve through shared --md-sys-color-* roles.
   Typography: shared M3 brand/plain families and type hierarchy.
   Shape/elevation: shared M3 shape roles and surface-container elevation.
   Spacing/sizing: 8dp-derived rhythm and 48px interactive targets.
   Icons/imagery: Material Symbols Rounded and bounded responsive product media.
   Motion/interactions: emphasized easing, state layers and reduced-motion path.
   Accessibility: focus-visible rings, semantic status contrast, touch targets,
   dialog backdrop, readable tables and no page-level horizontal overflow.
   Files/components: SGBizReg1/Index, SGBizReg1/SGBizReg1Partial,
   Shared/_ItemDetailsModal and their shared workflow response surfaces.
   Temporary compatibility: existing Bootstrap modal lifecycle and shared grid
   behavior hooks are visually normalized without changing controller contracts.
   Remaining conversion: shared CreateOwn, CreateOwnGrid, UseSample and
   _ItemPublishGrid markup can be converted independently when placed in scope.
   ========================================================================== */

.sgbiz-m3 {
    --sgbiz-m3-error-container: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
    --sgbiz-m3-on-error-container: color-mix(in srgb, var(--md-sys-color-error) 82%, var(--md-sys-color-on-surface));
    --sgbiz-m3-success-container: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface));
    --sgbiz-m3-on-success-container: color-mix(in srgb, var(--md-sys-color-primary) 78%, var(--md-sys-color-on-surface));
    display: grid;
    min-width: 0;
    gap: 24px;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
    font-size: 16px;
    line-height: 24px;
}

.sgbiz-m3,
.sgbiz-m3 *,
.sgbiz-m3 *::before,
.sgbiz-m3 *::after {
    box-sizing: border-box;
}

.sgbiz-m3 :where(h1, h2, h3, h4, p) {
    margin-top: 0;
}

.sgbiz-m3 :where(button, a, input, select, textarea):focus-visible,
#CreateOwnModalContainer :where(button, a, input, select, textarea):focus-visible,
#UseSampleModalContainer :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgbiz-m3-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: clamp(24px, 4vw, 40px);
    overflow: hidden;
    border-radius: 32px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbiz-m3-hero-copy {
    max-width: 720px;
}

.sgbiz-m3-overline {
    display: block;
    margin-bottom: 8px;
    color: inherit;
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgbiz-m3-hero h1 {
    margin-bottom: 8px;
    color: inherit;
    font: 475 clamp(32px, 5vw, 48px)/1.12 var(--m3-font-brand);
    letter-spacing: -.5px;
}

.sgbiz-m3-hero p {
    max-width: 62ch;
    margin-bottom: 0;
    color: inherit;
    font: 400 16px/24px var(--m3-font-plain);
}

.sgbiz-m3-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 72px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
    font: 600 16px/24px var(--m3-font-plain);
}

/*
   Temporary repair-stage marker: Design M3 Changes - labeled business icons
   - Labeled icon containers use normal application typography while their nested
     Material Symbol owns the icon font, size, optical size, fill, and color.
   - The Business Tools toolbar uses eleven equal desktop tracks; compact layouts
     keep all actions visible in a wrapping icon-only grid with tooltips.
*/
.sgbiz-m3-labeled-icon {
    box-sizing: border-box;
    display: inline-grid;
    grid-template-rows: minmax(32px, 1fr) auto;
    place-items: center;
    align-content: center;
    gap: 6px;
    min-width: 88px;
    min-height: 88px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--m3-font-plain);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: .1px;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
}

.sgbiz-m3-labeled-icon > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: visible;
    color: var(--md-sys-color-primary);
    font-family: "Material Symbols Rounded";
    font-size: 32px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 32;
}

.sgbiz-m3-labeled-icon-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .1px;
    text-overflow: ellipsis;
}

.sgbiz-m3-hero-icon {
    align-self: center;
    justify-self: center;
    width: clamp(104px, 11vw, 128px);
    min-height: 104px;
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-m3-hero-icon > .material-symbols-rounded {
    width: 40px;
    height: 40px;
    color: var(--md-sys-color-primary);
    font-size: 40px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 40;
}

.sgbiz-linked-m3-hero-icon.sgbiz-m3-labeled-icon {
    align-self: center;
    justify-self: center;
    width: 104px;
    height: auto;
    min-width: 104px;
    min-height: 96px;
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
    border-radius: 22px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-linked-m3-hero-icon.sgbiz-m3-labeled-icon > .material-symbols-rounded {
    width: 36px;
    height: 36px;
    color: var(--md-sys-color-primary);
    font-size: 36px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 36;
}

.sgbiz-m3-message-stack {
    display: grid;
    gap: 8px;
}

.sgbiz-m3-message-stack:empty {
    display: none;
}

.sgbiz-m3-status {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 500 14px/20px var(--m3-font-plain);
}

.sgbiz-m3-status .material-symbols-rounded {
    flex: none;
    font-variation-settings: "FILL" 1;
}

.sgbiz-m3-status-error {
    background: var(--sgbiz-m3-error-container);
    color: var(--sgbiz-m3-on-error-container);
}

.sgbiz-m3-status-success {
    background: var(--sgbiz-m3-success-container);
    color: var(--sgbiz-m3-on-success-container);
}

.sgbiz-m3-status-info {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbiz-m3-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    align-items: stretch;
    gap: 20px;
    min-width: 0;
}

.sgbiz-m3-product-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    transform: translateY(0) scale(1);
    opacity: 1;
    transition:
        transform 300ms var(--md-sys-easing-emphasized),
        opacity 300ms linear,
        background-color 200ms linear,
        box-shadow 300ms var(--md-sys-easing-emphasized);
}

.sgbiz-m3-product-card:hover {
    background: var(--md-sys-color-surface-container);
    box-shadow:
        0 2px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 6px 16px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
    transform: translateY(-3px);
}

.sgbiz-m3-product-card.sgbiz-m3-pending {
    opacity: 0;
    transform: translateY(16px) scale(.98);
}

.sgbiz-m3-product-card.sgbiz-m3-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sgbiz-m3-product-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 16px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
}

.sgbiz-m3-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms linear;
}

.sgbiz-m3-product-media:hover::after {
    opacity: .08;
}

.sgbiz-m3-product-media:active::after {
    opacity: .12;
}

.sgbiz-m3-product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1);
    transition: transform 300ms var(--md-sys-easing-emphasized);
}

.sgbiz-m3-product-media:hover .sgbiz-m3-product-image {
    transform: scale(1.025);
}

.sgbiz-m3-product-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    padding: 20px;
}

.sgbiz-m3-card-leading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sgbiz-m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    max-width: 100%;
    padding: 4px 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/18px var(--m3-font-plain);
}

.sgbiz-m3-chip .material-symbols-rounded {
    font-size: 18px;
}

.sgbiz-m3-price {
    flex: none;
    color: var(--md-sys-color-primary);
    font: 600 20px/28px var(--m3-font-brand);
}

.sgbiz-m3-product-copy h2 {
    margin-bottom: 4px;
    color: var(--md-sys-color-on-surface);
    font: 500 22px/28px var(--m3-font-brand);
    overflow-wrap: anywhere;
}

.sgbiz-m3-product-copy p {
    margin-bottom: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-m3-card-actions,
.sgbiz-m3-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sgbiz-m3-card-actions .sgbiz-m3-button {
    margin-left: auto;
}

.sgbiz-m3-button,
.sgbiz-m3-icon-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 0;
    font: 600 14px/20px var(--m3-font-plain);
    letter-spacing: .1px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition:
        box-shadow 200ms var(--md-sys-easing-emphasized),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-m3-button::after,
.sgbiz-m3-icon-button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: currentColor;
    opacity: 0;
    transition: opacity 150ms linear;
}

.sgbiz-m3-button:hover::after,
.sgbiz-m3-icon-button:hover::after {
    opacity: .08;
}

.sgbiz-m3-button:active,
.sgbiz-m3-icon-button:active {
    transform: scale(.98);
}

.sgbiz-m3-button:active::after,
.sgbiz-m3-icon-button:active::after {
    opacity: .12;
}

.sgbiz-m3-button {
    min-width: 64px;
    padding: 0 24px;
    border-radius: var(--md-sys-shape-full);
}

.sgbiz-m3-button .material-symbols-rounded {
    font-size: 20px;
}

.sgbiz-m3-button-filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
}

.sgbiz-m3-button-tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbiz-m3-icon-button {
    flex: none;
    width: 48px;
    padding: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.sgbiz-m3-icon-button-error {
    color: var(--md-sys-color-error);
}

.sgbiz-m3-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: clamp(32px, 7vw, 72px) 24px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
}

.sgbiz-m3-empty > .material-symbols-rounded {
    margin-bottom: 8px;
    color: var(--md-sys-color-primary);
    font-size: 48px;
    font-variation-settings: "FILL" 1;
}

.sgbiz-m3-empty h2 {
    margin-bottom: 0;
    color: var(--md-sys-color-on-surface);
    font: 500 24px/32px var(--m3-font-brand);
}

.sgbiz-m3-empty p {
    max-width: 50ch;
    margin-bottom: 0;
}

.sgbiz-m3-action-group {
    padding: 4px 0;
}

.sgbiz-m3-work-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
}

.sgbiz-m3-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-m3-section-header .sgbiz-m3-overline {
    margin-bottom: 2px;
    color: var(--md-sys-color-primary);
}

.sgbiz-m3-section-header h2 {
    margin-bottom: 0;
    font: 500 24px/32px var(--m3-font-brand);
}

.sgbiz-m3-section-header > .material-symbols-rounded {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-variation-settings: "FILL" 1;
}

.sgbiz-m3-data-surface {
    min-width: 0;
    padding: 16px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/* Temporary M3 compatibility layer for shared grid responses rendered inside SGBizReg1. */
.sgbiz-m3-data-surface :where(.ibox, .ibox-content) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sgbiz-m3-data-surface .table-responsive {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    -webkit-overflow-scrolling: touch;
}

.sgbiz-m3-data-surface table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--md-sys-color-on-surface);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-m3-data-surface :where(th, td) {
    min-width: 112px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: inherit;
    vertical-align: middle;
}

.sgbiz-m3-data-surface th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .4px;
}

.sgbiz-m3-data-surface tr:last-child td {
    border-bottom: 0;
}

.sgbiz-m3-data-surface tbody tr {
    transition: background-color 150ms linear;
}

.sgbiz-m3-data-surface tbody tr:hover {
    background: var(--md-sys-color-surface-container-low);
}

.sgbiz-m3-data-surface :where(.alert, .text-center):only-child {
    margin: 0;
}

.sgbiz-m3-data-surface .alert {
    border: 0;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbiz-m3-data-surface .btn,
#CreateOwnModalContainer .btn,
#UseSampleModalContainer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 48px;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 600 14px/20px var(--m3-font-plain);
    text-decoration: none;
    box-shadow: none;
}

.sgbiz-m3-data-surface :where(.btn-primary, .btn-success),
#CreateOwnModalContainer :where(.btn-primary, .btn-success),
#UseSampleModalContainer :where(.btn-primary, .btn-success) {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgbiz-m3-data-surface .btn-danger,
#CreateOwnModalContainer .btn-danger,
#UseSampleModalContainer .btn-danger {
    background: var(--sgbiz-m3-error-container, color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface)));
    color: var(--md-sys-color-error);
}

.sgbiz-m3-data-surface input[type="checkbox"],
#UseSampleModalContainer input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--md-sys-color-primary);
}

.sgbiz-m3-dialog {
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
    max-height: min(88vh, 900px);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow:
        0 8px 10px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 24px 48px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}

.sgbiz-m3-dialog:not([open]) {
    display: none;
}

.sgbiz-m3-dialog::backdrop {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 48%, transparent);
}

.sgbiz-m3-dialog-container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(88vh, 900px);
}

.sgbiz-m3-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 12px 16px 12px 24px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgbiz-m3-dialog-header h2 {
    margin: 0;
    font: 500 24px/32px var(--m3-font-brand);
}

.sgbiz-m3-dialog-content {
    overflow: auto;
    overscroll-behavior: contain;
}

.sgbiz-m3-detail {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 32px;
    padding: clamp(20px, 4vw, 40px);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-m3-detail-media {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 16px;
    min-width: 0;
}

.sgbiz-m3-detail-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    aspect-ratio: 4 / 3;
    padding: 20px;
    object-fit: contain;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgbiz-m3-detail-content {
    display: grid;
    align-content: start;
    gap: 24px;
    min-width: 0;
}

.sgbiz-m3-detail-heading .sgbiz-m3-overline {
    color: var(--md-sys-color-primary);
}

.sgbiz-m3-detail-heading h3 {
    margin-bottom: 4px;
    color: var(--md-sys-color-on-surface);
    font: 475 clamp(28px, 4vw, 36px)/1.2 var(--m3-font-brand);
    overflow-wrap: anywhere;
}

.sgbiz-m3-detail-heading p {
    margin-bottom: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 16px/24px var(--m3-font-plain);
}

.sgbiz-m3-detail-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 20px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbiz-m3-detail-price strong {
    flex-basis: 100%;
    font: 600 clamp(32px, 5vw, 44px)/1.1 var(--m3-font-brand);
    letter-spacing: -.5px;
}

.sgbiz-m3-detail-price > span {
    font: 500 14px/20px var(--m3-font-plain);
}

.sgbiz-m3-discount {
    padding: 4px 10px;
    border-radius: var(--md-sys-shape-full);
    background: var(--sgbiz-m3-error-container);
    color: var(--sgbiz-m3-on-error-container);
}

.sgbiz-m3-specifications h4,
.sgbiz-m3-description h4 {
    margin-bottom: 12px;
    font: 500 20px/28px var(--m3-font-brand);
}

.sgbiz-m3-specifications dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-outline-variant);
}

.sgbiz-m3-specifications dl > div {
    min-width: 0;
    padding: 12px 16px;
    background: var(--md-sys-color-surface);
}

.sgbiz-m3-specifications dt {
    margin-bottom: 2px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/16px var(--m3-font-plain);
    letter-spacing: .4px;
}

.sgbiz-m3-specifications dd {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 500 14px/20px var(--m3-font-plain);
    overflow-wrap: anywhere;
}

.sgbiz-m3-description {
    padding: 20px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgbiz-m3-description p {
    margin-bottom: 0;
    color: var(--md-sys-color-on-surface-variant);
    white-space: pre-line;
}

/* Shared modal responses sit outside the AJAX page fragment, so they are scoped by stable container IDs. */
#CreateOwnModalContainer .modal-content,
#UseSampleModalContainer .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow:
        0 8px 10px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 24px 48px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
    font-family: var(--m3-font-plain);
}

#CreateOwnModalContainer .modal-header,
#UseSampleModalContainer .modal-header {
    min-height: 72px;
    padding: 16px 24px;
    border-color: var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container);
}

#CreateOwnModalContainer .modal-title,
#UseSampleModalContainer .modal-title {
    color: var(--md-sys-color-on-surface);
    font: 500 24px/32px var(--m3-font-brand);
}

#CreateOwnModalContainer .modal-body,
#UseSampleModalContainer .modal-body {
    padding: 24px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

#CreateOwnModalContainer .close,
#UseSampleModalContainer .close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: -8px -8px -8px auto;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 1;
}

#CreateOwnModalContainer :where(.form-control, select, textarea, input),
#UseSampleModalContainer :where(.form-control, select, textarea, input) {
    min-height: 48px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: none;
}

#CreateOwnModalContainer :where(.form-control, select, textarea, input):focus,
#UseSampleModalContainer :where(.form-control, select, textarea, input):focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
}

#CreateOwnModalContainer .nav-tabs,
#UseSampleModalContainer .nav-tabs {
    border-color: var(--md-sys-color-outline-variant);
}

#CreateOwnModalContainer .nav-tabs > li > a,
#UseSampleModalContainer .nav-tabs > li > a {
    min-height: 48px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-surface-variant);
    font: 600 14px/20px var(--m3-font-plain);
}

#CreateOwnModalContainer .nav-tabs > li.active > a,
#UseSampleModalContainer .nav-tabs > li.active > a {
    border: 0;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

@media (max-width: 760px) {
    .sgbiz-m3-hero {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-m3-count,
    .sgbiz-m3-hero-icon {
        justify-self: start;
    }

    .sgbiz-m3-card-actions .sgbiz-m3-button {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .sgbiz-m3-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-m3-detail-media img {
        max-height: 360px;
    }
}

@media (max-width: 520px) {
    .sgbiz-m3 {
        gap: 16px;
    }

    .sgbiz-m3-hero {
        padding: 24px 20px;
    }

    .sgbiz-m3-hero h1 {
        font-size: 32px;
        line-height: 40px;
    }

    .sgbiz-m3-action-group .sgbiz-m3-button {
        width: 100%;
    }

    .sgbiz-m3-section-header {
        padding: 16px;
    }

    .sgbiz-m3-section-header > .material-symbols-rounded {
        display: none;
    }

    .sgbiz-m3-data-surface {
        padding: 8px;
    }

    .sgbiz-m3-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-m3-dialog-container {
        max-height: calc(100dvh - 16px);
    }

    .sgbiz-m3-detail {
        gap: 24px;
        padding: 16px;
    }

    .sgbiz-m3-specifications dl {
        grid-template-columns: minmax(0, 1fr);
    }

    #CreateOwnModalContainer .modal-body,
    #UseSampleModalContainer .modal-body {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgbiz-m3 *,
    .sgbiz-m3 *::before,
    .sgbiz-m3 *::after,
    #CreateOwnModalContainer *,
    #UseSampleModalContainer * {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   Temporary repair-stage marker: Design M3 Changes - My Business composition
   Owner: SavvyGreat

   Layout/responsive: adaptive owned-business header, contained app region,
   two-column registration surface, and compact single-column presentation.
   Components/states: M3 hero, media/avatar, assist chip, location row, quote
   surface, filled-tonal action, extended FAB toolbar, empty/loading/error
   states, form surface, error status and modal hosts.
   Color/tokens: shared --md-sys-color-* roles only.
   Typography: shared M3 brand/plain families and type hierarchy.
   Shape/elevation: shared large/full shapes and surface-container elevation.
   Spacing/sizing: 8dp-derived rhythm, 48px minimum controls and documented
   56dp extended FAB containers with 24dp icons.
   Icons/imagery: Material Symbols Rounded and responsive business logo.
   Motion/interactions: emphasized M3 easing and reduced-motion fallback.
   Accessibility: semantic heading ownership, visible focus, readable status,
   descriptive edit action and responsive form controls.
   Files/components: StartNewBiz/Index, SGBizHeader/SGBizHeader, SGBizApp,
   Shared/_SgTemplate, Shared/_SGBizStage02Guard and SgStyleCss.
   Temporary compatibility: _CreateForm and dynamically loaded app pages
   retain their existing server/behavior contracts inside scoped M3 surfaces.
   Remaining conversion: convert those child views independently.
   ========================================================================== */

.sgbiz-start-m3,
.sgbiz-header-m3,
.sgbiz-app-m3 {
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
}

.sgbiz-start-m3,
.sgbiz-start-m3 *,
.sgbiz-start-m3 *::before,
.sgbiz-start-m3 *::after,
.sgbiz-header-m3,
.sgbiz-header-m3 *,
.sgbiz-header-m3 *::before,
.sgbiz-header-m3 *::after,
.sgbiz-app-m3,
.sgbiz-app-m3 *,
.sgbiz-app-m3 *::before,
.sgbiz-app-m3 *::after {
    box-sizing: border-box;
}

.sgbiz-start-m3 {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.sgbiz-start-m3-business-header,
.sgbiz-start-m3-app-surface {
    min-width: 0;
}

.sgbiz-start-m3-app-surface {
    overflow: visible;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-start-m3-modal-host:empty {
    display: none;
}

.sgbiz-start-m3-create-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: clamp(24px, 4vw, 40px);
    overflow: hidden;
    border-radius: 32px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbiz-start-m3-create-copy {
    max-width: 720px;
}

.sgbiz-start-m3-overline,
.sgbiz-header-m3-overline {
    display: block;
    margin-bottom: 8px;
    color: inherit;
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgbiz-start-m3-create-hero h1 {
    margin: 0 0 8px;
    color: inherit;
    font: 475 clamp(32px, 5vw, 48px)/1.12 var(--m3-font-brand);
    letter-spacing: -.5px;
}

.sgbiz-start-m3-create-hero p {
    max-width: 62ch;
    margin: 0;
    color: inherit;
    font: 400 16px/24px var(--m3-font-plain);
}

.sgbiz-start-m3-create-icon {
    align-self: center;
    justify-self: center;
    width: clamp(104px, 11vw, 128px);
    height: auto;
    min-height: 104px;
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-start-m3-create-icon > .material-symbols-rounded {
    width: 40px;
    height: 40px;
    color: var(--md-sys-color-primary);
    font-size: 40px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 40;
}

.sgbiz-start-m3-form-surface {
    min-width: 0;
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

/* Temporary M3 normalization for the registration partial until its own conversion. */
.sgbiz-start-m3-form-surface form > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.sgbiz-start-m3-form-surface form > .row > .col-md-6 {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

.sgbiz-start-m3-form-surface .mb-3 {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.sgbiz-start-m3-form-surface label {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 600 14px/20px var(--m3-font-plain);
}

.sgbiz-start-m3-form-surface :where(input, select, textarea).form-control {
    width: 100%;
    min-height: 56px;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 16px/24px var(--m3-font-plain);
    box-shadow: none;
    transition:
        border-color 150ms linear,
        box-shadow 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-start-m3-form-surface textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.sgbiz-start-m3-form-surface input[type="file"].form-control {
    height: auto;
    padding: 10px 12px;
}

.sgbiz-start-m3-form-surface :where(input, select, textarea).form-control:hover {
    border-color: var(--md-sys-color-on-surface);
}

.sgbiz-start-m3-form-surface :where(input, select, textarea).form-control:focus {
    border-color: var(--md-sys-color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent);
}

.sgbiz-start-m3-form-surface .img-thumbnail {
    display: block;
    width: 128px;
    height: 128px;
    margin: 0;
    padding: 8px;
    object-fit: contain;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgbiz-start-m3-form-surface :where(.field-validation-error, .validation-summary-errors, .text-danger) {
    color: var(--md-sys-color-error);
    font: 500 12px/18px var(--m3-font-plain);
}

.sgbiz-start-m3-form-surface .validation-summary-errors {
    margin-bottom: 20px;
    padding: 16px;
    border: 0;
    border-radius: var(--md-sys-shape-medium);
    background: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
}

.sgbiz-start-m3-form-surface .sg-biz-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.sgbiz-start-m3-form-surface .sg-biz-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font: 600 14px/20px var(--m3-font-plain);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
    transition:
        box-shadow 200ms var(--md-sys-easing-emphasized),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-start-m3-form-surface .sg-biz-form-actions .btn:hover {
    box-shadow:
        0 2px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 6px 12px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgbiz-start-m3-form-surface .sg-biz-form-actions .btn:active {
    transform: scale(.98);
}

.sgbiz-app-m3 {
    display: grid;
    gap: 24px;
    min-width: 0;
    padding: clamp(20px, 3vw, 32px);
    border-radius: inherit;
    background: var(--md-sys-color-surface-container-low);
}

.sgbiz-app-m3-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.sgbiz-app-m3-overline {
    display: block;
    margin-bottom: 4px;
    color: var(--md-sys-color-primary);
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgbiz-app-m3-heading h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 clamp(28px, 4vw, 36px)/44px var(--m3-font-brand);
    letter-spacing: 0;
}

.sgbiz-app-m3-heading p {
    margin: 4px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-app-m3-heading-icon {
    align-self: center;
    justify-self: center;
    width: 96px;
    min-height: 88px;
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 72%, transparent);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
}

.sgbiz-app-m3-heading-icon > .material-symbols-rounded {
    color: var(--md-sys-color-primary);
}

.sgbiz-app-m3-navigation {
    position: sticky;
    top: calc(var(--sgm3-top, 72px) + 8px);
    z-index: 24;
    display: block;
    min-width: 0;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 54%, transparent);
    border-radius: var(--md-sys-shape-full);
    background: color-mix(in srgb, var(--md-sys-color-secondary-container) 96%, transparent);
    box-shadow: none;
    backdrop-filter: blur(14px);
    transform: translateZ(0);
    transition:
        border-color 300ms var(--md-sys-easing-emphasized),
        box-shadow 300ms var(--md-sys-easing-emphasized);
}

.sgbiz-app-m3-navigation.is-stuck {
    border-color: var(--md-sys-color-outline-variant);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent),
        0 3px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgbiz-app-m3-fab-list {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 2px;
    overflow: visible;
    touch-action: auto;
}

.sgbiz-app-m3-fab {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    height: 64px;
    padding: 6px clamp(2px, .6vw, 12px);
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font: 600 14px/20px var(--m3-font-plain);
    letter-spacing: .1px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent),
        0 3px 5px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 200ms var(--md-sys-easing-emphasized),
        border-radius 200ms var(--md-sys-easing-emphasized),
        box-shadow 200ms var(--md-sys-easing-emphasized),
        color 200ms var(--md-sys-easing-emphasized),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-app-m3-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms linear;
}

.sgbiz-app-m3-fab .material-symbols-rounded {
    flex: none;
    color: inherit;
    font-size: 28px;
    line-height: 28px;
    opacity: .68;
    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 28;
    transition:
        font-variation-settings 200ms var(--md-sys-easing-emphasized),
        opacity 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-app-m3-fab-label {
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
}

.sgbiz-app-m3-fab:hover,
.sgbiz-app-m3-fab:focus {
    color: var(--md-sys-color-on-primary-container);
    text-decoration: none;
    box-shadow:
        0 2px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent),
        0 6px 10px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-app-m3-fab:hover::before {
    opacity: .08;
}

.sgbiz-app-m3-fab:active {
    transform: scale(.96);
}

.sgbiz-app-m3-fab:active::before {
    opacity: .12;
}

.sgbiz-app-m3-fab.is-selected,
.sgbiz-app-m3-fab[aria-pressed="true"] {
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--md-sys-color-primary) 32%, transparent),
        0 6px 12px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-app-m3-fab.is-selected:hover,
.sgbiz-app-m3-fab.is-selected:focus,
.sgbiz-app-m3-fab[aria-pressed="true"]:hover,
.sgbiz-app-m3-fab[aria-pressed="true"]:focus {
    color: var(--md-sys-color-on-primary);
}

.sgbiz-app-m3-fab.is-selected .material-symbols-rounded,
.sgbiz-app-m3-fab[aria-pressed="true"] .material-symbols-rounded {
    opacity: .78;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 28;
}

.sgbiz-app-m3-fab:focus-visible {
    z-index: 2;
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgbiz-app-m3-session {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-app-m3-session:hover,
.sgbiz-app-m3-session:focus {
    color: var(--md-sys-color-on-surface);
}

.sgbiz-app-m3-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.sgbiz-app-m3-content {
    min-width: 0;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-app-m3-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 240px;
    padding: 32px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: left;
}

.sgbiz-app-m3-empty > .material-symbols-rounded {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
}

.sgbiz-app-m3-empty h3 {
    margin: 0 0 4px;
    color: var(--md-sys-color-on-surface);
    font: 475 22px/28px var(--m3-font-brand);
}

.sgbiz-app-m3-empty p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgbiz-app-m3-empty-tonal {
    background: var(--md-sys-color-surface-container);
}

.sgbiz-app-m3-progress {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    color: var(--md-sys-color-primary);
    animation: sgbiz-app-m3-progress-rotate 1400ms linear infinite;
}

.sgbiz-app-m3-progress svg {
    display: block;
    width: 48px;
    height: 48px;
    overflow: visible;
    transform: rotate(-90deg);
}

.sgbiz-app-m3-progress-track,
.sgbiz-app-m3-progress-indicator {
    fill: none;
    stroke-width: 4;
}

.sgbiz-app-m3-progress-track {
    stroke: var(--md-sys-color-primary-container);
}

.sgbiz-app-m3-progress-indicator {
    stroke: var(--md-sys-color-primary);
    stroke-linecap: round;
    stroke-dasharray: 1 112;
    animation: sgbiz-app-m3-progress-dash 1400ms var(--md-sys-easing-emphasized) infinite;
}

.sgbiz-app-m3-error > .material-symbols-rounded {
    background: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

@keyframes sgbiz-app-m3-progress-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sgbiz-app-m3-progress-dash {
    0% {
        stroke-dasharray: 1 112;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 72 112;
        stroke-dashoffset: -28;
    }

    100% {
        stroke-dasharray: 1 112;
        stroke-dashoffset: -108;
    }
}

.sgbiz-header-m3 {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 4vw, 36px);
    min-width: 0;
    padding: clamp(24px, 4vw, 40px);
    overflow: hidden;
    border-radius: 32px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbiz-header-m3-status {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-medium);
    background: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
    font: 500 14px/20px var(--m3-font-plain);
}

.sgbiz-header-m3-logo {
    display: grid;
    place-items: center;
    width: clamp(96px, 12vw, 128px);
    height: clamp(96px, 12vw, 128px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-on-primary-container) 18%, transparent);
    border-radius: 32px;
    background: var(--md-sys-color-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
}

.sgbiz-header-m3-logo img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: cover;
}

.sgbiz-header-m3-content {
    display: grid;
    justify-items: start;
    min-width: 0;
}

/*
   Temporary repair-stage marker: Design M3 Changes - business header color roles
   - The company logo/detail region is unchanged.
   - Only the right profile panel adds primary-, secondary-, and tertiary-container
     roles with their matching on-container content colors.
*/
.sgbiz-header-m3-side {
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 12px;
    width: clamp(236px, 24vw, 288px);
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.sgbiz-header-m3-side-overline {
    display: block;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgbiz-header-m3-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.sgbiz-header-m3-role.sgbiz-m3-labeled-icon {
    width: 100%;
    min-width: 0;
    min-height: 78px;
    padding: 8px 4px;
    border: 0;
    border-radius: 16px;
}

.sgbiz-header-m3-role.sgbiz-m3-labeled-icon > .material-symbols-rounded {
    width: 26px;
    height: 26px;
    color: inherit;
    font-size: 26px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 26;
}

.sgbiz-header-m3-role .sgbiz-m3-labeled-icon-label {
    font-size: 11px;
    line-height: 14px;
}

.sgbiz-header-m3-role-primary {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbiz-header-m3-role-secondary {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbiz-header-m3-role-tertiary {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgbiz-header-m3 h1 {
    margin: 0 0 12px;
    color: inherit;
    font: 475 clamp(32px, 5vw, 48px)/1.12 var(--m3-font-brand);
    letter-spacing: -.5px;
    overflow-wrap: anywhere;
}

.sgbiz-header-m3-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    max-width: 100%;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-on-primary-container) 28%, transparent);
    border-radius: var(--md-sys-shape-medium);
    color: inherit;
    font: 600 13px/20px var(--m3-font-plain);
}

.sgbiz-header-m3-chip .material-symbols-rounded {
    flex: none;
    font-size: 19px;
}

.sgbiz-header-m3-location {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 68ch;
    margin: 0;
    color: inherit;
    font: 400 15px/22px var(--m3-font-plain);
}

.sgbiz-header-m3-location .material-symbols-rounded {
    flex: none;
    margin-top: 1px;
    font-size: 20px;
    font-variation-settings: "FILL" 1;
}

.sgbiz-header-m3-slogan {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 64ch;
    margin: 18px 0 0;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--md-sys-shape-medium);
    background: color-mix(in srgb, var(--md-sys-color-surface) 76%, transparent);
    color: var(--md-sys-color-on-surface);
}

.sgbiz-header-m3-slogan .material-symbols-rounded {
    flex: none;
    color: var(--md-sys-color-primary);
    font-size: 22px;
}

.sgbiz-header-m3-slogan p {
    margin: 0;
    font: 450 15px/22px var(--m3-font-plain);
    font-style: italic;
}

.sgbiz-header-m3-actions {
    width: 100%;
}

.sgbiz-header-m3-edit {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font: 600 14px/20px var(--m3-font-plain);
    text-decoration: none;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
    transition:
        box-shadow 200ms var(--md-sys-easing-emphasized),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgbiz-header-m3-edit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: currentColor;
    opacity: 0;
    transition: opacity 150ms linear;
}

.sgbiz-header-m3-edit:hover {
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    box-shadow:
        0 2px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 5px 12px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgbiz-header-m3-edit:hover::after {
    opacity: .08;
}

.sgbiz-header-m3-edit:active {
    transform: scale(.98);
}

.sgbiz-header-m3-edit:active::after {
    opacity: .12;
}

.sgbiz-header-m3-edit:focus-visible,
.sgbiz-start-m3 :where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

@media (max-width: 820px) {
    .sgbiz-header-m3 {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-header-m3-side {
        grid-column: 1 / -1;
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr) minmax(160px, auto);
        align-items: center;
    }

    .sgbiz-header-m3-side-overline {
        max-width: 100px;
    }
}

@media (max-width: 760px) {
    .sgbiz-app-m3-navigation {
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-app-m3-fab-list {
        grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
        gap: 8px 4px;
        overflow: visible;
        scroll-behavior: auto;
        scroll-snap-type: none;
        touch-action: auto;
    }

    .sgbiz-app-m3-fab {
        justify-self: center;
        width: 56px;
        min-width: 56px;
        height: 56px;
        padding: 0;
        overflow: visible;
    }

    .sgbiz-app-m3-fab-label {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        z-index: 60;
        display: block;
        width: max-content;
        max-width: 180px;
        padding: 6px 9px;
        overflow: visible;
        border-radius: 8px;
        background: var(--md-sys-color-on-surface);
        color: var(--md-sys-color-surface);
        font: 500 12px/16px var(--m3-font-plain);
        letter-spacing: .1px;
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 24%, transparent);
        transform: translate(-50%, 4px);
        transition:
            opacity 150ms linear,
            transform 200ms var(--md-sys-easing-emphasized),
            visibility 0ms linear 200ms;
    }

    .sgbiz-app-m3-fab:hover .sgbiz-app-m3-fab-label,
    .sgbiz-app-m3-fab:focus .sgbiz-app-m3-fab-label,
    .sgbiz-app-m3-fab.show-tooltip .sgbiz-app-m3-fab-label {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition-delay: 0ms;
    }

    .sgbiz-app-m3-fab .material-symbols-rounded {
        font-size: 28px;
        line-height: 28px;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .sgbiz-app-m3-fab-list {
        gap: 4px;
    }

    .sgbiz-app-m3-fab {
        padding-inline: 2px;
    }

    .sgbiz-app-m3-fab-label {
        font-size: 11px;
        letter-spacing: 0;
    }
}

@media (max-width: 700px) {
    .sgbiz-start-m3-create-hero {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-start-m3-create-icon {
        grid-row: 1;
        justify-self: start;
    }

    .sgbiz-start-m3-form-surface form > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-app-m3-navigation {
        top: calc(var(--sgm3-top, 72px) + 2px);
    }
}

@media (max-width: 560px) {
    .sgbiz-start-m3 {
        gap: 16px;
    }

    .sgbiz-start-m3-create-hero,
    .sgbiz-header-m3 {
        padding: 24px 20px;
    }

    .sgbiz-start-m3-create-hero h1,
    .sgbiz-header-m3 h1 {
        font-size: 32px;
        line-height: 40px;
    }

    .sgbiz-start-m3-form-surface {
        padding: 16px;
    }

    .sgbiz-start-m3-form-surface .sg-biz-form-actions .btn {
        width: 100%;
    }

    .sgbiz-header-m3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-header-m3-side {
        grid-column: 1;
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbiz-header-m3-logo {
        width: 96px;
        height: 96px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgbiz-header-m3-actions {
        grid-column: 1;
        width: 100%;
    }

    .sgbiz-header-m3-edit {
        width: 100%;
    }

    .sgbiz-app-m3 {
        gap: 16px;
        padding: 16px;
    }

    .sgbiz-app-m3-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sgbiz-app-m3-heading h2 {
        font-size: 28px;
        line-height: 36px;
    }

    .sgbiz-app-m3-heading-icon {
        justify-self: start;
        width: 80px;
        min-width: 80px;
        min-height: 80px;
        padding: 10px;
        border-radius: 18px;
    }

    .sgbiz-app-m3-heading-icon > .material-symbols-rounded {
        width: 28px;
        height: 28px;
        font-size: 28px;
        font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 28;
    }

    .sgbiz-app-m3-navigation {
        gap: 6px;
        padding: 6px;
    }

    .sgbiz-app-m3-fab-list {
        gap: 6px;
    }

    .sgbiz-app-m3-empty {
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 208px;
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgbiz-start-m3 *,
    .sgbiz-start-m3 *::before,
    .sgbiz-start-m3 *::after,
    .sgbiz-header-m3 *,
    .sgbiz-header-m3 *::before,
    .sgbiz-header-m3 *::after,
    .sgbiz-app-m3 *,
    .sgbiz-app-m3 *::before,
    .sgbiz-app-m3 *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes - Snapic Voting
Owner: SavvyGreat

Layout/responsive behavior
- The browser window is the only page scroller. Public voting and the 300x600 ad
  are sticky on expanded screens; tablet and compact layouts reflow without
  internal rails, horizontal scrolling, hidden actions, or clipped content.

M3 components/states
- Hero, outlined field, native file input upload surface, filled/text/icon
  buttons, elevated cards, toolbars, progress, status/empty states, and native
  dialog include hover, focus, pressed, selected, drag, busy, error, and disabled.

Color roles/design tokens
- Semantic primary, secondary, tertiary, error, surface, outline, and matching
  on-color roles come from the shared --md-sys-color-* token system.

Typography
- Shared M3 brand/plain families provide display, headline, title, body, and
  label roles. No page-local or legacy typeface is required.

Shape/elevation
- Shared medium/large/full shapes and M3 surface-container elevation separate
  content without decorative legacy borders or heavy shadows.

Spacing/sizing
- 8dp-derived gaps, fluid measures, 48px touch targets, responsive media, and
  readable line lengths cover expanded, medium, compact, and narrow platforms.

Icons/imagery
- Material Symbols Rounded and responsive user/post/ad imagery replace Font
  Awesome, emoji voting controls, inline dimensions, and Bootstrap image classes.

Motion/interactions
- Shared emphasized spatial easing, short effects transitions, real upload and
  loading progress, native dialog motion, and reduced-motion fallbacks are used.

Accessibility
- Visible focus, contrast-safe semantic roles, native controls, live feedback,
  pressed/busy states, keyboard dialog behavior, and non-color status cues.

Files/components affected
- SnapicVote/Index, _SnapicPostBatch, _SnapicIsSelected, _SnapicComments,
  _AddSnapicComment, and /CodeBehind/css/SgStyleCss.css.

Temporary compatibility/repair work
- Existing MVC routes, Razor models, request IDs, payload names, partial HTML,
  vote values, upload action, comment actions, and pagination stay unchanged.

Remaining conversion work
- The separate SnapicVote/SnapicPosts action is not part of this Index workflow.
===============================================================================
*/

.sgsnapic-m3,
.sgsnapic-m3-dialog {
    font-family: var(--m3-font-plain);
}

.sgsnapic-m3 {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
    width: min(100%, 1600px);
    min-width: 0;
    margin-inline: auto;
    padding: clamp(16px, 3vw, 32px);
    color: var(--md-sys-color-on-surface);
}

.sgsnapic-m3 *,
.sgsnapic-m3 *::before,
.sgsnapic-m3 *::after,
.sgsnapic-m3-dialog *,
.sgsnapic-m3-dialog *::before,
.sgsnapic-m3-dialog *::after {
    box-sizing: border-box;
}

.sgsnapic-m3 [hidden],
.sgsnapic-m3-dialog [hidden] {
    display: none !important;
}

.sgsnapic-m3-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.sgsnapic-m3-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    min-width: 0;
    min-height: 240px;
    padding: clamp(28px, 5vw, 56px);
    overflow: hidden;
    border-radius: 32px;
    background:
        radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--md-sys-color-tertiary-container) 92%, transparent) 0 11%, transparent 11.5%),
        linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-secondary-container));
    color: var(--md-sys-color-on-primary-container);
}

.sgsnapic-m3-hero::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -96px;
    z-index: -1;
    width: 280px;
    height: 280px;
    border-radius: 44% 56% 38% 62% / 58% 40% 60% 42%;
    background: color-mix(in srgb, var(--md-sys-color-tertiary-container) 74%, transparent);
    transform: rotate(18deg);
}

.sgsnapic-m3-hero-copy {
    min-width: 0;
    max-width: 760px;
}

.sgsnapic-m3-overline {
    display: block;
    margin-bottom: 8px;
    color: var(--md-sys-color-primary);
    font: 650 12px/16px var(--m3-font-plain);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.sgsnapic-m3-hero h1 {
    margin: 0;
    color: inherit;
    font: 475 clamp(40px, 7vw, 72px)/1 var(--m3-font-brand);
    letter-spacing: -1px;
}

.sgsnapic-m3-hero p {
    max-width: 64ch;
    margin: 18px 0 0;
    color: inherit;
    font: 400 clamp(16px, 1.6vw, 19px)/1.5 var(--m3-font-plain);
}

.sgsnapic-m3-hero-icon {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    width: clamp(112px, 14vw, 156px);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 16%, transparent);
    border-radius: 40px 40px 40px 16px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent),
        0 6px 14px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgsnapic-m3-hero-icon .material-symbols-rounded {
    font-size: clamp(44px, 6vw, 64px);
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 48;
}

.sgsnapic-m3-hero-icon > span:last-child {
    font: 650 13px/18px var(--m3-font-plain);
    letter-spacing: .2px;
}

.sgsnapic-m3-composer {
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 48px);
    min-width: 0;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.sgsnapic-m3-section-heading,
.sgsnapic-m3-rail-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.sgsnapic-m3-section-heading h2,
.sgsnapic-m3-rail-heading h2,
.sgsnapic-m3-feed-heading h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 clamp(24px, 3vw, 32px)/1.2 var(--m3-font-brand);
    letter-spacing: 0;
}

.sgsnapic-m3-section-heading p,
.sgsnapic-m3-rail-heading p,
.sgsnapic-m3-feed-heading p {
    margin: 6px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3-heading-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 28;
}

.sgsnapic-m3-heading-icon-tertiary {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgsnapic-m3-upload-form {
    display: grid;
    grid-template-columns: minmax(220px, .44fr) minmax(300px, 1fr);
    gap: 20px 24px;
    min-width: 0;
}

.sgsnapic-m3-outlined-field {
    position: relative;
    min-width: 0;
    padding-bottom: 22px;
}

.sgsnapic-m3-outlined-field input {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 17px 16px 7px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 4px;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 400 16px/24px var(--m3-font-plain);
    transition:
        border-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
}

.sgsnapic-m3-outlined-field label {
    position: absolute;
    top: 16px;
    left: 13px;
    padding-inline: 4px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    font: 400 16px/24px var(--m3-font-plain);
    pointer-events: none;
    transform-origin: left center;
    transition:
        color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 200ms var(--md-sys-easing-emphasized),
        top 200ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-outlined-field input:focus,
.sgsnapic-m3-outlined-field input:not(:placeholder-shown) {
    padding-top: 17px;
}

.sgsnapic-m3-outlined-field input:focus {
    border-width: 2px;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

.sgsnapic-m3-outlined-field input:focus + label,
.sgsnapic-m3-outlined-field input:not(:placeholder-shown) + label {
    top: -9px;
    color: var(--md-sys-color-primary);
    font-size: 12px;
    line-height: 18px;
}

.sgsnapic-m3-outlined-field input[aria-invalid="true"] {
    border-color: var(--md-sys-color-error);
}

.sgsnapic-m3-supporting-text {
    display: block;
    margin: 6px 16px 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-upload-control {
    min-width: 0;
}

.sgsnapic-m3-upload-drop {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 20px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        border-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-upload-drop::after,
.sgsnapic-m3-filled-button::after,
.sgsnapic-m3-icon-button::after,
.sgsnapic-m3-action::after,
.sgsnapic-m3-vote-action::after,
.sgsnapic-m3-media-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms linear;
}

.sgsnapic-m3-upload-drop:hover {
    border-color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container);
}

.sgsnapic-m3-upload-drop:hover::after {
    opacity: .05;
}

.sgsnapic-m3-visually-hidden:focus-visible + .sgsnapic-m3-upload-drop {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgsnapic-m3-upload-control.is-dragging .sgsnapic-m3-upload-drop {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    transform: scale(1.01);
}

.sgsnapic-m3-upload-control.has-error .sgsnapic-m3-upload-drop {
    border-color: var(--md-sys-color-error);
}

.sgsnapic-m3-upload-control.has-error .sgsnapic-m3-form-status {
    color: var(--md-sys-color-error);
}

.sgsnapic-m3-upload-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 30px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 32;
}

.sgsnapic-m3-upload-copy {
    display: grid;
    min-width: 0;
}

.sgsnapic-m3-upload-copy strong {
    font: 600 16px/24px var(--m3-font-plain);
}

.sgsnapic-m3-upload-copy span {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3-upload-browse {
    min-height: 40px;
    padding: 10px 16px;
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-primary);
    font: 600 14px/20px var(--m3-font-plain);
    white-space: nowrap;
}

.sgsnapic-m3-file-preview {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgsnapic-m3-file-preview img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container);
}

.sgsnapic-m3-file-preview > div {
    display: grid;
    min-width: 0;
}

.sgsnapic-m3-file-preview strong,
.sgsnapic-m3-file-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-file-preview strong {
    font: 600 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3-file-preview span {
    font: 400 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-upload-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
}

.sgsnapic-m3-form-status {
    flex: 1;
    min-width: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 13px/18px var(--m3-font-plain);
    text-align: right;
}

.sgsnapic-m3-filled-button,
.sgsnapic-m3-icon-button,
.sgsnapic-m3-action,
.sgsnapic-m3-vote-action,
.sgsnapic-m3-text-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    outline: 0;
    font-family: var(--m3-font-plain);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sgsnapic-m3-filled-button {
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font: 600 14px/20px var(--m3-font-plain);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
    transition:
        box-shadow 200ms var(--md-sys-easing-emphasized),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-filled-button:hover {
    box-shadow:
        0 2px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent),
        0 5px 10px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.sgsnapic-m3-filled-button:hover::after,
.sgsnapic-m3-icon-button:hover::after,
.sgsnapic-m3-action:hover::after,
.sgsnapic-m3-vote-action:hover::after,
.sgsnapic-m3-media-button:hover::after {
    opacity: .08;
}

.sgsnapic-m3-filled-button:active,
.sgsnapic-m3-icon-button:active,
.sgsnapic-m3-action:active,
.sgsnapic-m3-vote-action:active {
    transform: scale(.96);
}

.sgsnapic-m3-filled-button:active::after,
.sgsnapic-m3-icon-button:active::after,
.sgsnapic-m3-action:active::after,
.sgsnapic-m3-vote-action:active::after,
.sgsnapic-m3-media-button:active::after {
    opacity: .12;
}

.sgsnapic-m3-filled-button:disabled,
.sgsnapic-m3-icon-button:disabled,
.sgsnapic-m3-action:disabled,
.sgsnapic-m3-vote-action:disabled {
    cursor: progress;
    opacity: .62;
}

.sgsnapic-m3-icon-button {
    flex: none;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-icon-button .material-symbols-rounded {
    font-size: 24px;
}

.sgsnapic-m3-linear-progress {
    grid-column: 1 / -1;
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary-container);
}

.sgsnapic-m3-linear-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--md-sys-color-primary);
    transition: width 180ms linear;
}

.sgsnapic-m3-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(360px, 1fr) 300px;
    align-items: start;
    gap: clamp(20px, 2.2vw, 32px);
    min-width: 0;
}

.sgsnapic-m3-public,
.sgsnapic-m3-feed,
.sgsnapic-m3-ad {
    min-width: 0;
}

.sgsnapic-m3-sticky-panel {
    min-width: 0;
}

@media (min-width: 1181px) {
    .sgsnapic-m3-public-sticky,
    .sgsnapic-m3-ad-sticky {
        position: sticky;
        top: calc(var(--sgm3-top, 72px) + 16px);
        align-self: start;
    }
}

.sgsnapic-m3-public-sticky {
    display: grid;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgsnapic-m3-rail-heading h2 {
    font-size: 22px;
    line-height: 28px;
}

.sgsnapic-m3-public-list,
.sgsnapic-m3-feed-list {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.sgsnapic-m3-feed {
    display: grid;
    gap: 20px;
}

.sgsnapic-m3-feed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgsnapic-m3-feed-heading h2,
.sgsnapic-m3-feed-heading p {
    color: inherit;
}

.sgsnapic-m3-feed-heading > .material-symbols-rounded {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
    font-size: 32px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 32;
}

.sgsnapic-m3-ad-sticky {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.sgsnapic-m3-ad-sticky figcaption {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 11px/16px var(--m3-font-plain);
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
}

.sgsnapic-m3-ad-sticky img {
    display: block;
    width: min(100%, 300px);
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.sgsnapic-m3-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        border-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        box-shadow 250ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-card:hover {
    border-color: color-mix(in srgb, var(--md-sys-color-outline) 68%, var(--md-sys-color-outline-variant));
    box-shadow:
        0 2px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent),
        0 6px 14px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.sgsnapic-m3-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 8px;
}

.sgsnapic-m3-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    object-fit: cover;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
}

.sgsnapic-m3-avatar-small {
    width: 40px;
    height: 40px;
    font-size: 24px;
}

.sgsnapic-m3-card-identity {
    display: grid;
    min-width: 0;
}

.sgsnapic-m3-card-identity strong {
    overflow: hidden;
    font: 600 14px/20px var(--m3-font-plain);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-card-identity time,
.sgsnapic-m3-public-card-header time {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-card-title {
    margin: 0;
    padding: 4px 16px 14px;
    color: var(--md-sys-color-on-surface);
    font: 475 20px/28px var(--m3-font-brand);
    overflow-wrap: anywhere;
}

.sgsnapic-m3-media-button {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    cursor: zoom-in;
}

.sgsnapic-m3-post-image {
    display: block;
    width: 100%;
    max-height: 680px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 450ms var(--md-sys-motion-spatial-default);
}

.sgsnapic-m3-media-button:hover .sgsnapic-m3-post-image {
    transform: scale(1.025);
}

.sgsnapic-m3-media-state {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
    color: var(--md-sys-color-on-surface);
    opacity: 0;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
    transform: scale(.8);
    transition:
        opacity var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 300ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-media-button:hover .sgsnapic-m3-media-state,
.sgsnapic-m3-media-button:focus-visible .sgsnapic-m3-media-state {
    opacity: 1;
    transform: scale(1);
}

.sgsnapic-m3-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgsnapic-m3-action {
    gap: 6px;
    min-width: 0;
    min-height: 48px;
    padding: 0 10px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 13px/18px var(--m3-font-plain);
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-action .material-symbols-rounded {
    flex: none;
    font-size: 21px;
    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

.sgsnapic-m3-action[aria-pressed="true"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgsnapic-m3-action[aria-pressed="true"] .material-symbols-rounded,
.sgsnapic-m3-comment-like[aria-pressed="true"] .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgsnapic-m3-card-footer {
    padding: 16px;
    background: var(--md-sys-color-surface-container-low);
}

.sgsnapic-m3-comments-list {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.sgsnapic-m3-text-button {
    justify-self: end;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-primary);
    font: 600 13px/18px var(--m3-font-plain);
}

.sgsnapic-m3-text-button .material-symbols-rounded {
    font-size: 19px;
}

.sgsnapic-m3-comment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
}

.sgsnapic-m3-comment-body {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 4px 18px 18px 18px;
    background: var(--md-sys-color-surface-container);
}

.sgsnapic-m3-comment-body > strong {
    display: block;
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font: 600 13px/18px var(--m3-font-plain);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-comment-body p {
    margin: 4px 0 0;
    color: var(--md-sys-color-on-surface);
    font: 400 14px/20px var(--m3-font-plain);
    overflow-wrap: anywhere;
}

.sgsnapic-m3-comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-top: 5px;
}

.sgsnapic-m3-comment-meta time {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 11px/16px var(--m3-font-plain);
}

.sgsnapic-m3-comment-like {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-primary);
    font: 600 12px/17px var(--m3-font-plain);
    cursor: pointer;
}

.sgsnapic-m3-comment-like .material-symbols-rounded {
    font-size: 18px;
}

.sgsnapic-m3-empty-copy,
.sgsnapic-m3-error-copy {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgsnapic-m3-error-copy {
    color: var(--md-sys-color-error);
}

.sgsnapic-m3-comment-composer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    min-width: 0;
    margin-top: 14px;
}

.sgsnapic-m3-comment-field {
    display: grid;
    min-width: 0;
}

.sgsnapic-m3-comment-field label {
    margin: 0 0 5px 12px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-comment-field textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    max-height: 160px;
    padding: 12px 14px;
    resize: vertical;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    outline: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 14px/20px var(--m3-font-plain);
    transition:
        border-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
}

.sgsnapic-m3-comment-field textarea:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

.sgsnapic-m3-comment-composer > .sgsnapic-m3-icon-button {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgsnapic-m3-public-card-header {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.sgsnapic-m3-public-card-header h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 18px/24px var(--m3-font-brand);
}

.sgsnapic-m3-public-card-header p {
    margin: 4px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgsnapic-m3-vote-card .sgsnapic-m3-post-image {
    aspect-ratio: 1;
}

.sgsnapic-m3-vote-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 8px;
}

.sgsnapic-m3-vote-action {
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 56px;
    padding: 4px 2px;
    overflow: hidden;
    border-radius: 16px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 200ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-vote-action:nth-child(1) {
    color: var(--md-sys-color-tertiary);
}

.sgsnapic-m3-vote-action:nth-child(5) {
    color: var(--md-sys-color-error);
}

.sgsnapic-m3-vote-action .material-symbols-rounded {
    font-size: 23px;
}

.sgsnapic-m3-vote-count {
    max-width: 100%;
    overflow: hidden;
    font: 650 11px/14px var(--m3-font-plain);
    text-overflow: ellipsis;
}

.sgsnapic-m3-loading,
.sgsnapic-m3-inline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 88px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3-circular-progress {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--md-sys-color-primary);
    animation: sgsnapic-m3-progress-rotate 1400ms linear infinite;
}

.sgsnapic-m3-circular-progress svg {
    display: block;
    width: 44px;
    height: 44px;
    overflow: visible;
    transform: rotate(-90deg);
}

.sgsnapic-m3-progress-track,
.sgsnapic-m3-progress-indicator {
    fill: none;
    stroke-width: 4;
}

.sgsnapic-m3-progress-track {
    stroke: var(--md-sys-color-primary-container);
}

.sgsnapic-m3-progress-indicator {
    stroke: var(--md-sys-color-primary);
    stroke-linecap: round;
    stroke-dasharray: 1 112;
    animation: sgsnapic-m3-progress-dash 1400ms var(--md-sys-easing-emphasized) infinite;
}

@keyframes sgsnapic-m3-progress-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sgsnapic-m3-progress-dash {
    0% {
        stroke-dasharray: 1 112;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 72 112;
        stroke-dashoffset: -28;
    }

    100% {
        stroke-dasharray: 1 112;
        stroke-dashoffset: -108;
    }
}

.sgsnapic-m3-feed-sentinel {
    width: 100%;
    height: 1px;
}

.sgsnapic-m3-empty-state {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 180px;
    padding: 28px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
}

.sgsnapic-m3-empty-state > .material-symbols-rounded {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
}

.sgsnapic-m3-empty-state h3 {
    margin: 0 0 4px;
    color: var(--md-sys-color-on-surface);
    font: 475 20px/28px var(--m3-font-brand);
}

.sgsnapic-m3-empty-state p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3 :where(button, input, textarea):focus-visible,
.sgsnapic-m3-dialog :where(button, input, textarea):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

html.sgsnapic-m3-dialog-open {
    overflow: hidden;
}

.sgsnapic-m3-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent),
        0 24px 56px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
}

.sgsnapic-m3-dialog[open] {
    animation: sgsnapic-m3-dialog-enter 320ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-dialog::backdrop {
    background: color-mix(in srgb, #000 52%, transparent);
    backdrop-filter: blur(2px);
}

.sgsnapic-m3-dialog-surface {
    min-width: 0;
}

.sgsnapic-m3-dialog-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 94%, transparent);
    backdrop-filter: blur(14px);
}

.sgsnapic-m3-dialog-header > div {
    display: grid;
    min-width: 0;
}

.sgsnapic-m3-dialog-header strong,
.sgsnapic-m3-dialog-header time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-dialog-header strong {
    font: 600 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3-dialog-header time {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-dialog-header h2 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font: 475 22px/28px var(--m3-font-brand);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-dialog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    align-items: start;
    min-width: 0;
}

.sgsnapic-m3-dialog-media {
    min-width: 0;
    padding: 20px;
}

.sgsnapic-m3-dialog-media > img {
    display: block;
    width: 100%;
    max-height: calc(100dvh - 220px);
    min-height: 280px;
    object-fit: contain;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgsnapic-m3-dialog-media .sgsnapic-m3-card-actions {
    margin-top: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
}

.sgsnapic-m3-dialog-comments {
    min-width: 0;
    min-height: 100%;
    padding: 20px;
    border-left: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
}

.sgsnapic-m3-dialog-comments > h3 {
    margin: 0 0 16px;
    color: var(--md-sys-color-on-surface);
    font: 475 22px/28px var(--m3-font-brand);
}

.sgsnapic-m3-dialog .sgsnapic-m3-text-button {
    display: none;
}

.sgsnapic-m3-dialog-composer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

@keyframes sgsnapic-m3-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1500px) {
    .sgsnapic-m3-layout {
        grid-template-columns: minmax(260px, 300px) minmax(360px, 1fr);
    }

    .sgsnapic-m3-feed {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .sgsnapic-m3-ad {
        grid-column: 1;
        grid-row: 2;
    }
}

@media (max-width: 980px) {
    .sgsnapic-m3-composer {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-upload-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-upload-actions,
    .sgsnapic-m3-linear-progress {
        grid-column: 1;
    }

    .sgsnapic-m3-layout {
        grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr);
    }

    .sgsnapic-m3-dialog-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-dialog-comments {
        border-top: 1px solid var(--md-sys-color-outline-variant);
        border-left: 0;
    }

    .sgsnapic-m3-dialog-media > img {
        max-height: 60dvh;
    }
}

@media (max-width: 760px) {
    .sgsnapic-m3 {
        gap: 16px;
        padding: 12px;
    }

    .sgsnapic-m3-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 28px 22px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgsnapic-m3-hero-icon {
        grid-row: 1;
        justify-self: start;
        width: 88px;
        border-radius: 28px 28px 28px 10px;
    }

    .sgsnapic-m3-hero-icon .material-symbols-rounded {
        font-size: 40px;
    }

    .sgsnapic-m3-composer {
        gap: 24px;
        padding: 20px;
    }

    .sgsnapic-m3-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .sgsnapic-m3-public,
    .sgsnapic-m3-feed,
    .sgsnapic-m3-ad {
        grid-column: 1;
        grid-row: auto;
    }

    .sgsnapic-m3-public {
        order: 1;
    }

    .sgsnapic-m3-feed {
        order: 2;
    }

    .sgsnapic-m3-ad {
        order: 3;
    }

    .sgsnapic-m3-public-sticky {
        padding: 16px;
    }

    .sgsnapic-m3-public-list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .sgsnapic-m3-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 20px;
    }
}

@media (max-width: 520px) {
    .sgsnapic-m3-section-heading,
    .sgsnapic-m3-rail-heading {
        display: grid;
    }

    .sgsnapic-m3-upload-drop {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 16px;
    }

    .sgsnapic-m3-upload-browse {
        grid-column: 1 / -1;
        justify-self: stretch;
        min-height: 44px;
        border: 1px solid var(--md-sys-color-outline);
        text-align: center;
    }

    .sgsnapic-m3-upload-actions {
        display: grid;
    }

    .sgsnapic-m3-form-status {
        text-align: left;
    }

    .sgsnapic-m3-filled-button {
        width: 100%;
    }

    .sgsnapic-m3-feed-heading {
        align-items: flex-start;
        padding: 20px;
    }

    .sgsnapic-m3-feed-heading > .material-symbols-rounded {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 26px;
    }

    .sgsnapic-m3-card-actions {
        gap: 2px;
    }

    .sgsnapic-m3-action {
        display: grid;
        grid-template-rows: auto auto;
        gap: 1px;
        min-height: 60px;
        padding: 5px 2px;
        border-radius: 16px;
        font-size: 11px;
        line-height: 14px;
    }

    .sgsnapic-m3-comment-composer {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sgsnapic-m3-comment-composer > .sgsnapic-m3-avatar {
        display: none;
    }

    .sgsnapic-m3-comment-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgsnapic-m3-dialog-header {
        padding: 12px;
    }

    .sgsnapic-m3-dialog-header h2 {
        font-size: 18px;
        line-height: 24px;
    }

    .sgsnapic-m3-dialog-media,
    .sgsnapic-m3-dialog-comments {
        padding: 12px;
    }

    .sgsnapic-m3-dialog-media > img {
        min-height: 220px;
        max-height: 54dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgsnapic-m3 *,
    .sgsnapic-m3 *::before,
    .sgsnapic-m3 *::after,
    .sgsnapic-m3-dialog,
    .sgsnapic-m3-dialog *,
    .sgsnapic-m3-dialog *::before,
    .sgsnapic-m3-dialog *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }

    .sgsnapic-m3-media-button:hover .sgsnapic-m3-post-image {
        transform: none;
    }
}

/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes - Snapic composer refinement
- Rebuilds the creation surface as a guided Title > Image > Publish workflow.
- Uses centered labelled-icon containers instead of unframed symbol glyphs.
- The chosen-image preview replaces the picker and exposes Replace/Remove actions.
- Upload feedback now has semantic info/ready/loading/success/error states plus a
  readable determinate progress panel.
- Public vote actions use outlined icons at rest and filled, role-colored icons
  after selection; counts have larger minimum readable figures.
- Compact layouts place Friends Voting before Public Voting.
- All styling remains in SgStyleCss.css; existing MVC endpoints are unchanged.
===============================================================================
*/

.sgsnapic-m3 .material-symbols-rounded,
.sgsnapic-m3-dialog .material-symbols-rounded {
    display: inline-grid;
    place-items: center;
    flex: none;
    line-height: 1;
    vertical-align: middle;
}

.sgsnapic-m3-labeled-icon {
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    align-content: center;
    gap: 5px;
    width: 80px;
    min-width: 80px;
    min-height: 80px;
    padding: 10px 8px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
    border-radius: 24px 24px 24px 10px;
    text-align: center;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.sgsnapic-m3-labeled-icon > .material-symbols-rounded {
    width: 34px;
    height: 34px;
    font-size: 32px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 32;
}

.sgsnapic-m3-labeled-icon-label {
    max-width: 100%;
    overflow: hidden;
    font: 650 11px/14px var(--m3-font-plain);
    letter-spacing: .25px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 32px;
    background: var(--md-sys-color-surface-container-low);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent),
        0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
}

.sgsnapic-m3-composer-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    min-width: 0;
    padding: clamp(24px, 4vw, 36px);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background:
        linear-gradient(115deg,
            var(--md-sys-color-surface) 0 58%,
            color-mix(in srgb, var(--md-sys-color-primary-container) 74%, var(--md-sys-color-surface)) 100%);
}

.sgsnapic-m3-composer-header .sgsnapic-m3-section-heading {
    align-items: center;
    gap: 20px;
}

.sgsnapic-m3-composer-header .sgsnapic-m3-section-heading > div {
    min-width: 0;
}

.sgsnapic-m3-composer-header .sgsnapic-m3-overline {
    margin-bottom: 5px;
}

.sgsnapic-m3-composer-header .sgsnapic-m3-section-heading h2 {
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.15;
}

.sgsnapic-m3-composer-header .sgsnapic-m3-section-heading p {
    max-width: 60ch;
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
}

.sgsnapic-m3-composer-icon {
    width: 92px;
    min-width: 92px;
    min-height: 92px;
    border-color: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);
    border-radius: 28px 28px 28px 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgsnapic-m3-composer-icon > .material-symbols-rounded {
    width: 40px;
    height: 40px;
    font-size: 38px;
}

.sgsnapic-m3-composer-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
    background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
}

.sgsnapic-m3-composer-steps li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        transform 260ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-composer-steps li > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    font: 650 12px/16px var(--m3-font-plain);
}

.sgsnapic-m3-composer-steps li > strong {
    font: 600 12px/16px var(--m3-font-plain);
}

.sgsnapic-m3-composer-steps li.is-current {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgsnapic-m3-composer-steps li.is-current > span {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    transform: scale(1.04);
}

.sgsnapic-m3-composer-steps li.is-complete {
    color: var(--md-sys-color-primary);
}

.sgsnapic-m3-composer-steps li.is-complete > span {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgsnapic-m3-composer-body {
    padding: clamp(20px, 3vw, 32px);
}

.sgsnapic-m3-upload-form {
    display: grid;
    grid-template-columns: minmax(240px, .72fr) minmax(380px, 1.28fr);
    align-items: start;
    gap: 20px 24px;
    min-width: 0;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 74%, transparent);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
}

.sgsnapic-m3-outlined-field {
    min-width: 0;
    padding-bottom: 0;
}

.sgsnapic-m3-outlined-field-leading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.sgsnapic-m3-outlined-field-leading .sgsnapic-m3-field-icon {
    position: absolute;
    top: 22px;
    left: 18px;
    z-index: 1;
    width: 28px;
    height: 28px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 24px;
    pointer-events: none;
    transition: color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
}

.sgsnapic-m3-outlined-field-leading input {
    min-height: 72px;
    padding: 26px 18px 10px 58px;
    border-radius: 16px;
    background: var(--md-sys-color-surface);
    font-size: 17px;
    line-height: 24px;
}

.sgsnapic-m3-outlined-field-leading label {
    top: 23px;
    left: 54px;
    border-radius: 4px;
    background: var(--md-sys-color-surface);
}

.sgsnapic-m3-outlined-field-leading input:focus + label,
.sgsnapic-m3-outlined-field-leading input:not(:placeholder-shown) + label {
    top: -9px;
    left: 14px;
}

.sgsnapic-m3-outlined-field-leading:focus-within .sgsnapic-m3-field-icon {
    color: var(--md-sys-color-primary);
}

.sgsnapic-m3-field-support {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 7px 14px 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-field-support output {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.sgsnapic-m3-upload-control {
    min-width: 0;
}

.sgsnapic-m3-upload-drop {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    min-height: 148px;
    padding: 24px;
    border-width: 2px;
    border-style: dashed;
    border-radius: var(--md-sys-shape-large);
    background:
        linear-gradient(135deg,
            var(--md-sys-color-surface-container-low),
            color-mix(in srgb, var(--md-sys-color-primary-container) 38%, var(--md-sys-color-surface)));
}

.sgsnapic-m3-upload-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px 22px 22px 8px;
    font-size: 34px;
}

.sgsnapic-m3-upload-copy strong {
    font: 600 18px/24px var(--m3-font-brand);
}

.sgsnapic-m3-upload-copy span {
    max-width: 42ch;
    margin-top: 4px;
    font-size: 13px;
    line-height: 19px;
}

.sgsnapic-m3-upload-browse,
.sgsnapic-m3-tonal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 600 13px/18px var(--m3-font-plain);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.sgsnapic-m3-upload-browse .material-symbols-rounded,
.sgsnapic-m3-tonal-button .material-symbols-rounded {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.sgsnapic-m3-upload-control.has-file .sgsnapic-m3-upload-drop {
    display: none;
}

.sgsnapic-m3-file-preview {
    grid-template-columns: 124px minmax(0, 1fr) auto;
    gap: 20px;
    min-height: 148px;
    margin: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-primary) 28%, var(--md-sys-color-outline-variant));
    border-radius: var(--md-sys-shape-large);
    background:
        linear-gradient(135deg,
            var(--md-sys-color-primary-container),
            color-mix(in srgb, var(--md-sys-color-secondary-container) 72%, var(--md-sys-color-surface)));
    color: var(--md-sys-color-on-primary-container);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-sys-color-surface) 36%, transparent);
    animation: sgsnapic-m3-preview-enter 360ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-preview-media {
    position: relative;
    width: 124px;
    height: 118px;
}

.sgsnapic-m3-file-preview .sgsnapic-m3-preview-media img {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    background: var(--md-sys-color-surface-container);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
}

.sgsnapic-m3-preview-check {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 34px;
    height: 34px;
    border: 3px solid var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 22px;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}

.sgsnapic-m3-preview-copy {
    display: grid;
    align-content: center;
    min-width: 0;
}

.sgsnapic-m3-preview-copy > span {
    color: var(--md-sys-color-primary);
    font: 650 11px/16px var(--m3-font-plain);
    letter-spacing: .7px;
    text-transform: uppercase;
}

.sgsnapic-m3-preview-copy > strong {
    margin-top: 3px;
    overflow: hidden;
    color: var(--md-sys-color-on-primary-container);
    font: 600 17px/24px var(--m3-font-brand);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgsnapic-m3-preview-copy > small {
    margin-top: 4px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-file-preview > .sgsnapic-m3-preview-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sgsnapic-m3-preview-actions .sgsnapic-m3-icon-button {
    background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

.sgsnapic-m3-upload-control > .sgsnapic-m3-supporting-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 12px 0;
}

.sgsnapic-m3-upload-control > .sgsnapic-m3-supporting-text .material-symbols-rounded {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.sgsnapic-m3-upload-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding-top: 4px;
}

.sgsnapic-m3-form-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background-color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);
}

.sgsnapic-m3-form-feedback > .material-symbols-rounded {
    width: 22px;
    height: 22px;
    font-size: 21px;
}

.sgsnapic-m3-form-feedback[data-state="ready"],
.sgsnapic-m3-form-feedback[data-state="success"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgsnapic-m3-form-feedback[data-state="loading"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgsnapic-m3-form-feedback[data-state="error"] {
    background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

.sgsnapic-m3-form-status {
    min-width: 0;
    color: inherit;
    font: 500 13px/18px var(--m3-font-plain);
    text-align: left;
}

.sgsnapic-m3-filled-button {
    min-width: 180px;
    min-height: 52px;
    padding-inline: 26px;
}

.sgsnapic-m3-filled-button:disabled {
    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, var(--md-sys-color-surface));
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.sgsnapic-m3-linear-progress {
    grid-column: 1 / -1;
    display: grid;
    gap: 14px;
    width: 100%;
    height: auto;
    padding: 16px 18px;
    overflow: visible;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgsnapic-m3-progress-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sgsnapic-m3-progress-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 22px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgsnapic-m3-progress-copy > div {
    display: grid;
    min-width: 0;
}

.sgsnapic-m3-progress-copy strong {
    font: 600 14px/20px var(--m3-font-plain);
}

.sgsnapic-m3-progress-copy span:not(.material-symbols-rounded) {
    font: 400 12px/17px var(--m3-font-plain);
}

.sgsnapic-m3-progress-copy output {
    min-width: 48px;
    color: var(--md-sys-color-primary);
    font: 700 16px/24px var(--m3-font-plain);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sgsnapic-m3-progress-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 18%, transparent);
}

.sgsnapic-m3-progress-bar > .sgsnapic-m3-linear-progress-indicator {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--md-sys-color-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--md-sys-color-primary) 42%, transparent);
    transition: width 180ms linear;
}

.sgsnapic-m3-rail-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.sgsnapic-m3-public-icon {
    width: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 22px 22px 22px 9px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgsnapic-m3-public-icon > .material-symbols-rounded {
    width: 30px;
    height: 30px;
    font-size: 29px;
}

.sgsnapic-m3-friends-icon {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
}

.sgsnapic-m3-feed-heading > .sgsnapic-m3-friends-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px 24px 24px 10px;
}

.sgsnapic-m3-vote-actions {
    grid-template-columns: repeat(5, minmax(48px, 1fr));
    gap: 5px;
    padding: 10px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
}

.sgsnapic-m3-vote-action {
    grid-template-rows: 32px 26px;
    gap: 4px;
    min-height: 72px;
    padding: 5px 2px;
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.sgsnapic-m3-vote-action .material-symbols-rounded {
    width: 32px;
    height: 32px;
    font-size: 29px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 32;
    transition:
        color var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default),
        font-variation-settings 220ms var(--md-sys-easing-emphasized),
        transform 300ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-vote-count {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    padding-inline: 7px;
    overflow: visible;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 700 15px/20px var(--m3-font-plain);
    font-variant-numeric: tabular-nums;
    text-overflow: clip;
}

.sgsnapic-m3-vote-action[aria-pressed="true"] .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 32;
    transform: scale(1.08);
    animation: sgsnapic-m3-vote-selected 320ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-vote-action[aria-pressed="true"] .sgsnapic-m3-vote-count {
    border-color: color-mix(in srgb, currentColor 28%, transparent);
    background: color-mix(in srgb, var(--md-sys-color-surface) 82%, transparent);
    color: inherit;
}

.sgsnapic-m3-vote-action:nth-child(1) {
    color: var(--md-sys-color-tertiary);
}

.sgsnapic-m3-vote-action:nth-child(1)[aria-pressed="true"] {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgsnapic-m3-vote-action:nth-child(2)[aria-pressed="true"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgsnapic-m3-vote-action:nth-child(3)[aria-pressed="true"],
.sgsnapic-m3-vote-action:nth-child(4)[aria-pressed="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgsnapic-m3-vote-action:nth-child(5) {
    color: var(--md-sys-color-error);
}

.sgsnapic-m3-vote-action:nth-child(5)[aria-pressed="true"] {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-surface);
}

.sgsnapic-m3-vote-action:hover:not([aria-pressed="true"]) {
    background: var(--md-sys-color-surface-container-high);
}

.sgsnapic-m3-loading {
    width: fit-content;
    min-height: 72px;
    margin-inline: auto;
    padding: 10px 18px 10px 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

@keyframes sgsnapic-m3-preview-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sgsnapic-m3-vote-selected {
    0% {
        transform: scale(.82);
    }

    68% {
        transform: scale(1.16);
    }

    100% {
        transform: scale(1.08);
    }
}

@media (max-width: 1120px) {
    .sgsnapic-m3-composer-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-composer-steps {
        justify-self: start;
    }

    .sgsnapic-m3-upload-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-upload-actions,
    .sgsnapic-m3-linear-progress {
        grid-column: 1;
    }
}

@media (max-width: 760px) {
    .sgsnapic-m3-composer {
        border-radius: var(--md-sys-shape-large);
    }

    .sgsnapic-m3-composer-header,
    .sgsnapic-m3-composer-body {
        padding: 20px;
    }

    .sgsnapic-m3-composer-header .sgsnapic-m3-section-heading {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 14px;
    }

    .sgsnapic-m3-composer-icon {
        width: 76px;
        min-width: 76px;
        min-height: 76px;
        border-radius: 23px 23px 23px 9px;
    }

    .sgsnapic-m3-composer-icon > .material-symbols-rounded {
        width: 32px;
        height: 32px;
        font-size: 31px;
    }

    .sgsnapic-m3-composer-steps {
        justify-self: stretch;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: var(--md-sys-shape-large);
    }

    .sgsnapic-m3-composer-steps li {
        justify-content: center;
        min-width: 0;
        padding-inline: 5px;
    }

    .sgsnapic-m3-upload-form {
        padding: 16px;
    }

    .sgsnapic-m3-upload-drop {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 156px;
        padding: 20px;
    }

    .sgsnapic-m3-upload-browse {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .sgsnapic-m3-file-preview {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .sgsnapic-m3-preview-media {
        width: 108px;
        height: 104px;
    }

    .sgsnapic-m3-preview-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .sgsnapic-m3-upload-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-filled-button {
        width: 100%;
    }

    .sgsnapic-m3-feed {
        order: 1;
    }

    .sgsnapic-m3-public {
        order: 2;
    }

    .sgsnapic-m3-ad {
        order: 3;
    }
}

@media (max-width: 520px) {
    .sgsnapic-m3-composer-header .sgsnapic-m3-section-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgsnapic-m3-composer-steps li {
        display: grid;
        place-items: center;
        gap: 3px;
        min-height: 58px;
    }

    .sgsnapic-m3-composer-steps li > span {
        width: 28px;
        height: 28px;
    }

    .sgsnapic-m3-outlined-field-leading input {
        min-height: 64px;
    }

    .sgsnapic-m3-file-preview {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        min-height: 132px;
    }

    .sgsnapic-m3-preview-media {
        width: 88px;
        height: 88px;
    }

    .sgsnapic-m3-preview-actions {
        justify-content: stretch;
    }

    .sgsnapic-m3-preview-actions .sgsnapic-m3-tonal-button {
        flex: 1;
    }

    .sgsnapic-m3-progress-copy {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sgsnapic-m3-progress-copy output {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .sgsnapic-m3-vote-actions {
        gap: 3px;
        padding-inline: 6px;
    }

    .sgsnapic-m3-vote-action {
        min-height: 68px;
        border-radius: 17px;
    }

    .sgsnapic-m3-vote-action .material-symbols-rounded {
        font-size: 27px;
    }

    .sgsnapic-m3-vote-count {
        min-width: 28px;
        font-size: 14px;
    }
}

/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes - sticky Snapic form and icons
- Change/Remove use embedded Material vector paths, preventing failed web-font
  ligatures from rendering as alphabet fragments.
- The createPostForm receives an adaptive is-stuck state below .sgm3-top after
  its original position scrolls away. A placeholder prevents layout jumping.
- The dock is a compact M3 surface with no internal scrolling.
- Public vote icons use primary, secondary, tertiary, and error semantic roles;
  selected icons remain role-colored and filled instead of becoming black.
===============================================================================
*/

.sgsnapic-m3-action-svg {
    display: block;
    flex: none;
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.sgsnapic-m3-form-sticky-sentinel {
    width: 100%;
    height: 1px;
    margin-top: -1px;
    pointer-events: none;
}

.sgsnapic-m3-form-sticky-placeholder {
    width: 100%;
}

.sgsnapic-m3-composer.has-stuck-form {
    overflow: visible;
}

.sgsnapic-m3-upload-form.is-stuck {
    position: fixed;
    top: var(--sgsnapic-sticky-top, calc(var(--sgm3-top, 72px) + 8px));
    left: var(--sgsnapic-sticky-left, 16px);
    z-index: 24;
    grid-template-columns: minmax(220px, .68fr) minmax(320px, 1.32fr) auto;
    align-items: center;
    gap: 8px 12px;
    width: var(--sgsnapic-sticky-width, calc(100vw - 32px));
    padding: 10px 12px;
    border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 88%, transparent);
    border-radius: var(--md-sys-shape-large);
    background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
    box-shadow:
        0 2px 4px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 10px 28px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent);
    backdrop-filter: blur(18px);
    animation: sgsnapic-m3-sticky-enter 280ms var(--md-sys-easing-emphasized);
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-outlined-field-leading input {
    min-height: 58px;
    padding-top: 20px;
    padding-bottom: 6px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-outlined-field-leading .sgsnapic-m3-field-icon {
    top: 16px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-outlined-field-leading label {
    top: 16px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-outlined-field-leading input:focus + label,
.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-outlined-field-leading input:not(:placeholder-shown) + label {
    top: -9px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-field-support,
.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-control > .sgsnapic-m3-supporting-text,
.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-form-feedback {
    display: none;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-drop {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 58px;
    padding: 7px 10px;
    border-width: 1px;
    border-radius: 18px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px 14px 14px 6px;
    font-size: 24px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-copy strong {
    font-size: 14px;
    line-height: 19px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-copy span {
    margin: 0;
    font-size: 11px;
    line-height: 15px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-browse {
    min-height: 42px;
    padding-inline: 13px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-file-preview {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 58px;
    padding: 4px 6px;
    border-radius: 18px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-preview-media {
    width: 50px;
    height: 50px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-preview-check {
    right: -3px;
    bottom: -3px;
    width: 22px;
    height: 22px;
    border-width: 2px;
    font-size: 15px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-preview-copy > span {
    display: none;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-preview-copy > strong {
    font-size: 13px;
    line-height: 18px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-preview-copy > small {
    margin: 0;
    font-size: 11px;
    line-height: 15px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-preview-actions {
    grid-column: auto;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-tonal-button {
    min-height: 42px;
    padding-inline: 13px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-actions {
    grid-column: auto;
    display: block;
    padding: 0;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-filled-button {
    width: auto;
    min-width: 154px;
    min-height: 48px;
    padding-inline: 18px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-linear-progress {
    grid-column: 1 / -1;
    gap: 8px;
    padding: 9px 12px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-progress-copy {
    min-height: 36px;
}

.sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-progress-icon {
    width: 34px;
    height: 34px;
    font-size: 19px;
}

.sgsnapic-m3-vote-action:nth-child(2) {
    color: var(--md-sys-color-primary);
}

.sgsnapic-m3-vote-action:nth-child(3) {
    color: var(--md-sys-color-secondary);
}

.sgsnapic-m3-vote-action:nth-child(4) {
    color: var(--md-sys-color-tertiary);
}

.sgsnapic-m3-vote-action:nth-child(1)[aria-pressed="true"] {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
}

.sgsnapic-m3-vote-action:nth-child(2)[aria-pressed="true"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.sgsnapic-m3-vote-action:nth-child(3)[aria-pressed="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-secondary);
}

.sgsnapic-m3-vote-action:nth-child(4)[aria-pressed="true"] {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
}

.sgsnapic-m3-vote-action:nth-child(5)[aria-pressed="true"] {
    background: color-mix(in srgb, var(--md-sys-color-error) 14%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

@keyframes sgsnapic-m3-sticky-enter {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 900px) {
    .sgsnapic-m3-upload-form.is-stuck {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 9px;
        padding: 8px;
        border-radius: 20px;
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-outlined-field {
        grid-column: 1 / -1;
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-control {
        grid-column: 1;
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-actions {
        grid-column: 2;
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-copy > span {
        display: none;
    }
}

@media (max-width: 560px) {
    .sgsnapic-m3-upload-form.is-stuck {
        left: 8px;
        width: calc(100vw - 16px);
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-browse > span:last-child,
    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-tonal-button > span:last-child,
    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-filled-button > span:last-child {
        display: none;
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-upload-browse,
    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-tonal-button {
        width: 42px;
        padding: 0;
    }

    .sgsnapic-m3-upload-form.is-stuck .sgsnapic-m3-filled-button {
        width: 48px;
        min-width: 48px;
        padding: 0;
    }
}

/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes - SG Buyer linked workflow

Layout and responsive behavior
- One shared action-first system covers seller discovery, store, item, basket,
  checkout, confirmation, orders, invoice, buyer activity, and full report.
- Auto-fit grids and mobile card tables preserve every link and action without
  page-level horizontal overflow or fixed-height inner scrolling.

M3 components and states
- Destination navigation, compact heroes, outlined fields/cards, filled/tonal/
  text/icon buttons, filter/input chips, banners, metrics, status chips, tabs,
  an M3 standard button group, adaptive tables, empty states, and a real loading
  indicator are implemented.
- Hover, focus-visible, pressed, active/current, loading, success, information,
  error, empty, required, filtered, and disabled states are represented.

Color roles and design tokens
- Shared primary, secondary, tertiary, error, surface-container, outline, and
  matching on-color roles are used. No buyer-page independent palette remains.

Typography
- Shared Google Sans/Roboto fallbacks map display, headline, title, body, label,
  and supporting content to the SavvyGreat M3 hierarchy.

Shape and elevation
- Full controls, large/extra-large surfaces, outlined cards, and low semantic
  elevation follow the SavvyGreat M3 shape and elevation system.

Spacing and sizing
- An 8dp-derived rhythm, fluid gutters, readable line lengths, 48px minimum
  interaction targets, and responsive media sizing apply throughout.

Icons and imagery
- Material Symbols Rounded replace Font Awesome. Product images retain meaningful
  alternatives, lazy loading where appropriate, and contained responsive media.
- Buyer heading and card symbols are nested inside dedicated fixed-size containers,
  separating icon-font metrics from layout and guaranteeing optical centering.
- Activity views use individually outlined medium standard-group buttons: 48dp
  targets, 8dp spacing, visible selection/focus, and coordinated selected width.

Motion and interactions
- Spatial motion uses emphasized easing; color/opacity uses effects motion.
  Reduced-motion removes nonessential movement.

Accessibility
- Native links/buttons/inputs, persistent aria-current/aria-selected/aria-pressed,
  tab roving focus, labelled form fields, polite status, error alerts, semantic
  tables/lists, visible focus, touch targets, and forced-colors support apply.

Files/components affected
- Areas/Users/Views/SGBizBuyer/*.cshtml
- Areas/Users/Views/AppAccounts/AccDailyActivity/Index.cshtml
- Areas/Users/Views/AppAccounts/AccDailyActivity/_FullReport.cshtml
- CodeBehind/css/SgStyleCss.css

Temporary compatibility or repair work
- Existing MVC actions, request/model names, antiforgery, idempotency, TempData,
  AJAX partials, DataTables, product images, basket/order/invoice/account routes,
  fragments, and public identifiers remain unchanged.

Remaining conversion work
- AccFinYear already uses the linked-page M3 system. Other account applications
  outside the buyer destination bar remain separate conversion surfaces.
===============================================================================
*/

.sgbuyer-m3-page,
.sgbuyer-m3-page *,
.sgbuyer-m3-page *::before,
.sgbuyer-m3-page *::after,
.sgbuyer-m3-navigation,
.sgbuyer-m3-navigation *,
.sgbuyer-m3-full-report,
.sgbuyer-m3-full-report * {
    box-sizing: border-box;
}

.sgbuyer-m3-page {
    width: min(100%, 1440px);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(10px, 2vw, 28px);
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
}

.sgbuyer-m3-page > * + * {
    margin-top: clamp(14px, 1.8vw, 24px);
}

.sgbuyer-m3-page .is-hidden,
.sgbuyer-m3-navigation .is-hidden {
    display: none !important;
}

.sgbuyer-m3-page button,
.sgbuyer-m3-page input,
.sgbuyer-m3-page textarea {
    font: inherit;
}

.sgbuyer-m3-navigation.is-stuck {
    position: sticky;
    top: calc(var(--sgm3-top, 72px) + 6px);
    z-index: 25;
    width: 100%;
    margin: 0 0 clamp(14px, 1.8vw, 24px);
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 82%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent),
        0 6px 18px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    backdrop-filter: blur(18px);
}

.sgbuyer-m3-actionbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
}

.sgbuyer-m3-actionbar-link {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 34px minmax(0, auto);
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 10px;
    overflow: hidden;
    border-radius: 18px;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/16px var(--m3-font-plain);
    text-align: center;
    text-decoration: none;
    transition:
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgbuyer-m3-actionbar-link::after,
.sgbuyer-m3-filled-button::after,
.sgbuyer-m3-tonal-button::after,
.sgbuyer-m3-text-button::after,
.sgbuyer-m3-icon-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgbuyer-m3-actionbar-link:hover::after,
.sgbuyer-m3-filled-button:hover::after,
.sgbuyer-m3-tonal-button:hover::after,
.sgbuyer-m3-text-button:hover::after,
.sgbuyer-m3-icon-button:hover::after {
    opacity: .08;
}

.sgbuyer-m3-actionbar-link:active,
.sgbuyer-m3-filled-button:active,
.sgbuyer-m3-tonal-button:active,
.sgbuyer-m3-text-button:active,
.sgbuyer-m3-icon-button:active {
    transform: scale(.97);
}

.sgbuyer-m3-actionbar-link.is-active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbuyer-m3-actionbar-link > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--md-sys-color-primary);
    font-size: 21px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.sgbuyer-m3-actionbar-link.is-active > .material-symbols-rounded {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 20;
}

.sgbuyer-m3-hero,
.sgbuyer-m3-store-header,
.sgbuyer-m3-page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 3vw, 36px);
    min-width: 0;
    padding: clamp(22px, 3.2vw, 38px);
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 30px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbuyer-m3-hero-compact {
    min-height: 190px;
    background:
        radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--md-sys-color-tertiary-container) 80%, transparent), transparent 34%),
        var(--md-sys-color-primary-container);
}

.sgbuyer-m3-overline {
    display: block;
    margin: 0 0 5px;
    color: var(--md-sys-color-primary);
    font: 650 11px/16px var(--m3-font-plain);
    letter-spacing: .75px;
    text-transform: uppercase;
}

.sgbuyer-m3-hero h1,
.sgbuyer-m3-store-header h1,
.sgbuyer-m3-page-heading h1 {
    max-width: 18ch;
    margin: 0;
    color: inherit;
    font: 475 clamp(32px, 4vw, 52px)/1.08 var(--m3-font-brand);
    letter-spacing: -.7px;
    text-wrap: balance;
}

.sgbuyer-m3-hero p,
.sgbuyer-m3-store-header p,
.sgbuyer-m3-page-heading p {
    max-width: 64ch;
    margin: 8px 0 0;
    color: inherit;
    font: 400 15px/23px var(--m3-font-plain);
    opacity: .84;
}

.sgbuyer-m3-hero-action,
.sgbuyer-m3-filled-button,
.sgbuyer-m3-tonal-button,
.sgbuyer-m3-text-button,
.sgbuyer-m3-icon-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    overflow: hidden;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    font: 600 14px/20px var(--m3-font-plain);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        box-shadow var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        background-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgbuyer-m3-hero-action,
.sgbuyer-m3-filled-button {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
}

.sgbuyer-m3-tonal-button {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbuyer-m3-text-button {
    padding-inline: 14px;
    background: transparent;
    color: var(--md-sys-color-primary);
}

.sgbuyer-m3-icon-button {
    flex: none;
    width: 48px;
    padding: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-icon-button.is-error {
    background: color-mix(in srgb, var(--md-sys-color-error) 10%, transparent);
    color: var(--md-sys-color-error);
}

.sgbuyer-m3-hero-action:hover,
.sgbuyer-m3-filled-button:hover {
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
}

.sgbuyer-m3-tonal-button:hover,
.sgbuyer-m3-text-button:hover,
.sgbuyer-m3-icon-button:hover {
    color: inherit;
    text-decoration: none;
}

.sgbuyer-m3-filled-button > .material-symbols-rounded,
.sgbuyer-m3-tonal-button > .material-symbols-rounded,
.sgbuyer-m3-text-button > .material-symbols-rounded,
.sgbuyer-m3-hero-action > .material-symbols-rounded,
.sgbuyer-m3-icon-button > .material-symbols-rounded {
    font-size: 21px;
}

.sgbuyer-m3-banner {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 16px 8px 8px;
    border-radius: 20px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 400 14px/21px var(--m3-font-plain);
}

.sgbuyer-m3-banner > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-secondary);
    font-size: 25px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgbuyer-m3-banner.is-success {
    background: color-mix(in srgb, var(--md-sys-color-primary-container) 68%, var(--md-sys-color-surface));
    color: var(--md-sys-color-on-primary-container);
}

.sgbuyer-m3-banner.is-success > .material-symbols-rounded {
    color: var(--md-sys-color-primary);
}

.sgbuyer-m3-banner.is-error {
    background: color-mix(in srgb, var(--md-sys-color-error) 12%, var(--md-sys-color-surface));
    color: var(--md-sys-color-error);
}

.sgbuyer-m3-banner.is-error > .material-symbols-rounded {
    color: var(--md-sys-color-error);
}

.sgbuyer-m3-search-form,
.sgbuyer-m3-results,
.sgbuyer-m3-summary-card,
.sgbuyer-m3-checkout-form,
.sgbuyer-m3-activity-surface,
.sgbuyer-m3-full-report {
    min-width: 0;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-low);
}

.sgbuyer-m3-section-heading,
.sgbuyer-m3-card-heading {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sgbuyer-m3-heading-icon,
.sgbuyer-m3-card-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    overflow: hidden;
    border-radius: 19px 19px 19px 7px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    text-align: center;
    vertical-align: middle;
}

.sgbuyer-m3-heading-icon > .material-symbols-rounded,
.sgbuyer-m3-card-icon > .material-symbols-rounded {
    display: block;
    width: 1em;
    height: 1em;
    flex: none;
    font-size: 29px;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 28;
}

.sgbuyer-m3-section-heading h2,
.sgbuyer-m3-card-heading h2,
.sgbuyer-m3-card-heading h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 24px/31px var(--m3-font-brand);
}

.sgbuyer-m3-section-heading p,
.sgbuyer-m3-card-heading p {
    margin: 3px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgbuyer-m3-field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
    min-width: 0;
    margin-top: 22px;
}

.sgbuyer-m3-outlined-field {
    position: relative;
    display: grid;
    min-width: 0;
}

.sgbuyer-m3-outlined-field > span:first-child {
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 14px;
    padding: 0 5px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/16px var(--m3-font-plain);
}

.sgbuyer-m3-basket-card .sgbuyer-m3-outlined-field > span:first-child {
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-outlined-field input,
.sgbuyer-m3-outlined-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 15px 16px 10px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 14px;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 400 15px/22px var(--m3-font-plain);
    resize: vertical;
}

.sgbuyer-m3-outlined-field textarea {
    min-height: 104px;
    padding-top: 18px;
}

.sgbuyer-m3-outlined-field input:focus,
.sgbuyer-m3-outlined-field textarea:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgbuyer-m3-search-submit {
    width: 100%;
}

.sgbuyer-m3-result-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.sgbuyer-m3-result-header h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 28px/36px var(--m3-font-brand);
}

.sgbuyer-m3-result-header > p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 13px/18px var(--m3-font-plain);
}

.sgbuyer-m3-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 0;
    margin-bottom: 14px;
}

.sgbuyer-m3-active-filters:empty {
    display: none;
}

.sgbuyer-m3-input-chip,
.sgbuyer-m3-status-chip,
.sgbuyer-m3-stock-chip,
.sgbuyer-m3-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 600 12px/16px var(--m3-font-plain);
}

.sgbuyer-m3-seller-grid,
.sgbuyer-m3-product-grid,
.sgbuyer-m3-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: 16px;
    min-width: 0;
    transition: opacity var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgbuyer-m3-seller-grid.is-loading {
    opacity: .58;
    pointer-events: none;
}

.sgbuyer-m3-seller-card,
.sgbuyer-m3-product-card,
.sgbuyer-m3-basket-card,
.sgbuyer-m3-order-card {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    transition:
        transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        border-color var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear),
        box-shadow var(--md-sys-motion-effects-default-duration, 180ms) var(--md-sys-motion-effects-default, linear);
}

.sgbuyer-m3-seller-card,
.sgbuyer-m3-order-card {
    flex-direction: column;
    gap: 14px;
}

.sgbuyer-m3-seller-card:hover,
.sgbuyer-m3-product-card:hover,
.sgbuyer-m3-basket-card:hover,
.sgbuyer-m3-order-card:hover {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    transform: translateY(-2px);
}

.sgbuyer-m3-seller-card .sgbuyer-m3-filled-button {
    width: 100%;
    margin-top: auto;
}

.sgbuyer-m3-card-heading h3 {
    overflow-wrap: anywhere;
}

.sgbuyer-m3-card-address {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    min-height: 42px;
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgbuyer-m3-card-address > .material-symbols-rounded {
    color: var(--md-sys-color-secondary);
    font-size: 21px;
}

.sgbuyer-m3-card-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container);
    font: 500 12px/17px var(--m3-font-plain);
}

.sgbuyer-m3-card-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sgbuyer-m3-card-stats .material-symbols-rounded {
    font-size: 19px;
}

.sgbuyer-m3-load-more {
    display: grid;
    place-items: center;
    margin-top: 20px;
}

.sgbuyer-m3-tonal-button.is-loading > .material-symbols-rounded {
    animation: sgbuyer-m3-spin 800ms linear infinite;
}

.sgbuyer-m3-empty {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 22px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 22px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.sgbuyer-m3-empty > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 19px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 28px;
}

.sgbuyer-m3-empty h2,
.sgbuyer-m3-empty h3 {
    margin: 0;
    color: inherit;
    font: 475 21px/27px var(--m3-font-brand);
}

.sgbuyer-m3-empty p {
    margin: 3px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgbuyer-m3-empty.is-error {
    color: var(--md-sys-color-error);
}

.sgbuyer-m3-empty-large {
    min-height: 190px;
}

.sgbuyer-m3-store-header {
    min-height: 130px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.sgbuyer-m3-store-header-small {
    min-height: 112px;
    padding-block: 18px;
}

.sgbuyer-m3-store-header h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 28px/35px var(--m3-font-brand);
}

.sgbuyer-m3-store-header .sgbuyer-m3-card-heading > div > p {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sgbuyer-m3-store-header p > .material-symbols-rounded {
    font-size: 20px;
}

.sgbuyer-m3-count-badge {
    min-width: 28px;
    min-height: 28px;
    padding-inline: 8px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.sgbuyer-m3-product-card {
    flex-direction: column;
    padding: 0;
}

.sgbuyer-m3-product-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--md-sys-color-surface-container);
}

.sgbuyer-m3-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--md-sys-motion-spatial-default-duration, 450ms) var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgbuyer-m3-product-card:hover .sgbuyer-m3-product-media img {
    transform: scale(1.035);
}

.sgbuyer-m3-stock-chip {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
    color: var(--md-sys-color-on-surface);
    backdrop-filter: blur(10px);
}

.sgbuyer-m3-product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
}

.sgbuyer-m3-product-body h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 22px/28px var(--m3-font-brand);
}

.sgbuyer-m3-product-body p {
    margin: 7px 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgbuyer-m3-product-price {
    margin: auto 0 14px;
    color: var(--md-sys-color-primary);
    font: 600 21px/27px var(--m3-font-brand);
}

.sgbuyer-m3-item-layout {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(18px, 3vw, 32px);
    min-width: 0;
}

.sgbuyer-m3-item-media {
    position: sticky;
    top: calc(var(--sgm3-top, 72px) + 82px);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface-container);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgbuyer-m3-item-media img {
    display: block;
    width: 100%;
    max-height: 620px;
    object-fit: contain;
}

.sgbuyer-m3-item-panel {
    min-width: 0;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-item-panel > h1 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font: 475 clamp(32px, 4vw, 48px)/1.1 var(--m3-font-brand);
}

.sgbuyer-m3-item-seller {
    margin: 5px 0 0;
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-item-price {
    display: block;
    margin: 18px 0;
    color: var(--md-sys-color-primary);
    font: 600 30px/38px var(--m3-font-brand);
}

.sgbuyer-m3-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sgbuyer-m3-spec {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container);
}

.sgbuyer-m3-spec > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-secondary);
    font-size: 22px;
}

.sgbuyer-m3-spec > span:last-child {
    display: grid;
    min-width: 0;
}

.sgbuyer-m3-spec small {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 11px/15px var(--m3-font-plain);
}

.sgbuyer-m3-spec strong {
    overflow-wrap: anywhere;
    font: 600 13px/18px var(--m3-font-plain);
}

.sgbuyer-m3-description {
    margin-top: 20px;
    padding: 18px;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-low);
}

.sgbuyer-m3-description h2 {
    margin: 0 0 5px;
    font: 475 20px/26px var(--m3-font-brand);
}

.sgbuyer-m3-description p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 14px/21px var(--m3-font-plain);
}

.sgbuyer-m3-purchase-form {
    display: grid;
    grid-template-columns: minmax(130px, 180px) auto;
    align-items: end;
    gap: 12px;
    margin-top: 20px;
}

.sgbuyer-m3-page-heading {
    min-height: 130px;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.sgbuyer-m3-page-heading > .sgbuyer-m3-heading-icon {
    align-self: center;
    justify-self: center;
    width: 80px;
    height: 80px;
    border-radius: 26px 26px 26px 10px;
}

.sgbuyer-m3-page-heading > .sgbuyer-m3-heading-icon > .material-symbols-rounded {
    font-size: 42px;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 40;
}

.sgbuyer-m3-heading-count {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    padding-inline: 12px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 650 17px/22px var(--m3-font-brand);
}

.sgbuyer-m3-basket-layout,
.sgbuyer-m3-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    align-items: start;
    gap: clamp(16px, 2.6vw, 30px);
    min-width: 0;
}

.sgbuyer-m3-basket-lines {
    display: grid;
    gap: 14px;
}

.sgbuyer-m3-basket-card {
    flex-direction: column;
    gap: 16px;
}

.sgbuyer-m3-basket-prices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sgbuyer-m3-basket-prices > span {
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container);
}

.sgbuyer-m3-basket-prices small {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 11px/15px var(--m3-font-plain);
}

.sgbuyer-m3-basket-prices strong {
    font: 600 16px/22px var(--m3-font-brand);
}

.sgbuyer-m3-basket-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.sgbuyer-m3-quantity-form {
    display: grid;
    grid-template-columns: minmax(110px, 160px) auto;
    align-items: end;
    gap: 8px;
    min-width: min(100%, 300px);
}

.sgbuyer-m3-remove-form {
    display: inline-flex;
}

.sgbuyer-m3-order-total {
    position: sticky;
    top: calc(var(--sgm3-top, 72px) + 82px);
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 24px;
    border-radius: 26px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbuyer-m3-order-total > .sgbuyer-m3-heading-icon {
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-order-total h2 {
    margin: 0;
    font: 475 26px/33px var(--m3-font-brand);
}

.sgbuyer-m3-order-total dl,
.sgbuyer-m3-order-card dl,
.sgbuyer-m3-detail-list,
.sgbuyer-m3-invoice-header dl,
.sgbuyer-m3-report-metadata {
    display: grid;
    gap: 0;
    margin: 0;
}

.sgbuyer-m3-order-total dl > div,
.sgbuyer-m3-order-card dl > div,
.sgbuyer-m3-detail-list > div,
.sgbuyer-m3-invoice-header dl > div,
.sgbuyer-m3-report-metadata > div {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.sgbuyer-m3-order-total dt,
.sgbuyer-m3-order-card dt,
.sgbuyer-m3-detail-list dt,
.sgbuyer-m3-invoice-header dt,
.sgbuyer-m3-report-metadata dt {
    color: inherit;
    font: 500 12px/17px var(--m3-font-plain);
    opacity: .78;
}

.sgbuyer-m3-order-total dd,
.sgbuyer-m3-order-card dd,
.sgbuyer-m3-detail-list dd,
.sgbuyer-m3-invoice-header dd,
.sgbuyer-m3-report-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
    font: 600 13px/18px var(--m3-font-plain);
    text-align: right;
}

.sgbuyer-m3-order-total dl > .is-total {
    padding-top: 16px;
    border: 0;
}

.sgbuyer-m3-order-total .is-total dd {
    font: 600 21px/27px var(--m3-font-brand);
}

.sgbuyer-m3-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.sgbuyer-m3-checkout-form {
    display: grid;
    gap: 16px;
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-summary-card {
    display: grid;
    gap: 18px;
}

.sgbuyer-m3-summary-lines {
    display: grid;
    gap: 8px;
}

.sgbuyer-m3-summary-lines article {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-summary-lines article > div {
    display: grid;
}

.sgbuyer-m3-summary-lines small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbuyer-m3-summary-total strong {
    font: 600 20px/26px var(--m3-font-brand);
}

.sgbuyer-m3-place-order {
    width: 100%;
}

.sgbuyer-m3-result-card {
    width: min(100%, 860px);
    margin-inline: auto;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 32px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    text-align: center;
}

.sgbuyer-m3-result-card.is-success {
    background: linear-gradient(180deg, var(--md-sys-color-primary-container), var(--md-sys-color-surface) 58%);
}

.sgbuyer-m3-result-icon {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 30px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 48px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 48;
}

.sgbuyer-m3-result-card h1 {
    margin: 0;
    font: 475 clamp(34px, 5vw, 52px)/1.08 var(--m3-font-brand);
}

.sgbuyer-m3-result-card > p {
    margin: 10px auto 22px;
    max-width: 64ch;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 16px/24px var(--m3-font-plain);
}

.sgbuyer-m3-detail-list {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
    text-align: left;
}

.sgbuyer-m3-result-card .sgbuyer-m3-inline-actions {
    justify-content: center;
}

.sgbuyer-m3-order-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.sgbuyer-m3-order-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.sgbuyer-m3-order-card h2 {
    margin: 0;
    font: 475 22px/28px var(--m3-font-brand);
}

.sgbuyer-m3-order-seller {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container);
}

.sgbuyer-m3-order-seller > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
    font-size: 24px;
}

.sgbuyer-m3-order-seller > span:last-child {
    display: grid;
    min-width: 0;
}

.sgbuyer-m3-order-seller small {
    overflow: hidden;
    color: var(--md-sys-color-on-surface-variant);
    text-overflow: ellipsis;
}

.sgbuyer-m3-order-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sgbuyer-m3-order-card dl > div {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    background: var(--md-sys-color-surface-container-low);
}

.sgbuyer-m3-order-card dd {
    text-align: left;
}

.sgbuyer-m3-print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.sgbuyer-m3-invoice {
    width: min(100%, 1100px);
    margin-inline: auto;
    padding: clamp(22px, 4vw, 46px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

.sgbuyer-m3-invoice-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr);
    gap: 26px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--md-sys-color-primary);
}

.sgbuyer-m3-invoice-header h1 {
    margin: 0;
    font: 475 44px/52px var(--m3-font-brand);
}

.sgbuyer-m3-invoice-header p {
    margin: 5px 0 0;
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-party-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.sgbuyer-m3-party-grid > article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
}

.sgbuyer-m3-party-grid h2 {
    margin: 0;
    font: 475 20px/26px var(--m3-font-brand);
}

.sgbuyer-m3-party-grid p {
    margin: 3px 0 0;
    color: var(--md-sys-color-on-surface-variant);
    overflow-wrap: anywhere;
}

.sgbuyer-m3-table-region {
    min-width: 0;
    width: 100%;
}

.sgbuyer-m3-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 18px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 13px/19px var(--m3-font-plain);
}

.sgbuyer-m3-data-table th,
.sgbuyer-m3-data-table td {
    padding: 12px 10px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.sgbuyer-m3-data-table thead th {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    font: 650 12px/17px var(--m3-font-plain);
}

.sgbuyer-m3-data-table tbody tr:last-child td,
.sgbuyer-m3-data-table tfoot tr:last-child th {
    border-bottom: 0;
}

.sgbuyer-m3-data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--md-sys-color-primary) 4%, transparent);
}

.sgbuyer-m3-data-table td small {
    display: block;
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-data-table tfoot th {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgbuyer-m3-shipping {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 18px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbuyer-m3-shipping > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-secondary);
    font-size: 27px;
}

.sgbuyer-m3-shipping p {
    margin: 3px 0 0;
}

.sgbuyer-m3-activity-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sgbuyer-m3-activity-metrics > div {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 10px;
    min-width: 0;
    padding: 12px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
}

.sgbuyer-m3-activity-metrics .material-symbols-rounded {
    display: grid;
    grid-row: 1 / 3;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-size: 26px;
}

.sgbuyer-m3-activity-metrics > div:nth-child(2) .material-symbols-rounded {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-secondary);
}

.sgbuyer-m3-activity-metrics > div:nth-child(3) .material-symbols-rounded {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-tertiary);
}

.sgbuyer-m3-activity-metrics strong {
    font: 600 24px/29px var(--m3-font-brand);
}

.sgbuyer-m3-activity-metrics small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-documentation-tabs {
    position: sticky;
    top: calc(var(--sgm3-top, 72px) + 76px);
    z-index: 20;
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 22px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 95%, transparent);
    backdrop-filter: blur(16px);
}

.sgbuyer-m3-activity-tabs {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
}

.sgbuyer-m3-activity-tabs::-webkit-scrollbar {
    display: none;
}

.sgbuyer-m3-activity-tabs button {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 0;
    min-width: 104px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 16px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    font: 600 12px/16px var(--m3-font-plain);
    scroll-snap-align: start;
    cursor: pointer;
    transition:
        flex-grow 280ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        min-width 280ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        padding 280ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        border-radius 280ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1)),
        background-color 180ms var(--md-sys-motion-effects-default, cubic-bezier(.2, 0, 0, 1)),
        border-color 180ms var(--md-sys-motion-effects-default, cubic-bezier(.2, 0, 0, 1)),
        color 180ms var(--md-sys-motion-effects-default, cubic-bezier(.2, 0, 0, 1)),
        transform 180ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgbuyer-m3-activity-tabs button:first-child,
.sgbuyer-m3-activity-tabs button:last-child {
    border-radius: var(--md-sys-shape-full);
}

.sgbuyer-m3-activity-tabs button:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgbuyer-m3-activity-tabs button:active {
    transform: scale(.97);
}

.sgbuyer-m3-activity-tabs button[aria-selected="true"] {
    flex-grow: 1.28;
    min-width: 124px;
    padding-inline: 16px;
    border-color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgbuyer-m3-activity-tabs .material-symbols-rounded {
    font-size: 20px;
}

.sgbuyer-m3-activity-tabs small {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding-inline: 5px;
    border-radius: 12px;
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-activity-surface {
    animation: sgbuyer-m3-panel-enter 340ms var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgbuyer-m3-full-report-host:empty {
    display: none;
}

.sgbuyer-m3-full-report-host {
    scroll-margin-top: calc(var(--sgm3-top, 72px) + 150px);
}

.sgbuyer-m3-full-report {
    background: var(--md-sys-color-surface);
}

.sgbuyer-m3-report-metadata {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.sgbuyer-m3-report-metadata > div {
    display: grid;
    justify-content: stretch;
    gap: 3px;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    background: var(--md-sys-color-surface-container-low);
}

.sgbuyer-m3-report-metadata dd {
    text-align: left;
}

.sgbuyer-m3-table-detail td {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}

.sgbuyer-m3-loader {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 132px;
    border-radius: 24px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.sgbuyer-m3-loader > span {
    width: 44px;
    height: 44px;
    border: 4px solid var(--md-sys-color-secondary-container);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: sgbuyer-m3-spin 850ms linear infinite;
}

.sgbuyer-m3-actionbar-link:focus-visible,
.sgbuyer-m3-hero-action:focus-visible,
.sgbuyer-m3-filled-button:focus-visible,
.sgbuyer-m3-tonal-button:focus-visible,
.sgbuyer-m3-text-button:focus-visible,
.sgbuyer-m3-icon-button:focus-visible,
.sgbuyer-m3-outlined-field input:focus-visible,
.sgbuyer-m3-outlined-field textarea:focus-visible,
.sgbuyer-m3-product-media:focus-visible,
.sgbuyer-m3-activity-tabs button:focus-visible,
.sgbuyer-m3-data-table button:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

@keyframes sgbuyer-m3-spin {
    to { transform: rotate(360deg); }
}

@keyframes sgbuyer-m3-panel-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    .sgbuyer-m3-actionbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgbuyer-m3-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgbuyer-m3-documentation-tabs {
        top: calc(var(--sgm3-top, 72px) + 8px);
    }
}

@media (max-width: 820px) {
    .sgbuyer-m3-hero,
    .sgbuyer-m3-store-header,
    .sgbuyer-m3-page-heading {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        padding: 24px;
        border-radius: 26px;
    }

    .sgbuyer-m3-page-heading {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .sgbuyer-m3-page-heading > .sgbuyer-m3-heading-icon {
        width: 72px;
        height: 72px;
        border-radius: 23px 23px 23px 9px;
    }

    .sgbuyer-m3-page-heading > .sgbuyer-m3-heading-icon > .material-symbols-rounded {
        font-size: 38px;
        font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 40;
    }

    .sgbuyer-m3-page-heading > .sgbuyer-m3-filled-button {
        grid-column: 1 / -1;
    }

    .sgbuyer-m3-item-layout,
    .sgbuyer-m3-basket-layout,
    .sgbuyer-m3-checkout-layout,
    .sgbuyer-m3-invoice-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbuyer-m3-item-media,
    .sgbuyer-m3-order-total {
        position: relative;
        top: auto;
    }

    .sgbuyer-m3-party-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbuyer-m3-report-metadata {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 640px) {
    .sgbuyer-m3-page {
        padding: 8px;
    }

    .sgbuyer-m3-navigation.is-stuck {
        top: calc(var(--sgm3-top, 72px) + 4px);
        padding: 4px;
        border-radius: 20px;
    }

    .sgbuyer-m3-actionbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }

    .sgbuyer-m3-actionbar-link {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 28px auto;
        gap: 2px;
        min-height: 58px;
        padding: 4px 2px;
        border-radius: 15px;
        font-size: 10px;
        line-height: 13px;
    }

    .sgbuyer-m3-actionbar-link > .material-symbols-rounded {
        justify-self: center;
        width: 28px;
        height: 28px;
        border-radius: 10px;
        font-size: 19px;
    }

    .sgbuyer-m3-hero,
    .sgbuyer-m3-store-header,
    .sgbuyer-m3-page-heading {
        min-height: auto;
        padding: 21px 17px;
        border-radius: 22px;
    }

    .sgbuyer-m3-page-heading {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .sgbuyer-m3-page-heading > .sgbuyer-m3-heading-icon {
        width: 64px;
        height: 64px;
        border-radius: 21px 21px 21px 8px;
    }

    .sgbuyer-m3-page-heading > .sgbuyer-m3-heading-icon > .material-symbols-rounded {
        font-size: 34px;
        font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 36;
    }

    .sgbuyer-m3-hero h1,
    .sgbuyer-m3-store-header h1,
    .sgbuyer-m3-page-heading h1 {
        font-size: 32px;
        line-height: 38px;
    }

    .sgbuyer-m3-hero-action,
    .sgbuyer-m3-page-heading > .sgbuyer-m3-filled-button {
        width: 100%;
    }

    .sgbuyer-m3-search-form,
    .sgbuyer-m3-results,
    .sgbuyer-m3-summary-card,
    .sgbuyer-m3-checkout-form,
    .sgbuyer-m3-activity-surface,
    .sgbuyer-m3-full-report {
        padding: 16px 12px;
        border-radius: 22px;
    }

    .sgbuyer-m3-section-heading,
    .sgbuyer-m3-card-heading {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 11px;
    }

    .sgbuyer-m3-heading-icon,
    .sgbuyer-m3-card-icon {
        width: 50px;
        height: 50px;
        border-radius: 17px 17px 17px 6px;
    }

    .sgbuyer-m3-heading-icon > .material-symbols-rounded,
    .sgbuyer-m3-card-icon > .material-symbols-rounded {
        font-size: 25px;
    }

    .sgbuyer-m3-section-heading h2,
    .sgbuyer-m3-card-heading h2,
    .sgbuyer-m3-card-heading h3 {
        font-size: 21px;
        line-height: 27px;
    }

    .sgbuyer-m3-field-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .sgbuyer-m3-result-header {
        align-items: start;
        flex-direction: column;
        gap: 5px;
    }

    .sgbuyer-m3-purchase-form,
    .sgbuyer-m3-quantity-form {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .sgbuyer-m3-purchase-form .sgbuyer-m3-filled-button,
    .sgbuyer-m3-quantity-form .sgbuyer-m3-tonal-button {
        width: 100%;
    }

    .sgbuyer-m3-spec-grid,
    .sgbuyer-m3-basket-prices,
    .sgbuyer-m3-activity-metrics,
    .sgbuyer-m3-report-metadata {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbuyer-m3-basket-actions {
        align-items: stretch;
    }

    .sgbuyer-m3-order-card dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgbuyer-m3-inline-actions > .sgbuyer-m3-filled-button,
    .sgbuyer-m3-inline-actions > .sgbuyer-m3-tonal-button,
    .sgbuyer-m3-inline-actions > .sgbuyer-m3-text-button {
        flex: 1 1 100%;
    }

    .sgbuyer-m3-print-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgbuyer-m3-invoice {
        padding: 18px 12px;
        border-radius: 22px;
    }

    .sgbuyer-m3-documentation-tabs {
        margin-inline: -4px;
        padding: 6px;
        border-radius: 20px;
    }

    .sgbuyer-m3-activity-tabs {
        gap: 8px;
    }

    .sgbuyer-m3-activity-tabs button {
        min-width: 96px;
        padding-inline: 10px;
    }

    .sgbuyer-m3-activity-tabs button[aria-selected="true"] {
        min-width: 116px;
        padding-inline: 14px;
    }

    .sgbuyer-m3-data-table,
    .sgbuyer-m3-data-table thead,
    .sgbuyer-m3-data-table tbody,
    .sgbuyer-m3-data-table tfoot,
    .sgbuyer-m3-data-table tr,
    .sgbuyer-m3-data-table th,
    .sgbuyer-m3-data-table td {
        display: block;
        width: 100%;
    }

    .sgbuyer-m3-data-table {
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .sgbuyer-m3-data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .sgbuyer-m3-data-table tbody,
    .sgbuyer-m3-data-table tfoot {
        display: grid;
        gap: 12px;
    }

    .sgbuyer-m3-data-table tbody tr,
    .sgbuyer-m3-data-table tfoot tr {
        padding: 10px;
        overflow: hidden;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 18px;
        background: var(--md-sys-color-surface);
    }

    .sgbuyer-m3-data-table td {
        display: grid;
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        gap: 10px;
        padding: 8px;
    }

    .sgbuyer-m3-data-table td[data-label]::before {
        content: attr(data-label);
        color: var(--md-sys-color-on-surface-variant);
        font: 600 11px/16px var(--m3-font-plain);
    }

    .sgbuyer-m3-data-table td[colspan],
    .sgbuyer-m3-data-table tfoot th {
        display: block;
        padding: 8px;
        border: 0;
    }

    .sgbuyer-m3-table-detail {
        margin-top: -12px;
        border-top: 0 !important;
        border-radius: 0 0 18px 18px !important;
    }
}

@media print {
    .sgm3-top,
    .m6-rail,
    .sgm3-context,
    .sgm3-footer,
    .sgbuyer-m3-navigation,
    .sgbuyer-m3-print-actions {
        display: none !important;
    }

    .sgm3-main,
    .sgm3-page,
    .sgbuyer-m3-page,
    .sgbuyer-m3-invoice {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgbuyer-m3-page *,
    .sgbuyer-m3-navigation *,
    .sgbuyer-m3-full-report * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .sgbuyer-m3-seller-card:hover,
    .sgbuyer-m3-product-card:hover,
    .sgbuyer-m3-basket-card:hover,
    .sgbuyer-m3-order-card:hover,
    .sgbuyer-m3-actionbar-link:active,
    .sgbuyer-m3-filled-button:active,
    .sgbuyer-m3-tonal-button:active,
    .sgbuyer-m3-text-button:active,
    .sgbuyer-m3-icon-button:active,
    .sgbuyer-m3-activity-tabs button:active {
        transform: none;
    }
}

@media (forced-colors: active) {
    .sgbuyer-m3-actionbar-link,
    .sgbuyer-m3-filled-button,
    .sgbuyer-m3-tonal-button,
    .sgbuyer-m3-text-button,
    .sgbuyer-m3-icon-button,
    .sgbuyer-m3-outlined-field input,
    .sgbuyer-m3-outlined-field textarea,
    .sgbuyer-m3-seller-card,
    .sgbuyer-m3-product-card,
    .sgbuyer-m3-basket-card,
    .sgbuyer-m3-order-card,
    .sgbuyer-m3-data-table {
        border: 1px solid CanvasText;
    }

    .sgbuyer-m3-actionbar-link.is-active,
    .sgbuyer-m3-activity-tabs button[aria-selected="true"] {
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }

    .sgbuyer-m3-activity-tabs button {
        border-color: ButtonText;
    }
}

/*
===============================================================================
Temporary repair-stage marker: Design M3 Changes - SG Board widget library

- All sgw-* presentation has moved from SgBoard/Index.cshtml into this shared file.
- Resources and Progress use equal-height/equal-width straight leading-icon boxes.
- Key metrics and Activity separate the large decorative icon from the compact
  footer arrow so "More info" remains one tightly aligned label-and-icon unit.
- Material Symbols use explicit optical size, lighter role colors, white outlines
  on selected rows, line height, and responsive sizing.
- Four/two/one-column layouts, 48px controls, focus, and reduced motion remain.
===============================================================================
*/

.sgw-library {
    --sgw-1: #eaddff;
    --sgw-on-1: #21005d;
    --sgw-2: #eaddff;
    --sgw-on-2: #21005d;
    --sgw-3: #eaddff;
    --sgw-on-3: #21005d;
    --sgw-4: #eaddff;
    --sgw-on-4: #21005d;
    display: grid;
    gap: 28px;
    width: 100%;
    color: var(--md-sys-color-on-surface);
}

.sgw-library .material-symbols-rounded {
    display: block;
    width: 1em;
    height: 1em;
    flex: none;
    line-height: 1;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 48;
}

.sgw-controls {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface-container);
    container-type: inline-size;
}

.sgw-switcher {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 8px;
    overflow: visible;
    padding: 3px;
}

.sgw-choice {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 56px;
    padding: 7px 8px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 20px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition:
        background-color 200ms cubic-bezier(.2, 0, 0, 1),
        transform 200ms cubic-bezier(.2, 0, 0, 1);
}

.sgw-choice:hover {
    background: var(--md-sys-color-secondary-container);
    transform: translateY(-2px);
}

.sgw-choice[aria-pressed="true"] {
    border-color: transparent;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgw-choice:focus-visible,
.sgw-more:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgw-choice b {
    font-size: 18px;
    line-height: 22px;
}

.sgw-choice small {
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
}

.sgw-palette {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 18px;
    overflow: hidden;
    border-radius: 9px;
}

.sgw-palette i {
    flex: 1 1 0;
    min-width: 0;
}

.sgw-description {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
}

.sgw-description b {
    color: var(--md-sys-color-on-surface);
    font-weight: 600;
}

.sgw-row {
    display: grid;
    gap: 12px;
}

.sgw-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sgw-grid > :nth-child(1) {
    --card: var(--sgw-1);
    --on-card: var(--sgw-on-1);
}

.sgw-grid > :nth-child(2) {
    --card: var(--sgw-2);
    --on-card: var(--sgw-on-2);
}

.sgw-grid > :nth-child(3) {
    --card: var(--sgw-3);
    --on-card: var(--sgw-on-3);
}

.sgw-grid > :nth-child(4) {
    --card: var(--sgw-4);
    --on-card: var(--sgw-on-4);
}

.sgw-card {
    position: relative;
    min-width: 0;
    min-height: 148px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--on-card) 16%, transparent);
    border-radius: 24px;
    background: var(--card);
    color: var(--on-card);
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
    transition:
        transform 200ms cubic-bezier(.2, 0, 0, 1),
        box-shadow 200ms cubic-bezier(.2, 0, 0, 1);
}

.sgw-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgb(0 0 0 / .14);
}

.sgw-stat {
    padding: 22px;
}

.sgw-stat > .material-symbols-rounded {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 56px;
    color: color-mix(in srgb, var(--on-card) 46%, white);
    opacity: .72;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
}

.sgw-row[aria-label="Activity"] .sgw-stat > .material-symbols-rounded {
    color: rgb(255 255 255);
    opacity: 1;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--on-card) 72%, transparent));
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 48;
}

.sgw-row[aria-label="Key metrics"] .sgw-stat > .material-symbols-rounded {
    color: rgb(255 255 255);
    opacity: 1;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--on-card) 72%, transparent));
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 48;
}

.sgw-card strong {
    display: block;
    font-size: 34px;
    line-height: 42px;
    font-variant-numeric: tabular-nums;
}

.sgw-card p {
    margin: 2px 0 0;
}

.sgw-more {
    position: absolute;
    inset: auto 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 40px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--on-card) 9%, transparent);
    color: color-mix(in srgb, var(--on-card) 70%, white);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.sgw-more > .material-symbols-rounded {
    position: static;
    width: 26px;
    height: 26px;
    font-size: 26px;
    line-height: 26px;
    opacity: 1;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgw-row[aria-label="Key metrics"] .sgw-more > .material-symbols-rounded {
    width: 32px;
    height: 32px;
    color: rgb(255 255 255);
    font-size: 32px;
    line-height: 32px;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--on-card) 72%, transparent));
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 32;
}

.sgw-row[aria-label="Activity"] .sgw-more > .material-symbols-rounded {
    width: 32px;
    height: 32px;
    color: rgb(255 255 255);
    font-size: 32px;
    line-height: 32px;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--on-card) 72%, transparent));
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 32;
}

.sgw-info,
.sgw-neutral {
    --sgw-info-icon-size: 148px;
    display: grid;
    grid-template-columns: var(--sgw-info-icon-size) minmax(0, 1fr);
    align-items: center;
}

.sgw-info-icon {
    display: grid;
    place-items: center;
    justify-self: start;
    width: var(--sgw-info-icon-size);
    height: var(--sgw-info-icon-size);
    min-width: var(--sgw-info-icon-size);
    min-height: var(--sgw-info-icon-size);
    overflow: hidden;
    border-radius: 0;
    background: color-mix(in srgb, var(--on-card) 11%, transparent);
}

.sgw-info-icon > .material-symbols-rounded {
    font-size: 56px;
    color: color-mix(in srgb, var(--on-card) 44%, white);
    font-variation-settings: "FILL" 0, "wght" 475, "GRAD" 0, "opsz" 48;
}

.sgw-row[aria-label="Progress"] .sgw-info-icon {
    background: color-mix(in srgb, var(--on-card) 58%, var(--card));
}

.sgw-row[aria-label="Progress"] .sgw-info-icon > .material-symbols-rounded {
    color: rgb(255 255 255 / .96);
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--on-card) 72%, transparent));
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
}

.sgw-info-copy {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 18px;
}

.sgw-info-copy small {
    display: block;
}

.sgw-progress {
    height: 6px;
    margin: 9px 0 5px;
    overflow: hidden;
    border-radius: 3px;
    background: color-mix(in srgb, var(--on-card) 18%, transparent);
}

.sgw-progress span {
    display: block;
    width: 70%;
    height: 100%;
    background: currentColor;
}

.sgw-neutral {
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
}

.sgw-neutral .sgw-info-icon {
    background: var(--card);
    color: var(--on-card);
}

.sgw-critical {
    display: none;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 10px;
    background: #ffdad6;
    color: #410002;
    font-size: 11px;
    font-weight: 700;
}

.sgw-library[data-mode="8"] .sgw-critical {
    display: inline-block;
}

@media (max-width: 1100px) {
    .sgw-switcher {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sgw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .sgw-controls {
        gap: 12px;
        padding: 12px;
        border-radius: 20px;
    }

    .sgw-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .sgw-choice {
        min-height: 48px;
        border-radius: 16px;
    }

    .sgw-description {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgw-palette {
        min-height: 24px;
    }

    .sgw-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgw-stat > .material-symbols-rounded {
        font-size: 52px;
    }
}

@media (max-width: 420px) {
    .sgw-info,
    .sgw-neutral {
        --sgw-info-icon-size: 120px;
    }

    .sgw-info-icon > .material-symbols-rounded {
        font-size: 56px;
    }
}

@media (max-width: 360px) {
    .sgw-controls {
        margin-inline: 0;
        padding: 8px;
    }

    .sgw-switcher {
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgw-choice,
    .sgw-card {
        transition: none;
    }

    .sgw-card:hover {
        transform: none;
    }
}

/*
===============================================================================
Design M3 Changes - canonical CommonVisitors/Profile layout

Layout and responsive behavior
- Reproduces the local SavvyGreat M3 index.html shell: 276px permanent rail,
  76px top app bar, adaptive content canvas, compact modal rail, page-level
  scrolling, scrim dismissal, and responsive top actions.

M3 components and states
- Navigation rail, top app bar, search, icon buttons, disclosure groups, badges,
  notification menu, snackbar, profile card, and footer.
- Hover, focus-visible, current, expanded, compact, loading, empty, and
  rail-collapsed states are visually and programmatically distinct.

Color roles and design tokens
- Uses the shared SavvyGreat primary, secondary, tertiary, surface-container,
  on-surface, outline, and error roles. No page-local color system is introduced.

Typography
- Google Sans supplies brand/title roles and Google Sans Text supplies labels,
  controls, navigation, and supporting text.

Shape and elevation
- M3 full, medium, and large shapes pair with surface containers and restrained
  level-1/level-2 elevation.

Spacing and sizing
- An 8dp-derived rhythm, 44px minimum controls, fluid gutters, and a 1440px
  readable content boundary cover expanded, medium, compact, and narrow screens.

Icons and imagery
- Material Symbols Rounded use explicit optical size, weight, and selected fill.
- The India flag is a real local image with its meaning supplied by the link.

Motion and interactions
- Spatial transitions use emphasized easing; state layers use short effects
  timing. Reduced-motion removes decorative transitions.

Accessibility
- Skip navigation, landmarks, visible focus, 44px targets, semantic disclosures,
  aria-current/expanded/live states, Escape dismissal, forced colors, and natural
  page scrolling are supported.

Files/components affected
- Areas/CommonVisitors/Views/Shared/_ProfileHomeLayout.cshtml
- Areas/CommonVisitors/Views/Shared/_HomeLayout.cshtml
- Areas/CommonVisitors/Views/Shared/_SgLayOutPartial.cshtml
- Areas/CommonVisitors/Views/Shared/_SgLayOutNewPartial.cshtml
- CodeBehind/js/sg-commonvisitors-m3-layout.js

Temporary compatibility or repair work
- Unconverted CommonVisitors page markup still consumes isolated legacy plug-in
  scripts. Duplicate libraries and old layout CSS are no longer loaded by the
  four active layouts.

Remaining conversion work
- Convert the Profile dependency graph and remaining CommonVisitors pages, then
  remove the temporary page plug-ins one consumer at a time.
===============================================================================
*/

/* Design M3 Changes - Profile context sizing:
   Compact the breadcrumb/name/rating surface while retaining readable type,
   larger rating stars, responsive spacing, and the shared sticky offset token. */
body.sgcv-m3-shell {
    --sgcv-m3-rail-width: 276px;
    --sgcv-m3-topbar-height: 76px;
    --sgcv-m3-radius-small: var(--md-sys-shape-medium, 12px);
    --sgcv-m3-radius-medium: 20px;
    --sgcv-m3-radius-large: var(--md-sys-shape-large, 28px);
    --sgcv-m3-elevation-1:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent),
        0 3px 10px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    --sgcv-m3-elevation-2:
        0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent),
        0 12px 32px color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    min-width: 280px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
    font-size: 14px;
    line-height: 1.5;
}

.sgcv-m3-shell,
.sgcv-m3-shell *,
.sgcv-m3-shell *::before,
.sgcv-m3-shell *::after {
    box-sizing: border-box;
}

.sgcv-m3-shell button,
.sgcv-m3-shell input,
.sgcv-m3-shell textarea,
.sgcv-m3-shell select {
    font: inherit;
}

.sgcv-m3-shell a {
    color: var(--md-sys-color-primary);
}

.sgcv-m3-shell [hidden] {
    display: none !important;
}

.sgcv-m3-shell .material-symbols-rounded {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 24px;
    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

.sgcv-m3-skip-link {
    position: fixed;
    top: 8px;
    left: 16px;
    z-index: 1300;
    transform: translateY(-160%);
    padding: 10px 16px;
    border-radius: var(--sgcv-m3-radius-small);
    background: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface) !important;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--md-sys-motion-effects-default-duration)
        var(--md-sys-motion-effects-default);
}

.sgcv-m3-skip-link:focus {
    transform: none;
}

.sgcv-m3-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    width: var(--sgcv-m3-rail-width);
    padding: 16px 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface);
    scrollbar-width: none;
    transition: transform var(--md-sys-motion-spatial-default-duration)
        var(--md-sys-motion-spatial-default);
}

.sgcv-m3-rail::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sgcv-m3-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px;
    border-radius: var(--sgcv-m3-radius-medium);
    color: var(--md-sys-color-on-surface) !important;
    text-decoration: none;
}

.sgcv-m3-brand:hover {
    background: var(--md-sys-color-surface-container-low);
}

.sgcv-m3-brand-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px 8px 16px 8px;
    background: linear-gradient(
        135deg,
        var(--md-sys-color-primary),
        var(--md-sys-color-tertiary)
    );
    color: var(--md-sys-color-on-primary);
    font-family: var(--m3-font-brand);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.sgcv-m3-brand-copy,
.sgcv-m3-profile-copy {
    display: grid;
    min-width: 0;
}

.sgcv-m3-brand-copy b,
.sgcv-m3-profile-copy b {
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgcv-m3-brand-copy small,
.sgcv-m3-profile-copy small {
    overflow: hidden;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgcv-m3-profile-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    margin: 16px 2px 20px;
    padding: 14px;
    border-radius: var(--sgcv-m3-radius-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container) !important;
    text-decoration: none;
    transition:
        background var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        transform var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default);
}

.sgcv-m3-profile-card:hover {
    background: color-mix(
        in srgb,
        var(--md-sys-color-secondary-container) 82%,
        var(--md-sys-color-primary) 18%
    );
    transform: translateY(-1px);
}

.sgcv-m3-profile-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgcv-m3-profile-avatar .material-symbols-rounded {
    font-size: 27px;
}

.sgcv-m3-nav {
    display: block;
}

.sgcv-m3-nav-label {
    display: block;
    margin: 21px 13px 7px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sgcv-m3-nav-item,
.sgcv-m3-nav-disclosure {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 45px;
    margin: 2px 0;
    padding: 9px 13px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant) !important;
    font-weight: 550;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        background var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default);
}

.sgcv-m3-nav-item:hover,
.sgcv-m3-nav-disclosure:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface) !important;
}

.sgcv-m3-nav-item.is-active,
.sgcv-m3-nav-item[aria-current="page"],
.sgcv-m3-nav-disclosure.is-active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container) !important;
    font-weight: 700;
}

.sgcv-m3-nav-item.is-active .material-symbols-rounded,
.sgcv-m3-nav-item[aria-current="page"] .material-symbols-rounded,
.sgcv-m3-nav-disclosure.is-active > .material-symbols-rounded:first-child {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}

.sgcv-m3-chevron {
    margin-left: auto;
    transition: transform var(--md-sys-motion-spatial-default-duration)
        var(--md-sys-motion-spatial-default);
}

.sgcv-m3-nav-disclosure[aria-expanded="true"] .sgcv-m3-chevron {
    transform: rotate(90deg);
}

.sgcv-m3-submenu {
    display: grid;
    padding-left: 31px;
}

.sgcv-m3-submenu .sgcv-m3-nav-item {
    min-height: 38px;
    padding-block: 6px;
    font-size: 12px;
}

.sgcv-m3-topbar {
    position: fixed;
    inset: 0 0 auto var(--sgcv-m3-rail-width);
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--sgcv-m3-topbar-height);
    padding: 0 26px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: color-mix(
        in srgb,
        var(--md-sys-color-surface) 94%,
        transparent
    );
    backdrop-filter: blur(16px);
    transition: left var(--md-sys-motion-spatial-default-duration)
        var(--md-sys-motion-spatial-default);
}

.sgcv-m3-icon-button,
.sgcv-m3-top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    cursor: pointer;
}

.sgcv-m3-icon-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.sgcv-m3-icon-button:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgcv-m3-country {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 14px;
    background: var(--md-sys-color-surface-container);
    text-decoration: none;
}

.sgcv-m3-country:hover {
    background: var(--md-sys-color-surface-container-high);
}

.sgcv-m3-country img {
    display: block;
    width: 24px;
    height: auto;
    border-radius: 2px;
}

.sgcv-m3-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 520px);
    height: 50px;
    padding: 0 17px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    transition:
        background var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        box-shadow var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default);
}

.sgcv-m3-search:focus-within {
    background: var(--md-sys-color-surface);
    box-shadow: inset 0 0 0 2px var(--md-sys-color-primary);
}

.sgcv-m3-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
}

.sgcv-m3-search input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 1;
}

.sgcv-m3-top-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-left: auto;
}

.sgcv-m3-welcome {
    max-width: 180px;
    overflow: hidden;
    padding-inline: 8px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgcv-m3-top-action {
    position: relative;
    padding: 0 12px;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant) !important;
    font-weight: 600;
    text-decoration: none;
}

.sgcv-m3-top-action:hover,
.sgcv-m3-top-action[aria-expanded="true"] {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface) !important;
}

.sgcv-m3-count {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 10px;
    font-weight: 700;
}

.sgcv-m3-top-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-left: 4px;
    border-radius: 14px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container) !important;
    font-family: var(--m3-font-brand);
    font-weight: 800;
    text-decoration: none;
}

.sgcv-m3-notification-anchor {
    position: relative;
}

.sgcv-m3-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.sgcv-m3-account-action {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
}

.sgcv-m3-account-action > .material-symbols-rounded {
    font-size: 26px;
}

.sgcv-m3-account-action::after {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1080;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    content: attr(data-tooltip);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition:
        opacity var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        transform var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default);
    white-space: nowrap;
}

.sgcv-m3-account-action:hover::after,
.sgcv-m3-account-action:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.sgcv-m3-account-action[aria-expanded="true"]::after {
    opacity: 0;
}

.sgcv-m3-notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1060;
    width: min(390px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--sgcv-m3-radius-large);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--sgcv-m3-elevation-2);
}

.sgcv-m3-notification-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 16px 12px 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgcv-m3-notification-panel > header > span {
    display: grid;
}

.sgcv-m3-notification-panel strong {
    font-family: var(--m3-font-brand);
    font-size: 17px;
}

.sgcv-m3-notification-panel small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgcv-m3-notification-list {
    max-height: min(440px, calc(100vh - 118px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--md-sys-color-outline-variant) transparent;
}

.sgcv-m3-notification-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    text-align: left;
    cursor: pointer;
    transform: translateX(0);
    transition:
        min-height 220ms var(--md-sys-motion-effects-default),
        padding 220ms var(--md-sys-motion-effects-default),
        opacity 180ms var(--md-sys-motion-effects-default),
        transform 220ms var(--md-sys-motion-spatial-default);
}

.sgcv-m3-notification-item:hover {
    background: var(--md-sys-color-surface-container-low);
}

.sgcv-m3-notification-item.is-removing {
    min-height: 0;
    padding-block: 0;
    overflow: hidden;
    border-color: transparent;
    opacity: 0;
    transform: translateX(28px);
}

.sgcv-m3-notification-item:last-child {
    border-bottom: 0;
}

.sgcv-m3-notification-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-secondary);
}

.sgcv-m3-notification-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sgcv-m3-notification-copy strong,
.sgcv-m3-notification-copy span {
    overflow-wrap: anywhere;
}

.sgcv-m3-notification-copy small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgcv-m3-notification-empty {
    margin: 0;
    padding: 24px 20px;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
}

.sgcv-m3-notification-skeleton {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgcv-m3-notification-skeleton-icon,
.sgcv-m3-notification-skeleton-title,
.sgcv-m3-notification-skeleton-line {
    background:
        linear-gradient(
            100deg,
            var(--md-sys-color-surface-container) 20%,
            var(--md-sys-color-surface-container-high) 38%,
            var(--md-sys-color-surface-container) 56%
        );
    background-size: 220% 100%;
    animation: sgcv-m3-notification-pulse 1100ms linear infinite;
}

.sgcv-m3-notification-skeleton-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.sgcv-m3-notification-skeleton-copy {
    display: grid;
    align-content: center;
    gap: 8px;
}

.sgcv-m3-notification-skeleton-title,
.sgcv-m3-notification-skeleton-line {
    height: 10px;
    border-radius: 999px;
}

.sgcv-m3-notification-skeleton-title {
    width: 44%;
}

.sgcv-m3-notification-skeleton-line {
    width: 82%;
}

.sgcv-m3-notification-continuation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    min-height: 44px;
    margin: 8px 12px 12px;
    padding: 8px 16px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 999px;
    background: transparent;
    color: var(--md-sys-color-primary);
    font: 600 14px/20px var(--m3-font-brand);
    cursor: pointer;
}

.sgcv-m3-notification-continuation:hover {
    background: var(--md-sys-color-primary-container);
}

.sgcv-m3-notification-continuation.is-loading .material-symbols-rounded {
    animation: sgcv-m3-notification-spin 700ms linear infinite;
}

@keyframes sgcv-m3-notification-pulse {
    to {
        background-position-x: -220%;
    }
}

@keyframes sgcv-m3-notification-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgcv-m3-notification-item,
    .sgcv-m3-notification-skeleton-icon,
    .sgcv-m3-notification-skeleton-title,
    .sgcv-m3-notification-skeleton-line,
    .sgcv-m3-notification-continuation.is-loading .material-symbols-rounded {
        animation: none;
        transition: none;
    }
}

.sgcv-m3-main {
    width: auto;
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--sgcv-m3-rail-width);
    padding: calc(var(--sgcv-m3-topbar-height) + 28px) 28px 40px;
    outline: 0;
    transition:
        margin-left var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default),
        padding var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default);
}

.sgcv-m3-page {
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    margin-inline: auto;
}

.sgcv-m3-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1440px;
    margin: 32px auto 0;
    padding: 24px 0;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
}

.sgcv-m3-footer > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--md-sys-color-on-surface);
    font-weight: 700;
}

.sgcv-m3-footer .material-symbols-rounded {
    font-size: 19px;
}

.sgcv-m3-scrim {
    display: none;
}

.sgcv-m3-snackbar {
    position: fixed;
    bottom: -88px;
    left: 50%;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
    min-height: 52px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #322f35;
    color: #ffffff;
    box-shadow: var(--sgcv-m3-elevation-2);
    transform: translateX(-50%);
    transition: bottom var(--md-sys-motion-spatial-default-duration)
        var(--md-sys-motion-spatial-default);
}

.sgcv-m3-snackbar.is-visible {
    bottom: 22px;
}

.sgcv-m3-rail-collapsed .sgcv-m3-rail {
    transform: translateX(-100%);
}

.sgcv-m3-rail-collapsed .sgcv-m3-topbar {
    left: 0;
}

.sgcv-m3-rail-collapsed .sgcv-m3-main {
    margin-left: 0;
}

.sgcv-m3-shell :where(
    .sgcv-m3-brand,
    .sgcv-m3-profile-card,
    .sgcv-m3-nav-item,
    .sgcv-m3-nav-disclosure,
    .sgcv-m3-icon-button,
    .sgcv-m3-country,
    .sgcv-m3-search input,
    .sgcv-m3-top-action,
    .sgcv-m3-top-avatar,
    .sgcv-m3-notification-item
):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

@media (max-width: 1180px) {
    .sgcv-m3-action-label,
    .sgcv-m3-welcome {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .sgcv-m3-top-action {
        width: 44px;
        padding: 0;
    }
}

@media (max-width: 860px) {
    body.sgcv-m3-shell {
        --sgcv-m3-rail-width: min(320px, calc(100vw - 52px));
    }

    .sgcv-m3-rail {
        z-index: 1050;
        transform: translateX(-100%);
        box-shadow: var(--sgcv-m3-elevation-2);
    }

    .sgcv-m3-topbar {
        left: 0;
        padding-inline: 13px;
    }

    .sgcv-m3-main {
        margin-left: 0;
        padding:
            calc(var(--sgcv-m3-topbar-height) + 18px)
            16px
            32px;
    }

    .sgcv-m3-nav-open {
        overflow: hidden;
    }

    .sgcv-m3-nav-open .sgcv-m3-rail {
        transform: none;
    }

    .sgcv-m3-nav-open .sgcv-m3-scrim {
        position: fixed;
        inset: 0;
        z-index: 1040;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgb(0 0 0 / .44);
        cursor: pointer;
    }

    .sgcv-m3-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .sgcv-m3-search {
        display: none;
    }

    .sgcv-m3-top-actions {
        gap: 2px;
    }

    .sgcv-m3-top-avatar {
        display: none;
    }

    .sgcv-m3-notification-panel {
        position: fixed;
        top: calc(var(--sgcv-m3-topbar-height) + 8px);
        right: 8px;
        left: 8px;
        width: auto;
    }

    .sgcv-m3-main {
        padding-inline: 11px;
    }

    .sgcv-m3-snackbar {
        min-width: calc(100% - 24px);
    }
}

@media (max-width: 390px) {
    .sgcv-m3-topbar {
        gap: 8px;
        padding-inline: 8px;
    }

    .sgcv-m3-country {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sgcv-m3-top-action,
    .sgcv-m3-icon-button {
        min-width: 42px;
        width: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgcv-m3-shell *,
    .sgcv-m3-shell *::before,
    .sgcv-m3-shell *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .sgcv-m3-nav-item.is-active,
    .sgcv-m3-nav-item[aria-current="page"],
    .sgcv-m3-nav-disclosure.is-active,
    .sgcv-m3-top-action[aria-expanded="true"] {
        border: 2px solid Highlight;
    }

    .sgcv-m3-scrim {
        background: CanvasText;
    }
}

@media print {
    .sgcv-m3-rail,
    .sgcv-m3-topbar,
    .sgcv-m3-scrim,
    .sgcv-m3-snackbar {
        display: none !important;
    }

    .sgcv-m3-main {
        margin: 0;
        padding: 0;
    }
}

/*
===============================================================================
Design M3 Changes - CommonVisitors restored hierarchy and M3 navigation

Layout and responsive behavior
- The flyout starts closed. Menu, country, and compact search occupy the leading
  side of an exact 76px app bar; account actions occupy an equal trailing side;
  and the logo remains centered without overlap. White category navigation and
  one breadcrumb/name/rating context surface stay fixed below it; the context
  surface remains a single rounded bar and narrows slightly while scrolling.

M3 components and states
- Top app bar, navigation drawer, dropdown menus, breadcrumb, read-only rating,
  scroll state, world-map site-tree footer, focus-visible, hover, selected,
  pressed, expanded, and compact states follow the SavvyGreat M3 component
  contracts. Selected navigation uses a filled tonal pill without a legacy
  underline, border, or inset shadow.

Color roles and design tokens
- The original SavvyGreat indigo header, white navigation, pink accent, gold
  rating, and deep-indigo footer are combined with the documented blue, green,
  amber, and error container/on-container pairs from the local i4-stat pattern.

Typography, shape, elevation, spacing, icons, motion, and accessibility
- Google Sans roles, Material Symbols Rounded, 8dp-derived spacing, M3 shapes,
  restrained elevation, emphasized transitions, visible focus, 44px controls,
  horizontal small-screen navigation, reduced motion, and semantic landmarks
  are retained.

Files/components affected
- Areas/CommonVisitors/Views/Shared/_ProfileHomeLayout.cshtml
- Areas/CommonVisitors/Views/Profiles/Profile.cshtml
- CodeBehind/js/sg-commonvisitors-m3-layout.js
- CodeBehind/js/sg-profile-m3.js

Temporary compatibility or repair work
- Existing controller URLs remain unchanged while the feature-parity review
  continues. Bootstrap, Font Awesome, Materialize, and page-local presentation
  dependencies are not loaded by the CommonVisitors shell.

Remaining conversion work
- Review the content workflows and missing feature links after this layout pass.
===============================================================================
*/

body.sgcv-m3-shell {
    --sgcv-m3-category-height: 64px;
    --sgcv-m3-context-height: 116px;
    --sgcv-brand-header: #5367d5;
    --sgcv-brand-navigation: #f8f7ff;
    --sgcv-brand-footer: #4659bd;
    --sgcv-brand-on-color: #ffffff;
    --sgcv-brand-link: #d0e4ff;
    --sgcv-brand-accent: #6750a4;
    --sgcv-brand-rating: #ffc400;
    --sgcv-brand-blue-container: #d0e4ff;
    --sgcv-brand-on-blue-container: #001d36;
    --sgcv-brand-green-container: #d9f0c9;
    --sgcv-brand-on-green-container: #102f05;
    --sgcv-brand-amber-container: #ffdea5;
    --sgcv-brand-on-amber-container: #281900;
    --sgcv-brand-error-container: #ffdad6;
    --sgcv-brand-on-error-container: #410002;
    overflow-x: hidden;
    background: var(--md-sys-color-surface-container-low);
}

.sgcv-m3-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(12px, 1.5vw, 28px);
    padding-inline: clamp(12px, 2vw, 32px);
    border-bottom: 0;
    background: var(--sgcv-brand-header);
    color: var(--sgcv-brand-on-color);
}

.sgcv-m3-topbar::after {
    display: none;
}

.sgcv-m3-top-leading,
.sgcv-m3-top-trailing {
    display: flex;
    align-items: center;
    min-width: 0;
}

.sgcv-m3-top-leading {
    gap: 8px;
}

.sgcv-m3-top-trailing {
    justify-content: flex-end;
}

.sgcv-m3-topbar .sgcv-m3-icon-button,
.sgcv-m3-topbar .sgcv-m3-top-action,
.sgcv-m3-topbar .sgcv-m3-welcome {
    color: var(--sgcv-brand-on-color) !important;
}

.sgcv-m3-topbar .sgcv-m3-icon-button:hover,
.sgcv-m3-topbar .sgcv-m3-top-action:hover,
.sgcv-m3-topbar .sgcv-m3-top-action[aria-expanded="true"] {
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 16%,
        transparent
    );
    color: var(--sgcv-brand-on-color) !important;
}

.sgcv-m3-topbar .sgcv-m3-country {
    border: 1px solid color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 24%,
        transparent
    );
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 16%,
        transparent
    );
}

.sgcv-m3-logo {
    display: grid;
    place-items: center;
    width: 142px;
    height: 52px;
    padding: 8px;
    border-radius: var(--sgcv-m3-radius-medium);
    transition:
        background var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        transform var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default);
}

.sgcv-m3-logo:hover {
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 12%,
        transparent
    );
    transform: scale(1.02);
}

.sgcv-m3-logo img {
    display: block;
    width: 126px;
    max-height: 36px;
    object-fit: contain;
}

.sgcv-m3-search {
    width: clamp(156px, 17vw, 260px);
    height: 44px;
    padding-inline: 14px;
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 92%,
        var(--sgcv-brand-header) 8%
    );
}

.sgcv-m3-shell-scrolled .sgcv-m3-topbar {
    background: color-mix(
        in srgb,
        var(--sgcv-brand-header) 92%,
        #000000 8%
    );
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgcv-m3-top-actions {
    margin-left: 0;
}

.sgcv-m3-rail {
    border-right-color: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 18%,
        transparent
    );
    background: var(--sgcv-brand-footer);
    color: var(--sgcv-brand-on-color);
}

.sgcv-m3-rail .sgcv-m3-brand {
    color: var(--sgcv-brand-on-color) !important;
}

.sgcv-m3-rail .sgcv-m3-brand:hover {
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 10%,
        transparent
    );
}

.sgcv-m3-rail .sgcv-m3-brand-mark {
    background: conic-gradient(
        from 35deg,
        var(--sgcv-brand-blue-container),
        var(--sgcv-brand-green-container),
        var(--sgcv-brand-amber-container),
        var(--sgcv-brand-error-container),
        var(--sgcv-brand-blue-container)
    );
    color: var(--sgcv-brand-on-blue-container);
}

.sgcv-m3-rail .sgcv-m3-brand-copy b,
.sgcv-m3-rail .sgcv-m3-profile-copy b {
    color: var(--sgcv-brand-on-color);
}

.sgcv-m3-rail .sgcv-m3-brand-copy small,
.sgcv-m3-rail .sgcv-m3-profile-copy small,
.sgcv-m3-rail .sgcv-m3-nav-label {
    color: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 68%,
        transparent
    );
}

.sgcv-m3-rail .sgcv-m3-profile-card {
    background: var(--sgcv-brand-green-container);
    color: var(--sgcv-brand-on-green-container) !important;
}

.sgcv-m3-rail .sgcv-m3-profile-copy b,
.sgcv-m3-rail .sgcv-m3-profile-copy small {
    color: var(--sgcv-brand-on-green-container);
}

.sgcv-m3-rail .sgcv-m3-profile-avatar {
    background: var(--sgcv-brand-on-green-container);
    color: var(--sgcv-brand-green-container);
}

.sgcv-m3-rail .sgcv-m3-nav-item,
.sgcv-m3-rail .sgcv-m3-nav-disclosure {
    color: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 80%,
        transparent
    ) !important;
}

.sgcv-m3-rail .sgcv-m3-nav-item:hover,
.sgcv-m3-rail .sgcv-m3-nav-disclosure:hover {
    background: color-mix(in srgb, var(--sgcv-brand-header) 62%, white);
    color: var(--sgcv-brand-on-color) !important;
    border-radius: var(--md-sys-shape-full);
}

.sgcv-m3-rail .sgcv-m3-nav-item.is-active,
.sgcv-m3-rail .sgcv-m3-nav-item[aria-current="page"],
.sgcv-m3-rail .sgcv-m3-nav-disclosure.is-active {
    background: var(--sgcv-brand-blue-container);
    color: var(--sgcv-brand-on-blue-container) !important;
}

.sgcv-m3-category-nav,
.sgcv-m3-contextbar {
    position: fixed;
    right: 0;
    left: var(--sgcv-m3-rail-width);
    transition:
        left var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default),
        background var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        box-shadow var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default);
}

.sgcv-m3-category-nav {
    top: var(--sgcv-m3-topbar-height);
    z-index: 1019;
    height: var(--sgcv-m3-category-height);
    border: 0;
    background: color-mix(in srgb, var(--sgcv-brand-header) 88%, white);
    color: var(--sgcv-brand-on-color);
    box-shadow: none;
}

.sgcv-m3-category-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin-inline: auto;
    padding-inline: 12px;
}

.sgcv-m3-category-nav-inner > .sgcv-m3-category-link,
.sgcv-m3-category-nav-inner > .sgcv-m3-category-cluster {
    flex: 1 1 0;
}

.sgcv-m3-category-nav-inner > :nth-child(4n + 1) {
    --sgcv-category-container: var(--sgcv-brand-blue-container);
    --sgcv-category-on-container: var(--sgcv-brand-on-blue-container);
}

.sgcv-m3-category-nav-inner > :nth-child(4n + 2) {
    --sgcv-category-container: var(--sgcv-brand-green-container);
    --sgcv-category-on-container: var(--sgcv-brand-on-green-container);
}

.sgcv-m3-category-nav-inner > :nth-child(4n + 3) {
    --sgcv-category-container: var(--sgcv-brand-amber-container);
    --sgcv-category-on-container: var(--sgcv-brand-on-amber-container);
}

.sgcv-m3-category-nav-inner > :nth-child(4n + 4) {
    --sgcv-category-container: var(--sgcv-brand-error-container);
    --sgcv-category-on-container: var(--sgcv-brand-on-error-container);
}

.sgcv-m3-category-cluster {
    position: relative;
    height: 100%;
}

.sgcv-m3-category-cluster > .sgcv-m3-category-link {
    width: 100%;
}

.sgcv-m3-category-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    height: 48px;
    margin-block: 8px;
    padding: 0 13px;
    border: 0 !important;
    border-radius: var(--md-sys-shape-full);
    outline: 0;
    box-shadow: none !important;
    background: transparent;
    color: var(--sgcv-brand-on-color) !important;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        background var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        transform var(--md-sys-motion-effects-default-duration, 180ms)
            var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgcv-m3-category-link > .material-symbols-rounded {
    font-size: 19px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.sgcv-m3-category-link:hover,
.sgcv-m3-category-link[aria-expanded="true"] {
    border: 0 !important;
    box-shadow: none !important;
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 12%,
        transparent
    );
    color: var(--sgcv-brand-on-color) !important;
}

.sgcv-m3-category-link.is-active,
.sgcv-m3-category-link[aria-current="page"] {
    border: 0 !important;
    box-shadow: none !important;
    background: color-mix(
        in srgb,
        var(--sgcv-brand-on-color) 22%,
        transparent
    );
    color: var(--sgcv-brand-on-color) !important;
}

.sgcv-m3-category-link.is-active > .material-symbols-rounded,
.sgcv-m3-category-link[aria-current="page"] > .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
}

.sgcv-m3-category-link:active {
    border: 0 !important;
    box-shadow: none !important;
    transform: scale(.97);
}

.sgcv-m3-category-link:focus-visible {
    border: 0 !important;
    outline: 3px solid var(--sgcv-brand-on-color);
    outline-offset: -3px;
    box-shadow: none !important;
}

.sgcv-m3-category-link:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none !important;
}

.sgcv-m3-category-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1070;
    display: grid;
    width: max-content;
    min-width: 210px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--sgcv-m3-radius-medium);
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--sgcv-m3-elevation-2);
}

.sgcv-m3-category-menu-end {
    right: 0;
    left: auto;
}

.sgcv-m3-category-menu a {
    min-height: 42px;
    padding: 11px 13px;
    border-radius: 10px;
    color: var(--md-sys-color-on-surface) !important;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none;
}

.sgcv-m3-category-menu a:hover,
.sgcv-m3-category-menu a:focus-visible {
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container) !important;
}

.sgcv-m3-shell .sgcv-m3-textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 16px;
    resize: vertical;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    outline: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    line-height: 1.5;
    transition:
        border-color var(--md-sys-motion-effects-default-duration, 180ms)
            var(--md-sys-motion-effects-default, linear),
        box-shadow var(--md-sys-motion-effects-default-duration, 180ms)
            var(--md-sys-motion-effects-default, linear);
}

.sgcv-m3-shell .sgcv-m3-textarea:hover {
    border-color: var(--md-sys-color-on-surface);
}

.sgcv-m3-shell .sgcv-m3-textarea:focus-visible {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 3px var(--md-sys-color-primary-container);
}

.sgcv-m3-contextbar {
    top: calc(var(--sgcv-m3-topbar-height) + var(--sgcv-m3-category-height));
    z-index: 1018;
    height: var(--sgcv-m3-context-height);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    backdrop-filter: blur(14px);
    transition:
        left var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default),
        height 700ms cubic-bezier(.2, 0, 0, 1),
        border-color 360ms ease,
        background-color 360ms ease;
}

.sgcv-m3-contextbar-inner {
    position: relative;
    display: block;
    width: calc(100% - 32px);
    max-width: 1440px;
    min-width: 0;
    height: calc(100% - 16px);
    margin: 8px auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--md-sys-shape-full);
    background: #faf4f8;
    transform: translateZ(0);
    transition:
        width 700ms cubic-bezier(.2, 0, 0, 1),
        height 700ms cubic-bezier(.2, 0, 0, 1),
        border-radius 700ms cubic-bezier(.2, 0, 0, 1),
        background-color 360ms ease,
        border-color 360ms ease,
        box-shadow 360ms ease;
}

.sgcv-m3-context-single-tab {
    display: grid;
    grid-template-rows: auto auto auto;
    place-items: center;
    align-content: center;
    gap: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 6px 24px;
    border-radius: inherit;
    background: inherit;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition:
        opacity 180ms ease,
        transform 320ms cubic-bezier(.2, 0, 0, 1),
        visibility 0s linear;
}

.sgcv-m3-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-family: var(--m3-font-plain);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.sgcv-m3-breadcrumb a {
    color: var(--md-sys-color-primary) !important;
    text-decoration: none;
}

.sgcv-m3-breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sgcv-m3-breadcrumb a:focus-visible {
    border-radius: 8px;
    outline: 3px solid color-mix(
        in srgb,
        var(--md-sys-color-primary) 72%,
        white
    );
    outline-offset: 2px;
}

.sgcv-m3-breadcrumb .material-symbols-rounded {
    font-size: 18px;
}

.sgcv-m3-breadcrumb [aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgcv-m3-context-name {
    max-width: min(680px, calc(100vw - 48px));
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 24px;
    font-weight: 650;
    line-height: 30px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgcv-m3-context-stars {
    min-height: 34px;
}

.sgcv-m3-shell-scrolled .sgcv-m3-contextbar {
    height: var(--sgcv-m3-context-height);
    border-bottom-color: transparent;
    background: color-mix(
        in srgb,
        var(--md-sys-color-surface-container-low) 88%,
        transparent
    );
    box-shadow: none;
}

.sgcv-m3-shell-scrolled .sgcv-m3-contextbar-inner {
    width: calc(100% - 64px);
    height: calc(100% - 16px);
    border-color: color-mix(
        in srgb,
        var(--md-sys-color-outline) 34%,
        transparent
    );
    background: #faf4f8;
    box-shadow:
        0 1px 2px rgb(0 0 0 / .15),
        0 2px 6px rgb(0 0 0 / .08);
}

.sgcv-m3-shell-scrolled .sgcv-m3-category-nav {
    background: var(--sgcv-brand-navigation);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgcv-m3-shell-scrolled .sgcv-m3-category-link {
    color: var(--md-sys-color-on-surface) !important;
}

.sgcv-m3-shell-scrolled .sgcv-m3-category-link:hover,
.sgcv-m3-shell-scrolled .sgcv-m3-category-link[aria-expanded="true"] {
    border: 0 !important;
    box-shadow: none !important;
    background: color-mix(
        in srgb,
        var(--md-sys-color-on-surface) 8%,
        transparent
    );
    color: var(--md-sys-color-on-surface) !important;
}

.sgcv-m3-shell-scrolled .sgcv-m3-category-link.is-active,
.sgcv-m3-shell-scrolled .sgcv-m3-category-link[aria-current="page"] {
    border: 0 !important;
    box-shadow: none !important;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container) !important;
}

.sgcv-m3-shell-scrolled .sgcv-m3-category-link:focus-visible {
    outline-color: var(--md-sys-color-primary);
}

.sgcv-m3-main {
    display: flex;
    flex-direction: column;
    padding-top: calc(
        var(--sgcv-m3-topbar-height) +
        var(--sgcv-m3-category-height) +
        var(--sgcv-m3-context-height) +
        28px
    );
}

.sgcv-m3-shell-scrolled .sgcv-m3-main {
    padding-top: calc(
        var(--sgcv-m3-topbar-height) +
        var(--sgcv-m3-category-height) +
        var(--sgcv-m3-context-height) +
        28px
    );
}

.sgcv-m3-rail-collapsed .sgcv-m3-category-nav,
.sgcv-m3-rail-collapsed .sgcv-m3-contextbar {
    left: 0;
}

.sgcv-m3-footer {
    position: relative;
    display: block;
    left: auto;
    width: calc(100% + 56px);
    max-width: none;
    margin: 42px auto 0;
    margin-top: auto;
    margin-left: -28px;
    margin-bottom: -40px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: var(--sgcv-brand-footer);
    color: var(--sgcv-brand-on-color);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgcv-m3-footer::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
    height: 4px;
    background: color-mix(in srgb, var(--sgcv-brand-header) 68%, white);
    content: "";
}

.sgcv-m3-footer-visual {
    position: relative;
    min-height: 268px;
    overflow: hidden;
}

.sgcv-m3-footer-visual::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(
        in srgb,
        var(--sgcv-brand-footer) 74%,
        transparent
    );
    content: "";
}

.sgcv-m3-footer-map {
    position: absolute;
    inset: 0;
}

.sgcv-m3-footer-map img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: .58;
    filter: grayscale(1) contrast(.88) brightness(1.24);
}

.sgcv-m3-footer-tree {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 1480px);
    margin-inline: auto;
    padding: 48px 36px 38px;
}

.sgcv-m3-footer-tree section {
    display: grid;
    align-content: start;
    gap: 8px;
}

.sgcv-m3-footer-tree h2 {
    margin: 0 0 6px;
    font-family: var(--m3-font-brand);
    font-size: 18px;
    font-weight: 750;
}

.sgcv-m3-footer-tree section:nth-child(4n + 1) h2 {
    color: var(--sgcv-brand-blue-container);
}

.sgcv-m3-footer-tree section:nth-child(4n + 2) h2 {
    color: var(--sgcv-brand-green-container);
}

.sgcv-m3-footer-tree section:nth-child(4n + 3) h2 {
    color: var(--sgcv-brand-amber-container);
}

.sgcv-m3-footer-tree section:nth-child(4n + 4) h2 {
    color: var(--sgcv-brand-error-container);
}

.sgcv-m3-footer-tree a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    width: fit-content;
    padding: 5px 10px;
    border-radius: var(--md-sys-shape-full);
    color: var(--sgcv-brand-link) !important;
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
}

.sgcv-m3-footer-tree a:hover {
    background: color-mix(in srgb, var(--sgcv-brand-header) 62%, white);
    color: var(--sgcv-brand-on-color) !important;
    text-decoration: none;
}

.sgcv-m3-footer-meta {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 68px;
    padding: 14px 42px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: color-mix(
        in srgb,
        var(--sgcv-brand-footer) 84%,
        #000000 16%
    );
}

.sgcv-m3-footer-meta > span,
.sgcv-m3-footer-meta nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgcv-m3-footer-meta > span {
    color: var(--sgcv-brand-on-color);
    font-weight: 750;
}

.sgcv-m3-footer-meta nav {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sgcv-m3-footer-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 5px 10px;
    border-radius: var(--md-sys-shape-full);
    color: var(--sgcv-brand-link) !important;
    font-size: 13px;
    text-decoration: none;
}

.sgcv-m3-footer-meta a:hover {
    background: color-mix(in srgb, var(--sgcv-brand-header) 62%, white);
    color: var(--sgcv-brand-on-color) !important;
}

.sgcv-m3-shell :where(
    .sgcv-m3-top-brand,
    .sgcv-m3-logo,
    .sgcv-m3-category-link,
    .sgcv-m3-category-menu a,
    .sgcv-m3-breadcrumb a,
    .sgcv-m3-footer a
):focus-visible {
    outline: 3px solid var(--sgcv-brand-accent);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    .sgcv-m3-search {
        width: clamp(156px, 16vw, 210px);
    }

    .sgcv-m3-category-nav-inner {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sgcv-m3-category-nav-inner > .sgcv-m3-category-link,
    .sgcv-m3-category-nav-inner > .sgcv-m3-category-cluster {
        flex: 0 0 auto;
    }

    .sgcv-m3-category-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .sgcv-m3-footer-tree {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .sgcv-m3-search {
        display: none;
    }
}

@media (max-width: 860px) {
    .sgcv-m3-category-nav,
    .sgcv-m3-contextbar {
        left: 0;
    }

    .sgcv-m3-category-nav-inner {
        gap: 0;
        padding-inline: 4px;
    }

    .sgcv-m3-footer {
        width: calc(100% + 32px);
        margin-left: -16px;
    }

    .sgcv-m3-category-menu {
        position: fixed;
        top: calc(
            var(--sgcv-m3-topbar-height) +
            var(--sgcv-m3-category-height) +
            6px
        );
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }

    .sgcv-m3-contextbar-inner {
        width: calc(100% - 12px);
        padding: 0;
    }

    .sgcv-m3-shell-scrolled .sgcv-m3-contextbar-inner {
        width: calc(100% - 32px);
        height: calc(100% - 16px);
    }

    .sgcv-m3-footer-tree {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body.sgcv-m3-shell {
        --sgcv-m3-context-height: 108px;
        --sgcv-m3-category-height: 52px;
    }

    .sgcv-m3-logo {
        width: 112px;
    }

    .sgcv-m3-logo img {
        width: 98px;
    }

    .sgcv-m3-category-link {
        height: 44px;
        margin-block: 4px;
    }

    .sgcv-m3-context-single-tab {
        padding: 5px 16px;
    }

    .sgcv-m3-context-name {
        font-size: 22px;
        line-height: 28px;
    }

    .sgcv-m3-footer-tree {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        padding: 32px 24px;
    }

    .sgcv-m3-footer-meta {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 24px;
    }

    .sgcv-m3-footer {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-bottom: -32px;
    }

    .sgcv-m3-footer-meta nav {
        justify-content: flex-start;
    }
}

@media (max-width: 430px) {
    .sgcv-m3-topbar {
        padding-inline: 7px;
    }

    .sgcv-m3-top-leading {
        gap: 2px;
    }

    .sgcv-m3-country {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sgcv-m3-logo {
        width: 98px;
    }

    .sgcv-m3-logo img {
        width: 88px;
    }

    .sgcv-m3-messages-action {
        display: none;
    }

    .sgcv-m3-category-link {
        min-width: 42px;
        padding-inline: 8px;
        border-radius: 20px;
        font-size: 13px;
    }

    .sgcv-m3-breadcrumb {
        font-size: 14px;
        line-height: 20px;
    }

    .sgcv-m3-context-name {
        font-size: 22px;
        line-height: 28px;
    }

    .sgcv-m3-footer-tree {
        gap: 22px 16px;
        padding-inline: 18px;
    }

    .sgcv-m3-footer {
        width: calc(100% + 22px);
        margin-left: -11px;
    }
}

/* ============================================================
   Design M3 Changes - SavvyGreat Timeline photo studio
   Native camera capture, 4:3 auto/custom crop, drag/zoom/rotate/
   flip controls, and compact privacy/description density.
   ============================================================ */
.sgprofile-m3-post-dialog-surface {
    width: min(660px, 100%);
}

.sgprofile-m3-post-description textarea {
    min-height: 54px;
    height: 62px;
    max-height: 104px;
    padding: 4px 2px 22px;
    resize: vertical;
    overflow: auto;
}

.sgprofile-m3-post-privacy {
    grid-template-columns: 30px minmax(0, 1fr) minmax(112px, 136px);
    gap: 2px 8px;
    min-height: 44px;
    padding: 5px 8px;
    border-radius: 16px;
}

.sgprofile-m3-post-privacy-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 19px;
}

.sgprofile-m3-post-privacy-copy {
    line-height: 1.1;
}

.sgprofile-m3-post-privacy-copy strong {
    font-size: 13px;
    line-height: 16px;
}

.sgprofile-m3-post-privacy-copy small,
.sgprofile-m3-post-privacy-support,
.sgprofile-m3-post-privacy-label {
    font-size: 11px;
    line-height: 14px;
}

.sgprofile-m3-post-privacy-field {
    grid-template-columns: auto;
    gap: 0;
}

.sgprofile-m3-post-privacy-field select {
    min-height: 32px;
    padding: 0 26px 0 8px;
    border-radius: 10px;
    font-size: 13px;
}

.sgprofile-m3-post-privacy-support {
    grid-column: 2 / -1;
    margin: -1px 0 0;
    opacity: .78;
}

.sgprofile-m3-post-media {
    gap: 6px;
    padding: 8px;
}

.sgprofile-m3-post-media > header {
    align-items: center;
}

.sgprofile-m3-post-source-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sgprofile-m3-post-add-image,
.sgprofile-m3-post-camera-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 19px;
    cursor: pointer;
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    transition:
        background-color 180ms var(--m3-easing-standard),
        box-shadow 180ms var(--m3-easing-standard),
        transform 180ms var(--m3-easing-standard);
}

.sgprofile-m3-post-add-image {
    color: var(--md-sys-color-on-primary-container);
    background: var(--md-sys-color-primary-container);
}

.sgprofile-m3-post-camera-button {
    color: var(--md-sys-color-on-tertiary-container);
    background: var(--md-sys-color-tertiary-container);
}

.sgprofile-m3-post-add-image:hover,
.sgprofile-m3-post-camera-button:hover {
    box-shadow: var(--m3-elevation-level1);
}

.sgprofile-m3-post-add-image:active,
.sgprofile-m3-post-camera-button:active {
    transform: scale(.98);
}

.sgprofile-m3-post-add-image:focus-visible,
.sgprofile-m3-post-camera-button:focus-visible,
.sgprofile-m3-post-crop-toolbar button:focus-visible {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

.sgprofile-m3-post-camera-button .material-symbols-rounded,
.sgprofile-m3-post-add-image .material-symbols-rounded {
    font-size: 20px;
}

.sgprofile-m3-post-camera[hidden],
.sgprofile-m3-post-crop-editor[hidden] {
    display: none !important;
}

.sgprofile-m3-post-camera,
.sgprofile-m3-post-crop-editor {
    display: grid;
    gap: 7px;
}

.sgprofile-m3-post-camera-viewport,
.sgprofile-m3-post-crop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: min(42dvh, 360px);
    overflow: hidden;
    border-radius: 20px;
    background: #17151c;
}

.sgprofile-m3-post-camera-viewport video,
.sgprofile-m3-post-crop-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgprofile-m3-post-camera-viewport video {
    transform: scaleX(-1);
}

.sgprofile-m3-post-camera-guide {
    position: absolute;
    inset: 9%;
    border: 2px solid rgba(255, 255, 255, .86);
    border-radius: 28% 28% 34% 34% / 24% 24% 40% 40%;
    box-shadow:
        0 0 0 100vmax rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(0, 0, 0, .25);
    pointer-events: none;
}

.sgprofile-m3-post-camera-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 7px;
}

.sgprofile-m3-post-camera-actions > span {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-camera-actions button {
    min-height: 38px;
    padding-inline: 12px;
}

.sgprofile-m3-post-crop-editor > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sgprofile-m3-post-crop-editor > header > span:first-child {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-post-crop-editor > header strong {
    color: var(--md-sys-color-on-surface);
    font: 500 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-crop-editor > header small,
.sgprofile-m3-post-crop-mode {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-crop-mode {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 12px;
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
}

.sgprofile-m3-post-crop-stage {
    touch-action: none;
    cursor: default;
}

.sgprofile-m3-post-crop-stage.is-custom-crop {
    cursor: grab;
}

.sgprofile-m3-post-crop-stage.is-dragging {
    cursor: grabbing;
}

.sgprofile-m3-post-crop-grid {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,
            transparent 33.15%,
            rgba(255, 255, 255, .7) 33.15%,
            rgba(255, 255, 255, .7) 33.5%,
            transparent 33.5%,
            transparent 66.5%,
            rgba(255, 255, 255, .7) 66.5%,
            rgba(255, 255, 255, .7) 66.85%,
            transparent 66.85%),
        linear-gradient(to bottom,
            transparent 33.15%,
            rgba(255, 255, 255, .7) 33.15%,
            rgba(255, 255, 255, .7) 33.5%,
            transparent 33.5%,
            transparent 66.5%,
            rgba(255, 255, 255, .7) 66.5%,
            rgba(255, 255, 255, .7) 66.85%,
            transparent 66.85%);
    transition: opacity 180ms var(--m3-easing-standard);
}

.sgprofile-m3-post-crop-stage.is-custom-crop
    .sgprofile-m3-post-crop-grid {
    opacity: .72;
}

.sgprofile-m3-post-crop-toolbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

.sgprofile-m3-post-crop-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 40px;
    padding: 0 7px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 14px;
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container);
    cursor: pointer;
    font: 500 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-crop-toolbar button[aria-pressed="true"] {
    border-color: transparent;
    color: var(--md-sys-color-on-secondary-container);
    background: var(--md-sys-color-secondary-container);
}

.sgprofile-m3-post-crop-toolbar .material-symbols-rounded {
    font-size: 21px;
}

.sgprofile-m3-post-crop-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.sgprofile-m3-post-crop-controls label {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 7px;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-post-crop-controls input[type="range"] {
    width: 100%;
    accent-color: var(--md-sys-color-primary);
}

.sgprofile-m3-post-crop-controls button {
    min-height: 38px;
    padding-inline: 13px;
}

.sgprofile-m3-post-preview {
    grid-template-columns: 52px minmax(0, 1fr) 36px;
    min-height: 48px;
    padding: 5px;
}

.sgprofile-m3-post-preview > img {
    width: 52px;
    height: 40px;
    border-radius: 10px;
}

.sgprofile-m3-post-preview .sgprofile-m3-icon-button {
    width: 36px;
    height: 36px;
}

.sgprofile-m3-post-media > small {
    display: none;
}

@media (max-width: 600px) {
    .sgprofile-m3-post-description textarea {
        min-height: 48px;
        height: 54px;
        max-height: 88px;
    }

    .sgprofile-m3-post-privacy {
        grid-template-columns: 28px minmax(0, 1fr) minmax(96px, 116px);
        padding: 4px 6px;
    }

    .sgprofile-m3-post-privacy-icon {
        width: 28px;
        height: 28px;
    }

    .sgprofile-m3-post-camera-viewport,
    .sgprofile-m3-post-crop-stage {
        max-height: min(36dvh, 290px);
        border-radius: 16px;
    }

    .sgprofile-m3-post-crop-editor > header small,
    .sgprofile-m3-post-source-actions > * > span:last-child {
        display: none;
    }

    .sgprofile-m3-post-add-image,
    .sgprofile-m3-post-camera-button {
        width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 14px;
    }

    .sgprofile-m3-post-crop-toolbar button > span:last-child:not(:first-child) {
        display: none;
    }

    .sgprofile-m3-post-camera-actions {
        grid-template-columns: 1fr 1fr;
    }

    .sgprofile-m3-post-camera-actions > span {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .sgprofile-m3-post-privacy {
        grid-template-columns: 28px minmax(0, 1fr) 104px;
    }

    .sgprofile-m3-post-privacy-field {
        grid-column: auto;
        display: block;
    }

    .sgprofile-m3-post-privacy-label,
    .sgprofile-m3-post-privacy-support,
    .sgprofile-m3-post-privacy-copy small {
        display: none;
    }

    .sgprofile-m3-post-crop-toolbar {
        grid-template-columns: repeat(6, minmax(38px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3-post-add-image,
    .sgprofile-m3-post-camera-button,
    .sgprofile-m3-post-crop-grid {
        transition: none;
    }
}

/* Design M3 Changes - Tree canvas launch action:
   explicit primary/on-primary pairing prevents the CommonVisitors shell's
   generic anchor color from overriding the filled-button label or icon. */
.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button,
.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:link,
.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:visited,
.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:hover,
.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:focus,
.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:active {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    text-decoration: none;
}

.sgcv-m3-shell
    a.sgprofile-m3-canvas-launch-button
    .material-symbols-rounded,
.sgcv-m3-shell
    a.sgprofile-m3-canvas-launch-button
    > span:last-child {
    color: inherit;
}

.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:hover {
    background:
        linear-gradient(
            color-mix(
                in srgb,
                var(--md-sys-color-on-primary) 8%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--md-sys-color-on-primary) 8%,
                transparent
            )
        ),
        var(--md-sys-color-primary);
}

.sgcv-m3-shell a.sgprofile-m3-canvas-launch-button:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

@media (max-width: 350px) {
    .sgcv-m3-topbar {
        gap: 2px;
        padding-inline: 4px;
    }

    .sgcv-m3-logo {
        width: 82px;
        padding-inline: 3px;
    }

    .sgcv-m3-logo img {
        width: 78px;
    }

    .sgcv-m3-footer {
        width: 100%;
        margin-left: 0;
    }

}

@media print {
    .sgcv-m3-category-nav,
    .sgcv-m3-contextbar {
        display: none !important;
    }
}

/*
===============================================================================
Design M3 Changes - CommonVisitors Profile shell and primary surfaces

Layout and responsive behavior
- Action-first compact hero, media editors, 320px summary/content grid, wrapped
  all-visible tab group, adaptive privacy cards, and natural page scrolling.

M3 components and states
- Filled/tonal/outlined/icon buttons, labeled icons, profile cards, segmented
  controls, outlined fields, banners, tabs, dialogs, progress, live status,
  empty/error states, and drag-and-drop media fields.

Color roles and design tokens
- Shared primary, secondary, tertiary, error, surface-container, outline, and
  matching on-color roles drive every visible state.

Typography, shape, elevation, spacing, icons, motion, and accessibility
- Google Sans roles, Material Symbols Rounded, M3 full/medium/large shapes,
  restrained elevation, an 8dp-derived rhythm, 44/48px targets, emphasized
  transitions, semantic landmarks, wrapped tabs, visible focus, reduced motion,
  forced colors, and compact-screen source order are included.

Files/components affected
- Areas/CommonVisitors/Views/Profiles/Profile.cshtml
- Areas/CommonVisitors/Views/Shared/_ProfileSidebar.cshtml
- Areas/CommonVisitors/Views/Shared/_ProfileEditForm.cshtml
- Areas/CommonVisitors/Views/Shared/_PrivacySettings.cshtml
- Areas/CommonVisitors/Views/Shared/_tabscontainer.cshtml
- CodeBehind/js/sg-profile-m3.js

Temporary compatibility or repair work
- Existing tab content, Snapic modal, rating, Dropzone, and endpoint scripts
  retain their IDs while their visible shell is restyled. Remaining inline
  scripts and legacy tab-body markup are tracked for later profile phases.

Remaining conversion work
- Convert every tab body and its linked partial, move the remaining inline
  scripts, remove remaining inline style attributes, and verify all endpoints.
===============================================================================
*/

.sgprofile-m3 {
    --sgprofile-m3-error-container: #ffdad6;
    --sgprofile-m3-on-error-container: #410002;
    --sgprofile-m3-success-container: #d9f0c9;
    --sgprofile-m3-on-success-container: #17380b;
    width: min(100%, 1440px);
    min-width: 0;
    margin-inline: auto;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
}

.sgprofile-m3,
.sgprofile-m3 *,
.sgprofile-m3 *::before,
.sgprofile-m3 *::after,
.sgprofile-m3-dialog,
.sgprofile-m3-dialog *,
.sgprofile-m3-dialog *::before,
.sgprofile-m3-dialog *::after {
    box-sizing: border-box;
}

.sgprofile-m3 .is-hidden {
    display: none;
}

.sgprofile-m3-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    margin-bottom: 10px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
}

.sgprofile-m3-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-inline: 10px;
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-primary);
    font-weight: 650;
    text-decoration: none;
}

.sgprofile-m3-breadcrumb a:hover {
    background: var(--md-sys-color-surface-container-high);
}

.sgprofile-m3-breadcrumb .material-symbols-rounded {
    font-size: 18px;
}

.sgprofile-m3-hero {
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent),
        0 8px 24px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

/* Design M3 Changes - Profile hero sizing:
   Give the user-owned cover image stronger visual presence with a fluid,
   bounded height and crop behavior that remains stable on every viewport. */
.sgprofile-m3-banner {
    position: relative;
    width: 100%;
    min-height: clamp(230px, 28vw, 360px);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 15%,
            var(--md-sys-color-tertiary-container),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--md-sys-color-primary-container),
            var(--md-sys-color-secondary-container)
        );
}

.sgprofile-m3-banner > img {
    display: block;
    width: 100%;
    height: clamp(230px, 28vw, 360px);
    object-fit: cover;
}

.sgprofile-m3-media-action,
.sgprofile-m3-avatar-action,
.sgprofile-m3-icon-button {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    cursor: pointer;
}

.sgprofile-m3-media-action {
    position: absolute;
    top: 16px;
    right: 16px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
    color: var(--md-sys-color-primary);
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
    backdrop-filter: blur(12px);
}

.sgprofile-m3-hero-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    min-height: 128px;
    padding: 16px clamp(18px, 3vw, 36px) 22px;
    background:
        linear-gradient(
            90deg,
            var(--md-sys-color-surface) 0 58%,
            color-mix(
                in srgb,
                var(--md-sys-color-tertiary-container) 54%,
                var(--md-sys-color-surface)
            )
        );
}

.sgprofile-m3-avatar-wrap {
    position: relative;
    width: clamp(96px, 11vw, 136px);
    height: clamp(96px, 11vw, 136px);
    margin-top: clamp(-62px, -5vw, -38px);
}

.sgprofile-m3-avatar-wrap > img {
    display: block;
    width: 100%;
    height: 100%;
    border: 5px solid var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container);
    object-fit: cover;
    box-shadow:
        0 3px 8px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
}

.sgprofile-m3-avatar-action {
    position: absolute;
    right: -2px;
    bottom: 2px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow:
        0 2px 7px color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent);
}

.sgprofile-m3-hero-copy {
    min-width: 0;
}

.sgprofile-m3-overline {
    display: block;
    margin-bottom: 3px;
    color: var(--md-sys-color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sgprofile-m3-hero-copy h1 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: clamp(25px, 3.2vw, 40px);
    font-weight: 550;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.sgprofile-m3-hero-copy > p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-hero-copy > p .material-symbols-rounded {
    font-size: 19px;
}

.sgprofile-m3-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin-top: 8px;
}

.sgprofile-m3-rating > span {
    display: grid;
    color: var(--md-sys-color-on-surface);
    font-weight: 750;
}

.sgprofile-m3-rating small {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 10px;
    font-weight: 500;
}

.sgprofile-m3-view-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(88px, 1fr));
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 650;
    cursor: pointer;
}

.sgprofile-m3-segment:hover {
    background: var(--md-sys-color-surface-container-high);
}

.sgprofile-m3-segment.is-selected,
.sgprofile-m3-segment[aria-pressed="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-segment.is-selected .material-symbols-rounded,
.sgprofile-m3-segment[aria-pressed="true"] .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3-media-editor {
    margin-top: 12px;
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
}

.sgprofile-m3-media-editor > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.sgprofile-m3-media-editor > header > span {
    display: grid;
}

.sgprofile-m3-media-editor > header strong {
    font-family: var(--m3-font-brand);
    font-size: 18px;
}

.sgprofile-m3-media-editor > header small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3 .sgprofile-m3-dropzone {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: none;
    min-height: 190px;
    height: auto;
    margin: 0;
    padding: 20px;
    overflow: hidden;
    border: 2px dashed var(--md-sys-color-outline);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
}

.sgprofile-m3 .sgprofile-m3-dropzone:hover,
.sgprofile-m3 .sgprofile-m3-dropzone.dz-drag-hover {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.sgprofile-m3 .sgprofile-m3-dropzone .dz-message {
    display: grid;
    place-items: center;
    gap: 4px;
    height: auto;
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
}

.sgprofile-m3 .sgprofile-m3-dropzone .dz-message .material-symbols-rounded {
    margin-bottom: 5px;
    color: var(--md-sys-color-primary);
    font-size: 42px;
}

.sgprofile-m3 .sgprofile-m3-dropzone .dz-message strong {
    color: var(--md-sys-color-on-surface);
    font-size: 16px;
}

.sgprofile-m3 .sgprofile-m3-dropzone .dz-preview {
    position: relative;
    inset: auto;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 150px;
    margin: 0;
    background: transparent;
}

.sgprofile-m3 .sgprofile-m3-dropzone .dz-preview img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 220px;
    border-radius: 16px;
    object-fit: contain;
}

.sgprofile-m3-media-loader,
.sgprofile-m3-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-media-loader {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 4;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    box-shadow:
        0 2px 10px color-mix(in srgb, var(--md-sys-color-on-surface) 18%, transparent);
    transform: translate(-50%, -50%);
}

.sgprofile-m3-circular-progress {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 3px solid var(--md-sys-color-primary-container);
    border-top-color: var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-full);
    animation: sgprofile-m3-spin 800ms linear infinite;
}

@keyframes sgprofile-m3-spin {
    to {
        transform: rotate(360deg);
    }
}

.sgprofile-m3-banner-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgprofile-m3-private-section {
    min-width: 0;
    margin-top: 16px;
}

.sgprofile-m3-private-section > .privacy-info {
    display: none;
    margin-bottom: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-private-section > .privacy-info:not(:empty) {
    display: block;
}

.sgprofile-m3-layout {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
    align-items: start;
    gap: 16px;
}

.sgprofile-m3-section-content {
    display: block;
    min-width: 0;
}

.sgprofile-m3-sidebar,
.sgprofile-m3-content {
    min-width: 0;
}

.sgprofile-m3-identity-card,
.sgprofile-m3-edit-card,
.sgprofile-m3-bio-card,
.sgprofile-m3-bio-form,
.sgprofile-m3-panel {
    min-width: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface);
}

.sgprofile-m3-identity-card,
.sgprofile-m3-edit-card,
.sgprofile-m3-bio-card,
.sgprofile-m3-bio-form {
    padding: clamp(16px, 2vw, 22px);
}

.sgprofile-m3-sidebar {
    position: sticky;
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-category-height, 64px) +
        var(--sgcv-m3-context-height, 152px) +
        12px
    );
    align-self: start;
}

.sgprofile-m3-card-heading,
.sgprofile-m3-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sgprofile-m3-card-heading {
    justify-content: space-between;
    margin-bottom: 16px;
}

.sgprofile-m3-section-heading {
    align-items: flex-start;
    margin-bottom: 16px;
}

.sgprofile-m3-section-heading > span:last-child {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-section-heading h2,
.sgprofile-m3-section-heading p {
    margin: 0;
}

.sgprofile-m3-section-heading h2 {
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 550;
}

.sgprofile-m3-section-heading p {
    margin-top: 3px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
}

.sgprofile-m3-heading-icon {
    display: grid !important;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    font-size: 28px !important;
}

.sgprofile-m3-labeled-icon {
    display: grid;
    place-items: center;
    gap: 2px;
    width: 64px;
    min-height: 64px;
    padding: 7px;
    border-radius: 18px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-labeled-icon .material-symbols-rounded {
    font-size: 28px;
}

.sgprofile-m3-labeled-icon > span:last-child {
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sgprofile-m3-icon-button {
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-icon-button:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-identity-copy h2 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 23px;
    font-weight: 550;
}

.sgprofile-m3-identity-copy p,
.sgprofile-m3-email {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 0;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-identity-copy .material-symbols-rounded,
.sgprofile-m3-email .material-symbols-rounded {
    font-size: 19px;
}

.sgprofile-m3-metadata {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.sgprofile-m3-metadata > div {
    display: grid;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    gap: 10px;
}

.sgprofile-m3-metadata dt,
.sgprofile-m3-metadata dd {
    margin: 0;
}

.sgprofile-m3-metadata dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
    font-weight: 700;
}

.sgprofile-m3-metadata dt .material-symbols-rounded {
    font-size: 18px;
}

.sgprofile-m3-metadata dd {
    overflow-wrap: anywhere;
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-card-actions,
.sgprofile-m3-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.sgprofile-m3-card-actions > * {
    flex: 1 1 116px;
}

.sgprofile-m3-filled-button,
.sgprofile-m3-tonal-button,
.sgprofile-m3-outlined-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--md-sys-shape-full);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.sgprofile-m3-filled-button {
    border: 1px solid var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgprofile-m3-review-floating-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: 64px;
    padding: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-high);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent),
        0 2px 6px color-mix(in srgb, var(--md-sys-color-shadow) 12%, transparent);
}

.sgprofile-m3 .sgprofile-m3-review-toolbar-action,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:link,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:visited,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:hover,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:focus,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:active {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding-inline: 22px;
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    letter-spacing: var(--m3-label-large-tracking);
    text-decoration: none;
}

.sgprofile-m3-review-toolbar-action .material-symbols-rounded {
    color: currentColor;
    font-size: 24px;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

.sgprofile-m3 .sgprofile-m3-review-toolbar-action:hover,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:hover {
    background:
        linear-gradient(
            color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent),
            color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)
        ),
        var(--md-sys-color-primary);
}

.sgprofile-m3 .sgprofile-m3-review-toolbar-action:focus-visible,
.sgcv-m3-shell a.sgprofile-m3-review-toolbar-action:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgprofile-m3-tonal-button {
    border: 1px solid transparent;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-outlined-button {
    border: 1px solid var(--md-sys-color-outline);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
}

.sgprofile-m3-filled-button:hover,
.sgprofile-m3-tonal-button:hover,
.sgprofile-m3-outlined-button:hover {
    box-shadow:
        0 2px 5px color-mix(in srgb, var(--md-sys-color-on-surface) 16%, transparent);
}

.sgprofile-m3-filled-button:disabled,
.sgprofile-m3-tonal-button:disabled,
.sgprofile-m3-outlined-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.sgprofile-m3-follow-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0;
}

.sgprofile-m3-follow-metrics > div {
    display: grid;
    place-items: center;
    min-height: 74px;
    padding: 10px;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-follow-link {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label icon"
        "count icon";
    align-items: center;
    gap: 2px 10px;
    min-height: 74px;
    padding: 10px 14px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        border-color var(--md-sys-motion-effects-default-duration)
            var(--md-sys-motion-effects-default),
        transform var(--md-sys-motion-spatial-default-duration)
            var(--md-sys-motion-spatial-default);
}

.sgprofile-m3-follow-link:hover {
    border-color: var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-secondary-container);
}

.sgprofile-m3-follow-link:active {
    transform: scale(.98);
}

.sgprofile-m3-follow-link:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-follow-label {
    grid-area: label;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-m3-follow-link strong {
    grid-area: count;
    color: var(--md-sys-color-primary);
    font: 650 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

.sgprofile-m3-follow-link > .material-symbols-rounded {
    grid-area: icon;
    color: var(--md-sys-color-primary);
    font-size: 22px;
    transition: transform var(--md-sys-motion-spatial-default-duration)
        var(--md-sys-motion-spatial-default);
}

.sgprofile-m3-follow-link:hover > .material-symbols-rounded {
    transform: translateX(3px);
}

.sgprofile-m3-follow-metrics dt,
.sgprofile-m3-follow-metrics dd {
    margin: 0;
}

.sgprofile-m3-follow-metrics dt {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
}

.sgprofile-m3-follow-metrics dd {
    color: var(--md-sys-color-primary);
    font-family: var(--m3-font-brand);
    font-size: 23px;
    font-weight: 650;
}

.sgprofile-m3-follow-metrics[data-state="unavailable"] {
    opacity: .62;
}

.sgprofile-m3-email {
    margin-top: 0;
    overflow-wrap: anywhere;
}

.sgprofile-m3-content {
    display: grid;
    gap: 16px;
}

.sgprofile-m3-bio-card > p {
    margin: 0 0 14px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 15px;
    line-height: 1.65;
}

.sgprofile-m3-bio-form > h2 {
    margin: 0 0 14px;
    font-family: var(--m3-font-brand);
    font-size: 20px;
    font-weight: 550;
}

.sgprofile-m3-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sgprofile-m3-field-wide {
    grid-column: 1 / -1;
}

.sgprofile-m3-outlined-field {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
    font-weight: 650;
}

.sgprofile-m3-outlined-field > input,
.sgprofile-m3-outlined-field > textarea,
.sgprofile-m3-outlined-field > select {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    outline: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 14px;
    font-weight: 450;
    box-shadow: none;
}

.sgprofile-m3-outlined-field > textarea {
    min-height: 124px;
    resize: vertical;
}

.sgprofile-m3-outlined-field > input:focus,
.sgprofile-m3-outlined-field > textarea:focus,
.sgprofile-m3-outlined-field > select:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgprofile-m3-field-support {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 3px 14px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
}

.sgprofile-m3-form-status {
    min-height: 20px;
    margin: 10px 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
}

.sgprofile-m3-form-status[data-state="error"],
.sgprofile-m3 #saveStatus.red-text {
    color: var(--md-sys-color-error);
}

.sgprofile-m3-form-status[data-state="success"],
.sgprofile-m3 #saveStatus.green-text {
    color: var(--sgprofile-m3-on-success-container);
}

.sgprofile-m3-panel {
    overflow: hidden;
}

#section-tabs-container.sgprofile-m3-panel {
    overflow: visible;
}

.sgprofile-m3-tabs-container {
    min-width: 0;
}

.sgprofile-m3 .sgprofile-m3-tabs {
    /* Design M3 Changes - Profile section navigation:
       Once this full-width tab surface reaches the fixed page context, keep it
       directly beneath that context while the selected panel continues to use
       the normal document scrollbar. */
    position: sticky;
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-category-height, 64px) +
        var(--sgcv-m3-context-height, 116px) +
        8px
    );
    z-index: 1017;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--sgcv-m3-elevation-1);
    list-style: none;
}

.sgprofile-m3 .sgprofile-m3-tabs::before {
    /* Design M3 Changes - Opaque sticky shield:
       Prevent scrolling panels from appearing through the rounded outer corners. */
    content: "";
    position: absolute;
    inset: -8px 0;
    z-index: -1;
    background: var(--md-sys-color-surface);
    pointer-events: none;
}

.sgprofile-m3 .sgprofile-m3-tabs > li {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
}

.sgprofile-m3 .sgprofile-m3-tabs > li > a,
.sgprofile-m3 .sgprofile-m3-more-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
    transition:
        background-color var(--md-sys-motion-effects-default-duration, 180ms)
            var(--md-sys-motion-effects-default, linear),
        color var(--md-sys-motion-effects-default-duration, 180ms)
            var(--md-sys-motion-effects-default, linear),
        transform var(--md-sys-motion-effects-default-duration, 180ms)
            var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgprofile-m3 .sgprofile-m3-tabs > li > a:hover,
.sgprofile-m3 .sgprofile-m3-more-trigger:hover,
.sgprofile-m3 .sgprofile-m3-more-trigger[aria-expanded="true"] {
    border-color: transparent;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3 .sgprofile-m3-tabs > li.active > a,
.sgprofile-m3 .sgprofile-m3-tabs > li > a[aria-selected="true"],
.sgprofile-m3 .sgprofile-m3-more-trigger.is-selected {
    border-color: var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3 .sgprofile-m3-tabs > li.active > a .material-symbols-rounded,
.sgprofile-m3 .sgprofile-m3-tabs > li > a[aria-selected="true"] .material-symbols-rounded,
.sgprofile-m3 .sgprofile-m3-more-trigger.is-selected > .material-symbols-rounded:first-child {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3 .sgprofile-m3-tabs .material-symbols-rounded,
.sgprofile-m3 .sgprofile-m3-more-trigger .material-symbols-rounded {
    font-size: 21px;
}

.sgprofile-m3 .sgprofile-m3-tabs > li > a:active,
.sgprofile-m3 .sgprofile-m3-more-trigger:active {
    transform: scale(.97);
}

.sgprofile-m3 .sgprofile-m3-tabs > li > a:focus-visible,
.sgprofile-m3 .sgprofile-m3-more-trigger:focus-visible,
.sgprofile-m3 .sgprofile-m3-more-menu > a:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-more-chevron {
    transition: transform var(--md-sys-motion-spatial-default-duration, 450ms)
        var(--md-sys-motion-spatial-default, cubic-bezier(.2, 0, 0, 1));
}

.sgprofile-m3-more-trigger[aria-expanded="true"] .sgprofile-m3-more-chevron {
    transform: rotate(180deg);
}

.sgprofile-m3-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: grid;
    width: max-content;
    min-width: 230px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--sgcv-m3-elevation-2);
}

.sgprofile-m3-more-menu[hidden] {
    display: none;
}

.sgprofile-m3-more-menu > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
}

.sgprofile-m3-more-menu > a:hover {
    background: var(--md-sys-color-surface-container-high);
}

.sgprofile-m3-more-menu > a[aria-selected="true"] {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-more-menu > a[aria-selected="true"] .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3 .sgprofile-m3-tabs-container > .tab-content {
    position: relative;
    z-index: 0;
    min-width: 0;
    padding: clamp(14px, 2vw, 22px);
    border: 0;
    background: var(--md-sys-color-surface);
}

.sgprofile-m3 .sgprofile-m3-tabs-container > .tab-content > .tab-pane {
    display: none;
    min-width: 0;
    outline: 0;
}

.sgprofile-m3 .sgprofile-m3-tabs-container > .tab-content > .tab-pane.active {
    display: block;
}

.sgprofile-m3 .comment-title {
    margin: 0 0 14px;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 20px;
    font-weight: 550;
}

.sgprofile-m3-review-composer {
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
    padding: clamp(18px, 2.5vw, 28px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--md-sys-color-tertiary-container) 65%, transparent) 0 18%, transparent 42%),
        var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-section-heading,
.sgprofile-m3-feedback-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sgprofile-m3-section-heading > div,
.sgprofile-m3-feedback-heading > div {
    min-width: 0;
}

.sgprofile-m3-section-heading h2,
.sgprofile-m3-section-heading p,
.sgprofile-m3-feedback-heading h2 {
    margin: 0;
}

.sgprofile-m3-section-heading h2,
.sgprofile-m3-feedback-heading h2 {
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 550;
    line-height: 1.2;
}

.sgprofile-m3-section-heading p {
    margin-top: 3px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
}

.sgprofile-m3-heading-icon {
    display: grid;
    flex: 0 0 52px;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font-size: 29px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 32;
}

.sgprofile-m3-overline {
    display: block;
    margin-bottom: 3px;
    color: var(--md-sys-color-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.sgprofile-m3-review-form {
    display: grid;
    grid-template-columns: minmax(220px, .55fr) minmax(280px, 1.45fr);
    gap: 16px 20px;
    align-items: start;
}

.sgprofile-m3-rating-field {
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 132px;
    padding: 16px;
    border-radius: 18px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-rating-field > span:first-child {
    font-size: 14px;
    font-weight: 650;
}

.sgprofile-m3-rating-field #rateYo {
    max-width: 100%;
}

.sgprofile-m3-review-field {
    margin: 0;
}

.sgprofile-m3-review-field textarea {
    min-height: 94px;
    resize: vertical;
}

.sgprofile-m3-review-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.sgprofile-m3-inline-loader {
    display: none;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
}

.sgprofile-m3-inline-loader.is-active,
.sgprofile-m3-comments-loader.is-active {
    display: flex;
}

.sgprofile-m3-progress-indicator {
    width: 22px;
    height: 22px;
    border: 3px solid var(--md-sys-color-secondary-container);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: sgprofile-m3-spin 780ms linear infinite;
}

@keyframes sgprofile-m3-spin {
    to {
        transform: rotate(1turn);
    }
}

.sgprofile-m3-validation {
    color: var(--md-sys-color-error, #ba1a1a);
    font-size: 12px;
}

.sgprofile-m3-rating-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1300;
    display: none;
    width: min(calc(100vw - 32px), 430px);
    padding: 26px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-high);
    box-shadow: 0 12px 34px rgb(0 0 0 / .24);
    color: var(--md-sys-color-on-surface);
    text-align: center;
    transform: translate(-50%, -50%);
}

.sgprofile-m3-rating-dialog.is-open {
    display: block;
}

.sgprofile-m3-dialog-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 18px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 31px;
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 32;
}

.sgprofile-m3-rating-dialog h2 {
    margin: 0;
    font-family: var(--m3-font-brand);
    font-size: 24px;
    font-weight: 550;
}

.sgprofile-m3-dialog-error,
.sgprofile-m3-confirm-stars,
.sgprofile-m3-dialog-message {
    display: none;
    margin: 12px 0;
}

.sgprofile-m3-dialog-error.is-active,
.sgprofile-m3-confirm-stars.is-active,
.sgprofile-m3-dialog-message.is-active {
    display: block;
}

.sgprofile-m3-dialog-error {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--md-sys-color-error-container, #ffdad6);
    color: var(--md-sys-color-on-error-container, #410002);
    font-weight: 650;
}

.sgprofile-m3-dialog-message {
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 550;
}

.sgprofile-m3-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.sgprofile-m3-feedback-heading {
    justify-content: space-between;
    margin: 10px 0 16px;
}

.sgprofile-m3-comments {
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-comment-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgprofile-m3-comment {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-comment:last-child {
    border-bottom: 0;
}

.sgprofile-m3-comment-avatar {
    display: block;
    width: 52px;
    height: 52px;
    border: 2px solid var(--md-sys-color-surface);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
}

.sgprofile-m3-comment-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sgprofile-m3-comment-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.sgprofile-m3-comment-meta strong {
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-comment-meta time {
    flex: 0 0 auto;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
}

.sgprofile-m3-comment-body p {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.sgprofile-m3-comment-body .readonly-rating {
    min-height: 22px;
}

.sgprofile-m3-comments > .sgprofile-m3-empty-state {
    min-height: 170px;
    border-radius: 0;
}

.sgprofile-m3-comments-loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    font-weight: 600;
}

.sgprofile-m3-timeline-heading {
    margin-bottom: 18px;
    padding: 4px;
}

.sgprofile-m3 #snapicPostsContainer {
    min-width: 0;
}

.sgprofile-m3-snapic-feed {
    display: grid;
    gap: 18px;
    width: min(100%, 820px);
    margin: 0 auto;
}

.sgprofile-m3 .sgprofile-m3-snapic-card {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: none;
}

.sgprofile-m3-snapic-card-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 18px 8px;
}

.sgprofile-m3-snapic-avatar {
    display: block;
    width: 48px;
    height: 48px;
    border: 2px solid var(--md-sys-color-surface);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
}

.sgprofile-m3-snapic-card-header > div {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-snapic-card-header strong {
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-snapic-card-header time {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
}

.sgprofile-m3-snapic-title {
    margin: 0;
    padding: 6px 18px 14px;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 18px;
    font-weight: 550;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sgprofile-m3-snapic-media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 220px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--md-sys-color-surface-container-highest);
    cursor: zoom-in;
}

.sgprofile-m3-snapic-media::after {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
    color: var(--md-sys-color-on-surface);
    content: "open_in_full";
    font-family: "Material Symbols Rounded";
    font-size: 22px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
    opacity: 0;
    transform: scale(.88);
    transition:
        opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, ease),
        transform var(--md-sys-motion-duration-medium1, 250ms) var(--md-sys-motion-easing-emphasized, ease);
}

.sgprofile-m3-snapic-media:hover::after,
.sgprofile-m3-snapic-media:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

.sgprofile-m3-snapic-media img {
    display: block;
    width: 100%;
    max-height: 620px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
}

.sgprofile-m3-snapic-media:hover img {
    transform: scale(1.015);
}

.sgprofile-m3-snapic-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-snapic-actions .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 12px;
    font-weight: 650;
    transition:
        background-color var(--md-sys-motion-duration-short3, 150ms) ease,
        color var(--md-sys-motion-duration-short3, 150ms) ease;
}

.sgprofile-m3-snapic-actions .btn-action:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-snapic-actions .btn-action.liked,
.sgprofile-m3-snapic-actions .btn-action[aria-pressed="true"] {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgprofile-m3-snapic-actions .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 21px;
}

.sgprofile-m3-snapic-actions .text-primary,
.sgprofile-m3-snapic-comment .text-primary,
.sgprofile-m3-snapic-actions .liked .material-symbols-rounded,
.sgprofile-m3-snapic-comment .liked .material-symbols-rounded {
    color: var(--md-sys-color-primary);
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3-snapic-actions .text-muted,
.sgprofile-m3-snapic-comment .text-muted {
    color: var(--md-sys-color-on-surface-variant);
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3-snapic-footer {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: var(--md-sys-color-surface);
}

.sgprofile-m3-snapic-comment-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sgprofile-m3 .sgprofile-m3-snapic-comment {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-snapic-comment-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.sgprofile-m3-snapic-comment-body {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.sgprofile-m3-snapic-comment-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.sgprofile-m3-snapic-comment-meta strong {
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-snapic-comment-meta time {
    flex: 0 0 auto;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 10px;
}

.sgprofile-m3-snapic-comment-body p,
.sgprofile-m3-snapic-no-comments {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sgprofile-m3-snapic-comment .comment-like-btn {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 5px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
    font-weight: 650;
}

.sgprofile-m3-snapic-comment .comment-like-btn:hover {
    background: var(--md-sys-color-secondary-container);
}

.sgprofile-m3-snapic-comment .comment-like-btn .material-symbols-rounded {
    font-size: 18px;
}

.sgprofile-m3-view-comments {
    justify-self: end;
    margin-top: 8px;
}

.sgprofile-m3 .sgprofile-m3-comment-composer {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-comment-composer > img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.sgprofile-m3-comment-composer-body,
.sgprofile-m3-modal-comment-composer {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sgprofile-m3-comment-composer-body label,
.sgprofile-m3-modal-comment-composer label {
    color: var(--md-sys-color-on-surface);
    font-size: 12px;
    font-weight: 650;
}

.sgprofile-m3-comment-composer textarea,
.sgprofile-m3-modal-comment-composer textarea {
    width: 100%;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 15px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;
}

.sgprofile-m3-comment-composer-body > button,
.sgprofile-m3-modal-comment-composer > button {
    justify-self: end;
}

.sgprofile-m3-snapic-login {
    justify-self: start;
}

.sgprofile-m3-modal-comment-composer {
    padding: 16px;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-modal-comment-composer h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 18px;
    font-weight: 550;
}

.sgprofile-m3-modal-comments {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.sgprofile-m3 :where(.ibox, .social-feed-box, .card, .post-box) {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface);
    box-shadow: none;
}

.sgprofile-m3 :where(.form-control, textarea, select) {
    max-width: 100%;
}

.sgprofile-m3-privacy {
    min-width: 0;
    padding: clamp(16px, 2.4vw, 26px);
}

.sgprofile-m3-privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sgprofile-m3-loading-state {
    grid-column: 1 / -1;
    min-height: 140px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-privacy-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-privacy-card-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.sgprofile-m3-privacy-card-heading > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
}

.sgprofile-m3-privacy-card-heading > span:last-child {
    display: grid;
}

.sgprofile-m3-privacy-card h3,
.sgprofile-m3-privacy-card p {
    margin: 0;
}

.sgprofile-m3-privacy-card h3 {
    font-family: var(--m3-font-brand);
    font-size: 16px;
    font-weight: 550;
}

.sgprofile-m3-privacy-card p {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 11px;
}

.sgprofile-m3-privacy-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sgprofile-m3-privacy-actions .sgprofile-m3-form-status {
    flex: 1;
    margin: 0;
}

.sgprofile-m3-empty-state {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 150px;
    padding: 24px;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
}

.sgprofile-m3-empty-state > .material-symbols-rounded {
    color: var(--md-sys-color-primary);
    font-size: 40px;
}

.sgprofile-m3-empty-state[data-state="error"] {
    background: var(--sgprofile-m3-error-container);
    color: var(--sgprofile-m3-on-error-container);
}

.sgprofile-m3-dialog {
    position: fixed;
    inset: 0;
    z-index: 1100;
    width: 100%;
    height: 100%;
    padding: clamp(12px, 3vw, 32px);
    overflow-y: auto;
    background: rgb(0 0 0 / .48);
}

.sgprofile-m3-dialog[hidden] {
    display: none !important;
}

.sgprofile-m3-dialog .modal-dialog {
    width: min(100%, 1120px);
    max-width: none;
    margin: 0 auto;
}

.sgprofile-m3-dialog .modal-content {
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 28px;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    box-shadow:
        0 6px 18px rgb(0 0 0 / .18),
        0 24px 64px rgb(0 0 0 / .22);
}

.sgprofile-m3-dialog .modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-dialog .modal-header .close {
    order: 2;
    margin-left: auto;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 1;
}

.sgprofile-m3-dialog .social-avatar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sgprofile-m3-dialog .social-avatar img {
    width: 52px !important;
    height: 52px !important;
    border-radius: var(--md-sys-shape-full);
    object-fit: cover;
}

.sgprofile-m3-dialog .media-body {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-dialog #modalUserName {
    color: var(--md-sys-color-on-surface);
    font-weight: 700;
}

.sgprofile-m3-dialog #modalDateCreated {
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-dialog #modalTitle {
    margin: 2px 0 0;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: 18px;
    font-weight: 550;
}

.sgprofile-m3-dialog .modal-body {
    padding: clamp(14px, 2.2vw, 24px);
}

.sgprofile-m3-dialog .modal-body > .row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
    gap: 18px;
    margin: 0;
}

.sgprofile-m3-dialog .modal-body :where(.col-md-8, .col-md-4) {
    width: auto;
    min-width: 0;
    padding: 0;
}

.sgprofile-m3-dialog .modalImage {
    display: grid;
    place-items: center;
    min-height: 300px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-dialog #modalImage {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(68vh, 720px);
    border-radius: 16px;
    object-fit: contain;
}

.sgprofile-m3-dialog #modalComments {
    max-height: min(50vh, 480px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
    background: var(--md-sys-color-surface-container-low);
    scrollbar-width: thin;
}

.sgprofile-m3 :where(
    a,
    button,
    input,
    textarea,
    select,
    [tabindex]
):focus-visible,
.sgprofile-m3-dialog :where(
    a,
    button,
    input,
    textarea,
    select,
    [tabindex]
):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

@media (max-width: 1160px) {
    .sgprofile-m3 .sgprofile-m3-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sgprofile-m3-hero-content {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sgprofile-m3-view-switcher {
        grid-column: 1 / -1;
        justify-self: end;
        width: min(100%, 320px);
    }
}

@media (max-width: 900px) {
    .sgprofile-m3-layout {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-sidebar {
        position: static;
    }

    .sgprofile-m3-privacy-grid {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-dialog .modal-body > .row {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-dialog #modalComments {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 650px) {
    .sgprofile-m3-hero {
        border-radius: 22px;
    }

    .sgprofile-m3-banner,
    .sgprofile-m3-banner > img {
        min-height: clamp(190px, 52vw, 260px);
        height: clamp(190px, 52vw, 260px);
    }

    .sgprofile-m3-hero-content {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 14px 16px;
        background:
            linear-gradient(
                150deg,
                var(--md-sys-color-surface) 0 62%,
                var(--md-sys-color-tertiary-container)
            );
    }

    .sgprofile-m3-avatar-wrap {
        width: 88px;
        height: 88px;
        margin-top: -44px;
    }

    .sgprofile-m3-avatar-action {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .sgprofile-m3-rating {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .sgprofile-m3-view-switcher {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
    }

    .sgprofile-m3 .sgprofile-m3-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgprofile-m3 .sgprofile-m3-tabs > li > a,
    .sgprofile-m3 .sgprofile-m3-more-trigger {
        flex-direction: column;
        gap: 2px;
        min-height: 60px;
    }

    .sgprofile-m3-review-form {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-review-actions {
        grid-column: auto;
        align-items: stretch;
        flex-direction: column;
    }

    .sgprofile-m3-review-actions > button {
        width: 100%;
    }

    .sgprofile-m3-feedback-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgprofile-m3-snapic-card {
        border-radius: 20px;
    }

    .sgprofile-m3-snapic-actions .btn-action {
        flex-direction: column;
        gap: 2px;
        min-height: 58px;
        padding-inline: 6px;
    }

    .sgprofile-m3-snapic-media {
        min-height: 190px;
    }

    .sgprofile-m3-snapic-media img {
        aspect-ratio: 4 / 3;
    }

    .sgprofile-m3-snapic-comment-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .sgprofile-m3-field-grid {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-field-wide {
        grid-column: auto;
    }

    .sgprofile-m3-field-support,
    .sgprofile-m3-privacy-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .sgprofile-m3-privacy-actions > button {
        width: 100%;
    }

    .sgprofile-m3-dialog {
        padding: 8px;
    }

    .sgprofile-m3-dialog .modal-content {
        border-radius: 22px;
    }
}

@media (max-width: 410px) {
    .sgprofile-m3-hero-content {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .sgprofile-m3-avatar-wrap {
        width: 74px;
        height: 74px;
    }

    .sgprofile-m3-hero-copy h1 {
        font-size: 23px;
    }

    .sgprofile-m3 .sgprofile-m3-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgprofile-m3-card-actions,
    .sgprofile-m3-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sgprofile-m3-card-actions > *,
    .sgprofile-m3-form-actions > * {
        width: 100%;
        flex-basis: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3 *,
    .sgprofile-m3 *::before,
    .sgprofile-m3 *::after,
    .sgprofile-m3-dialog *,
    .sgprofile-m3-dialog *::before,
    .sgprofile-m3-dialog *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .sgprofile-m3-segment.is-selected,
    .sgprofile-m3 .sgprofile-m3-tabs > li > a[aria-selected="true"],
    .sgprofile-m3 .sgprofile-m3-more-trigger.is-selected {
        border: 2px solid Highlight;
    }
}

/* =============================================================================
Design M3 Changes - CommonVisitors Profile people and connection directories

M3 components and states
- Search bar, standard button group, people cards, assist/status chips,
  filled/tonal/outlined actions, loading/empty/error states, and nested tabs.

Responsive and accessibility
- Natural page scrolling, wrapping controls, 48px targets, visible focus,
  live result regions, keyboard tab movement, and single-column mobile cards.

Files/components affected
- _UserSearchPartial, _SendFriendRequest, _FollowersList, _FollowingList,
  _FriendRequestActions, _receivedRequestsList, _pendingRequestsList,
  _MutualFriendsList, _tabscontainer, and sg-profile-m3.js.
============================================================================= */

.sgprofile-m3-tab-surface,
.sgprofile-m3-people-search,
.sgprofile-m3-directory-surface {
    min-width: 0;
}

.sgprofile-m3-people-search,
.sgprofile-m3-directory-surface {
    padding: clamp(16px, 2.4vw, 28px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-people-search {
    margin-bottom: 16px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--md-sys-color-primary-container) 55%, transparent),
            color-mix(in srgb, var(--md-sys-color-tertiary-container) 44%, transparent)
        ),
        var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-directory-surface {
    container-type: inline-size;
}

.sgprofile-m3-section-heading h3 {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-brand);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.sgprofile-m3-section-heading h3 + p {
    margin-top: 5px;
}

.sgprofile-m3-search-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.sgprofile-m3-search-control {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 48px;
    align-items: center;
    min-width: 0;
    min-height: 64px;
    padding-left: 18px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface-variant);
    transition:
        border-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        background-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        box-shadow var(--m3-motion-duration-short4) var(--m3-motion-easing-standard);
}

.sgprofile-m3-search-control:hover {
    border-color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-search-control:focus-within {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgprofile-m3-search-field.is-error .sgprofile-m3-search-control {
    border-color: var(--md-sys-color-error);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-error);
}

.sgprofile-m3-search-leading {
    font-size: 26px;
}

.sgprofile-m3-search-copy {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 62px;
    margin: 0;
}

.sgprofile-m3-search-copy > span {
    color: var(--md-sys-color-primary);
    font: 650 11px/1.2 var(--m3-font-plain);
    letter-spacing: .04em;
}

.sgprofile-m3-search-copy input {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 500 16px/1.35 var(--m3-font-plain);
    appearance: none;
}

.sgprofile-m3-search-copy input::-webkit-search-cancel-button {
    display: none;
}

.sgprofile-m3-search-copy input::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: .82;
}

.sgprofile-m3-search-clear {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
}

.sgprofile-m3-search-clear:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-search-clear[hidden] {
    display: none;
}

.sgprofile-m3-search-field > .sgprofile-m3-search-submit,
.sgprofile-m3-person-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    font: 650 14px/1 var(--m3-font-plain);
    letter-spacing: .01em;
    cursor: pointer;
    isolation: isolate;
    transition:
        transform var(--m3-motion-duration-short4) var(--m3-motion-easing-emphasized),
        background-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard);
}

.sgprofile-m3-search-field > .sgprofile-m3-search-submit {
    min-width: 132px;
    min-height: 64px;
    padding-inline: 24px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-m3-search-field > .sgprofile-m3-search-submit:disabled {
    background: color-mix(
        in srgb,
        var(--md-sys-color-on-surface) 12%,
        var(--md-sys-color-surface)
    );
    color: color-mix(
        in srgb,
        var(--md-sys-color-on-surface) 38%,
        transparent
    );
    cursor: wait;
}

.sgprofile-m3-search-field.is-searching
    > .sgprofile-m3-search-submit
    .material-symbols-rounded {
    animation: sgprofile-m3-search-spin 900ms linear infinite;
}

@keyframes sgprofile-m3-search-spin {
    to {
        transform: rotate(360deg);
    }
}

.sgprofile-m3-search-field > .sgprofile-m3-search-submit:hover,
.sgprofile-m3-person-action:hover {
    transform: translateY(-1px);
}

.sgprofile-m3-search-field > .sgprofile-m3-search-submit:focus-visible,
.sgprofile-m3-search-clear:focus-visible,
.sgprofile-m3-person-action:focus-visible,
.sgprofile-m3-segmented-tabs > button:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgprofile-m3-supporting-text {
    margin: 8px 16px 0;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/1.4 var(--m3-font-plain);
}

.sgprofile-m3-segmented-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 1px;
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-outline-variant);
}

.sgprofile-m3-segmented-tabs > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 12px;
    border: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    font: 650 13px/1.15 var(--m3-font-plain);
    cursor: pointer;
    transition:
        color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        background-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard);
}

.sgprofile-m3-segmented-tabs > button:first-child {
    border-radius: var(--md-sys-shape-full) 0 0 var(--md-sys-shape-full);
}

.sgprofile-m3-segmented-tabs > button:last-child {
    border-radius: 0 var(--md-sys-shape-full) var(--md-sys-shape-full) 0;
}

.sgprofile-m3-segmented-tabs > button:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-segmented-tabs > button[aria-selected="true"],
.sgprofile-m3-segmented-tabs > button.is-selected {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-segmented-tabs .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 21px;
}

.sgprofile-m3-subtab-panel[hidden] {
    display: none;
}

.sgprofile-m3-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.sgprofile-m3-person-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 104px;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level0);
    transition:
        border-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        box-shadow var(--m3-motion-duration-medium2) var(--m3-motion-easing-emphasized),
        transform var(--m3-motion-duration-medium2) var(--m3-motion-easing-emphasized);
}

.sgprofile-m3-person-card:hover {
    border-color: var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-level1);
    transform: translateY(-2px);
}

.sgprofile-m3-person-card > img {
    align-self: start;
    width: 64px;
    height: 64px;
    border: 2px solid var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-highest);
    object-fit: cover;
    box-shadow: var(--md-sys-elevation-level1);
}

.sgprofile-m3-person-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.sgprofile-m3-person-copy strong {
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font: 650 16px/1.3 var(--m3-font-brand);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-person-copy > span {
    overflow: hidden;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 13px/1.35 var(--m3-font-plain);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-person-actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-person-action {
    min-height: 42px;
    padding: 0 16px;
}

.sgprofile-m3-person-action .material-symbols-rounded {
    font-size: 20px;
}

.sgprofile-m3-person-action.is-filled {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgprofile-m3-person-action.is-tonal {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-person-action.is-outlined {
    border: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-primary);
}

.sgprofile-m3-person-action.is-error {
    background: var(--sgprofile-m3-error-container);
    color: var(--sgprofile-m3-on-error-container);
}

.sgprofile-m3-person-action:disabled {
    opacity: .56;
    cursor: wait;
    transform: none;
}

.sgprofile-m3-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding-inline: 12px;
    border-radius: var(--md-sys-shape-small);
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface-variant);
    font: 650 12px/1 var(--m3-font-plain);
}

.sgprofile-m3-status-chip .material-symbols-rounded {
    font-size: 18px;
}

.sgprofile-m3-status-chip.is-secondary {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-status-chip.is-tertiary {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgprofile-m3-status-chip.is-success {
    background: var(--sgprofile-m3-success-container);
    color: var(--sgprofile-m3-on-success-container);
}

.sgprofile-m3-status-chip.is-error {
    background: var(--sgprofile-m3-error-container);
    color: var(--sgprofile-m3-on-error-container);
}

.sgprofile-m3-loading-state,
.sgprofile-m3-empty-state {
    display: flex;
    grid-column: 1 / -1;
    min-height: 144px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
}

.sgprofile-m3-loading-state > span:last-child,
.sgprofile-m3-empty-state p {
    margin: 0;
    font: 550 14px/1.45 var(--m3-font-plain);
}

.sgprofile-m3-empty-state > .material-symbols-rounded {
    font-size: 38px;
    color: var(--md-sys-color-primary);
}

.sgprofile-m3-empty-state.is-error {
    border-color: var(--md-sys-color-error);
    background: var(--sgprofile-m3-error-container);
    color: var(--sgprofile-m3-on-error-container);
}

.sgprofile-m3-empty-state.is-error > .material-symbols-rounded {
    color: var(--md-sys-color-error);
}

.sgprofile-m3-empty-state.is-loading > .material-symbols-rounded {
    animation: sgprofile-m3-directory-pulse 1.2s ease-in-out infinite;
}

.sgprofile-m3-progress {
    width: 38px;
    height: 38px;
    border: 4px solid var(--md-sys-color-secondary-container);
    border-top-color: var(--md-sys-color-primary);
    border-radius: 50%;
    animation: sgprofile-m3-directory-spin 900ms linear infinite;
}

@keyframes sgprofile-m3-directory-spin {
    to { transform: rotate(360deg); }
}

@keyframes sgprofile-m3-directory-pulse {
    50% { transform: scale(1.12); opacity: .65; }
}

@container (max-width: 520px) {
    .sgprofile-m3-person-card {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .sgprofile-m3-person-card > img {
        width: 56px;
        height: 56px;
    }

    .sgprofile-m3-person-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgprofile-m3-person-action {
        width: 100%;
        padding-inline: 10px;
    }
}

@media (max-width: 720px) {
    .sgprofile-m3-people-search,
    .sgprofile-m3-directory-surface {
        padding: 16px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgprofile-m3-search-field {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sgprofile-m3-search-control {
        grid-template-columns: 26px minmax(0, 1fr) 44px;
        min-height: 60px;
        padding-left: 16px;
    }

    .sgprofile-m3-search-copy {
        min-height: 58px;
    }

    .sgprofile-m3-search-field > .sgprofile-m3-search-submit {
        width: 100%;
        min-height: 52px;
    }

    .sgprofile-m3-segmented-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgprofile-m3-segmented-tabs > button,
    .sgprofile-m3-segmented-tabs > button:first-child,
    .sgprofile-m3-segmented-tabs > button:last-child {
        border-radius: 0;
    }
}

/* ==========================================================================
   Design M3 Changes - profile photo group folders and universal upload dialog
   ========================================================================== */
.sgprofile-photos-m3,
.sgprofile-photos-m3-upload-dialog {
    --sg-m3-primary: var(--md-sys-color-primary, #6750a4);
    --sg-m3-on-primary: var(--md-sys-color-on-primary, #fff);
    --sg-m3-primary-container: var(--md-sys-color-primary-container, #eaddff);
    --sg-m3-on-primary-container: var(--md-sys-color-on-primary-container, #21005d);
    --sg-m3-secondary-container: var(--md-sys-color-secondary-container, #e8def8);
    --sg-m3-on-secondary-container: var(--md-sys-color-on-secondary-container, #1d192b);
    --sg-m3-tertiary-container: var(--md-sys-color-tertiary-container, #ffd8e4);
    --sg-m3-on-tertiary-container: var(--md-sys-color-on-tertiary-container, #31111d);
    --sg-m3-surface: var(--md-sys-color-surface, #fffbfe);
    --sg-m3-surface-container: var(--md-sys-color-surface-container, #f3edf7);
    --sg-m3-surface-container-low: var(--md-sys-color-surface-container-low, #f7f2fa);
    --sg-m3-surface-container-high: var(--md-sys-color-surface-container-high, #ece6f0);
    --sg-m3-surface-container-highest: var(--md-sys-color-surface-container-highest, #e6e0e9);
    --sg-m3-on-surface: var(--md-sys-color-on-surface, #1d1b20);
    --sg-m3-on-surface-variant: var(--md-sys-color-on-surface-variant, #49454f);
    --sg-m3-outline: var(--md-sys-color-outline, #79747e);
    --sg-m3-outline-variant: var(--md-sys-color-outline-variant, #cac4d0);
    --sg-m3-error: var(--md-sys-color-error, #b3261e);
}

.sgprofile-photos-m3-create-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    padding: 10px 18px;
    border: 0;
    border-radius: 24px;
    background: var(--sg-m3-primary, #6750a4);
    color: var(--sg-m3-on-primary, #fff);
    font: 600 0.9375rem/1.25 "Roboto", "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(29, 25, 43, 0.2);
    transition:
        background-color 220ms cubic-bezier(.2, 0, 0, 1),
        box-shadow 220ms cubic-bezier(.2, 0, 0, 1),
        transform 220ms cubic-bezier(.2, 0, 0, 1);
}

.sgprofile-photos-m3-create-group:hover {
    background: color-mix(
        in srgb,
        var(--sg-m3-primary, #6750a4) 92%,
        white
    );
    box-shadow: 0 3px 8px rgba(29, 25, 43, 0.24);
    transform: translateY(-1px);
}

.sgprofile-photos-m3-create-group .material-symbols-rounded {
    font-size: 24px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgprofile-photos-m3-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.sgprofile-photos-m3-folder {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    min-height: 80px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--sg-m3-outline-variant, #cac4d0);
    border-radius: 20px;
    background: var(--sg-m3-surface, #fffbfe);
    color: var(--sg-m3-on-surface, #1d1b20);
    text-decoration: none;
    overflow: hidden;
    transition:
        background-color 220ms cubic-bezier(.2, 0, 0, 1),
        border-color 220ms cubic-bezier(.2, 0, 0, 1),
        transform 220ms cubic-bezier(.2, 0, 0, 1);
}

.sgprofile-photos-m3-folder:hover,
.sgprofile-photos-m3-folder.is-selected {
    border-color: var(--sg-m3-primary, #6750a4);
    background: var(--sg-m3-secondary-container, #e8def8);
    transform: translateY(-1px);
}

.sgprofile-photos-m3-folder-cover {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--sg-m3-primary-container, #eaddff);
    color: var(--sg-m3-on-primary-container, #21005d);
    overflow: hidden;
}

.sgprofile-photos-m3-folder-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgprofile-photos-m3-folder-cover > .material-symbols-rounded {
    font-size: 34px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 40;
}

.sgprofile-photos-m3-folder > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sgprofile-photos-m3-folder strong,
.sgprofile-photos-m3-folder small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-photos-m3-folder strong {
    font: 600 1rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-folder small {
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.875rem/1.3 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-folder-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding: 18px;
    border: 1px dashed var(--sg-m3-outline, #79747e);
    border-radius: 20px;
    background: var(--sg-m3-surface-container-low, #f7f2fa);
    color: var(--sg-m3-on-surface, #1d1b20);
}

.sgprofile-photos-m3-folder-empty > .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 40px;
    color: var(--sg-m3-primary, #6750a4);
}

.sgprofile-photos-m3-folder-empty > span:last-child {
    display: grid;
    gap: 4px;
}

.sgprofile-photos-m3-folder-empty strong {
    font: 600 1rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-folder-empty small {
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.875rem/1.45 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-selected-group {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--sg-m3-outline-variant, #cac4d0);
}

.sgprofile-photos-m3-selected-group > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sgprofile-photos-m3-delete-form {
    margin: 0;
}

.sgprofile-photos-m3-delete-group {
    margin-left: auto;
}

.sgprofile-photos-m3-delete-button,
.sgprofile-photos-m3-delete-image button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    border: 1px solid var(--md-sys-color-error, #b3261e);
    border-radius: 999px;
    background: var(--md-sys-color-surface, #fffbfe);
    color: var(--md-sys-color-error, #b3261e);
    cursor: pointer;
    font: 600 0.875rem/1 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-delete-button {
    padding: 0 14px;
}

.sgprofile-photos-m3-delete-button:hover,
.sgprofile-photos-m3-delete-image button:hover {
    background: var(--md-sys-color-error-container, #f9dedc);
}

.sgprofile-photos-m3-selected-group > header > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--sg-m3-tertiary-container, #ffd8e4);
    color: var(--sg-m3-on-tertiary-container, #31111d);
    font-size: 28px;
    font-variation-settings: "FILL" 1, "wght" 450, "GRAD" 0, "opsz" 32;
}

.sgprofile-photos-m3-selected-group h3,
.sgprofile-photos-m3-selected-group p {
    margin: 0;
}

.sgprofile-photos-m3-selected-group h3 {
    font: 600 1.25rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-selected-group p {
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.875rem/1.4 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-dialog {
    width: min(760px, calc(100vw - 32px));
    height: min(720px, calc(100dvh - 32px));
    max-height: min(820px, calc(100dvh - 32px));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--sg-m3-surface-container-high, #ece6f0);
    color: var(--sg-m3-on-surface, #1d1b20);
    box-shadow:
        0 8px 24px rgba(29, 25, 43, 0.2),
        0 24px 64px rgba(29, 25, 43, 0.18);
    overflow: hidden;
}

.sgprofile-photos-m3-upload-dialog::backdrop {
    background: rgba(29, 25, 43, 0.56);
    backdrop-filter: blur(3px);
}

.sgprofile-photos-m3-upload-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.sgprofile-photos-m3-upload-form > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--sg-m3-outline-variant, #cac4d0);
    background: var(--sg-m3-surface-container-highest, #e6e0e9);
}

.sgprofile-photos-m3-upload-form > header h2,
.sgprofile-photos-m3-upload-form > header p {
    margin: 0;
}

.sgprofile-photos-m3-upload-form > header h2 {
    font: 600 1.375rem/1.3 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-form > header p {
    margin-top: 3px;
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.875rem/1.4 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-body {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 0;
    padding: 20px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sgprofile-photos-m3-outlined-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    min-height: 58px;
    padding: 7px 16px;
    border: 1px solid var(--sg-m3-outline, #79747e);
    border-radius: 12px;
    background: var(--sg-m3-surface, #fffbfe);
}

.sgprofile-photos-m3-outlined-field > span {
    grid-row: 1 / span 2;
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 500 0.8125rem/1.2 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-outlined-field input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sg-m3-on-surface, #1d1b20);
    font: 500 1rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-outlined-field small {
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.75rem/1.25 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-outlined-field:focus-within {
    border-color: var(--sg-m3-primary, #6750a4);
    box-shadow: inset 0 0 0 1px var(--sg-m3-primary, #6750a4);
}

.sgprofile-photos-m3-upload-drop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 18px;
    border: 2px dashed var(--sg-m3-outline, #79747e);
    border-radius: 20px;
    background: var(--sg-m3-surface, #fffbfe);
    cursor: pointer;
    transition:
        border-color 180ms cubic-bezier(.2, 0, 0, 1),
        background-color 180ms cubic-bezier(.2, 0, 0, 1);
}

.sgprofile-photos-m3-upload-drop.is-dragging,
.sgprofile-photos-m3-upload-drop:hover {
    border-color: var(--sg-m3-primary, #6750a4);
    background: var(--sg-m3-primary-container, #eaddff);
}

.sgprofile-photos-m3-upload-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
}

.sgprofile-photos-m3-upload-drop > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: var(--sg-m3-secondary-container, #e8def8);
    color: var(--sg-m3-on-secondary-container, #1d192b);
    font-size: 30px;
}

.sgprofile-photos-m3-upload-drop > span:nth-of-type(2) {
    display: grid;
    gap: 4px;
}

.sgprofile-photos-m3-upload-drop strong {
    font: 600 1rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-drop small {
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.875rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-browse {
    padding: 10px 16px;
    border-radius: 20px;
    background: var(--sg-m3-secondary-container, #e8def8);
    color: var(--sg-m3-on-secondary-container, #1d192b);
    font: 600 0.875rem/1.2 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 400 0.75rem/1.35 "Roboto", "Segoe UI", sans-serif;
}

.sgprofile-photos-m3-upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}

.sgprofile-photos-m3-upload-preview:empty {
    display: none;
}

.sgprofile-photos-m3-upload-preview figure {
    position: relative;
    min-width: 0;
    margin: 0;
    border-radius: 16px;
    background: var(--sg-m3-surface-container, #f3edf7);
    overflow: hidden;
}

.sgprofile-photos-m3-upload-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.sgprofile-photos-m3-upload-preview figcaption {
    padding: 7px 9px;
    overflow: hidden;
    color: var(--sg-m3-on-surface, #1d1b20);
    font: 500 0.75rem/1.25 "Roboto", "Segoe UI", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-photos-m3-upload-preview button {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(29, 27, 32, 0.78);
    color: #fff;
    cursor: pointer;
}

.sgprofile-photos-m3-upload-preview button .material-symbols-rounded {
    font-size: 19px;
}

.sgprofile-photos-m3-upload-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--sg-m3-surface-container-highest, #e6e0e9);
    overflow: hidden;
}

.sgprofile-photos-m3-upload-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--sg-m3-primary, #6750a4);
    transition: width 180ms linear;
}

.sgprofile-photos-m3-upload-status {
    min-height: 20px;
    margin: 0;
    color: var(--sg-m3-on-surface-variant, #49454f);
    font: 500 0.875rem/1.4 "Roboto", "Segoe UI", sans-serif;
    overflow-wrap: anywhere;
}

.sgprofile-photos-m3-upload-status.is-error {
    color: var(--sg-m3-error, #b3261e);
}

.sgprofile-photos-m3-upload-form > footer {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--sg-m3-outline-variant, #cac4d0);
    background: var(--sg-m3-surface-container-high, #ece6f0);
    box-shadow: 0 -8px 20px rgba(29, 25, 43, 0.06);
}

.sgprofile-photos-m3-upload-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.sgprofile-photos-m3-upload-actions button {
    min-height: 44px;
    white-space: nowrap;
}

.sgprofile-photos-m3-upload-actions button:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .sgprofile-photos-m3-create-group {
        width: auto;
        margin-top: 0;
        white-space: nowrap;
    }

    .sgprofile-photos-m3-folder-grid {
        grid-template-columns: 1fr;
    }

    .sgprofile-photos-m3-upload-dialog {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 24px;
    }

    .sgprofile-photos-m3-upload-form > header {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 16px;
    }

    .sgprofile-photos-m3-upload-form > header > .sgprofile-m3-labeled-icon {
        display: none;
    }

    .sgprofile-photos-m3-upload-body {
        padding: 16px;
    }

    .sgprofile-photos-m3-upload-drop {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 96px;
        padding: 14px;
    }

    .sgprofile-photos-m3-upload-browse {
        display: none;
    }

    .sgprofile-photos-m3-upload-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgprofile-photos-m3-upload-form > footer {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 16px 16px;
    }

    .sgprofile-photos-m3-upload-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgprofile-photos-m3-upload-actions button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-photos-m3-create-group,
    .sgprofile-photos-m3-folder,
    .sgprofile-photos-m3-upload-drop,
    .sgprofile-photos-m3-upload-progress > span {
        transition-duration: 1ms;
    }
}

@media (forced-colors: active) {
    .sgprofile-m3-segmented-tabs > button[aria-selected="true"],
    .sgprofile-m3-person-action {
        border: 2px solid ButtonText;
    }
}

/* =============================================================================
Design M3 Changes - CommonVisitors Profile structured records

Applies the M3 card, field, dialog, button, progress, color-role, shape,
typography, motion, responsive, focus, and live-status contracts to Education,
Work, Family, and Friend-group profile surfaces.
============================================================================= */

.sgprofile-m3-record-surface {
    min-width: 0;
    padding: clamp(16px, 2.5vw, 28px);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-lowest);
}

.sgprofile-m3-record-form {
    margin-top: 20px;
}

.sgprofile-m3-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 12px;
}

.sgprofile-m3-record-grid-family {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
}

.sgprofile-m3-record-field {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-content: start;
    gap: 5px 10px;
    min-width: 0;
    min-height: 108px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font-family: var(--m3-font-plain);
    transition:
        border-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard),
        background-color var(--m3-motion-duration-short4) var(--m3-motion-easing-standard);
}

.sgprofile-m3-record-field:focus-within {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-surface-container-high);
}

.sgprofile-m3-record-field > .material-symbols-rounded {
    grid-row: 1 / span 2;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 20px;
}

.sgprofile-m3-record-field > span:nth-child(2) {
    align-self: center;
    color: var(--md-sys-color-on-surface-variant);
    font: 650 12px/1.2 var(--m3-font-plain);
    letter-spacing: .03em;
}

.sgprofile-m3-record-field input,
.sgprofile-m3-record-field strong {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 4px;
}

.sgprofile-m3-record-field input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-small);
    outline: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 500 14px/1.3 var(--m3-font-plain);
}

.sgprofile-m3-record-field input:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgprofile-m3-record-field strong {
    overflow-wrap: anywhere;
    color: var(--md-sys-color-on-surface);
    font: 600 15px/1.4 var(--m3-font-plain);
}

.sgprofile-m3-related {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-m3-related-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sgprofile-m3-related-heading h3,
.sgprofile-m3-related-heading p {
    margin: 0;
}

.sgprofile-m3-related-heading h3 {
    color: var(--md-sys-color-on-surface);
    font: 650 20px/1.25 var(--m3-font-brand);
}

.sgprofile-m3-related-heading p {
    margin-top: 4px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 13px/1.4 var(--m3-font-plain);
}

.sgprofile-m3-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
    margin-top: 16px;
}

.sgprofile-m3-related-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgprofile-m3-related-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-tertiary);
    font-size: 28px;
}

.sgprofile-m3-related-card .sgprofile-m3-person-copy strong,
.sgprofile-m3-related-card .sgprofile-m3-person-copy > span {
    color: inherit;
}

.sgprofile-m3-related-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.sgprofile-m3-record-dialog {
    width: min(680px, calc(100vw - 32px));
    max-height: min(84vh, 820px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--md-sys-elevation-level5);
}

.sgprofile-m3-record-dialog::backdrop {
    background: color-mix(in srgb, #000 48%, transparent);
    backdrop-filter: blur(2px);
}

.sgprofile-m3-related-form {
    padding: clamp(18px, 3vw, 28px);
}

.sgprofile-m3-related-form > header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sgprofile-m3-related-form > header h3,
.sgprofile-m3-related-form > header p {
    margin: 0;
}

.sgprofile-m3-related-form > header h3 {
    font: 650 22px/1.2 var(--m3-font-brand);
}

.sgprofile-m3-related-form > header p {
    margin-top: 4px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 13px/1.4 var(--m3-font-plain);
}

.sgprofile-m3-related-form .sgprofile-m3-outlined-field {
    margin-bottom: 14px;
}

.sgprofile-m3-related-form .sgprofile-m3-field-grid {
    gap: 14px;
}

.sgprofile-m3-related-form input[type="file"] {
    height: auto;
    min-height: 48px;
    padding-block: 10px;
}

@media (max-width: 600px) {
    .sgprofile-m3-record-surface {
        padding: 16px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgprofile-m3-record-grid,
    .sgprofile-m3-record-grid-family {
        grid-template-columns: 1fr;
    }

    .sgprofile-m3-related-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .sgprofile-m3-related-heading > button {
        width: 100%;
    }

    .sgprofile-m3-related-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgprofile-m3-related-actions .sgprofile-m3-person-action {
        width: 100%;
    }

    .sgprofile-m3-related-form > header {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
    }
}

/* =============================================================================
Design M3 Changes - CommonVisitors Profile about, contacts, and notifications
============================================================================= */

.sgprofile-m3-profile-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    margin-top: 20px;
    padding: 4px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-profile-nav > button {
    display: grid;
    grid-template-rows: 24px auto;
    place-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 64px;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: var(--md-sys-shape-large);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: 650 12px/1.2 var(--m3-font-plain);
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--m3-motion-duration-short4)
            var(--m3-motion-easing-standard),
        color var(--m3-motion-duration-short4)
            var(--m3-motion-easing-standard),
        transform var(--m3-motion-duration-short2)
            var(--m3-motion-easing-standard);
}

.sgprofile-m3-profile-nav > button:hover {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-profile-nav > button.is-active,
.sgprofile-m3-profile-nav > button[aria-selected="true"] {
    border-color: var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-profile-nav > button:active {
    transform: scale(.97);
}

.sgprofile-m3-profile-nav > button:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-profile-nav .material-symbols-rounded {
    font-size: 24px;
}

.sgprofile-m3-profile-nav > button.is-active .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 550, "GRAD" 0, "opsz" 24;
}

.sgprofile-m3-profile-panel {
    min-width: 0;
    margin-top: 16px;
    scroll-margin-top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-category-height, 64px) +
        var(--sgcv-m3-context-height, 152px) +
        16px
    );
}

.sgprofile-m3-profile-panel[hidden] {
    display: none !important;
}

.sgprofile-m3-profile-panel.is-active {
    animation: sgprofile-m3-profile-panel-enter
        var(--m3-motion-duration-medium2, 300ms)
        var(--m3-motion-easing-emphasized-decelerate, cubic-bezier(.05, .7, .1, 1))
        both;
}

@keyframes sgprofile-m3-profile-panel-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sgprofile-m3-about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
    margin: 0;
}

.sgprofile-m3-about-grid > div {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 2px 10px;
    min-width: 0;
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-about-grid > div > .material-symbols-rounded {
    grid-row: 1 / span 2;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 22px;
}

.sgprofile-m3-about-grid dt,
.sgprofile-m3-about-grid dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.sgprofile-m3-about-grid dt {
    color: var(--md-sys-color-on-surface-variant);
    font: 650 12px/1.2 var(--m3-font-plain);
}

.sgprofile-m3-about-grid dd {
    color: var(--md-sys-color-on-surface);
    font: 600 14px/1.35 var(--m3-font-plain);
}

.sgprofile-m3-birth-surface {
    margin-top: 20px;
    padding: clamp(16px, 2.2vw, 22px);
    border-radius: var(--md-sys-shape-extra-large);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--md-sys-color-secondary-container) 72%, transparent),
            color-mix(in srgb, var(--md-sys-color-tertiary-container) 62%, transparent)
        ),
        var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-birth-surface > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgprofile-m3-birth-surface > div:first-child > .material-symbols-rounded {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
    font-size: 25px;
}

.sgprofile-m3-birth-surface h3 {
    margin: 0;
    font: 650 20px/1.25 var(--m3-font-brand);
}

.sgprofile-m3-letter-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.sgprofile-m3-letter-filter > button {
    display: grid;
    min-width: 42px;
    height: 42px;
    padding-inline: 10px;
    place-items: center;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    font: 650 13px/1 var(--m3-font-plain);
    cursor: pointer;
}

.sgprofile-m3-letter-filter > button[aria-pressed="true"] {
    border-color: transparent;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.sgprofile-m3-letter-filter > button:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-contact-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
    margin-top: 18px;
}

.sgprofile-m3-contact-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-contact-card > a {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.sgprofile-m3-contact-card > a > .material-symbols-rounded {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 28px;
}

.sgprofile-m3-contact-card > a:focus-visible {
    border-radius: var(--md-sys-shape-medium);
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 3px;
}

.sgprofile-m3-contact-card > .sgprofile-m3-person-action {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    padding: 0;
}

.sgprofile-m3-contact-card > .sgprofile-m3-person-action > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.sgprofile-m3-pagination {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.sgprofile-m3-pagination > span {
    color: var(--md-sys-color-on-surface-variant);
    font: 650 13px/1.2 var(--m3-font-plain);
}

.sgprofile-m3-notification-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.sgprofile-m3-notification-columns > section {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-notification-columns h3 {
    margin: 0 0 12px;
    font: 650 20px/1.25 var(--m3-font-brand);
}

.sgprofile-m3-notification-list {
    display: grid;
    gap: 8px;
}

.sgprofile-m3-notification-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-notification-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font-size: 24px;
}

.sgprofile-m3-notification-item h4,
.sgprofile-m3-notification-item p {
    margin: 0;
}

.sgprofile-m3-notification-item h4 {
    color: var(--md-sys-color-on-surface);
    font: 650 14px/1.3 var(--m3-font-plain);
}

.sgprofile-m3-notification-item p,
.sgprofile-m3-notification-item small,
.sgprofile-m3-notification-item time {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 12px/1.4 var(--m3-font-plain);
}

.sgprofile-m3-notification-item time {
    grid-column: 2;
    margin-top: 3px;
}

.sgprofile-m3-tree-surface > .sgprofile-m3-section-heading {
    margin-bottom: 18px;
}

@media (max-width: 820px) {
    .sgprofile-m3-profile-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgprofile-m3-notification-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .sgprofile-m3-profile-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgprofile-m3-profile-nav > button {
        min-height: 58px;
    }

    .sgprofile-m3-contact-card {
        align-items: stretch;
        flex-direction: column;
    }

    .sgprofile-m3-contact-card > .sgprofile-m3-person-action {
        width: 100%;
    }

    .sgprofile-m3-contact-card > .sgprofile-m3-person-action > span:last-child {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
    }

    .sgprofile-m3-pagination {
        flex-wrap: wrap;
    }
}

/*
===============================================================================
Design M3 Changes - Timeline immersive shell transition

- Timeline opens with the normal app bar, no category navigation, the context
  directly beneath the app bar, and a full-width hero touching the context.
  After scrolling begins, the app-bar controls and rail leave with a slow M3
  emphasized spatial transition while the opaque context takes the app-bar slot.
- The user-owned profile hero expands edge-to-edge behind the fixed context.
  Timeline data, tab logic, and all server workflows remain unchanged.
- Hidden navigation regions are also made inert/aria-hidden by the profile
  controller. Reduced-motion users receive the same final layout immediately.
===============================================================================
*/

.sgcv-m3-top-leading,
.sgcv-m3-logo,
.sgcv-m3-top-trailing,
.sgcv-m3-category-nav,
.sgcv-m3-rail {
    transition:
        opacity 900ms cubic-bezier(.2, 0, 0, 1),
        transform 1100ms cubic-bezier(.2, 0, 0, 1),
        visibility 0s linear 0s,
        left 1100ms cubic-bezier(.2, 0, 0, 1);
}

.sgcv-m3-contextbar {
    transition:
        top 1100ms cubic-bezier(.2, 0, 0, 1),
        right 1100ms cubic-bezier(.2, 0, 0, 1),
        left 1100ms cubic-bezier(.2, 0, 0, 1),
        height 1100ms cubic-bezier(.2, 0, 0, 1),
        background-color 900ms cubic-bezier(.2, 0, 0, 1),
        box-shadow 900ms cubic-bezier(.2, 0, 0, 1);
}

.sgcv-m3-topbar {
    transition:
        left 1100ms cubic-bezier(.2, 0, 0, 1),
        background-color 900ms cubic-bezier(.2, 0, 0, 1),
        border-color 900ms cubic-bezier(.2, 0, 0, 1),
        box-shadow 900ms cubic-bezier(.2, 0, 0, 1);
}

.sgcv-m3-main,
.sgprofile-m3-hero {
    transition:
        width 1100ms cubic-bezier(.2, 0, 0, 1),
        margin 1100ms cubic-bezier(.2, 0, 0, 1),
        padding 1100ms cubic-bezier(.2, 0, 0, 1),
        border-radius 1100ms cubic-bezier(.2, 0, 0, 1),
        box-shadow 900ms cubic-bezier(.2, 0, 0, 1),
        transform 1100ms cubic-bezier(.2, 0, 0, 1);
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-top-leading,
.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-logo,
.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-top-trailing {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-28px) scale(.96);
    pointer-events: none;
    transition-delay: 0s, 0s, 1100ms, 0s;
}

.sgprofile-m3-timeline-presentation .sgcv-m3-category-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition-delay: 0s, 0s, 1100ms, 0s;
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-rail {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    transition-delay: 0s, 0s, 1100ms, 0s;
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-scrim {
    display: none !important;
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-topbar {
    left: 0;
    border-bottom-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.sgprofile-m3-timeline-presentation .sgcv-m3-contextbar {
    top: var(--sgcv-m3-topbar-height);
    border-bottom-color: color-mix(
        in srgb,
        var(--md-sys-color-outline-variant) 68%,
        transparent
    );
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-timeline-presentation .sgcv-m3-main,
.sgprofile-m3-timeline-presentation.sgcv-m3-shell-scrolled .sgcv-m3-main {
    padding-top: calc(
        var(--sgcv-m3-topbar-height) +
        var(--sgcv-m3-context-height)
    );
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-contextbar,
.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed.sgcv-m3-shell-scrolled
    .sgcv-m3-contextbar {
    top: 0;
    right: 0;
    left: 0;
    z-index: 1035;
    height: var(--sgcv-m3-context-height);
    border-bottom-color: color-mix(
        in srgb,
        var(--md-sys-color-outline-variant) 68%,
        transparent
    );
    background: var(--md-sys-color-surface-container-low);
    box-shadow: none;
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-contextbar-inner,
.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed.sgcv-m3-shell-scrolled
    .sgcv-m3-contextbar-inner {
    width: calc(100% - 32px);
    max-width: none;
    height: calc(100% - 16px);
    border-color: color-mix(
        in srgb,
        var(--md-sys-color-outline) 36%,
        transparent
    );
    background: var(--md-sys-color-surface);
    box-shadow: var(--sgcv-m3-elevation-2);
    backdrop-filter: none;
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-main,
.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed.sgcv-m3-shell-scrolled
    .sgcv-m3-main {
    margin-left: 0;
    padding-top: var(--sgcv-m3-context-height);
}

.sgprofile-m3-timeline-presentation .sgcv-m3-page {
    max-width: none;
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgcv-m3-page {
    margin-top: 0;
}

.sgprofile-m3-timeline-presentation .sgprofile-m3 {
    width: 100%;
    max-width: none;
}

.sgprofile-m3-timeline-presentation .sgprofile-m3-hero {
    width: calc(100% + 56px);
    margin-inline: -28px;
    border-right: 0;
    border-left: 0;
    border-radius: 0 0 32px 32px;
    box-shadow: var(--sgcv-m3-elevation-2);
}

.sgprofile-m3-timeline-presentation .sgprofile-m3 .sgprofile-m3-tabs {
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        8px
    );
}

.sgprofile-m3-timeline-presentation .sgprofile-m3-sidebar {
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        12px
    );
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgprofile-m3
    .sgprofile-m3-tabs {
    top: calc(var(--sgcv-m3-context-height, 116px) + 8px);
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgprofile-m3-sidebar {
    top: calc(var(--sgcv-m3-context-height, 116px) + 12px);
}

@media (max-width: 860px) {
    .sgprofile-m3-timeline-presentation .sgprofile-m3-hero {
        width: calc(100% + 32px);
        margin-inline: -16px;
    }
}

@media (max-width: 620px) {
    .sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
        .sgcv-m3-contextbar-inner,
    .sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed.sgcv-m3-shell-scrolled
        .sgcv-m3-contextbar-inner {
        width: calc(100% - 12px);
    }

    .sgprofile-m3-timeline-presentation .sgprofile-m3-hero {
        width: calc(100% + 22px);
        margin-inline: -11px;
        border-radius: 0 0 24px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgcv-m3-top-leading,
    .sgcv-m3-logo,
    .sgcv-m3-top-trailing,
    .sgcv-m3-category-nav,
    .sgcv-m3-rail,
    .sgcv-m3-topbar,
    .sgcv-m3-contextbar,
    .sgcv-m3-main,
    .sgprofile-m3-hero {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }
}

/*
===============================================================================
Design M3 Changes - Profile three-column authoritative component layer

Placed after compatibility and transition rules so the bounded summary,
flexible reading column, responsive sponsored rail, and official Material 3
typography roles remain authoritative.
===============================================================================
*/

.sgprofile-m3-layout {
    grid-template-columns:
        minmax(224px, 272px)
        minmax(0, 1fr)
        minmax(240px, 300px);
    gap: clamp(16px, 1.8vw, 24px);
}

.sgprofile-m3-ad-rail {
    position: sticky;
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-category-height, 64px) +
        var(--sgcv-m3-context-height, 116px) +
        12px
    );
    align-self: start;
}

.sgprofile-m3-timeline-presentation .sgprofile-m3-ad-rail {
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        12px
    );
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgprofile-m3-ad-rail {
    top: calc(var(--sgcv-m3-context-height, 116px) + 12px);
}

@media (max-width: 1180px) {
    .sgprofile-m3-layout {
        grid-template-columns: minmax(224px, 272px) minmax(0, 1fr);
    }

    .sgprofile-m3-ad-rail {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .sgprofile-m3-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgprofile-m3-sidebar,
    .sgprofile-m3-ad-rail {
        position: static;
    }
}

/* Design M3 Changes - authoritative Material 3 website typography cascade. */
:root {
    --m3-font-brand: "Google Sans", Arial, sans-serif;
    --m3-font-plain: "Google Sans Text", Arial, sans-serif;
}

html,
body {
    font-family: var(--m3-font-plain);
    font-size: var(--m3-body-large-size);
    font-weight: 400;
    line-height: var(--m3-body-large-line);
}

h1 {
    font: 400 var(--m3-headline-large-size) /
        var(--m3-headline-large-line) var(--m3-font-brand);
}

h2 {
    font: 400 var(--m3-headline-medium-size) /
        var(--m3-headline-medium-line) var(--m3-font-brand);
}

h3 {
    font: 400 var(--m3-headline-small-size) /
        var(--m3-headline-small-line) var(--m3-font-brand);
}

h4 {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

h5 {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

h6 {
    font: 500 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-brand);
}

button,
input,
textarea,
select {
    font-family: var(--m3-font-plain);
}

.sgprofile-m3,
.sgprofile-m3-layout {
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
}

.sgprofile-m3-hero-copy h1 {
    font: 400 var(--m3-headline-large-size) /
        var(--m3-headline-large-line) var(--m3-font-brand);
    letter-spacing: 0;
}

.sgprofile-m3 :where(
    .sgprofile-m3-identity-copy h2,
    .sgprofile-m3-section-heading h2,
    .sgprofile-m3-feedback-heading h2,
    .sgprofile-m3-bio-form > h2
) {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
    letter-spacing: 0;
}

.sgprofile-m3 :where(
    .sgprofile-m3-section-heading h3,
    .sgprofile-m3-privacy-card h3
) {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
    letter-spacing: .15px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-hero-copy > p,
    .sgprofile-m3-identity-copy > p,
    .sgprofile-m3-bio-card > p,
    .sgprofile-m3-email,
    .sgprofile-m3-outlined-field > input,
    .sgprofile-m3-outlined-field > textarea,
    .sgprofile-m3-outlined-field > select
) {
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
    letter-spacing: .5px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-section-heading p,
    .sgprofile-m3-feedback-heading p,
    .sgprofile-m3-metadata dt,
    .sgprofile-m3-metadata dd,
    .sgprofile-m3-supporting-text,
    .sgprofile-m3-field-support,
    .sgprofile-m3-form-status,
    .sgprofile-m3-privacy-card p,
    time
) {
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
    letter-spacing: 0;
}

.sgprofile-m3 :where(
    .sgprofile-m3-overline,
    .sgprofile-m3-ad-label,
    .sgprofile-m3-labeled-icon > span:last-child
) {
    font: 500 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
    letter-spacing: .5px;
}

.sgprofile-m3 :where(
    .sgprofile-m3-tabs > li > a,
    .sgprofile-m3-more-trigger,
    .sgprofile-m3-filled-button,
    .sgprofile-m3-tonal-button,
    .sgprofile-m3-outlined-button,
    .sgprofile-m3-text-button,
    .sgprofile-m3-card-actions button
) {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
    letter-spacing: 0;
}

.sgprofile-m3-follow-metrics dd {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

/*
Profile text must remain readable at the M3 website's 16/24 normal scale.
The user-owned Canvas application is deliberately excluded.
*/
.sgprofile-m3-layout :where(
    p,
    li,
    dt,
    dd,
    label,
    a,
    button,
    input,
    textarea,
    select
):not(.sgprofile-m3-canvas *) {
    font-family: var(--m3-font-plain);
    font-size: var(--m3-title-medium-size);
    line-height: var(--m3-title-medium-line);
}

.sgprofile-m3-layout :where(small, time):not(.sgprofile-m3-canvas *) {
    font: 400 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
}

/*
===============================================================================
Design M3 Changes - full-viewport Snapic image dialog

The image and discussion surface now uses the complete viewport. The app page
does not scroll behind it; the discussion pane owns overflow on expanded
screens, while compact screens use one continuous modal document.
===============================================================================
*/

.sgprofile-m3-snapic-dialog {
    padding: 0;
    overflow: hidden;
}

.sgprofile-m3-snapic-dialog.is-open {
    display: block;
}

.sgprofile-m3-snapic-dialog-surface {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
}

.sgprofile-m3-snapic-dialog-header {
    position: sticky;
    top: 0;
    z-index: 3;
}

.sgprofile-m3-snapic-dialog-header strong {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-snapic-dialog-header time {
    font: 400 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-snapic-dialog-header h2,
.sgprofile-m3-snapic-dialog-body > aside > h3 {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

.sgprofile-m3-snapic-dialog-body {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.sgprofile-m3-snapic-dialog-body > figure {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.sgprofile-m3-snapic-dialog-body > figure > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

.sgprofile-m3-snapic-dialog-body > aside {
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.sgprofile-m3-modal-comments {
    max-height: none;
}

.sgprofile-m3-snapic-dialog :where(
    p,
    label,
    input,
    textarea,
    button,
    a
) {
    font-family: var(--m3-font-plain);
    font-size: var(--m3-title-medium-size);
    line-height: var(--m3-title-medium-line);
}

@media (max-width: 780px) {
    .sgprofile-m3-snapic-dialog-surface {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: auto;
    }

    .sgprofile-m3-snapic-dialog-body {
        display: block;
        height: auto;
        overflow: visible;
    }

    .sgprofile-m3-snapic-dialog-body > figure {
        height: min(58vh, 620px);
        min-height: 320px;
    }

    .sgprofile-m3-snapic-dialog-body > figure > img {
        height: 100%;
    }

    .sgprofile-m3-snapic-dialog-body > aside {
        height: auto;
        overflow: visible;
        border-top: 1px solid var(--md-sys-color-outline-variant);
        border-left: 0;
    }
}

/* Design M3 Changes - Profile review floating toolbar:
   responsive contextual action using primary/on-primary color roles. */
@media (max-width: 600px) {
    .sgprofile-m3-review-floating-toolbar {
        display: flex;
        width: 100%;
    }

    .sgprofile-m3 .sgprofile-m3-review-toolbar-action,
    .sgcv-m3-shell a.sgprofile-m3-review-toolbar-action {
        width: 100%;
        min-width: 0;
        padding-inline: 16px;
    }
}

/* ============================================================
   Design M3 Changes - Owner Timeline post composer
   SavvyGreat-owned compact composer, modal dialog, privacy row,
   image uploader, validation, and responsive states.
   ============================================================ */
.sgprofile-m3-post-composer {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-block: 0 20px;
    padding: 10px 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 16%, transparent);
}

.sgprofile-m3-post-avatar {
    width: 48px;
    height: 48px;
    border: 2px solid var(--md-sys-color-surface);
    border-radius: 50%;
    object-fit: cover;
}

.sgprofile-m3-post-prompt {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 18px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--m3-motion-duration-short4)
            var(--m3-motion-easing-standard),
        box-shadow var(--m3-motion-duration-short4)
            var(--m3-motion-easing-standard);
}

.sgprofile-m3-post-prompt:hover {
    background: color-mix(
        in srgb,
        var(--md-sys-color-on-surface) 8%,
        var(--md-sys-color-surface-container)
    );
}

.sgprofile-m3-post-prompt:focus-visible,
.sgprofile-m3-post-media-trigger:focus-visible,
.sgprofile-m3-post-add-image:focus-within,
.sgprofile-m3-post-image-drop:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-post-media-trigger {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    cursor: pointer;
}

.sgprofile-m3-post-media-trigger .material-symbols-rounded {
    font-size: 28px;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 28;
}

.sgprofile-m3-post-dialog[hidden] {
    display: none !important;
}

.sgprofile-m3-post-dialog {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: grid;
    place-items: center;
    padding: 24px;
}

.sgprofile-m3-post-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(
        in srgb,
        var(--md-sys-color-scrim) 48%,
        transparent
    );
    opacity: 0;
    animation: sgprofile-post-scrim-in
        var(--m3-motion-duration-medium2)
        var(--m3-motion-easing-emphasized-decelerate) forwards;
}

.sgprofile-m3-post-dialog-surface {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(860px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--md-sys-color-shadow) 24%, transparent),
        0 24px 56px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
    transform-origin: center;
    animation: sgprofile-post-dialog-in
        var(--m3-motion-duration-medium4)
        var(--m3-motion-easing-emphasized-decelerate) both;
}

.sgprofile-m3-post-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    min-height: 72px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-high);
}

.sgprofile-m3-post-dialog-header h2 {
    grid-column: 2;
    margin: 0;
    font: 500 var(--m3-headline-small-size) /
        var(--m3-headline-small-line) var(--m3-font-brand);
    text-align: center;
}

.sgprofile-m3-post-dialog-header .sgprofile-m3-icon-button {
    grid-column: 3;
}

.sgprofile-m3-post-form {
    display: grid;
    gap: 18px;
    min-height: 0;
    padding: 20px;
    overflow: auto;
    overscroll-behavior: contain;
}

.sgprofile-m3-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sgprofile-m3-post-author > img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.sgprofile-m3-post-author > span {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-post-author strong {
    color: var(--md-sys-color-on-surface);
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-author small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-description {
    position: relative;
    display: block;
}

.sgprofile-m3-post-description textarea {
    display: block;
    width: 100%;
    min-height: 132px;
    resize: vertical;
    padding: 4px 4px 32px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 400 var(--m3-headline-small-size) /
        var(--m3-headline-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-description textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 1;
}

.sgprofile-m3-post-description textarea:focus {
    border-bottom-width: 2px;
    border-bottom-color: var(--md-sys-color-primary);
}

.sgprofile-m3-post-description output {
    position: absolute;
    right: 4px;
    bottom: 8px;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(140px, auto);
    align-items: center;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-post-privacy-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-primary);
    font-size: 26px;
}

.sgprofile-m3-post-privacy-copy {
    display: grid;
}

.sgprofile-m3-post-privacy-copy strong {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-copy small,
.sgprofile-m3-post-privacy-support {
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-field select {
    width: 100%;
    min-height: 48px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-support {
    grid-column: 2 / -1;
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-m3-post-media {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
}

.sgprofile-m3-post-media > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sgprofile-m3-post-media > header > span {
    display: grid;
}

.sgprofile-m3-post-media > header strong {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-media > header small,
.sgprofile-m3-post-media > small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-add-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding-inline: 16px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    cursor: pointer;
}

.sgprofile-m3-post-image-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 120px;
    padding: 18px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
}

.sgprofile-m3-post-image-drop > .material-symbols-rounded {
    color: var(--md-sys-color-primary);
    font-size: 38px;
}

.sgprofile-m3-post-image-drop > span:last-child {
    display: grid;
    text-align: left;
}

.sgprofile-m3-post-image-drop small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-post-preview {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-highest);
}

.sgprofile-m3-post-preview[hidden] {
    display: none !important;
}

.sgprofile-m3-post-preview > img {
    width: 96px;
    height: 76px;
    border-radius: var(--md-sys-shape-medium);
    object-fit: cover;
}

.sgprofile-m3-post-preview > span {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-post-preview strong,
.sgprofile-m3-post-preview small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-post-dialog-actions {
    position: sticky;
    bottom: -20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin: 0 -20px -20px;
    padding: 14px 20px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-high);
}

.sgprofile-m3-post-dialog-actions .sgprofile-m3-form-status {
    min-width: 0;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-post-dialog-actions .sgprofile-m3-form-status[data-state="error"] {
    color: var(--md-sys-color-error);
}

.sgprofile-m3-post-dialog-actions .sgprofile-m3-form-status[data-state="success"] {
    color: var(--md-sys-color-primary);
}

@keyframes sgprofile-post-scrim-in {
    to {
        opacity: 1;
    }
}

@keyframes sgprofile-post-dialog-in {
    from {
        opacity: 0;
        transform: scale(.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (max-width: 600px) {
    .sgprofile-m3-post-composer {
        grid-template-columns: 44px minmax(0, 1fr) 48px;
        padding: 8px;
        border-radius: var(--md-sys-shape-large);
    }

    .sgprofile-m3-post-avatar {
        width: 44px;
        height: 44px;
    }

    .sgprofile-m3-post-prompt {
        padding-inline: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sgprofile-m3-post-dialog {
        align-items: end;
        padding: 0;
    }

    .sgprofile-m3-post-dialog-surface {
        width: 100%;
        max-height: 96dvh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius:
            var(--md-sys-shape-extra-large)
            var(--md-sys-shape-extra-large)
            0 0;
    }

    .sgprofile-m3-post-form {
        padding: 16px;
    }

    .sgprofile-m3-post-privacy {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .sgprofile-m3-post-privacy-field,
    .sgprofile-m3-post-privacy-support {
        grid-column: 1 / -1;
    }

    .sgprofile-m3-post-media > header {
        align-items: flex-start;
    }

    .sgprofile-m3-post-add-image > span:last-child {
        display: none;
    }

    .sgprofile-m3-post-preview {
        grid-template-columns: 76px minmax(0, 1fr) 48px;
    }

    .sgprofile-m3-post-preview > img {
        width: 76px;
        height: 68px;
    }

    .sgprofile-m3-post-dialog-actions {
        grid-template-columns: 1fr 1fr;
        margin: 0 -16px -16px;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    }

    .sgprofile-m3-post-dialog-actions .sgprofile-m3-form-status {
        grid-column: 1 / -1;
    }

    .sgprofile-m3-post-dialog-actions .sgprofile-m3-outlined-button,
    .sgprofile-m3-post-dialog-actions .sgprofile-m3-filled-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3-post-dialog-backdrop,
    .sgprofile-m3-post-dialog-surface {
        animation-duration: 1ms;
    }
}

/* Design M3 Changes - Timeline composer/tab sticky hierarchy.
   The owner composer is a separate sticky bar above the canonical tabs.
   The dialog itself is portalled to body, beyond both sticky layers. */
.sgprofile-m3-tabs-container.has-owner-post-composer {
    --sgprofile-m3-composer-sticky-top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-category-height, 64px) +
        var(--sgcv-m3-context-height, 116px) +
        8px
    );
    --sgprofile-m3-composer-sticky-space: 80px;
}

.sgprofile-m3-tabs-container.has-owner-post-composer
    > .sgprofile-m3-post-composer {
    position: sticky;
    top: var(--sgprofile-m3-composer-sticky-top);
    z-index: 1019;
    isolation: isolate;
    margin: 0 0 8px;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--sgcv-m3-elevation-2);
}

.sgprofile-m3-tabs-container.has-owner-post-composer
    > .sgprofile-m3-post-composer::before {
    content: "";
    position: absolute;
    inset: -8px 0;
    z-index: -1;
    background: var(--md-sys-color-surface);
    pointer-events: none;
}

.sgprofile-m3
    .sgprofile-m3-tabs-container.has-owner-post-composer
    > .sgprofile-m3-tabs {
    top: calc(
        var(--sgprofile-m3-composer-sticky-top) +
        var(--sgprofile-m3-composer-sticky-space)
    );
}

.sgprofile-m3-timeline-presentation
    .sgprofile-m3-tabs-container.has-owner-post-composer {
    --sgprofile-m3-composer-sticky-top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        8px
    );
}

.sgprofile-m3-timeline-presentation.sgprofile-m3-timeline-condensed
    .sgprofile-m3-tabs-container.has-owner-post-composer {
    --sgprofile-m3-composer-sticky-top:
        calc(var(--sgcv-m3-context-height, 116px) + 8px);
}

.sgprofile-m3-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

body > .sgprofile-m3-post-dialog {
    z-index: 2147483000;
    isolation: isolate;
}

body.sgprofile-m3-post-dialog-open > :not(.sgprofile-m3-post-dialog) {
    /* Dialog remains the only interactive visual layer while open. */
    pointer-events: none;
}

body.sgprofile-m3-post-dialog-open > .sgprofile-m3-post-dialog {
    pointer-events: auto;
}

@media (max-width: 650px) {
    .sgprofile-m3-tabs-container.has-owner-post-composer {
        --sgprofile-m3-composer-sticky-space: 72px;
    }

    .sgprofile-m3-tabs-container.has-owner-post-composer
        > .sgprofile-m3-post-composer {
        margin-bottom: 10px;
    }
}

/* ============================================================
   Design M3 Changes - compact global Timeline composer
   Dense M3 sizing, fully rounded dialog, visible Posts privacy
   hierarchy, and touch scrolling without a visible scrollbar.
   ============================================================ */
.sgprofile-m3-tabs-container.has-owner-post-composer {
    --sgprofile-m3-composer-sticky-space: 64px;
}

.sgprofile-m3-post-composer {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 20px;
}

.sgprofile-m3-post-avatar {
    width: 40px;
    height: 40px;
}

.sgprofile-m3-post-prompt {
    min-height: 40px;
    padding-inline: 14px;
    font: 400 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-media-trigger {
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.sgprofile-m3-post-media-trigger .material-symbols-rounded {
    font-size: 24px;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

.sgprofile-m3-post-dialog {
    padding: 12px;
}

.sgprofile-m3-post-dialog-surface {
    width: min(560px, 100%);
    max-height: calc(100dvh - 24px);
    border-radius: 32px;
}

.sgprofile-m3-post-dialog-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    min-height: 60px;
    padding: 6px 12px;
}

.sgprofile-m3-post-dialog-header h2 {
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

.sgprofile-m3-post-form {
    gap: 10px;
    padding: 12px 14px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.sgprofile-m3-post-form::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.sgprofile-m3-post-author {
    gap: 10px;
}

.sgprofile-m3-post-author > img {
    width: 40px;
    height: 40px;
}

.sgprofile-m3-post-author strong {
    font: 500 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-author small {
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-description textarea {
    min-height: 82px;
    max-height: 112px;
    padding: 2px 2px 24px;
    font: 400 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-description output {
    right: 2px;
    bottom: 5px;
}

.sgprofile-m3-post-privacy {
    grid-template-columns: 36px minmax(0, 1fr) minmax(126px, 146px);
    gap: 4px 10px;
    padding: 9px 10px;
    border-radius: 20px;
}

.sgprofile-m3-post-privacy-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 22px;
}

.sgprofile-m3-post-privacy-copy strong {
    font: 500 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-copy small,
.sgprofile-m3-post-privacy-support {
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-field {
    display: grid;
    gap: 2px;
}

.sgprofile-m3-post-privacy-label {
    color: var(--md-sys-color-on-secondary-container);
    font: 500 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-field select {
    min-height: 38px;
    padding: 0 30px 0 10px;
    border-radius: 12px;
    font: 500 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-m3-post-privacy-support {
    margin-top: 1px;
}

.sgprofile-m3-post-media {
    gap: 7px;
    padding: 9px 10px;
    border-radius: 20px;
}

.sgprofile-m3-post-media > header strong {
    font: 500 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-plain);
}

.sgprofile-m3-post-media > header small,
.sgprofile-m3-post-media > small {
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-post-add-image {
    min-height: 40px;
    padding-inline: 12px;
}

.sgprofile-m3-post-image-drop {
    min-height: 72px;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
}

.sgprofile-m3-post-image-drop > .material-symbols-rounded {
    font-size: 30px;
}

.sgprofile-m3-post-preview {
    grid-template-columns: 72px minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 7px;
    border-radius: 16px;
}

.sgprofile-m3-post-preview > img {
    width: 72px;
    height: 56px;
    border-radius: 12px;
}

.sgprofile-m3-post-dialog-actions {
    bottom: -14px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin: 0 -14px -14px;
    padding: 9px 14px;
}

.sgprofile-m3-post-dialog-actions .sgprofile-m3-outlined-button,
.sgprofile-m3-post-dialog-actions .sgprofile-m3-filled-button {
    min-height: 40px;
    padding-inline: 14px;
}

@media (max-width: 600px) {
    .sgprofile-m3-post-composer {
        grid-template-columns: 38px minmax(0, 1fr) 40px;
        gap: 7px;
        padding: 6px;
    }

    .sgprofile-m3-post-avatar {
        width: 38px;
        height: 38px;
    }

    .sgprofile-m3-post-prompt {
        min-height: 38px;
        padding-inline: 11px;
    }

    .sgprofile-m3-post-dialog {
        align-items: center;
        padding: 8px;
    }

    .sgprofile-m3-post-dialog-surface {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 28px;
    }

    .sgprofile-m3-post-form {
        gap: 8px;
        padding: 10px 12px 12px;
    }

    .sgprofile-m3-post-privacy {
        grid-template-columns: 34px minmax(0, 1fr) minmax(112px, 132px);
    }

    .sgprofile-m3-post-privacy-field {
        grid-column: auto;
    }

    .sgprofile-m3-post-privacy-support {
        grid-column: 2 / -1;
    }

    .sgprofile-m3-post-dialog-actions {
        grid-template-columns: minmax(0, 1fr) auto auto;
        margin: 0 -12px -12px;
        padding: 8px 12px max(8px, env(safe-area-inset-bottom));
    }

    .sgprofile-m3-post-dialog-actions .sgprofile-m3-form-status {
        grid-column: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 430px) {
    .sgprofile-m3-post-privacy {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .sgprofile-m3-post-privacy-field {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }

    .sgprofile-m3-post-privacy-support {
        grid-column: 1 / -1;
    }

    .sgprofile-m3-post-media > header small,
    .sgprofile-m3-post-image-drop small {
        display: none;
    }

    .sgprofile-m3-post-dialog-actions {
        grid-template-columns: 1fr 1fr;
    }

    .sgprofile-m3-post-dialog-actions .sgprofile-m3-form-status {
        grid-column: 1 / -1;
    }
}

/* Design M3 Changes - final photo-studio density authority. */
.sgprofile-m3-post-dialog-surface {
    width: min(660px, 100%);
}

.sgprofile-m3-post-description textarea {
    min-height: 54px;
    height: 62px;
    max-height: 104px;
    padding: 4px 2px 22px;
    resize: vertical;
}

.sgprofile-m3-post-privacy {
    grid-template-columns: 30px minmax(0, 1fr) minmax(112px, 136px);
    gap: 2px 8px;
    min-height: 44px;
    padding: 5px 8px;
    border-radius: 16px;
}

.sgprofile-m3-post-privacy-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 19px;
}

.sgprofile-m3-post-privacy-copy strong {
    font-size: 13px;
    line-height: 16px;
}

.sgprofile-m3-post-privacy-copy small,
.sgprofile-m3-post-privacy-support,
.sgprofile-m3-post-privacy-label {
    font-size: 11px;
    line-height: 14px;
}

.sgprofile-m3-post-privacy-field {
    grid-column: auto;
    display: grid;
    grid-template-columns: auto;
    gap: 0;
}

.sgprofile-m3-post-privacy-field select {
    min-height: 32px;
    padding: 0 26px 0 8px;
    border-radius: 10px;
    font-size: 13px;
}

.sgprofile-m3-post-privacy-support {
    grid-column: 2 / -1;
    margin: -1px 0 0;
}

.sgprofile-m3-post-media {
    gap: 6px;
    padding: 8px;
}

.sgprofile-m3-post-preview {
    grid-template-columns: 52px minmax(0, 1fr) 36px;
    min-height: 48px;
    padding: 5px;
}

.sgprofile-m3-post-preview > img {
    width: 52px;
    height: 40px;
    border-radius: 10px;
}

.sgprofile-m3-post-media > small {
    display: none;
}

@media (max-width: 600px) {
    .sgprofile-m3-post-description textarea {
        min-height: 48px;
        height: 54px;
        max-height: 88px;
    }

    .sgprofile-m3-post-privacy {
        grid-template-columns: 28px minmax(0, 1fr) minmax(96px, 116px);
        padding: 4px 6px;
    }
}

@media (max-width: 430px) {
    .sgprofile-m3-post-privacy {
        grid-template-columns: 28px minmax(0, 1fr) 104px;
    }

    .sgprofile-m3-post-privacy-field {
        grid-column: auto;
        display: block;
    }

    .sgprofile-m3-post-privacy-label,
    .sgprofile-m3-post-privacy-support,
    .sgprofile-m3-post-privacy-copy small {
        display: none;
    }
}

/* ============================================================
   Design M3 Changes - native same-place profile media uploader
   Replaces legacy Dropzone presentation with owner-controlled,
   accessible choose/drop, preview, progress, and retry states.
   ============================================================ */
.sgprofile-m3-banner.is-editing-media > img,
.sgprofile-m3-banner.is-editing-media > .sgprofile-m3-media-action,
.sgprofile-m3-avatar-wrap.is-editing-media > img,
.sgprofile-m3-avatar-wrap.is-editing-media >
    .sgprofile-m3-avatar-action {
    visibility: hidden;
}

.sgprofile-m3-banner > .sgprofile-m3-banner-editor,
.sgprofile-m3-avatar-wrap > .sgprofile-m3-avatar-editor {
    position: absolute;
    z-index: 5;
    margin: 0;
}

.sgprofile-m3-banner > .sgprofile-m3-banner-editor {
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: clamp(12px, 2vw, 22px);
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--md-sys-color-primary-container) 92%,
                var(--md-sys-color-surface)
            ),
            color-mix(
                in srgb,
                var(--md-sys-color-tertiary-container) 86%,
                var(--md-sys-color-surface)
            )
        );
}

.sgprofile-m3-banner-editor > header {
    margin-bottom: 8px;
}

.sgprofile-m3-banner-editor > header strong {
    color: var(--md-sys-color-on-primary-container);
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

.sgprofile-m3-banner-editor > header small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-m3 .sgprofile-m3-banner-editor
    .sgprofile-m3-dropzone {
    min-height: 0;
    height: 100%;
    padding: 10px;
    border-radius: 22px;
    background:
        color-mix(
            in srgb,
            var(--md-sys-color-surface) 78%,
            transparent
        );
}

.sgprofile-m3-native-drop-target {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    min-height: 96px;
    border-radius: inherit;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    text-align: center;
}

.sgprofile-m3-native-drop-target .material-symbols-rounded {
    color: var(--md-sys-color-primary);
    font-size: 42px;
}

.sgprofile-m3-native-drop-target strong {
    color: var(--md-sys-color-on-surface);
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-plain);
}

.sgprofile-m3-native-drop-target > span:last-child {
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-m3-native-drop-target:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: -3px;
}

.sgprofile-m3-dropzone.is-dragging {
    border-color: var(--md-sys-color-primary) !important;
    background: var(--md-sys-color-primary-container) !important;
}

.sgprofile-m3-dropzone.is-dragging
    .sgprofile-m3-native-drop-target {
    transform: scale(.985);
}

.sgprofile-m3-native-upload-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 96px;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    background: var(--md-sys-color-surface-container);
}

.sgprofile-m3-native-upload-preview[hidden] {
    display: none !important;
}

.sgprofile-m3-native-upload-preview > img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 96px;
    object-fit: cover;
}

.sgprofile-m3-native-upload-preview > span {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    overflow: hidden;
    border-radius: 12px;
    color: var(--md-sys-color-on-surface);
    background:
        color-mix(
            in srgb,
            var(--md-sys-color-surface) 88%,
            transparent
        );
    backdrop-filter: blur(10px);
}

.sgprofile-m3-native-upload-preview > span strong,
.sgprofile-m3-native-upload-preview > span small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-m3-native-upload-preview > span small {
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-m3-native-upload-progress {
    position: absolute;
    right: 12px;
    bottom: 10px;
    left: 12px;
    z-index: 2;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--md-sys-color-surface-container-highest);
}

.sgprofile-m3-native-upload-progress[hidden] {
    display: none !important;
}

.sgprofile-m3-native-upload-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--md-sys-color-primary);
    transition: width 120ms linear;
}

.sgprofile-m3-native-upload-status {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 80px);
    margin: 0;
    padding: 5px 9px;
    overflow: hidden;
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface);
    font: 500 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
}

.sgprofile-m3-native-upload-status:empty {
    display: none;
}

.sgprofile-m3-native-upload-status[data-state="error"] {
    color: var(--md-sys-color-on-error-container);
    background: var(--md-sys-color-error-container);
}

.sgprofile-m3-native-upload-status[data-state="success"] {
    color: var(--md-sys-color-on-tertiary-container);
    background: var(--md-sys-color-tertiary-container);
}

.sgprofile-m3-avatar-wrap > .sgprofile-m3-avatar-editor {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    box-shadow:
        0 3px 8px
        color-mix(
            in srgb,
            var(--md-sys-color-on-surface) 18%,
            transparent
        );
}

.sgprofile-m3-avatar-editor-close {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 8;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    color: var(--md-sys-color-on-error-container);
    background: var(--md-sys-color-error-container);
    box-shadow: var(--m3-elevation-level1);
}

.sgprofile-m3 .sgprofile-m3-avatar-editor
    .sgprofile-m3-dropzone {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 5px;
    overflow: hidden;
    border: 2px dashed var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-drop-target {
    min-height: 0;
    padding: 8px;
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-drop-target
    .material-symbols-rounded {
    font-size: 30px;
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-drop-target strong {
    max-width: 90px;
    font-size: 12px;
    line-height: 14px;
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-drop-target > span:last-child {
    max-width: 80px;
    font-size: 10px;
    line-height: 12px;
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-upload-preview,
.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-upload-preview > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: var(--md-sys-shape-full);
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-upload-progress {
    right: 18px;
    bottom: 12px;
    left: 18px;
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-native-upload-status {
    top: auto;
    bottom: -35px;
    max-width: 210px;
}

.sgprofile-m3-dropzone.is-uploading {
    pointer-events: none;
}

@media (max-width: 600px) {
    .sgprofile-m3-banner > .sgprofile-m3-banner-editor {
        padding: 10px;
    }

    .sgprofile-m3-banner-editor > header small {
        display: none;
    }

    .sgprofile-m3-native-drop-target .material-symbols-rounded {
        font-size: 34px;
    }

    .sgprofile-m3-native-upload-preview > span {
        padding: 5px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3-native-upload-progress > span {
        transition: none;
    }
}

.sgprofile-m3-dropzone input[type="file"][hidden] {
    display: none !important;
}

.sgprofile-m3-avatar-editor
    .sgprofile-m3-dropzone.is-existing-preview
    .sgprofile-m3-native-upload-preview::after {
    position: absolute;
    right: 12px;
    bottom: 14px;
    left: 12px;
    padding: 5px 7px;
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-primary);
    background: var(--md-sys-color-primary);
    content: "Select to replace";
    font: 500 10px / 12px var(--m3-font-plain);
    text-align: center;
}

/* Design M3 Changes - media editors are closed on initial render.
   This final authority prevents later same-place layout rules from
   overriding the component's hidden state. */
.sgprofile-m3-banner > .sgprofile-m3-banner-editor[hidden],
.sgprofile-m3-banner > .sgprofile-m3-banner-editor.is-hidden,
.sgprofile-m3-avatar-wrap > .sgprofile-m3-avatar-editor[hidden],
.sgprofile-m3-avatar-wrap > .sgprofile-m3-avatar-editor.is-hidden {
    display: none !important;
}

/* ============================================================
   Design M3 Changes - Timeline context leading/trailing icons
   Uses the supplied SavvyGreat SG artwork without changing the
   established context-bar width, height, spacing, or scroll mode.
   ============================================================ */
.sgcv-m3-context-single-tab {
    position: relative;
}

.sgcv-m3-timeline-context-icon,
.sgcv-m3-timeline-context-home {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) scale(.76);
    transition:
        opacity 260ms var(--md-sys-motion-effects-default),
        transform 520ms var(--md-sys-motion-spatial-default),
        visibility 0s linear 520ms,
        background-color 180ms var(--md-sys-motion-effects-default),
        box-shadow 180ms var(--md-sys-motion-effects-default);
}

.sgcv-m3-timeline-context-icon {
    left: 28px;
    overflow: hidden;
    padding: 3px;
    border: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-primary-container);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgcv-m3-timeline-context-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.sgcv-m3-timeline-context-home {
    right: 28px;
    border: 0;
    color: var(--md-sys-color-on-primary-container) !important;
    background: var(--md-sys-color-primary-container);
    text-decoration: none !important;
}

.sgcv-m3-timeline-context-home .material-symbols-rounded {
    font-size: 30px;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 30;
}

.sgprofile-m3-timeline-presentation.sgcv-m3-shell-scrolled
    .sgcv-m3-timeline-context-icon,
.sgprofile-m3-timeline-presentation.sgcv-m3-shell-scrolled
    .sgcv-m3-timeline-context-home {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
    transition-delay: 90ms, 0s, 0s, 0s, 0s;
}

.sgprofile-m3-timeline-presentation.sgcv-m3-shell-scrolled
    .sgcv-m3-timeline-context-icon {
    pointer-events: none;
}

.sgprofile-m3-timeline-presentation.sgcv-m3-shell-scrolled
    .sgcv-m3-context-single-tab
    > .sgcv-m3-context-name {
    max-width: min(680px, calc(100% - 160px));
}

.sgcv-m3-timeline-context-home:hover {
    background:
        color-mix(
            in srgb,
            var(--md-sys-color-primary-container) 88%,
            var(--md-sys-color-primary)
        );
    box-shadow: var(--sgcv-m3-elevation-1);
    transform: translateY(-50%) scale(1.05);
}

.sgcv-m3-timeline-context-home:active {
    transform: translateY(-50%) scale(.96);
}

.sgcv-m3-timeline-context-home:focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-context-home-transition
    .sgcv-m3-timeline-context-icon,
.sgprofile-m3-context-home-transition
    .sgcv-m3-timeline-context-home {
    opacity: 0;
    transform: translateY(-50%) scale(.82);
}

@media (max-width: 600px) {
    .sgcv-m3-timeline-context-icon,
    .sgcv-m3-timeline-context-home {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }

    .sgcv-m3-timeline-context-icon {
        left: 16px;
        padding: 2px;
    }

    .sgcv-m3-timeline-context-icon img {
        border-radius: 13px;
    }

    .sgcv-m3-timeline-context-home {
        right: 16px;
    }

    .sgprofile-m3-timeline-presentation.sgcv-m3-shell-scrolled
        .sgcv-m3-context-single-tab
        > .sgcv-m3-context-name {
        max-width: calc(100% - 120px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgcv-m3-timeline-context-icon,
    .sgcv-m3-timeline-context-home {
        transition-duration: 1ms;
    }
}

/* =============================================================================
Design M3 Changes - Profile summary photo rail and wide-screen balance

Layout and sizing
- The desktop summary rail grows enough for the Friends and Message actions to
  remain side by side while the ad rail keeps its existing outer width.
- The photo surface belongs to the same sticky summary stack and uses natural
  document scrolling; it never creates a nested scrollbar.

M3 components, tokens, and states
- Extra-large surface shape, outline-variant borders, surface-container color
  roles, 48px action targets, visible focus, state layers, and 3-column imagery.
- Six slots are always reserved and up to nine posted images are displayed.

Responsive behavior and accessibility
- The three-column composition is retained only when it fits. Tablet and mobile
  layouts return both side rails to normal flow and keep the photo tiles square.
============================================================================= */

.sgprofile-m3-layout {
    grid-template-columns:
        minmax(312px, 344px)
        minmax(0, 1fr)
        minmax(240px, 300px);
}

.sgprofile-m3-sidebar {
    display: grid;
    gap: 14px;
}

@media (min-width: 901px) {
    .sgprofile-m3-sidebar .sgprofile-m3-card-actions {
        flex-wrap: nowrap;
    }

    .sgprofile-m3-sidebar .sgprofile-m3-card-actions > * {
        min-width: 0;
        flex: 1 1 0;
        padding-inline: 12px;
        white-space: nowrap;
    }
}

.sgprofile-m3-photo-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-m3-photo-card-heading,
.sgprofile-m3-photo-title,
.sgprofile-m3-photo-link,
.sgprofile-m3-photo-footer {
    display: flex;
    align-items: center;
}

.sgprofile-m3-photo-card-heading {
    min-height: 48px;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.sgprofile-m3-photo-title {
    min-width: 0;
    gap: 10px;
}

.sgprofile-m3-photo-title > .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font-size: 24px;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

.sgprofile-m3-photo-title > span:last-child {
    display: grid;
    min-width: 0;
}

.sgprofile-m3-photo-title h2,
.sgprofile-m3-photo-title small {
    margin: 0;
}

.sgprofile-m3-photo-title h2 {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

.sgprofile-m3-photo-title small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-m3-photo-link {
    min-height: 40px;
    gap: 4px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-primary);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    cursor: pointer;
}

.sgprofile-m3-photo-link .material-symbols-rounded {
    font-size: 19px;
}

.sgprofile-m3-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: hidden;
    border-radius: 18px;
}

.sgprofile-m3-photo-tile {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant);
}

button.sgprofile-m3-photo-tile {
    cursor: pointer;
}

.sgprofile-m3-photo-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 300ms var(--md-sys-motion-spatial-default),
        filter 200ms var(--md-sys-motion-effects-default);
}

.sgprofile-m3-photo-tile.is-empty {
    background:
        linear-gradient(
            145deg,
            var(--md-sys-color-surface-container-high),
            var(--md-sys-color-secondary-container)
        );
}

.sgprofile-m3-photo-tile.is-empty .material-symbols-rounded {
    color: color-mix(
        in srgb,
        var(--md-sys-color-on-secondary-container) 48%,
        transparent
    );
    font-size: 30px;
    font-variation-settings:
        "FILL" 0,
        "wght" 350,
        "GRAD" 0,
        "opsz" 30;
}

.sgprofile-m3-photo-footer {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    cursor: pointer;
}

.sgprofile-m3-photo-footer .material-symbols-rounded:last-child {
    margin-left: auto;
}

.sgprofile-m3-photo-link:hover,
.sgprofile-m3-photo-footer:hover {
    background: color-mix(
        in srgb,
        var(--md-sys-color-primary) 10%,
        var(--md-sys-color-surface-container)
    );
}

.sgprofile-m3-photo-tile:hover img {
    filter: saturate(1.06);
    transform: scale(1.045);
}

.sgprofile-m3-photo-link:focus-visible,
.sgprofile-m3-photo-footer:focus-visible,
.sgprofile-m3-photo-tile:focus-visible {
    z-index: 1;
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-m3-ad-card {
    padding: 3px;
    border-color: color-mix(
        in srgb,
        var(--md-sys-color-outline-variant) 62%,
        transparent
    );
    border-radius: 20px;
}

.sgprofile-m3-ad-label {
    min-height: 38px;
    padding: 5px 8px;
}

.sgprofile-m3-ad-media {
    border-radius: 16px;
}

.sgprofile-m3-ad-media img {
    width: 100%;
    max-width: none;
    object-fit: cover;
}

@media (max-width: 1260px) {
    .sgprofile-m3-layout {
        grid-template-columns: minmax(296px, 324px) minmax(0, 1fr);
    }

    .sgprofile-m3-ad-rail {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .sgprofile-m3-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgprofile-m3-sidebar,
    .sgprofile-m3-ad-rail {
        position: static;
    }
}

@media (max-width: 620px) {
    .sgprofile-m3-photo-card {
        padding: 10px;
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-m3-photo-tile img {
        transition-duration: 1ms;
    }
}

/* =============================================================================
Design M3 Changes - Dedicated profile Photos destination

Layout and responsive behavior
- Preserves the profile hero, then presents real-link profile navigation and a
  bounded library/content composition inspired by the requested reference.
- Only SavvyGreat sections are named. The media navigation becomes normal page
  flow on tablet/mobile and no component creates an internal scrollbar.

M3 components, states, and tokens
- Primary tabs, navigation list, filled-tonal links, elevated media surfaces,
  image state layers, empty slots, visible focus, and shared shape/color/type
  roles come entirely from SavvyGreat M3.

Accessibility and interactions
- Every destination is a real URL, current-page/current-location state is
  exposed, photo buttons open the existing accessible dialog, and section
  anchors account for the sticky profile shell.
============================================================================= */

.sgprofile-m3-photo-title,
.sgprofile-m3-photo-link,
.sgprofile-m3-photo-footer {
    text-decoration: none;
}

.sgprofile-m3-photo-title {
    border-radius: 16px;
    color: var(--md-sys-color-on-surface);
}

.sgprofile-m3-photo-title:hover {
    color: var(--md-sys-color-primary);
}

.sgprofile-photos-m3 {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding-bottom: 28px;
}

.sgprofile-photos-m3-hero {
    margin-bottom: 0;
}

.sgprofile-photos-m3-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    text-decoration: none;
}

.sgprofile-photos-m3-tabs {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - clamp(24px, 6vw, 96px));
    min-height: 64px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-photos-m3-tabs > a,
.sgprofile-photos-m3-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 48px;
    padding: 0 clamp(12px, 1.5vw, 22px);
    border-radius: var(--md-sys-shape-full);
    color: var(--md-sys-color-on-surface-variant);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    text-decoration: none;
    white-space: nowrap;
}

.sgprofile-photos-m3-tabs > a.is-active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-photos-m3-tabs .material-symbols-rounded {
    font-size: 22px;
}

.sgprofile-photos-m3-more {
    position: relative;
}

.sgprofile-photos-m3-more > summary {
    cursor: pointer;
    list-style: none;
}

.sgprofile-photos-m3-more > summary::-webkit-details-marker {
    display: none;
}

.sgprofile-photos-m3-more[open] > summary {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.sgprofile-photos-m3-more > div {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--sgcv-m3-elevation-3);
}

.sgprofile-photos-m3-more > div a {
    min-height: 44px;
    padding: 11px 14px;
    border-radius: 14px;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

.sgprofile-photos-m3-layout {
    display: grid;
    grid-template-columns: minmax(230px, 286px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 2vw, 24px);
    width: calc(100% - clamp(24px, 6vw, 96px));
    margin: 0 auto;
}

.sgprofile-photos-m3-library-nav {
    position: sticky;
    top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        16px
    );
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-photos-m3-library-nav h2 {
    margin: 4px 8px 2px;
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

.sgprofile-photos-m3-library-nav nav {
    display: grid;
    gap: 4px;
}

.sgprofile-photos-m3-library-nav a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 8px 12px;
    border-radius: 16px;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    text-decoration: none;
}

.sgprofile-photos-m3-library-nav a.is-active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgprofile-photos-m3-library-nav a small {
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding-inline: 7px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-photos-m3-content {
    display: grid;
    min-width: 0;
    gap: 18px;
}

.sgprofile-photos-m3-surface {
    min-width: 0;
    padding: clamp(16px, 2vw, 24px);
    scroll-margin-top: calc(
        var(--sgcv-m3-topbar-height, 76px) +
        var(--sgcv-m3-context-height, 116px) +
        24px
    );
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-photos-m3-surface > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sgprofile-photos-m3-surface > header h2,
.sgprofile-photos-m3-surface > header p {
    margin: 0;
}

.sgprofile-photos-m3-surface > header h2 {
    font: 500 var(--m3-headline-small-size) /
        var(--m3-headline-small-line) var(--m3-font-brand);
}

.sgprofile-photos-m3-surface > header p {
    margin-top: 4px;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-photos-m3-count {
    display: grid;
    place-items: center;
    min-width: 48px;
    min-height: 48px;
    padding-inline: 12px;
    border-radius: 16px;
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    font: 600 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

.sgprofile-photos-m3-folder-header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.sgprofile-photos-m3-folder-header-actions
    .sgprofile-photos-m3-create-group {
    width: auto;
    min-height: 48px;
    margin-top: 0;
    white-space: nowrap;
}

.sgprofile-photos-m3-library-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    font: 500 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
}

.sgprofile-photos-m3-library-status .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 24px;
}

.sgprofile-photos-m3-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sgprofile-photos-m3-tile-shell {
    position: relative;
    min-width: 0;
}

.sgprofile-photos-m3-delete-image {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
}

.sgprofile-photos-m3-delete-image button {
    width: 40px;
    padding: 0;
    border-color: transparent;
    background: rgba(29, 27, 32, .82);
    color: #fff;
    backdrop-filter: blur(8px);
}

.sgprofile-photos-m3-delete-image .material-symbols-rounded {
    font-size: 21px;
}

.sgprofile-photos-m3-tile {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
}

button.sgprofile-photos-m3-tile {
    cursor: pointer;
}

.sgprofile-photos-m3-tile > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--md-sys-motion-spatial-default);
}

.sgprofile-photos-m3-tile > span:not(.material-symbols-rounded) {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 2px;
    padding: 24px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .78));
    color: #fff;
    text-align: left;
}

.sgprofile-photos-m3-tile > span strong,
.sgprofile-photos-m3-tile > span small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-photos-m3-tile.is-empty {
    place-items: center;
    background:
        linear-gradient(
            145deg,
            var(--md-sys-color-surface-container-high),
            var(--md-sys-color-secondary-container)
        );
}

.sgprofile-photos-m3-tile.is-empty .material-symbols-rounded {
    color: color-mix(
        in srgb,
        var(--md-sys-color-on-secondary-container) 42%,
        transparent
    );
    font-size: 42px;
}

.sgprofile-photos-m3-current-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: 14px;
}

.sgprofile-photos-m3-current-grid figure {
    display: grid;
    grid-template-rows: minmax(180px, 260px) auto;
    overflow: hidden;
    margin: 0;
    border-radius: 20px;
    background: var(--md-sys-color-surface-container);
}

.sgprofile-photos-m3-current-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgprofile-photos-m3-current-grid figcaption {
    padding: 12px 16px;
    color: var(--md-sys-color-on-surface);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-photos-m3-tabs > a:hover,
.sgprofile-photos-m3-more > summary:hover,
.sgprofile-photos-m3-more > div a:hover,
.sgprofile-photos-m3-library-nav a:hover,
.sgprofile-photos-m3-profile-link:hover {
    background: color-mix(
        in srgb,
        var(--md-sys-color-primary) 10%,
        var(--md-sys-color-surface-container)
    );
}

.sgprofile-photos-m3-tile:hover > img {
    transform: scale(1.045);
}

.sgprofile-photos-m3 :where(a, button, summary):focus-visible {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

@media (max-width: 1180px) {
    .sgprofile-photos-m3-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .sgprofile-photos-m3-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgprofile-photos-m3-tabs > a,
    .sgprofile-photos-m3-more > summary {
        width: 100%;
    }

    .sgprofile-photos-m3-more > div {
        right: 0;
        left: auto;
    }

    .sgprofile-photos-m3-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgprofile-photos-m3-library-nav {
        position: static;
    }

    .sgprofile-photos-m3-library-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .sgprofile-photos-m3 {
        gap: 12px;
    }

    .sgprofile-photos-m3-tabs,
    .sgprofile-photos-m3-layout {
        width: calc(100% - 20px);
    }

    .sgprofile-photos-m3-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 22px;
    }

    .sgprofile-photos-m3-surface > header {
        align-items: stretch;
        flex-direction: column;
    }

    .sgprofile-photos-m3-folder-header-actions {
        width: 100%;
    }

    .sgprofile-photos-m3-folder-header-actions
        .sgprofile-photos-m3-create-group {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sgprofile-photos-m3-tabs > a,
    .sgprofile-photos-m3-more > summary {
        padding-inline: 10px;
    }

    .sgprofile-photos-m3-library-nav nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgprofile-photos-m3-grid,
    .sgprofile-photos-m3-current-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgprofile-photos-m3-surface {
        padding: 12px;
        border-radius: 22px;
    }

    .sgprofile-photos-m3-current-grid figure {
        grid-template-rows: 150px auto;
    }

    .sgprofile-photos-m3-profile-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-photos-m3-tile > img {
        transition-duration: 1ms;
    }
}

/* =============================================================================
Design M3 Changes - group photo folders and full-screen viewer

- The owner create action is part of the Photo library navigation.
- Group and image titles use M3 outlined-field typography.
- Public, Friends, and Private are server-enforced audience roles.
- The full-screen viewer uses a dark media stage, M3 surface detail pane,
  previous/next controls, keyboard navigation, and responsive reflow.
============================================================================= */
.sgprofile-photos-m3-library-create {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--md-sys-shape-large, 16px);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--sgcv-m3-elevation-1);
    transition:
        border-radius 280ms var(--md-sys-motion-spatial-default),
        box-shadow 280ms var(--md-sys-motion-spatial-default),
        transform 280ms var(--md-sys-motion-spatial-default);
}

.sgprofile-photos-m3-library-create:hover {
    border-radius: var(--md-sys-shape-full);
    box-shadow: var(--sgcv-m3-elevation-2);
    transform: translateY(-1px);
}

.sgprofile-photos-m3-library-create .material-symbols-rounded {
    font-size: 25px;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sgprofile-photos-m3-audience,
.sgprofile-photo-viewer-m3-audience-form fieldset {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sgprofile-photos-m3-audience legend,
.sgprofile-photo-viewer-m3-audience-form legend {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    color: var(--md-sys-color-on-surface);
    font: 600 var(--m3-title-small-size) /
        var(--m3-title-small-line) var(--m3-font-brand);
}

.sgprofile-photos-m3-audience label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface-variant);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    cursor: pointer;
}

.sgprofile-photos-m3-audience input,
.sgprofile-photo-viewer-m3-audience-form input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sgprofile-photos-m3-audience label:has(input:checked) {
    border-color: var(--md-sys-color-secondary-container);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-photos-m3-audience label:focus-within,
.sgprofile-photo-viewer-m3-audience-form label:focus-within {
    outline: 3px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.sgprofile-photos-m3-support {
    margin-top: -10px;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photos-m3-upload-preview figure {
    display: grid;
    grid-template-rows: auto auto auto;
}

.sgprofile-photos-m3-upload-preview figure > label {
    display: grid;
    gap: 4px;
    padding: 0 9px 9px;
}

.sgprofile-photos-m3-upload-preview figure > label > span {
    color: var(--md-sys-color-on-surface-variant);
    font: 500 var(--m3-label-small-size) /
        var(--m3-label-small-line) var(--m3-font-plain);
}

.sgprofile-photos-m3-upload-preview figure > label > input {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 10px;
    outline: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 500 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photos-m3-upload-preview figure > label > input:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgprofile-photo-viewer-m3 {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #0b0b0d;
    color: var(--md-sys-color-on-surface);
    overflow: hidden;
}

.sgprofile-photo-viewer-m3::backdrop {
    background: rgba(0, 0, 0, .88);
}

.sgprofile-photo-viewer-m3-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    width: 100%;
    height: 100%;
    min-height: 0;
}

.sgprofile-photo-viewer-m3-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    background:
        radial-gradient(circle at 50% 42%, #202026, #050506 72%);
    overflow: hidden;
}

.sgprofile-photo-viewer-m3-stage figure {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(54px, 7vw, 92px);
}

.sgprofile-photo-viewer-m3-stage figure > img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, .42);
    animation: sgprofile-photo-viewer-enter
        420ms var(--md-sys-motion-spatial-default) both;
}

.sgprofile-photo-viewer-m3-stage figcaption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: var(--md-sys-shape-full);
    background: rgba(29, 27, 32, .76);
    color: #fff;
    font: 600 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
    transform: translateX(-50%);
    backdrop-filter: blur(12px);
}

.sgprofile-photo-viewer-m3-close,
.sgprofile-photo-viewer-m3-arrow {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: rgba(243, 237, 247, .92);
    color: #1d1b20;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
    transition:
        transform 280ms var(--md-sys-motion-spatial-default),
        background-color 280ms var(--md-sys-motion-spatial-default);
}

.sgprofile-photo-viewer-m3-close:hover,
.sgprofile-photo-viewer-m3-arrow:hover {
    background: #fff;
    transform: scale(1.06);
}

.sgprofile-photo-viewer-m3-close {
    top: 18px;
    left: 18px;
}

.sgprofile-photo-viewer-m3-arrow {
    top: 50%;
    transform: translateY(-50%);
}

.sgprofile-photo-viewer-m3-arrow:hover {
    transform: translateY(-50%) scale(1.06);
}

.sgprofile-photo-viewer-m3-arrow.is-previous {
    left: 20px;
}

.sgprofile-photo-viewer-m3-arrow.is-next {
    right: 20px;
}

.sgprofile-photo-viewer-m3-arrow:disabled {
    opacity: .28;
    cursor: default;
}

.sgprofile-photo-viewer-m3 :where(button):focus-visible {
    outline: 3px solid var(--md-sys-color-primary-container);
    outline-offset: 3px;
}

.sgprofile-photo-viewer-m3-loader {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--md-sys-shape-full);
    background: rgba(243, 237, 247, .9);
    color: #1d1b20;
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-loader[hidden] {
    display: none;
}

.sgprofile-photo-viewer-m3-loader .material-symbols-rounded {
    animation: sgprofile-photo-viewer-spin 850ms linear infinite;
}

.sgprofile-photo-viewer-m3-details {
    display: grid;
    align-content: start;
    gap: 22px;
    min-width: 0;
    min-height: 0;
    padding: 24px;
    background: var(--md-sys-color-surface);
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .22);
}

.sgprofile-photo-viewer-m3-details::-webkit-scrollbar {
    display: none;
}

.sgprofile-photo-viewer-m3-details > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-photo-viewer-m3-details h2,
.sgprofile-photo-viewer-m3-details h3,
.sgprofile-photo-viewer-m3-details p {
    margin: 0;
}

.sgprofile-photo-viewer-m3-details h2 {
    overflow: hidden;
    font: 500 var(--m3-headline-small-size) /
        var(--m3-headline-small-line) var(--m3-font-brand);
    text-overflow: ellipsis;
}

.sgprofile-photo-viewer-m3-details h3 {
    margin-top: 6px;
    font: 500 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
    overflow-wrap: anywhere;
}

.sgprofile-photo-viewer-m3-details p {
    margin-top: 6px;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-audience-form {
    display: grid;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-photo-viewer-m3-audience-form fieldset {
    grid-template-columns: 1fr;
}

.sgprofile-photo-viewer-m3-audience-form label {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container-low);
    cursor: pointer;
}

.sgprofile-photo-viewer-m3-audience-form label:has(input:checked) {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgprofile-photo-viewer-m3-audience-form label >
    .material-symbols-rounded {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--md-sys-color-surface);
    font-size: 23px;
}

.sgprofile-photo-viewer-m3-audience-form label > span:last-child {
    display: grid;
    gap: 2px;
}

.sgprofile-photo-viewer-m3-audience-form label strong {
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-audience-form label small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-audience-form >
    .sgprofile-m3-filled-button {
    width: 100%;
    justify-content: center;
}

.sgprofile-photo-viewer-m3-audience-form >
    p[role="status"] {
    min-height: var(--m3-body-medium-line);
    margin: 0;
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

.sgprofile-photo-viewer-m3-audience-readonly {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-photo-viewer-m3-audience-readonly > span:last-child {
    display: grid;
    gap: 2px;
}

@keyframes sgprofile-photo-viewer-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes sgprofile-photo-viewer-enter {
    from {
        opacity: 0;
        transform: scale(.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 820px) {
    .sgprofile-photo-viewer-m3-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(55dvh, 1fr) auto;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .sgprofile-photo-viewer-m3-stage {
        min-height: 55dvh;
    }

    .sgprofile-photo-viewer-m3-stage figure {
        padding: 58px 52px;
    }

    .sgprofile-photo-viewer-m3-details {
        overflow: visible;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
    }

    .sgprofile-photo-viewer-m3-audience-form fieldset {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgprofile-photo-viewer-m3-audience-form label {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 620px) {
    .sgprofile-photos-m3-audience {
        grid-template-columns: 1fr;
    }

    .sgprofile-photo-viewer-m3-shell {
        grid-template-rows: minmax(48dvh, 1fr) auto;
    }

    .sgprofile-photo-viewer-m3-stage {
        min-height: 48dvh;
    }

    .sgprofile-photo-viewer-m3-stage figure {
        padding: 56px 46px;
    }

    .sgprofile-photo-viewer-m3-close,
    .sgprofile-photo-viewer-m3-arrow {
        width: 44px;
        height: 44px;
    }

    .sgprofile-photo-viewer-m3-close {
        top: 10px;
        left: 10px;
    }

    .sgprofile-photo-viewer-m3-arrow.is-previous {
        left: 8px;
    }

    .sgprofile-photo-viewer-m3-arrow.is-next {
        right: 8px;
    }

    .sgprofile-photo-viewer-m3-details {
        gap: 16px;
        padding: 18px 16px 24px;
    }

    .sgprofile-photo-viewer-m3-audience-form fieldset {
        grid-template-columns: 1fr;
    }

    .sgprofile-photo-viewer-m3-audience-form label {
        grid-template-columns: 36px minmax(0, 1fr);
        justify-items: stretch;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgprofile-photo-viewer-m3-stage figure > img,
    .sgprofile-photo-viewer-m3-loader .material-symbols-rounded {
        animation-duration: 1ms;
    }
}

/* =============================================================================
Design M3 Changes - published group posts, translucent media frame, and social
viewer. Group title, image title, description, audience, likes, comments, and
sharing form one responsive post hierarchy shared by Photos and Timeline.
============================================================================= */
.sgprofile-photo-viewer-m3-shell {
    grid-template-columns: minmax(0, 1fr) minmax(410px, 480px);
}

.sgprofile-photo-viewer-m3-stage {
    isolation: isolate;
    background: var(--md-sys-color-surface-container-highest);
}

.sgprofile-photo-viewer-m3-ambient,
.sgprofile-photo-viewer-m3-stage-scrim {
    position: absolute;
    inset: -36px;
    z-index: -2;
    width: calc(100% + 72px);
    height: calc(100% + 72px);
    pointer-events: none;
}

.sgprofile-photo-viewer-m3-ambient {
    object-fit: cover;
    opacity: .86;
    filter: blur(32px) saturate(.88) brightness(.92);
    transform: scale(1.06);
    transition:
        opacity 420ms var(--md-sys-motion-effects-default),
        filter 420ms var(--md-sys-motion-effects-default);
}

.sgprofile-photo-viewer-m3-stage-scrim {
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(29, 27, 32, .24),
            rgba(29, 27, 32, .06) 38%,
            rgba(29, 27, 32, .06) 62%,
            rgba(29, 27, 32, .24)
        );
    backdrop-filter: blur(3px);
}

.sgprofile-photo-viewer-m3-stage figure {
    padding: 0;
}

.sgprofile-photo-viewer-m3-stage figure > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

.sgprofile-photo-viewer-m3-details {
    gap: 16px;
    padding: 20px;
    background:
        linear-gradient(
            155deg,
            var(--md-sys-color-surface) 0%,
            var(--md-sys-color-surface-container-low) 100%
        );
}

.sgprofile-photo-viewer-m3-details >
    .sgprofile-photo-viewer-m3-author {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 14px;
}

.sgprofile-photo-viewer-m3-author > a,
.sgprofile-photo-viewer-m3-author img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: var(--md-sys-shape-full);
}

.sgprofile-photo-viewer-m3-author img {
    object-fit: cover;
    border: 2px solid var(--md-sys-color-primary-container);
}

.sgprofile-photo-viewer-m3-author > span {
    display: grid;
    align-content: center;
    gap: 2px;
    min-width: 0;
}

.sgprofile-photo-viewer-m3-author strong {
    overflow: hidden;
    color: var(--md-sys-color-on-surface);
    font: 600 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgprofile-photo-viewer-m3-author small {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-post-form {
    display: grid;
    gap: 12px;
}

.sgprofile-photo-viewer-m3-field {
    display: grid;
    gap: 5px;
}

.sgprofile-photo-viewer-m3-field > span,
.sgprofile-photo-viewer-m3-audience-select > span:first-child {
    color: var(--md-sys-color-on-surface-variant);
    font: 600 var(--m3-label-medium-size) /
        var(--m3-label-medium-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-field :where(input, textarea),
.sgprofile-photo-viewer-m3-select-shell {
    width: 100%;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-medium, 12px);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

.sgprofile-photo-viewer-m3-field :where(input, textarea) {
    min-height: 48px;
    padding: 11px 13px;
    outline: 0;
    font: 400 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
    resize: vertical;
}

.sgprofile-photo-viewer-m3-field textarea {
    min-height: 76px;
    max-height: 180px;
}

.sgprofile-photo-viewer-m3-field :where(input, textarea):focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.sgprofile-photo-viewer-m3-audience-select {
    display: grid;
    gap: 5px;
}

.sgprofile-photo-viewer-m3-select-shell {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: center;
    min-height: 52px;
    padding: 0 10px;
}

.sgprofile-photo-viewer-m3-select-shell > .material-symbols-rounded:first-child {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 21px;
}

.sgprofile-photo-viewer-m3-select-shell select {
    width: 100%;
    min-height: 50px;
    border: 0;
    outline: 0;
    appearance: none;
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font: 500 var(--m3-body-large-size) /
        var(--m3-body-large-line) var(--m3-font-plain);
    cursor: pointer;
}

#sgprofilePhotoViewerAudienceSupport {
    margin-top: -6px;
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-post-form >
    .sgprofile-m3-filled-button {
    width: 100%;
    justify-content: center;
}

#sgprofilePhotoViewerAudienceStatus,
#sgprofilePhotoViewerSocialStatus {
    min-height: var(--m3-body-small-line);
    margin: 0;
    color: var(--md-sys-color-primary);
    font: 600 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-copy {
    display: grid;
    gap: 4px;
}

.sgprofile-photo-viewer-m3-copy.is-owner-copy {
    padding: 12px 14px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgprofile-photo-viewer-m3-copy h2 {
    font: 600 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

.sgprofile-photo-viewer-m3-copy h3 {
    font: 500 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

.sgprofile-photo-viewer-m3-social {
    display: grid;
    gap: 8px;
    padding-block: 12px;
    border-block: 1px solid var(--md-sys-color-outline-variant);
}

.sgprofile-photo-viewer-m3-counts,
.sgprofile-photo-timeline-m3-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--md-sys-color-on-surface-variant);
    font: 500 var(--m3-body-small-size) /
        var(--m3-body-small-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-counts > span,
.sgprofile-photo-timeline-m3-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sgprofile-photo-viewer-m3-counts .material-symbols-rounded,
.sgprofile-photo-timeline-m3-stats .material-symbols-rounded {
    color: var(--md-sys-color-primary);
    font-size: 18px;
    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
}

.sgprofile-photo-viewer-m3-actions,
.sgprofile-photo-timeline-m3-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.sgprofile-photo-viewer-m3-actions button,
.sgprofile-photo-timeline-m3-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    border: 0;
    border-radius: var(--md-sys-shape-full);
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    cursor: pointer;
    transition:
        background-color 240ms var(--md-sys-motion-effects-default),
        color 240ms var(--md-sys-motion-effects-default);
}

.sgprofile-photo-viewer-m3-actions button:hover,
.sgprofile-photo-timeline-m3-actions button:hover {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.sgprofile-photo-viewer-m3-actions button.is-liked,
.sgprofile-photo-timeline-m3-actions button.is-liked {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.sgprofile-photo-viewer-m3-comments {
    display: grid;
    gap: 12px;
}

.sgprofile-photo-viewer-m3-comments > header h3 {
    margin: 0;
    font: 600 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

#sgprofilePhotoViewerComments {
    display: grid;
    gap: 10px;
}

.sgprofile-photo-viewer-m3-comments-empty,
.sgprofile-photo-viewer-m3-comments-loading {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px 12px;
    border-radius: var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
}

.sgprofile-photo-viewer-m3-comment {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
}

.sgprofile-photo-viewer-m3-comment > img {
    width: 38px;
    height: 38px;
    border-radius: var(--md-sys-shape-full);
    object-fit: cover;
}

.sgprofile-photo-viewer-m3-comment > span {
    display: grid;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 6px var(--md-sys-shape-large)
        var(--md-sys-shape-large) var(--md-sys-shape-large);
    background: var(--md-sys-color-surface-container);
}

.sgprofile-photo-viewer-m3-comment strong {
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
}

.sgprofile-photo-viewer-m3-comment p {
    margin: 0;
    color: var(--md-sys-color-on-surface);
    overflow-wrap: anywhere;
}

.sgprofile-photo-viewer-m3-comment time {
    color: var(--md-sys-color-on-surface-variant);
    font: 400 var(--m3-label-small-size) /
        var(--m3-label-small-line) var(--m3-font-plain);
}

#sgprofilePhotoViewerCommentForm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

#sgprofilePhotoViewerCommentForm textarea {
    width: 100%;
    min-height: 52px;
    max-height: 140px;
    padding: 12px 14px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-extra-large);
    outline: 0;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font: 400 var(--m3-body-medium-size) /
        var(--m3-body-medium-line) var(--m3-font-plain);
    resize: vertical;
}

#sgprofilePhotoViewerCommentForm textarea:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

#sgprofilePhotoViewerCommentForm .sgprofile-m3-filled-button {
    min-width: 92px;
}

.sgprofile-photo-viewer-m3-sign-in {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 16px;
    border-radius: var(--md-sys-shape-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font: 600 var(--m3-label-large-size) /
        var(--m3-label-large-line) var(--m3-font-plain);
    text-decoration: none;
}

.sgprofile-photo-timeline-m3 {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
}

.sgprofile-photo-timeline-m3-card {
    overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-extra-large);
    background: var(--md-sys-color-surface-container-lowest);
    box-shadow: var(--sgcv-m3-elevation-1);
}

.sgprofile-photo-timeline-m3-card > header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}

.sgprofile-photo-timeline-m3-card > header > img {
    width: 46px;
    height: 46px;
    border-radius: var(--md-sys-shape-full);
    object-fit: cover;
}

.sgprofile-photo-timeline-m3-card > header > span {
    display: grid;
    gap: 2px;
}

.sgprofile-photo-timeline-m3-card > header strong {
    font: 600 var(--m3-title-medium-size) /
        var(--m3-title-medium-line) var(--m3-font-brand);
}

.sgprofile-photo-timeline-m3-card > header small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-photo-timeline-m3-card > header small
    .material-symbols-rounded {
    font-size: 16px;
}

.sgprofile-photo-timeline-m3-copy {
    padding: 6px 16px 14px;
}

.sgprofile-photo-timeline-m3-copy h3,
.sgprofile-photo-timeline-m3-copy p {
    margin: 0;
}

.sgprofile-photo-timeline-m3-copy h3 {
    font: 600 var(--m3-title-large-size) /
        var(--m3-title-large-line) var(--m3-font-brand);
}

.sgprofile-photo-timeline-m3-copy p {
    margin-top: 6px;
    color: var(--md-sys-color-on-surface-variant);
}

.sgprofile-photo-timeline-m3-media {
    display: block;
    width: 100%;
    height: clamp(300px, 54vw, 680px);
    padding: 0;
    border: 0;
    background: var(--md-sys-color-surface-container-high);
    cursor: zoom-in;
    overflow: hidden;
}

.sgprofile-photo-timeline-m3-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sgprofile-photo-timeline-m3-stats {
    padding: 10px 16px 6px;
}

.sgprofile-photo-timeline-m3-actions {
    margin: 0 12px;
    padding: 6px 0 10px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

@media (max-width: 940px) {
    .sgprofile-photo-viewer-m3-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(56dvh, 1fr) auto;
    }

    .sgprofile-photo-viewer-m3-stage figure {
        padding: 0;
    }
}

@media (max-width: 620px) {
    .sgprofile-photo-viewer-m3-stage figure {
        padding: 0;
    }

    .sgprofile-photo-viewer-m3-details {
        padding: 16px 14px 24px;
    }

    .sgprofile-photo-viewer-m3-actions button,
    .sgprofile-photo-timeline-m3-actions button {
        flex-direction: column;
        min-height: 54px;
        gap: 2px;
        font-size: var(--m3-label-small-size);
    }

    #sgprofilePhotoViewerCommentForm {
        grid-template-columns: minmax(0, 1fr);
    }

    #sgprofilePhotoViewerCommentForm .sgprofile-m3-filled-button {
        width: 100%;
        justify-content: center;
    }

    .sgprofile-photo-timeline-m3-media {
        height: min(72vw, 520px);
    }
}