/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Root - variables use: var(--primary-color) int
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --primary-color: #5E377B;
  --primary-accent: #B4976A;
  --primary-dark: #212121;
}
.disnone{
  display: none;
}
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
     }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 100%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* changes for social signal */


.videorow{
  padding-top: 2em;
  margin-bottom: 6px;
  border-top: 1px solid rgba(225,225,225,0.3);
}
.vidblock{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  color: #666666;
}
.vidchunk{
  flex: 1 1 100%;
  padding-bottom: 0.2em;
}
.vidchunk:last-child{
  margin-top: auto; /* Align the last item to the bottom */
}
.clickable{
  cursor: pointer;
  font-size: 1.4rem;
  color: #999;
  font-weight: 500;
}
.ffwdvideo{
    width: 600px;
}

.switchvideo{
  margin-bottom: none;
  cursor: pointer;
  color: #002b36;
}

.vjs-matrix.video-js{
    color: #efefef;
}
.vjs-matrix .vjs-big-play-button {
  border-color: #828282;
  border-style: double;
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  color: #222; 
  background-color: var(--primary-dark);
  padding-top: 60px;  /* Match header height */
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  color: #3F1D5A;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem; text-align: center; font-weight: 200;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.2rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 3.0rem; line-height: 1.1; letter-spacing: -.0rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
p { font-size: 5.0rem;}


/* Larger than mobile */
@media (min-width: 400px) {
  h1 { font-size: 4.2rem; }
  h2 { font-size: 4.0rem; }
  h3 { font-size: 4.3rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.5rem; }
  h6 { font-size: 1.5rem; }
  p {font-size: 3.0rem;}
  body { font-size: 2.0rem;}
}


/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 4.5rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.3rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.5rem; }
  p {font-size: 2.5rem;}
  body { font-size: 2.0rem; }
}

/* Larger than tablet */
@media (min-width: 750px) {
  h1 { font-size: 4.5rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.3rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.5rem; }
  p {font-size: 3.0rem;}
  body { font-size: 3.0rem; }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  h1 { font-size: 4.2rem; }
  h2 { font-size: 4.0rem; }
  h3 { font-size: 3.3rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.5rem; }
  p {font-size: 2.0rem;}
  body { font-size: 2.0rem; }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
  h1 { font-size: 4.2rem; }
  h2 { font-size: 4.0rem; }
  h3 { font-size: 3.3rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.5rem; }
  p {font-size: 2.0rem;}
  body { font-size: 2.0rem; }
}



/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: var(--primary-accent);
  text-decoration-thickness: 1px; }
a:hover {
  color: var(--primary-accent); }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: auto;
  padding: clamp(8px, 1vw, 15px) clamp(12px, 2vw, 20px);  /* Responsive padding */
  color: #555;
  text-align: center;
  font-size: clamp(12px, 1.5vw, 20px);  /* min, preferred, max */
  font-weight: 600;
  line-height: clamp(16px, 2vw, 24px);
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #fefefe;
  background-color: var(--primary-color);
  border-color: var(--primary-color); }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: var(--primary-accent);
  background-color: var(--primary-color);
  border-color: var(--primary-accent); }

/* SSApp
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.userbadge {
  width: 40px;         /* Reduced from 50px */
  height: 40px;        /* Reduced from 50px */
  border-radius: 50%;
  border: 1px solid var(--primary-accent);
  background-color: var(--primary-color);
  color: var(--primary-accent);
  text-align: center;
  line-height: 40px;   /* Match the height */
  font-size: 20px;     /* Slightly smaller font */
  font-family: 'Roboto', sans-serif;
  transform: none;     /* Remove the transform */
  text-decoration: underline;
  cursor: pointer;
  margin-top: 0;       /* Remove margin */
}

.ssadd{
  cursor: pointer;
  color: #8EAD47;
}

.sscancel{
  cursor: pointer;
  color: #AD6395;
}



.grid-label{
  margin-top: 2em;
  margin-left: 20px;
  font-weight: 500;
  color: var(--primary-color);
}

