/* Export to /css/livgolf-webapp-styles.css, livgolf-webapp-styles.min.css and livgolf-webapp-styles.min.css.map */
/* :: - VARIABLES */
.is-hidden {
  display: none !important;
}

@font-face {
  font-family: "MD Nichrome";
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase !important;
  src: local("MD Nichrome Bold"), url("https://static.livgolf.com/fonts/MDNichrome-Bold.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Regular Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Regular Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-RegularOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Infra";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Infra"), url("https://static.livgolf.com/fonts/MDNichrome-Infra.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Infra Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Infra Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-InfraOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Thin";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Thin"), url("https://static.livgolf.com/fonts/MDNichrome-Thin.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Thin Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Thin Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-ThinOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Light";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Light"), url("https://static.livgolf.com/fonts/MDNichrome-Light.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Light Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Light Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-LightOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Dark";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Dark"), url("https://static.livgolf.com/fonts/MDNichrome-Dark.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Dark Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Dark Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-DarkOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Bold";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Bold"), url("https://static.livgolf.com/fonts/MDNichrome-Bold.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Bold Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Bold Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-BoldOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Black";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Black"), url("https://static.livgolf.com/fonts/MDNichrome-Black.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Black Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Black Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-BlackOblique.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Ultra";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Ultra"), url("https://static.livgolf.com/fonts/MDNichrome-Ultra.woff") format("woff");
}
@font-face {
  font-family: "MD Nichrome Ultra Oblique";
  font-style: normal;
  font-weight: normal;
  src: local("MD Nichrome Ultra Oblique"), url("https://static.livgolf.com/fonts/MDNichrome-UltraOblique.woff") format("woff");
}
@font-face {
  font-family: "Poppins";
  src: url("https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2") format("woff2");
  font-style: normal;
}
body header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: inherit;
  flex-direction: unset;
}

.main-nav {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
  align-items: center;
  width: auto;
  position: relative;
}
.main-nav .hamburger-menu {
  display: block;
  cursor: pointer;
  z-index: 101;
}
.main-nav .hamburger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background: #333;
  transition: all 0.3s ease;
}
.main-nav .hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.main-nav .hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}
.main-nav .hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}
.main-nav .main-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 250px;
  height: 100vh;
  padding: 60px 20px 20px;
  background: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  z-index: 100;
  overflow-y: auto;
  margin: 0;
}
.main-nav .main-menu.active {
  right: 0;
}
.main-nav .main-menu li {
  list-style: none;
  margin: 15px 0;
}
.main-nav .main-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  display: block;
  transition: color 0.3s ease;
}
.main-nav .main-menu li a:hover {
  color: #3a454d;
}
.main-nav .main-menu li.active > a {
  color: #3a454d;
  font-weight: bold;
}
.main-nav .main-menu li .sub-menu {
  margin: 10px 0 10px 15px;
  padding: 0;
  display: none;
}
.main-nav .main-menu li .sub-menu li {
  margin: 8px 0;
}
.main-nav .main-menu li .sub-menu li a {
  font-size: 0.9rem;
}
.main-nav .main-menu li.active .sub-menu, .main-nav .main-menu li:hover .sub-menu {
  display: block;
}
.main-nav .icons {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav .icons li {
  margin-left: 15px;
}
.main-nav .icons li a {
  display: flex;
  align-items: center;
  color: #333;
  transition: color 0.3s ease;
}
.main-nav .icons li a:hover {
  color: #3a454d;
}
.main-nav .menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.main-nav .menu-overlay.active {
  display: block;
  opacity: 1;
}
@media (min-width: 768px) {
  .main-nav .hamburger-menu {
    display: none;
  }
  .main-nav .menu-overlay {
    display: none !important;
  }
  .main-nav .main-menu {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .main-nav .main-menu li {
    margin: 0 15px 0 0;
    position: relative;
  }
  .main-nav .main-menu li:hover .sub-menu {
    display: block !important;
  }
  .main-nav .main-menu li .sub-menu {
    position: absolute;
    top: 30px;
    left: 0px;
    min-width: 200px;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    z-index: 10;
    display: none !important;
  }
  .main-nav .main-menu li .sub-menu li {
    margin: 0;
  }
  .main-nav .main-menu li .sub-menu li a {
    font-size: 0.9rem;
    padding: 8px 15px;
  }
  .main-nav .main-menu li .sub-menu li a:hover {
    color: #3a454d;
  }
  .main-nav .main-nav {
    border: 2px solid burlywood;
    width: auto;
  }
}

#team-icons {
  width: 100%;
  min-width: 80vw;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0em;
  height: 120px;
  place-content: flex-end;
  padding-bottom: 5px;
  position: relative;
}
#team-icons::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 40px;
}
#team-icons ul {
  margin: 0 auto;
  padding: 0 !important;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transition: opacity 0.3s ease;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  place-self: anchor-center;
  bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
