:root{
  --tmp-red:#E63946;
  --tmp-deep-red:#B00020;
  --tmp-blue:#0077B6;
  --tmp-deep-blue:#123C69;
  --tmp-green:#00A896;
  --tmp-deep-green:#00897B;
  --tmp-orange:#F77F00;
  --tmp-bg:#F7FAFC;
  --tmp-text:#1A202C;
}

/* Main Header Wrapper */
.tmp-header-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px 10px 12px;
  line-height:1.1;
  position:relative;

  /* Horizontal line marking the end of header */
  border-bottom:1px solid rgba(18, 60, 105, .18);
  box-shadow:0 3px 10px rgba(18, 60, 105, .06);
}

/* Colorful Decorative Underline */
.tmp-header-wrapper::after{
  content:"";
  width:min(430px, 74vw);
  height:4px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--tmp-red) 0%,
    var(--tmp-orange) 24%,
    var(--tmp-blue) 52%,
    var(--tmp-green) 78%,
    var(--tmp-deep-green) 100%
  );
  box-shadow:0 4px 14px rgba(0, 119, 182, .18);
}

/* Site Title */
.tmp-header-title{
  font-family:'Orbitron', sans-serif !important;
  font-size:clamp(27px, 2.4vw + 16px, 42px);
  font-weight:900;
  letter-spacing:2.2px;
  text-transform:uppercase;
  display:inline-block;

  background-image:linear-gradient(90deg,
    var(--tmp-deep-red) 0%,
    var(--tmp-red) 22%,
    var(--tmp-orange) 42%,
    var(--tmp-blue) 66%,
    var(--tmp-deep-green) 100%
  );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 1px 1px rgba(0,0,0,.08),
    0 6px 18px rgba(0,119,182,.10);
}

.tmp-header-title a{
  color:inherit !important;
  text-decoration:none !important;
}

/* Tagline */
.tmp-header-tagline{
  margin-top:8px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:clamp(12px, .52vw + 11px, 15px);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tmp-deep-blue);
  opacity:.95;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* Colorful Dots Around Tagline */
.tmp-header-tagline::before,
.tmp-header-tagline::after{
  content:"";
  flex:0 0 auto;
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
}

/* Left side dots */
.tmp-header-tagline::before{
  background:var(--tmp-red);
  box-shadow:11px 0 0 var(--tmp-orange);
  margin-right:14px;
}

/* Right side dots */
.tmp-header-tagline::after{
  background:var(--tmp-green);
  box-shadow:-11px 0 0 var(--tmp-blue);
  margin-left:14px;
}

/* Mobile */
@media (max-width:767px){
  .tmp-header-wrapper{
    padding:14px 8px 14px;
  }

  .tmp-header-title{
    font-size:clamp(24px, 7vw, 32px);
    letter-spacing:1.4px;
  }

  .tmp-header-tagline{
    font-size:11px;
    letter-spacing:.09em;
    gap:8px;
  }

  .tmp-header-tagline::before,
  .tmp-header-tagline::after{
    width:6px;
    height:6px;
  }

  .tmp-header-tagline::before{
    box-shadow:9px 0 0 var(--tmp-orange);
    margin-right:10px;
  }

  .tmp-header-tagline::after{
    box-shadow:-9px 0 0 var(--tmp-blue);
    margin-left:10px;
  }

  .tmp-header-wrapper::after{
    width:82vw;
    height:3px;
    margin-top:10px;
  }
}



:root{
  --tmp-red:#E63946;
  --tmp-deep-red:#B00020;
  --tmp-blue:#0077B6;
  --tmp-deep-blue:#123C69;
  --tmp-green:#00A896;
  --tmp-deep-green:#00897B;
  --tmp-orange:#F77F00;
  --tmp-purple:#7B2CBF;
  --tmp-teal:#009688;
  --tmp-bg:#F7FAFC;
  --tmp-text:#1A202C;
}

/* Main Menu Wrapper */
.tmp-main-menu{
  width:100%;
  background:linear-gradient(90deg,
    rgba(230,57,70,.08) 0%,
    rgba(0,119,182,.08) 38%,
    rgba(0,168,150,.08) 72%,
    rgba(247,127,0,.08) 100%
  );
  border-bottom:1px solid rgba(18,60,105,.14);
  box-shadow:0 4px 14px rgba(18,60,105,.06);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position:relative;
  z-index:20;
}

/* Inner Layout */
.tmp-main-menu-inner{
  max-width:1180px;
  margin:0 auto;
  padding:9px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
}

/* Menu Link Base */
.tmp-menu-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 15px;
  border-radius:999px;
  text-decoration:none !important;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tmp-deep-blue) !important;
  background:#ffffff;
  border:1px solid rgba(18,60,105,.12);
  box-shadow:0 3px 10px rgba(18,60,105,.06);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease;
  overflow:hidden;
}

/* Small Top Color Strip */
.tmp-menu-link::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:var(--tmp-blue);
  opacity:.95;
}

/* Hover */
.tmp-menu-link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(18,60,105,.14);
  color:#ffffff !important;
  border-color:transparent;
}

/* Individual Colors */
.tmp-menu-home::before{
  background:var(--tmp-deep-blue);
}

.tmp-menu-home:hover{
  background:var(--tmp-deep-blue);
}

.tmp-menu-blue::before{
  background:var(--tmp-blue);
}

.tmp-menu-blue:hover{
  background:var(--tmp-blue);
}

.tmp-menu-red::before{
  background:var(--tmp-red);
}