.grid-container{
  background-color: #fff;
  padding: 1em;
  margin-bottom: 6px;
  border: 1px solid var(--primary-accent);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* Adjust gap as needed */
  -webkit-box-shadow: 2px 3px 6px 0px rgba(209,209,209,1);
  -moz-box-shadow: 2px 3px 6px 0px rgba(209,209,209,1);
  box-shadow: 2px 3px 6px 0px rgba(209,209,209,1);
}

.grid-item{
  font-size: 80%;
  font-weight: 300;
  cursor: alias;
}

.grid-add{
  margin-top: 1.95em;
  font-weight: 300;
  opacity: 0.5;
  text-align: right;
  transition: opacity 0.3s; /* For a smooth transition */
}

@media screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
  }
}

.grid-container > div {
  margin-left: 20px; /* Adjust this value as needed */
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 48px;
  padding: 0 10px;  /* Remove vertical padding */
  width: 20%;
  font-size: 66%;
  background-color: #efefef;
  color: #000;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
  
/* Select element variants */
.wideselect {
  width: 100% !important;
  max-width: 100% !important;
}

label,
legend {
  font-size: 1.2em;
  line-height: 1.2;
  margin-top: 0.5rem;
  color: #672873;
  cursor: pointer;
  display: block;
  margin-bottom: .5rem;
  font-weight: 500; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* social signal tweaks */
.bigfield{
  width: 80vw;
}
.halffield{
  width: 40vw;
}
.colcenter{
  text-align: center;
}

/* SS Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ssinput{
  height: 28px !important;
  width: 50% !important;
}

.ssinput::placeholder{
  font-size: 75% !important;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Tracking script code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tracking-script {
  white-space: pre-wrap !important;       /* CSS3 */
  word-wrap: break-word !important;       /* IE */
  overflow-wrap: break-word !important;   /* Modern browsers */
  max-width: 100%;
  padding: 15px !important;
  background: #F8F8F8;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 0; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 0.5rem; }

/* Added Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Default: hide all gated tools */
.tool-gated {
  display: none;
}

/* Show tools by plan tier (cascading upward) */
.plan-growth .tool-growth,
.plan-business .tool-growth,
.plan-enterprise .tool-growth,
.plan-partner .tool-growth,
.plan-admin .tool-growth {
  display: flex;
}

.plan-business .tool-business,
.plan-enterprise .tool-business,
.plan-partner .tool-business,
.plan-admin .tool-business {
  display: flex;
}

.plan-enterprise .tool-enterprise,
.plan-partner .tool-enterprise,
.plan-admin .tool-enterprise {
  display: flex;
}

.plan-partner .tool-partner,
.plan-admin .tool-partner {
  display: flex;
}

.plan-admin .tool-admin {
  display: flex;
}

.copyable{
  cursor: copy;
}

.labelPrompt{
  color: #30BBEA !important;
}

.loginbar{
  /* margin-top: 0.75em; */
  text-align: right;
}
#sslogo{
  width: auto;  /* Let width adjust automatically */
  height: 40px;  /* Leave some padding space */
  padding: 0;
}
#sslogo-text{
  font-size: 2rem;
  font-weight: bold;
  align-self: center;
  color: var(--primary-accent);
}
#companyName{
  color: var(--primary-accent);
}
#loginContainer{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--primary-color);
  padding: 0 10px;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#loginContainer .row {
  height: 100%;
  display: flex;
  align-items: center;
}

#notloggedin, #loggedin {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#loggedin {
  display: none;  /* Initially hidden */
}

#loginForm {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

/* Ensure inputs don't take too much space */
#loginForm input[type="email"],
#loginForm input[type="password"] {
  width: 200px;
  height: 36px;  /* Reduced from 48px */
  margin: 0;     /* Remove any margins */
  padding: 0 10px;
}

.flipped-emoji {
  display: inline-block;
  transform: scaleX(-1);
}
/* Remove duplicate/conflicting styles */
.loginbar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