#team-icons ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px;
  padding: 0;
  position: relative;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
#team-icons ul li a {
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0 5px;
  font-size: 0.9rem;
}
#team-icons ul li a img {
  width: 3em;
  background-color: #ccc;
  border-radius: 50%;
  padding: 0.5em;
}
#team-icons ul li a p {
  margin: 0;
  display: none;
}
#team-icons ul li:hover {
  opacity: 1;
}
#team-icons ul li:hover img {
  background-color: #999;
}
#team-icons.team-icons--dynamic li img {
  background-color: rgba(161, 182, 130, 0.745);
  transition: background-color 0.3s ease;
}
#team-icons.team-icons--dynamic li:hover img {
  background-color: greenyellow;
}

body header {
  border: 0px solid goldenrod;
}
body .main-nav {
  border: 0px solid goldenrod;
}
body .site-and-api-key {
  border: 0px solid goldenrod;
}
body .site-and-api-key .api-key {
  padding: 10px 0px !important;
}
body .logo-and-environment {
  border: 0px solid goldenrod;
}

@media (min-width: 360px) {
  body header {
    border: 0px solid darksalmon;
  }
  body header .logo-and-environment {
    border: 0px solid darksalmon;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  body header .site-and-api-key {
    border: 0px solid darksalmon;
    padding: 0 0px !important;
  }
  body header .main-nav {
    border: 0px solid darksalmon;
    margin: 0;
  }
}
@media (min-width: 480px) {
  body header {
    border: 0px solid burlywood;
  }
  body .main-nav {
    border: 0px solid burlywood;
  }
  body .site-and-api-key {
    border: 0px solid burlywood;
    padding: 0 0px !important;
  }
  body .logo-and-environment {
    border: 0px solid burlywood;
  }
}
@media (min-width: 614px) {
  body header {
    border: 0px solid cadetblue;
  }
  body .main-nav {
    border: 0px solid cadetblue;
  }
  body .site-and-api-key {
    border: 0px solid cadetblue;
  }
  body .logo-and-environment {
    border: 0px solid cadetblue;
  }
}
@media (min-width: 768px) {
  body header {
    border: 0px solid darkseagreen;
  }
  body .main-nav {
    border: 0px solid darkseagreen;
  }
  body .site-and-api-key {
    border: 0px solid darkseagreen;
  }
  body .logo-and-environment {
    border: 0px solid darkseagreen;
  }
}
@media (min-width: 1024px) {
  body header {
    border: 0px solid turquoise;
  }
  body .main-nav {
    border: 0px solid turquoise;
  }
  body .site-and-api-key {
    border: 0px solid turquoise !important;
  }
  body .logo-and-environment {
    border: 0px solid turquoise;
  }
  body .load-dynamic {
    display: block !important;
    margin-top: 15px !important;
    border: 0px solid turquoise;
  }
}
@media (min-width: 1200px) {
  body header {
    border: 0px solid salmon;
  }
  body .main-nav {
    border: 0px solid salmon;
  }
  body .site-and-api-key {
    border: 0px solid salmon;
  }
  body .logo-and-environment {
    border: 0px solid salmon;
  }
  body .load-dynamic {
    display: inline-block !important;
    border: 0px solid turquoise;
  }
}
/* For improved legibility of long texts */
html, body {
  background: whitesmoke;
  margin: 0px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #333;
  min-height: 100vh;
  transition: all 0.3s ease;
}

body {
  padding: 0em;
}
body.with-background {
  background: url("/static/img/backgrounds/Log_In_Pattern.png") no-repeat center center fixed;
  background-size: cover;
}
body.menu-open {
  overflow: hidden;
}

/* Reset article styles from Pico CSS framework */
article {
  all: unset !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  max-height: none !important;
  min-width: 0 !important;
  max-width: none !important;
}
article::before, article::after {
  display: none !important;
}

/* Additional specificity for different contexts */
[data-theme] article,
[data-theme=light] article,
[data-theme=dark] article,
body article,
main article,
div article,
section article {
  all: unset !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

h1.title {
  font-size: 2.5em;
  margin-bottom: 0.5em;
  color: #333;
  font-family: "MD Nichrome", Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
  text-align: center;
  margin: 20px auto;
}

div.subtitle {
  text-align: center;
  margin: 20px auto;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.container.no-header {
  /* Center the content */
  position: relative;
  margin-top: 18vh; /* position the top  edge of the element at the middle of the parent */
  /* left: 50%;
  transform: translate(-50%, -50%); */
}
.container.no-header footer {
  position: fixed;
  bottom: 20px;
  width: 100%;
  margin-top: 20px;
}

.gigya-screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-card {
  text-align: center;
  margin: 20px auto;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

footer {
  position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}
footer p {
  color: #555;
}
footer a {
  background-color: transparent !important;
  color: black !important;
  text-decoration: none;
  cursor: pointer;
}

.staging-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.staging-alert p {
  color: white !important;
  background-color: rgba(255, 124, 2, 0.6509803922) !important;
  padding: 2px 16px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-weight: bold;
  text-align: center;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.environment-selector {
  display: inline-block;
  margin-left: 10px;
}

.site-and-api-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.site-and-api-key .site-section {
  padding: 0 40px;
}
.site-and-api-key .site-section b {
  white-space: pre;
}
.site-and-api-key .site-section code {
  white-space: pre;
  background-color: white;
  color: tomato;
  padding: 2px 6px;
  border-radius: 4px;
}
.site-and-api-key .api-key {
  padding: 0 40px;
  text-align: center;
}
.site-and-api-key .api-key b {
  white-space: pre;
}
.site-and-api-key .api-key code {
  white-space: pre;
  background-color: white;
  color: tomato;
  padding: 2px 6px;
  border-radius: 4px;
}
.site-and-api-key .load-dynamic {
  margin-top: 20px;
}

/* :: - Background Styles */
/* Crosshatch Art - Light Pattern */
body.crosshatch-light {
  background-color: #ffffff;
  min-height: 100vh;
  color: #ffffff;
  background-image: repeating-linear-gradient(22.5deg, transparent, transparent 2px, rgba(75, 85, 99, 0.06) 2px, rgba(75, 85, 99, 0.06) 3px, transparent 3px, transparent 8px), repeating-linear-gradient(67.5deg, transparent, transparent 2px, rgba(107, 114, 128, 0.05) 2px, rgba(107, 114, 128, 0.05) 3px, transparent 3px, transparent 8px), repeating-linear-gradient(112.5deg, transparent, transparent 2px, rgba(55, 65, 81, 0.04) 2px, rgba(55, 65, 81, 0.04) 3px, transparent 3px, transparent 8px), repeating-linear-gradient(157.5deg, transparent, transparent 2px, rgba(31, 41, 55, 0.03) 2px, rgba(31, 41, 55, 0.03) 3px, transparent 3px, transparent 8px);
}

body.fullscreen-bg {
  background-image: url("/static/img/backgrounds/sample-minimal/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.fullscreen-bg-simple {
  background-color: #f5f5f5;
  background-image: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* :: - Global Styling */
.gigya-screen-dimmer {
  position: fixed !important;
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  top: 0 !important;
  left: 0 !important;
  background-color: rgba(100, 100, 100, 0) !important;
  z-index: 99999 !important;
}

.gigya-screen-loader {
  top: 0 !important;
  left: 0 !important;
  width: 64px !important;
  height: 64px !important;
  z-index: 100000 !important;
  background-size: 30px !important;
  /* filter: invert(1);
   animation: spin 2s linear infinite; */
  display: flex !important;
  place-self: anchor-center !important;
  align-self: anchor-center !important;
  justify-self: anchor-center !important;
}

/* Example: Replacing @media (min-width: 480px) */
@media (min-width: 360px) {
  body {
    padding: 1rem !important;
  }
}
/* Example: Replacing @media (min-width: 480px) */
@media (min-width: 480px) {
  body {
    padding: 1rem !important;
  }
}
/* Example: Replacing @media (min-width: 480px) */
@media (min-width: 768px) {
  body {
    padding: 3rem !important;
  }
}
/* Example: Replacing @media (min-width: 480px) */
@media (min-width: 1024px) {
  .site-and-api-key {
    display: block;
  }
  .site-and-api-key .load-dynamic {
    margin-top: 0px;
    text-align: center;
  }
}
/* :: - NEW IMPLEMENTATION (D3) */
/* Screenset fixes */
/* TODO: Apply generally */
.gigya-screen.portrait {
  width: auto !important;
  padding: 20px !important;
}

.gigya-screen-set-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100px !important;
}
.gigya-screen-set-container form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  border: 0px solid gray !important;
  padding: 0 60px !important;
}
.gigya-screen-set-container form .gigya-composite-control.gigya-composite-control-checkbox .gigya-label {
  text-align: center;
}
.gigya-screen-set-container form .gigya-composite-control.gigya-composite-control-checkbox .gigya-label {
  width: 90% !important;
}

/* Example: Replacing @media (min-width: 360px) */
@media (min-width: 360px) {
  .gigya-screen-set-container form {
    border: 0px solid greenyellow !important;
  }
}
/* Example: Replacing @media (min-width: 480px) */
@media (min-width: 480px) {
  .gigya-screen-set-container form {
    border: 0px solid tomato !important;
    padding: 0 30px !important;
  }
}
/* Example: Replacing @media (min-width: 614px) */
@media (min-width: 614px) {
  .gigya-screen-set-container form {
    border: 0px solid purple !important;
    padding: 0 30px !important;
  }
}
/* Example: Replacing @media (min-width: 768px) */
@media (min-width: 768px) {
  .gigya-screen-set-container form {
    border: 0px solid gold !important;
    padding: 0px !important;
  }
}
#gigya-update-profile-screen .gigya-layout-row.with-two-inputs {
  width: 100%;
}

/* JSON Viewer */
json-viewer {
  padding: 1rem;
}

:host,
.json-viewer-theme-light {
  --background-color: white;
  --color: #333333;
  --string-color: #e03131;
  --number-color: #12b886;
  --boolean-color: #5f3dc4;
  --null-color: #808080;
  --property-color: #228be6;
  --preview-color: #bd5f1b;
  --highlight-color: #ff0000;
  --outline-color: #666968;
  --outline-width: 1px;
  --outline-style: dotted;
  --font-family: Nimbus Mono PS, Courier New, monospace;
  --font-size: 1rem;
  --line-height: 1.2rem;
  --indent-size: 0.5em;
  --indentguide-size: 1px;
  --indentguide-style: solid;
  --indentguide-color: #ccc;
  --indentguide-color-active: #999;
  --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);
  --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);
}

:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], [type=range])[aria-invalid=false]:not(select) {
  background-image: none !important;
}