.tmp-menu-red:hover{
  background:var(--tmp-red);
}

.tmp-menu-green::before{
  background:var(--tmp-green);
}

.tmp-menu-green:hover{
  background:var(--tmp-green);
}

.tmp-menu-orange::before{
  background:var(--tmp-orange);
}

.tmp-menu-orange:hover{
  background:var(--tmp-orange);
}

.tmp-menu-purple::before{
  background:var(--tmp-purple);
}

.tmp-menu-purple:hover{
  background:var(--tmp-purple);
}

.tmp-menu-teal::before{
  background:var(--tmp-teal);
}

.tmp-menu-teal:hover{
  background:var(--tmp-teal);
}

.tmp-menu-dark::before{
  background:#1A202C;
}

.tmp-menu-dark:hover{
  background:#1A202C;
}

/* Optional Active Item */
.tmp-menu-link.tmp-active{
  color:#ffffff !important;
  background:var(--tmp-deep-blue);
  border-color:transparent;
}

/* Tablet */
@media (max-width:980px){
  .tmp-main-menu-inner{
    max-width:94%;
    gap:8px;
    padding:9px 10px;
  }

  .tmp-menu-link{
    font-size:12px;
    padding:8px 12px;
    min-height:34px;
  }
}

/* Mobile */
@media (max-width:767px){
  .tmp-main-menu{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .tmp-main-menu-inner{
    width:max-content;
    min-width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:8px;
    padding:10px 12px;
  }

  .tmp-menu-link{
    flex:0 0 auto;
    font-size:12px;
    padding:8px 12px;
    min-height:34px;
    letter-spacing:.04em;
  }

  .tmp-main-menu::-webkit-scrollbar{
    height:4px;
  }

  .tmp-main-menu::-webkit-scrollbar-thumb{
    background:rgba(18,60,105,.25);
    border-radius:999px;
  }
}




/* Base Styles */
.code-container-SYNTX-HGHLIT-29FCM-1001 {
    font-family: 'Roboto', sans-serif;
    background-color: transparent;
    color: #333;
    margin-top: 5vh;
    margin-bottom: 5vh;
    position: relative; /* Ensure positioning for the copy button */
}

.code-container-SYNTX-HGHLIT-29FCM-1001 pre[class*="language-"] {

    white-space: pre-wrap; /* Allow content to wrap */
    word-wrap: break-word; /* Break long words if necessary */
    overflow: hidden; /* Hide any overflow */


    border-radius: 5px;
    overflow: auto;
    font-family: 'Roboto Mono','Anonymous Pro','Fira Code', 'Consolas', 'Lucida Console', 'Roboto Mono', 'Open Sans', monospace; /* Set the font */
    font-size: 0.9em; /* Default font size for desktop */
    font-weight: 500;
    background: #2d2d2d; /* Dark background */
    color: #f8f8f2; /* Light text color */
    transition: background 0.3s, color 0.3s;
    margin-top: 0; /* No margin space between label and code block */
    position: relative; /* Ensure positioning for the copy button */
    
    /* Added Padding to Prevent Overlap with Copy Button */
    padding-top: 2.5em; /* Space for the copy button */
    padding-right: 3em; /* Additional space to the right */
}

/* Responsive Font Sizes */

/* Tablet */
@media (max-width: 1024px) {
    .code-container-SYNTX-HGHLIT-29FCM-1001 pre[class*="language-"] {
        font-size: 0.9em;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .code-container-SYNTX-HGHLIT-29FCM-1001 pre[class*="language-"] {
        font-size: 0.8em;
        padding-top: 5em; /* Adjust padding for smaller screens */
        padding-right: 1.5em;
    }
}

/* Copy Button Styles */
.copy-button-SYNTX-HGHLIT-29FCM-1001 {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 1; /* Ensure button is above the code block */
}

.copy-button-SYNTX-HGHLIT-29FCM-1001:hover {
    background: #0056b3;
}

.copy-button-SYNTX-HGHLIT-29FCM-1001 i {
    margin-right: 5px;
}

.copy-button-success-SYNTX-HGHLIT-29FCM-1001 {
    background: #28a745 !important; /* Green background */
}

.copy-button-error-SYNTX-HGHLIT-29FCM-1001 {
    background: #dc3545 !important; /* Red background */
}

/* Line Numbers Styles */
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em; /* Works for line-numbers below 1000 lines */
    letter-spacing: -1px;
    border-right: 0;
    user-select: none;
}

.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}






    .code-container-OUTPUT-29FCM-08JUNE2024 {
        margin: 20px 0;
        position: relative;
	background-color: #36454F;
    }
    .hljs-OUTPUT-29FCM-08JUNE2024 {
        border-radius: 5px;
        padding: 15px;
        font-family: 'Fira Code', 'Consolas', monospace;
        text-align: left;
        white-space: pre;
        overflow: auto;
        background-color: #36454F; /* Light black background */
        color: #f8f8f2; /* Monokai theme text color */
    }
    .copy-button-OUTPUT-29FCM-08JUNE2024 {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s;
        background: #8B0000; /* Deep red shade */
    }
    .copy-button-OUTPUT-29FCM-08JUNE2024:hover {
        background: #660000; /* Darker red shade on hover */
    }
    .copy-button-OUTPUT-29FCM-08JUNE2024 i {
        margin-right: 5px;
    }
    .copy-button-success-OUTPUT-29FCM-08JUNE2024 {
        background: #28a745 !important;
    }
    .copy-button-error-OUTPUT-29FCM-08JUNE2024 {
        background: #dc3545 !important;
    }