#lefcol{
  margin-top: 2em;
}
#rightcol {
  background-color: #f3f4f5;
  padding: 20px;  /* Consistent padding */
  min-height: calc(100vh - 60px);
  margin-bottom: 0;
  box-sizing: border-box;  /* Include padding in width calculation */
}


.leftcol_header {
  font-size: 1.2rem; /* Smaller font size */
  text-transform: uppercase; /* Make it uppercase */
  font-weight: bold;
  color: #888; /* Light gray color */
  padding: 10px 10px;
}

.leftcol_tool {

  align-items: center; /* Align icon and text */
  gap: 8px; /* Spacing between icon and text */
  font-size: 1.25rem;
  font-weight: 500;
  padding: 8px 15px;
  color: #ddd; /* Light text */
  text-decoration: none;
  transition: background 0.2s ease-in-out;
}

.leftcol_tool:hover {
  background: rgba(255, 255, 255, 0.1); /* Hover effect */
  font-size: 1.35rem;
  border-radius: 5px;
}

/* Active state for the selected tool */
.leftcol_tool.active {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

/* Icon style */
.leftcol_tool i {
  font-size: 1rem; /* Adjust icon size */
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



#leftcol {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px);  /* Reduced height to leave more space */
  padding-bottom: 1em;
}

/* Add this for the bottom item */
.leftcol_tool.bottom {
  margin-top: auto;
  margin-bottom: 15px;  /* Increased bottom margin */
  padding-bottom: 0;
}

#rightcol {
  background-color: #f3f4f5;
  padding: 1em;
  min-height: calc(100vh - 60px);
  margin-bottom: 0;
}