.language-selector-container {
  display: flex;
  justify-content: flex-end;
  padding: 10px 20px;
}

.language-selector {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 4px;
  border: 0px solid tomato;
}

.language-label {
  margin-right: 10px;
  font-weight: 500;
}

.language-options {
  display: flex;
}

.language-option {
  margin: 0 5px;
  padding: 3px 8px;
  border-radius: 3px;
  text-decoration: none;
  color: #666;
}
.language-option:hover {
  background-color: #e9e9e9;
}
.language-option.active {
  background-color: #333;
  color: white;
}

@media (max-width: 768px) {
  .language-selector-container {
    justify-content: center;
    padding: 15px 10px;
  }
  .language-selector {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .language-selector {
    flex-direction: column;
    align-items: center;
    padding: 12px;
    width: 100%;
  }
  .language-label {
    margin-right: 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 14px;
    width: 100%;
  }
  .language-options {
    justify-content: center;
    width: 100%;
    display: flex;
  }
  .language-option {
    padding: 6px 12px;
    margin: 0 8px;
    min-width: 60px;
    text-align: center;
  }
}
:root {
  --pico-demo-border-gradient-colors: transparent 33%,#e9cbe8,#ddcef4,#d0d3f2,#cbd4f5;
  --pico-card-box-shadow: var(--pico-box-shadow);
  --pico-card-component-outline-width: .0625rem;
  --pico-card-component-outline-color: transparent;
  --pico-mark-gradient: linear-gradient(to right, #84266d, #6f3985, #5d409a, #43489d);
  --pico-stats-color: #2a628a;
  --pico-features-icon-color: #934daf;
  --pico-comparison-gradient-valid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #7bb2c6, #5aa6a4, #649b66);
  --pico-comparison-gradient-invalid: linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #d0a164, #cf7e6d, #d46c63);
  --pico-badge-html-background-color: rgba(168, 52, 16, .125);
  --pico-badge-html-color: #a83410;
  --pico-badge-react-background-color: rgba(35, 114, 143, .125);
  --pico-badge-react-color: #23728f;
  --pico-badge-sass-background-color: rgba(150, 45, 124, .125);
  --pico-badge-sass-color: #962d7c;
  --pico-badge-javascript-background-color: rgba(130, 84, 0, .125);
  --pico-badge-javascript-color: #825400;
  --pico-badge-css-background-color: rgba(29, 89, 208, .125);
  --pico-badge-css-color: #1d59d0

  --pico-badge-go-color: #4fa8c3;
  --pico-badge-data-background-color: rgba(79, 168, 195, .125);
  --pico-badge-data-color: #4fa8c3;
  --pico-badge-api-background-color: rgba(79, 168, 195, .125);
  --pico-badge-api-color: #4fa8c3;
  --pico-badge-other-background-color: rgba(79, 168, 195, .125);
  --pico-badge-other-color: #4fa8c3;
}

@media (min-width: 1280px) {
  .examples-list article {
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.75);
    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75) ;
  }
}
body.webapps-index > .container {
  max-width: 100%;
  display: grid;
  /* Create columns that are at least 250px wide and expand as needed */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem; /* Adjust gap between items as needed */
  max-width: 80%;
  margin: 0 auto;
  align-items: start;
}
body.webapps-index > .container .examples-list article .badges {
  margin-top: 35px !important;
  display: block;
  margin-bottom: calc(var(--pico-spacing) / 2);
  margin-bottom: 0 !important;
  text-align: justify;
}
body.webapps-index > .container .examples-list article .badges .badge {
  display: inline-block;
  margin-top: 6px;
}
body.webapps-index > .container .examples-list article .badges .badge {
  padding: 0.125rem 0.25rem;
  border-radius: 0.125rem;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  vertical-align: text-bottom;
}
body.webapps-index > .container .examples-list article .badges .badge:not(:last-child) {
  margin-right: calc(var(--pico-spacing) / 2);
}
body.webapps-index > .container .examples-list article .badges .badge.html {
  background-color: var(--pico-badge-html-background-color);
  color: var(--pico-badge-html-color);
}
body.webapps-index > .container .examples-list article .badges .badge.react {
  background-color: var(--pico-badge-react-background-color);
  color: var(--pico-badge-react-color);
}
body.webapps-index > .container .examples-list article .badges .badge.sass {
  background-color: var(--pico-badge-sass-background-color);
  color: var(--pico-badge-sass-color);
}
body.webapps-index > .container .examples-list article .badges .badge.javascript {
  background-color: var(--pico-badge-javascript-background-color);
  color: var(--pico-badge-javascript-color);
}
body.webapps-index > .container .examples-list article .badges .badge.css {
  background-color: var(--pico-badge-css-background-color);
  color: var(--pico-badge-css-color);
}
body.webapps-index > .container .examples-list article .badges .badge.oidc {
  background-color: var(--pico-badge-oidc-background-color);
  color: var(--pico-badge-oidc-color);
}
body.webapps-index > .container .examples-list article .badges .badge.devices {
  background-color: rgba(221, 141, 216, 0.592);
  color: white;
}
body.webapps-index > .container .examples-list article .badges .badge.auth {
  background-color: var(--pico-badge-auth-background-color);
  color: var(--pico-badge-auth-color);
}
body.webapps-index > .container .examples-list article .badges .badge.api {
  background-color: var(--pico-badge-api-background-color);
  color: var(--pico-badge-api-color);
}
body.webapps-index > .container .examples-list article .badges .badge.data {
  background-color: var(--pico-badge-data-background-color);
  color: var(--pico-badge-data-color);
}
body.webapps-index > .container .examples-list article .badges .badge.other {
  background-color: var(--pico-badge-other-background-color);
  color: var(--pico-badge-other-color);
}
body.webapps-index > .container .examples-list article .badges .badge.go {
  background-color: rgba(33, 157, 195, 0.592);
  color: white;
}
body.webapps-index > .container .examples-list article .badges .badge.oidc {
  background-color: rgba(73, 33, 195, 0.282);
  color: white;
}

.tv-frame {
  position: relative;
  display: inline-block;
  background: #333;
  border: 10px solid #000;
  border-radius: 15px;
  max-width: 800px;
  max-height: 500px;
  min-width: 150px;
  min-height: 100px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  width: 80vw;
  height: 50vw;
  padding: 5px;
  transition: all 0.1s ease;
}
.tv-frame::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background: #000;
  border-radius: 0 0 5px 5px;
}
.tv-frame .desktop {
  background: url("/static/img/backgrounds/blurred/blurred-6.jpg") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding: 3vw;
}
.tv-frame .desktop .icon-app {
  display: block;
  position: relative;
  max-width: 10%;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
}
.tv-frame .desktop .icon-app img {
  border-radius: 20%;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  margin: 10%;
  width: 80%;
  height: 80%;
}
.tv-frame .desktop .icon-app p {
  font-size: 0.9vw !important;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
}
@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
}
.tv-frame .desktop .icon-app.active img {
  transform: scale(0.95);
  animation: glow 0.4s ease-in-out;
}
.tv-frame .desktop .icon-app.active p {
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.tv-frame .app-simulation {
  position: relative;
  top: -20px;
  left: 0;
  width: 100%;
  height: 100%;
  zoom: 0.2;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tv-frame .app-simulation .code {
  font-size: 2.5rem;
  padding: 0 10px;
}
.tv-frame .app-simulation .livgolf-logo {
  background: url("/static/img/logo-long.png") center center no-repeat;
  background-size: contain;
  width: 20%;
  height: 20%;
  filter: invert(100%);
}
.tv-frame .app-simulation .seconds-until-renewal {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  padding: 0 5px;
}
.tv-frame .app-simulation.authorized {
  background: url(/static/img/backgrounds/livgolf-app-tv-background.png) center center no-repeat;
  background-size: cover !important;
  background-size: 100% !important;
  border: 2px solid #555;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0 !important;
}
.tv-frame .app-simulation.authorized .livgolf-logo {
  filter: invert(100%);
}
.tv-frame.loading::before {
  content: "";
  display: inline-block;
  width: 4vw;
  height: 4vw;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  animation: spin 1s linear infinite;
  z-index: 1000;
  position: absolute;
  top: 43%;
  left: 46%;
}
.tv-frame.loading > div {
  display: none;
}

.phone-frame {
  position: relative;
  display: inline-block;
  padding: 50px 20px;
  background: #000;
  border: 2px solid #ccc;
  border-radius: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  min-height: 600px;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  color: #fff;
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 20px;
  background: #333;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.phone-frame::after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  background: #555;
  border-radius: 45px;
}
.phone-frame .desktop {
  background: url("/static/img/backgrounds/blurred/blurred-4.jpg") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  min-height: 450px;
  padding: 3vw;
}
.phone-frame .desktop .icon-app {
  display: block;
  position: relative;
  max-width: 20%;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
}
.phone-frame .desktop .icon-app img {
  border-radius: 20%;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  margin: 10%;
  width: 80%;
  height: 80%;
  padding: 10%;
  background-color: whitesmoke;
}
.phone-frame .desktop .icon-app p {
  font-size: 0.9vw !important;
  font-weight: bold !important;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  text-align: center;
}
@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
}
.phone-frame .desktop .icon-app.active img {
  transform: scale(0.95);
  animation: glow 0.4s ease-in-out;
}
.phone-frame .desktop .icon-app.active p {
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.phone-frame .browser-content {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.phone-frame .browser-content iframe {
  width: 100%;
  min-height: 450px;
  border: none;
  height: 1170px;
  zoom: 0.4 !important;
}

.variables-list {
  margin: 0 0 2rem 0rem;
}
.variables-list h1, .variables-list h2, .variables-list h3, .variables-list h4, .variables-list h5, .variables-list h6 {
  text-align: center;
  font-family: "Poppins", sans-serif;
}

@media (min-width: 360px) {
  .tv-frame {
    padding: 0px;
  }
  .tv-frame .app-simulation {
    top: 0 !important;
    zoom: 0.5 !important;
  }
}
@media (min-width: 480px) {
  .tv-frame {
    padding: 10px;
  }
  .tv-frame .app-simulation {
    top: -5px !important;
    zoom: 0.6 !important;
  }
}
@media (min-width: 614px) {
  .tv-frame .app-simulation {
    top: -20px !important;
    zoom: 0.7 !important;
  }
}
@media (min-width: 768px) {
  .tv-frame {
    padding: 30px;
  }
  .tv-frame .app-simulation {
    zoom: 1 !important;
  }
}
@media (min-width: 1024px) {
  .tv-frame .app-simulation {
    border: 0px solid lime;
  }
}
@media (min-width: 1200px) {
  .tv-frame .app-simulation {
    border: 0px solid pink;
  }
}
.action-info {
  position: absolute;
  display: none;
  bottom: 20px;
  right: 40px;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  border-radius: 5px;
}

.go-to-article {
  margin-top: 5rem;
}
.go-to-article .note {
  margin-top: 1rem;
}
.go-to-article .note p {
  margin: 0 !important;
}
.go-to-article .note.warning {
  background-color: rgba(255, 193, 7, 0.2) !important;
}
.go-to-article .links.expanded {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.livgolf-oidc-login-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12vh;
}
.livgolf-oidc-login-page .container .livgolf-logo {
  background: url(/static/img/logo-long.png) center center no-repeat;
  background-size: contain;
  width: 20%;
  height: 20%;
  /* filter: invert(100%); */
  /* width: 100px; */
  /* height: 100px; */
  min-height: 70px;
  min-width: 190px;
  margin-bottom: 50px;
}

.main-menu {
  padding: 0 !important;
}
.main-menu li {
  position: relative;
}
.main-menu li .sub-menu {
  display: none;
}
.main-menu li:hover .sub-menu {
  display: flex;
}
.main-menu.active {
  display: block;
  padding: 0px 0;
  margin: 0px 0;
  padding: 0px 0;
  padding-top: 60px;
}
.main-menu.active li {
  padding: 20px;
  width: 100%;
  margin: 0px 0;
}
.main-menu.active li .sub-menu {
  display: none !important;
}
.main-menu.active li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.main-menu.active li:hover .sub-menu {
  display: block !important;
}
.main-menu a {
  text-decoration: none;
}

.sub-menu {
  --menu-bg: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  --menu-border: rgba(0, 0, 0, 0.08);
  --item-border: rgba(0, 0, 0, 0.1);
  --item-color: rgb(58, 69, 77);
  --item-bg-hover: rgba(55, 65, 74, 0.09);
  height: 0;
  overflow: hidden;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  top: var(--top);
  left: var(--left);
  animation: menuAnimation 0.4s 0s both;
  transform-origin: left;
  list-style: none;
  margin: 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 999999999;
  box-shadow: 0 0 0 1px var(--menu-border), 0 2px 2px rgba(0, 0, 0, 0.03), 0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 8px rgba(0, 0, 0, 0.05), 0 15px 15px rgba(0, 0, 0, 0.06), 0 30px 30px rgba(0, 0, 0, 0.07), 0 70px 65px rgba(0, 0, 0, 0.09);
}
.sub-menu a {
  color: var(--item-color);
  background: 0;
  border: 0;
  white-space: nowrap;
  width: 100%;
  border-radius: 4px;
  padding: 6px 24px 6px 7px;
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 14px;
  width: 100%;
  animation: menuItemAnimation 0.2s 0s both;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.sub-menu li {
  padding: 12px 30px;
  margin-right: auto;
  width: 100%;
}
.sub-menu li[data-divider=top] {
  border-top: 1px solid;
}
.sub-menu li[data-divider=bottom] {
  border-bottom: 1px solid;
}
.sub-menu li[data-divider=top-bottom] {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.sub-menu li[data-divider] {
  border-color: var(--item-border);
}
.sub-menu li:hover {
  background-color: var(--item-bg-hover);
}
.sub-menu button {
  color: var(--item-color);
  background: 0;
  border: 0;
  white-space: nowrap;
  width: 100%;
  border-radius: 4px;
  padding: 6px 24px 6px 7px;
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 14px;
  width: 100%;
  animation: menuItemAnimation 0.2s 0s both;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.sub-menu button:hover {
  background-color: var(--item-bg-hover);
}
@keyframes menuAnimation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    height: var(--height);
    opacity: 1;
    border-radius: 8px;
    transform: scale(1);
  }
}
@keyframes menuItemAnimation {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.korean-app .screenset-box {
  background: white;
  border-radius: 25px;
  margin: 15px auto;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 360px) {
  .korean-app .screenset-box {
    padding: 15px;
    margin: 10px;
  }
}

@media (min-width: 360px) {
  .gigya-screen-set-container form {
    padding: 0 !important;
  }
}
@media (max-width: 768px) {
  .gigya-image {
    max-width: 100% !important;
    width: auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .gigya-screen {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .gigya-composite-control,
  .gigya-composite-control-image {
    width: 100% !important;
    max-width: 100% !important;
    background-size: contain !important;
  }
  .gigya-screen-content,
  .gigya-screen-dialog,
  .gigya-screen-dialog-content,
  .gigya-screen-dialog-top,
  .gigya-screen-dialog-inner,
  div[data-screenset-element-id],
  div[data-screenset-element],
  div[data-screenset-container] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 375px) {
  .gigya-image {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 50px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}/*# sourceMappingURL=livgolf-webapp-styles.css.map */