/* Base pane styles */
.pane {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.pane.active {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

/* Subpanel transitions */
.subpanel {
    background: white;
    border-radius: 4px;
    padding: 30px;
    margin: 20px auto;
    width: 80%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: none;  /* Back to simple display none */
}

.subpanel.visible {
    opacity: 1;
    visibility: visible;
}

/* Main content transitions */
.scripts-main-content {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.scripts-main-content.hidden {
    opacity: 0;
}

/* Panel Layout System */
.panel {
  background: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.panel:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Container for panels */
.panel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;  /* Include gap in width calculation */
}

/* Panel sizes */
.panel.full {
  width: 100%;
  flex: 0 0 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  transition: height 0.3s ease-out, box-shadow 0.3s ease;
  height: auto;
  overflow: hidden;
}
.panel.three-quarters {
  width: calc(75% - 10px);  /* 3/4 of container minus half of gap */
  flex: 0 0 calc(75% - 10px);
  margin-bottom: 20px;
  box-sizing: border-box;
}
.panel.half {
  width: calc(50% - 10px);  /* Half of container minus half of gap */
  flex: 0 0 calc(50% - 10px);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.panel.quarter {
  width: calc(25% - 15px);
  flex: 0 0 calc(25% - 15px);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.notify-interval{
  width: 80px !important;
  font-size: 110% !important;
}

.pane-title {
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 20px;
  /* Remove any flex properties that might affect layout */
  flex: none;
}

.nodisplay{
  display: none;
}

.ishidden{
  flex: none;
  /* visibility: hidden; */
}

.frame{
  border: none;
  outline: none;
  height: 80vh;
  width: 100%;
  transition: opacity 0.3s ease-in-out;
}

.hiddenframe{
  flex-direction: column;
  width: 100%;
  cursor: pointer;
}

.halfframe{
  border: none;
  outline: none;
  height: 450px;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.frame-reset{
  font-size: 3rem;
  color: #666;
  cursor: pointer;
}

.frame-reset:hover{
  color: var(--primary-color);
}

details {
  transition: all 0.3s ease-in-out;
}

details[open] {
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  from {
      max-height: 0;
      opacity: 0;
  }
  to {
      max-height: 1000px;
      opacity: 1;
  }
}

.panel-category {
  font-size: 1.6rem;
  font-weight: 500;
  color: #666;
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Default: collapsed */
summary::before {
  font-weight: 300;
  color: #3F1D5A;
  font-size: 2.0rem;
  content: '▶';  /* right-pointing triangle */
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s;
}

/* When details is open, change the icon */
details[open] summary::before {
  content: '▼';  /* downward-pointing triangle */
}

/* Optional: Add icon support */
.panel-category i {
  font-size: 1.4rem;
  opacity: 0.7;
}

.domain-name{
  text-align: right;
}

/* Hub
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.panel-content {
    display: flex;
    gap: 20px;
    margin-bottom: 1em;
    justify-content: space-between;
    margin-right: 10px;
}

.panel-content.column{
  flex-direction: column;
}



.panel-content .full{
  flex-basis: 100%;
}

.panel-content .three-quarters{
  flex-basis: 74%;
}

.panel-content .half{
  flex-basis: 49%;
}
.panel-content .quarter{
  flex-basis: 24%;
  text-align: center;
}

.top-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.company-description {
    flex: 2;  /* Takes up 2/3 of space */
}

.description-text {
    font-size: 1.6rem; 
    line-height: 1.6;
}

.company-image {
    flex: 1;  /* Takes up 1/3 of space */
    max-width: 300px;
    width: auto;
    height: auto;
    align-self: flex-start;  /* Aligns to top of container */
    object-fit: scale-down;  /* Maintains aspect ratio without stretching */
}

.links-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.hub-links {
    flex-basis: 49%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hub-links ul {
    list-style-type: none;
    padding: 0;
}

.companytitle{
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--primary-color);
  text-align: center;
}

.company-description{
  font-size: 1.6rem; 
  line-height: 1.6;
  flex-basis: 66%;
}

.company-image{
  max-width: 300px;  /* Ensures the image never exceeds 300px */
  width: auto;       /* Allows smaller images to keep their natural width */
  height: auto;      /* Maintains aspect ratio, prevents stretching */
  display: block;    /* Avoids inline spacing issues */
  margin: 0 0 20px 20px;
  border-radius: 4px;
  flex-basis: 33%;
}

.hub-links{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-basis: 49%;
}

.hub-links ul{
  list-style-type: none;
  padding: 0;
}


.industry-tag {
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 4px;
  font-size: 1.4rem;
}
/* Add margin to create section spacing */
.panel-grid + .panel-category {
  margin-top: 30px;
}




.status-badge {
    background: rgba(94, 55, 123, 0.1);
    color: var(--primary-color);
    padding: 8px 0px;
    border-radius: 4px;
    font-size: 1.2rem;
    margin-left: 10px;
}

.button-small {
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
    font-size: 1.2rem;
    float: right;
}

.subpanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.subpanel-title {
  font-size: 2rem;
  font-weight: 500;
  color: var(--primary-color);
}

.subpanel-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.subpanel-content {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 20px;
  margin-top: 20px;
}

.back-link {
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.back-link:hover {
  color: var(--primary-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 1.4rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1.4rem;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Add near the top with other root styles */
.login-pending {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Non-pending login elements should transition in */
#notloggedin:not(.login-pending),
#loggedin:not(.login-pending) {
    opacity: 1;
}

/* Add near other panel styles */
.panel.unverified {
    background-color: #eee;
}

/* Add near other panel styles */
.panel.unverified .status-badge {
  visibility: hidden;
}
.panel.unverified .view-pixel {
  visibility: hidden;
}

/* Setup page styles */
.setup-page {
    background-color: #f7f6f4;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.setup-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 500px;
    min-height: 580px;  /* Added fixed minimum height */
    margin: auto;
    display: flex;
    flex-direction: column;
}

.setup-logo {
    height: 40px;  /* Increased from 24px */
    margin-bottom: 30px;
    width: auto;  /* Ensure proper aspect ratio */
}

.setup-subtitle {
    color: #666;
    margin-bottom: 30px;
}

.input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group {
    position: relative;
    flex: 1;
    margin-bottom: 20px;
}

.input-group i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
}

.input-group input {
    width: 100%;
    padding: 12px;
    padding-left: 35px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.setup-next {
    width: 100%;
    padding: 12px 24px;
    background: #333;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.setup-next:hover {
    background: #444;
}

.setup-terms {
    margin-top: 15px;
    font-size: 13px;
    color: #666;
}

.setup-terms a {
    color: #000;
    text-decoration: underline;
}

.setup-login-link {
    text-align: center;
    margin-top: 30px;
    color: #666;
}

.setup-login-link a {
    color: #000;
    text-decoration: underline;
}

.domain-rules {
    background: #f7f6f4;
    border-radius: 4px;
    padding: 12px;
    margin: 12px 0;
    font-size: 12px;
}

.domain-rules h4 {
    margin: 0 0 6px 0;
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

.rule-example {
    margin: 3px 0;
    color: #666;
}

.setup-support {
    margin-top: 15px;
    text-align: center;
}

.setup-support small {
    font-size: 12px;
    color: #666;
}

.setup-support a {
    color: #666;
    text-decoration: underline;
}

.setup-support i {
    font-size: 10px;
    margin-left: 2px;
}

/* Override URL input styles */
input[type="url"] {
    padding-right: 12px !important;
}

/* Add to existing styles */
.setup-buttons {
    margin-top: auto;  /* Push buttons to bottom */
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.button-secondary {
    padding: 12px 24px;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    flex: 1;
}

.button-secondary:hover {
    background: #f5f5f5;
}

.setup-next {
    flex: 1;
}

/* Update the header styles */
.setup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    flex-shrink: 0;  /* Prevent header from shrinking */
}

.logo-container {
    height: 40px;  /* Increased from 32px */
    display: flex;
    align-items: center;
}

.logo-square {
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-logo {
    height: 40px;  /* Increased from 24px */
    width: auto;
    display: block;
}

.setup-logo-text {
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

/* Add to existing styles */
.terms-checkbox {
    margin: 20px 0;
}

.terms-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.terms-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.terms-checkbox span {
    color: #333;
    font-size: 14px;
}

/* Add media query for smaller screens */
@media (max-width: 600px) {
    .setup-card {
        min-height: 520px;  /* Slightly smaller on mobile */
        padding: 30px;  /* Smaller padding on mobile */
    }
}

/* Update password rules styling to be more compact */
.password-rules {
    background: #f7f6f4;
    border-radius: 4px;
    padding: 12px;
    margin: 12px 0;
    font-size: 12px;
}

.password-rules h4 {
    margin: 0 0 6px 0;
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

.rule-example {
    margin: 3px 0;
    color: #666;
}

/* Add styles for new card 1 */
.traffic-notice {
    margin: 40px 0;
}

.traffic-notice h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}

.traffic-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.traffic-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.traffic-checkbox span {
    font-size: 14px;
    color: #333;
}

.login-link {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

.login-link a {
    color: #333;
    text-decoration: underline;
}

/* Add styles for single button layout */
.setup-buttons.single-button {
    justify-content: center;
    margin-top: 40px;
}

.setup-buttons.single-button .button-primary {
    min-width: 200px;
    padding: 12px 24px;
    font-size: 16px;
}

/* Existing setup-buttons styles remain the same */
.setup-buttons {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}



.info-box {
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 15px;
  margin-top: 20px;
}

.info-box h3 {
  font-size: 16px;
  margin: 0 0 10px 0;
}

.info-box p {
  margin: 0;
  color: #666;
}

/* Iframe and Progress Bar Styles */
iframe {
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    border: none;
}

details {
    transition: all 0.3s ease-in-out;
}

details[open] {
    animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 1000px;
        opacity: 1;
    }
}

.iframe-progress {
    width: 100%;
    height: 4px;
    margin: 10px 0;
    border: none;
    background-color: #f0f0f0;
    border-radius: 2px;
}

.iframe-progress::-webkit-progress-bar {
    background-color: #f0f0f0;
    border-radius: 2px;
}

.iframe-progress::-webkit-progress-value {
    background-color: #5E377B;
    border-radius: 2px;
    transition: width 0.1s ease-in-out;
}

.iframe-progress::-moz-progress-bar {
    background-color: #5E377B;
    border-radius: 2px;
}