/* anton-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/anton-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v23-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v23-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/roboto-v49-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v49-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v49-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v49-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v49-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* nova-flat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nova Flat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nova-flat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* oswald-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/oswald-v57-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/oswald-v57-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v57-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/oswald-v57-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/oswald-v57-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



/* rubik-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/rubik-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/rubik-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/rubik-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/rubik-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/rubik-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/rubik-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/inter-v20-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/inter-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root{
    --bg-color: #000;
    --text-color: #fff;
    --text2-color: #f9f9f9;
    --text-color-3: #000;
    /*--font-color: #003166;
    --main-color-hover: #658cb7;*
    --font-color: #2E203C; *

    --font-color: #3C184B; 
    --font-color: #4b0983; */
    --main-color: #4b0983;

    --main-color-hover: #6f08e1;

    --pw-purple: #5B2B6F;
    --pw-purple-dark: #3C184B;   /* headers/nav */
    --pw-purple-light: #F3EFF7;  /* subtle backgrounds */

    --muted:#656a76;
    --line: #b7b7bd;

    --card:#ffffff;
    --shadow:0 10px 30px rgba(0,0,0,.07);
    --radius: 4px;

    --bg2-color: #141414;
    --font-color: #000;

    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Rubik", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /*--main-font:  "Rubik", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --main-font:  'Montserrat', sans-serif; */
    --main-font:  "Rubik", sans-serif;
    --alt-font: Inter, sans-serif;
    --font-primary: Poppins, Roboto,"Helvetica Neue",sans-serif;
    --font-secondary: Roboto;
    --font-hero: "Bebas Neue",Poppins, Roboto,"Helvetica Neue",sans-serif;
    font-family: "Roboto Condensed", sans-serif;
    font-family: "Oswald", sans-serif;
    font-family: 'Poppins', sans-serif;   
    font-family: 'Nova Flat', cursive;
    font-family: 'Roboto', sans-serif;
    font-family: 'Lobster', cursive;
    font-family: 'Montserrat', sans-serif;
    --border:.2rem solid var(--black);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);

    --main-font-weight: 500;
    --main-font-bold: bold;

    --pw-purple: #78276E;
    --pw-purple-600: #6b2363;
    --pw-card: #17171d;
    --pw-border: #26262e;
    --pw-text: #e9eaee;
    --pw-muted: #9aa0a6;
    --toc-offset: 88px;


    --pw-bg:#f6f7fb;
    --pw-card:#ffffff;
    --pw-text:#1f2330;
    --pw-muted:#6b7280;
    --pw-purple:#6a2ecf;
    --pw-purple-50:#efe8fb;
    --pw-accent:#8b5cf6;
    --ok:#10b981;
    --warn:#f59e0b;
    --err:#ef4444;
    --chip-bg:#eef2ff;
    --chip-text:#3730a3;
    --border:#e5e7eb;
    --shadow:0 8px 24px rgba(31,35,48,.08);

}

*{
    font-family: var(--main-font), sans-serif; 
    font-size: 14px;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    color: var(--text-color-3);
    /*color: var(--text-color);*
    font-weight: var(--main-font-weight); */
}

*::selection{
    background-color: var(--font-color);
    color:var(--text-color);
}

::-webkit-scrollbar{
    height: .5rem;
    /* width: 4px; */
    width: 8px;
}

::-webkit-scrollbar:hover{
    width: 8px;
}

::-webkit-scrollbar-track{
    background-color: transparent;
}

::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
}

/* Global Styles */
body {
    /*font-family: 'Inter', Arial, sans-serif;*/
    font-family: var(--main-font);
    margin: 0;
    padding: 0;
    background-color: var(--text-color);
    color: var(--bg-color);
    /*font-size: 10px;*/
}


/*html, body { font-family: var(--main-font); }*/



/* Only affects pages with <body class="page--auth"> */
body.page--auth {
  position: relative;              /* for the pseudo-element layer */
  min-height: 100vh;
  background-color: var(--font-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blurred full-page background */
body.page--auth::before {
  content: "";
  position: fixed;                 /* stick to viewport */
  inset: 0;
  background: url("../img/log-in.png") center/cover no-repeat;
  filter: blur(8px);
  transform: scale(1.05);          /* hide blur edges */
  z-index: -1;                     /* sit behind content */
  pointer-events: none;
}


.container {
    /*padding: 20px;*/
    /*margin-left: 60px; /* Adjust for icon-only sidebar width */
    /*margin-top: 80px; /* Adjust for top bar height *
    transition: margin-left 0.3s;
    /*margin-top: 12rem; 
    min-height: 50rem; */
}

.container {
    /*max-width: 1300px;*/
    width: 1300px;
}

h1 {
    text-align: center;
    color: #333;
    margin-top: 40px;
}

.content {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius:  var(--radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: var(--main-font);
}





/************************************************************************************
# Misc
************************************************************************************/

.sessionTimeoutModal .sessionCountdown {
    color: var(--text-color);
}
/*.loading-container {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    margin-top: 3rem;
} 

.loading-container {
    display: block;
    margin-left: 10px;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    /* margin-top: 3rem; *
    top: 25%;
    position: absolute;
    background-color: red;
    height: 20rem;
    width: 20rem;
    border-radius: var(--radius);
    align-content: center;
    left: 25%;
} */

/*#policyTemplate optgroup {
    color: blue;
}

optgroup {
    font-weight: bold;
    background-color: var(--font-color);
    color: var(--text-color);
} */

optgroup {
    cursor: pointer;
}

.mb-3 {
    font-family: var(--main-font)
}

.is-active {
    font-weight: var(--main-font-weight);
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-primary);
    font-weight: var(--main-font-weight);
    /*line-height: 1.1;*
    color: var(--text-color); */
    font-size: 20px;
}

#loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-icon {
    width: 50px;
    height: 50px;
    background-image: url('../img/br-icon.png');
    background-size: cover;
    /* animation: spin 1s linear infinite;
    animation: pulse 1s infinite; */
    animation: boom 1s infinite;
}

#loader {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* background-color: rgba(0, 0, 0, 0.8); */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinning {
    width: 50px;
    height: 50px;
    background-image: url('../img/br-icon.png');
    background-size: cover;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

@keyframes boom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}


#typewriter-text {
    white-space: pre-wrap;
    overflow: hidden;
    /* border-right: 1px solid #fff; */
    font-size: 50px;
    color: var(--main-color-hover);
    font-family: 'Anton', sans-serif; ;
    max-width: 640px;
    /* margin: auto; */
    /* height: 100%; */
    /* align-content: center; */
    /* display: block; */
    /* left: 80px; */
    /* position: relative; */
    top: 80px;
    /* text-align: center; */
    height: 65px;
}

/* Optional: red/green outlines for quick visual cue */
#antibot.valid-answer { border: 1px solid #0a0; }
#antibot.invalid-answer { border: 1px solid #a00; }



.hidden {
  display: none;
}












/*******************************************************************************
    # Subscribe Modal Section
*******************************************************************************/

/* Modal backdrop */
.subscribe-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
} 

/* Modal content */
/*.modal {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);




    top: 50%;
    left: 50%;
    z-index: 10001;
    position: fixed;
    transform: translate(-50%, -50%);
    transition: visibility 200ms ease-out;
    visibility: hidden;
} */

.subscribe-modal {
    /* background: url(assets/img/bg_img.png) no-repeat center center; */
    background: url(../../assets/img/bg_img_2.png) no-repeat center center;
    background-size: cover;
    /* background: #fff; */
    padding: 4rem 0rem;
    border-radius: var(--radius);
    /*max-width: 400px;
    width: 90%; */
    width: 600px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    color: #000;
    position: relative;
    /* height: 35%; */
    height: auto;
}

/*.modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark transparent layer *
    border-radius: 10px;
    z-index: 0;
} */

.subscribe-modal * {
    position: relative;
    z-index: 1;
}

.subscribe-modal h2 {
    margin-top: 0;
    font-size: 3rem;
    color: #420587;
    font-family: rubik;
}

.subscribe-modal p {
    /* margin: 1rem 0; */
    font-size: 1rem;
    color: #420587;
    margin-top: 35px;
}

.subscribe-modal input[type="email"] {
    padding: 10px;
    width: 80%;
    margin: 1rem 0;
    border: 1px solid #ccc;
    border-radius: var(--radius);
}

/*.modal button {
    background-color: #420587;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 10px;
}

.modal button:hover {
    background-color: #6f42c1;
} */

.subscribe-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.subscribe-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscribe-bottom {
    /* margin: 50px 0; */
    display: flex;
    padding: 0 100px;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.subscribe-buttons {
    width: 100%;
    position: relative;
    margin-top: 35px;
}

.subscribe-button-demo {
    color: #fff;
    background-color: #420587;
    display: flex;
    /* width: 100%; */
    cursor: pointer;
    display: flex;
    text-decoration: none;
    justify-content: center;
    padding: 1rem;
    font-family: var(--main-font);
    font-weight: var(--main-font-weight);
    border-radius: var(--radius);    
    font-size: 18px;
}

.subscribe-button-dismiss {
    color: #9b9a9a;
    background-color: transparent;
    display: flex;
    width: 100%;
    cursor: pointer;
    display: flex;
    text-decoration: none;
    justify-content: center;
    /* padding: 1rem; */
    border: none;
    font-family: rubik;
    font-weight: var(--main-font-weight);
    font-size: 18px;
}

.subscribe-button-dismiss:hover {
    color: #000;
    transition: transform 0.3s ease-in-out;
} 
















/****************************************************************
# Buttons
****************************************************************/

.login-btn {
    /*background-color: var(--font-color); */
    display: block;
    width: auto;
    /* margin-top: 1rem; */
    border-radius: var(--radius);
    padding: 1rem 1rem;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--font-color);
    cursor: pointer;
    text-align: center;
    /* border: 1px solid var(--font-color); */
    text-decoration: none;
    font-weight: var(--main-font-weight);
    text-transform: uppercase;
}


.login-btn a {    
    color: var(--font-color);
    text-decoration: none;
    font-weight: var(--main-font-weight);
    text-transform: uppercase;
}

.login-btn:hover {
    /*background-color: var(--font-color); */
    display: block;
    width: auto;
    /* margin-top: 1rem; */
    border-radius: var(--radius);
    padding: 1rem 1rem;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--font-color);
    cursor: pointer;
    text-align: center;
    /* border: 1px solid var(--font-color); */
    text-decoration: none;
    font-weight: var(--main-font-weight);
    text-transform: uppercase;
}

.logout-btn {
    width: 100%;
    border-radius: var(--radius);
    display: block;
    margin-top: 1rem;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    text-transform: capitalize;
    color: var(--text-color);
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--font-color);
}

.logout-btn:hover {
    background-color: var(--font-color);
    color: var(--text-color);
}

.flex-btn .sign-up-btn {
    /*background-color: var(--font-color); */
    display: block;
    width: auto;
    /* margin-top: 1rem; */
    border-radius: var(--radius);
    padding: 1rem 1rem;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--font-color);
    cursor: pointer;
    text-align: center;
    /* border: 1px solid var(--font-color); */
    text-decoration: none;
    font-weight: var(--main-font-weight);
    text-transform: uppercase;
}

.flex-btn .sign-up-btn:hover {
    /*background-color: var(--font-color); */
    display: block;
    width: auto;
    /* margin-top: 1rem; */
    border-radius: var(--radius);
    padding: 1rem 1rem;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--font-color);
    cursor: pointer;
    text-align: center;
    /* border: 1px solid var(--font-color); */
    text-decoration: none;
    font-weight: var(--main-font-weight);
    text-transform: uppercase;
}

.separator {
    font-style: normal;
    font-weight: var(--main-font-weight);;
    font-size: 14px;
    line-height: 150%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #686868;
    color: rgba(0, 0, 0, .35);
    margin: 15px 0 10px 0;
}

.separator::after, .separator::before {
    content: '';
    flex: 1;
    border: 1px solid #d8d8d8;
}





#demoForm option {
    color: var(--font-color);
}

#demoSuccessMessage p,
#demoSuccessBody {
    color: var(--font-color);
    font-size: 16px;
    margin-bottom: 1rem;
}

#demoSuccessMessage p strong {
    color: var(--font-color);
    font-size: 16px;
}



/* Full-page overlay */
.loading-gif-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #21212173; /* Slightly transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Ensure it appears above other elements */
}

/* Loading container */
.loading-container {
    position: relative; /* For absolute positioning of cancel button */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center the loading GIF */
    align-items: center;
    background-color: #ffffff;
    height: 35rem;
    width: 30rem;
    border-radius: var(--radius);
    padding: 1rem;
}


/* Cancel button */
.cancel-button {
    position: absolute; /* Stick to the bottom of the container */
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    padding: 0.5rem 1rem;
    background-color: var(--font-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    /*font-size: 1rem;*/
    font-size: 15px;
}

.cancel-button:hover {
    background-color: var(--main-color-hover);
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Apply the spinning animation to the loading GIF *
.loading-container img {
    animation: spin 2s linear infinite;  /* Spins the GIF *
} */

.content #toolbar {
    align-items: center;
    background-color: var(--viewer-pdf-toolbar-background-color);
    color: #fff;
    display: flex;
    height: var(--viewer-pdf-toolbar-height);
    padding: 0 16px;
    display: none;
}

#successModal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--font-color);
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    /* width: 90%; */
    /* max-width: 400px; */
    padding: 40px;
    font-family: var(--main-font);
    border: 1px solid #fff;
}

/* Success Modal Content */
.successModalContent {
    text-align: center;
}

/* Success Message */
.successModalContent p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: bold;
}

/* Button Styling */
#successModal button {
    background-color: #fff;
    color: var(--font-color);
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Button Hover Effects */
#successModal button:hover {
    background-color: var(--font-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    transform: scale(1.05); /* Subtle pop effect */
}

.scroll-to-top {
    display: none;
    position: fixed;
    bottom: -30px;
    right: 20px;
    cursor: pointer;
    font-size: 1rem;
    color: #000;
    margin-bottom: 60px;
    z-index: 10;
    background-color: transparent;
}

.scroll-to-top:hover {
    background-color: transparent;
}

.scroll-to-top .fa-angle-up {
    background-color: var(--text-color);
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--font-color);
    color: var(--font-color);
    width: 3rem;
}










/*************************************************************************************
# Log In
*************************************************************************************/


.login-container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    overflow: hidden;
    justify-content: center;
}

.login-image {
    width: 80%;
    background: url('../../assets/img/log-in.png') no-repeat center center;
    background-size: cover;
}

.login-form {
    width: 50%;
    padding: 40px;
    min-height: 100vh;
    display: flex;
    /* display: block; */
    align-items: center;
    justify-content: center;
    /*background: var(--text2-color)*/
}

.login-form h2 {
    margin-bottom: 20px;
    font-weight: bold;
    color: #333;
    text-align-last: center;
}

.login-form .form-control {
    border-radius: var(--radius);
}

.login-form .btn-primary {
    border-radius: var(--radius);
    width: 100%;
    background-color: #003166;
    border-color: #003166;
    font-weight: bold;
}

.login-form .btn-primary:hover {
    background-color: #002244;
    border-color: #002244;
}

.login-form .alert {
    border-radius: var(--radius);
}

.log-in-form {
    padding: 2rem;
    text-align: center;
    border-radius: var(--radius);
    /* width: 50rem; */
    border: var(--border);
    /* background-color: #f3f3f3; */
    color: var(--text2-color);
    width: 462px;
    padding: 48px 48px 60px 48px;
    border: 1px solid #e3e3e3;
    box-shadow: 0px 4px 8px rgb(0 0 0 / 28%);
    font-size: 14px;
    background-color: white;
}

.log-in-logo {
    text-align: left !important;
    font-size: 3rem;
    color: var(--font-color);
    margin-bottom: 2rem;
    text-align-last: center;
}

.log-in-logo img {
    width: 50%;
}

.log-in-header {
    line-height: 1.5;
    display: block;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.log-in-login {
    font-style: normal;
    /*font-weight: bold;*/
    font-size: 24px;
    line-height: 125%;
    color: var(--font-color);
    font-family: var(--main-font);
}

.log-in-input {
    margin: 3rem 0rem;
}

.log-in-form a {
    text-decoration: none;
    color: var(--font-color);
}

.forget-pass {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.forget-pass a {
    text-decoration: none;
    color: var(--font-color);
}



.highlight {
    background-color: yellow;
    color: red;
}

.highlighted {
    position: relative;
    cursor: pointer;  /* Indicate clickable/hoverable text */
}

.highlighted::after {
    content: attr(data-comment);  /* Display the comment text */
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: pre-wrap;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: var(--radius);
    display: none;  /* Hide by default */
    font-size: 14px;
    width: max-content;
    max-width: 200px;
    text-align: center;
    z-index: 1000;
}

.highlighted:hover::after {
    display: block;  /* Show on hover */
}

/* Example CSS-based tooltip using a separate attribute */
.highlighted[data-agg-tooltip] { position: relative; }
.highlighted[data-agg-tooltip]:hover::after {
  content: attr(data-agg-tooltip);
  position: absolute;
  left: 0; top: 100%;
  white-space: pre-wrap;
  background: #111; color: #fff;
  padding: .5rem .6rem; 
  border-radius: var(--radius);
  z-index: 9999; max-width: 28rem;
  transform: translateY(.25rem);
}


.forgot-pass {
    width: 100%;
    justify-content: space-between;
    display: flex;
    padding: 1rem 1rem;
}

.forget-pass a {
    text-decoration: none;
}



.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.overlay,
#twofa-modal {
  display: none;
}


        /* Modal container centered above the overlay */
#twofa-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20; /* above overlay */
    background: white;
    padding: 2rem;
    border-radius: var(--radius);
    width: 320px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-align: center;
    /*display: < ?= $show_2fa_modal ? 'block' : 'none' ?>;*/
}

/* Input and button styling (same as before) */
#twofa-modal input#twofa-token {
    width: 100%;
    padding: 0.5rem;
    margin: 1rem 0;
    font-size: 1.1rem;
    border: 1px solid #ccc;
    border-radius: var(--radius);
}

#twofa-modal button#submit-2fa {
    background-color: #6f42c1;
    color: white;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

#twofa-modal button#submit-2fa:hover {
    background-color: #5931a9;
}

#twofa-error {
    margin-top: 0.5rem;
    color: #d9534f;
    font-weight: var(--main-font-weight);;
    font-size: 0.9rem;
}




























/************************************************************************************
# Main Menu
************************************************************************************/


.header{
    position: sticky;
    top:0; left:0; right:0;
    background-color: var(--text-color);
    box-shadow: var(--box-shadow);
    z-index: 1000;
    border-bottom: 0.5px solid #9f9696;
}
 
.header .flex{
    display: block;
    align-items: center;
    justify-content: space-between;
    position: relative;
    /*padding: 1rem 2rem;
    max-width: 1200px; */
}
 
.header .flex .logo{
    font-size: 2.5rem;
    color:var(--black);
}
 
.header .flex .logo span{
    color:var(--font-color);
}
 
.header .flex .navbar a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--main-font-weight);;
    display: block;
    transition: all .50s ease;
    width: 12rem;
}

.header .flex .navbar a::before {
    content: attr(data-icon);
    position: absolute;
    top: -100%;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    color: var(--text-color);
    font-family: FontAwesome;
}

.header .flex .navbar a:hover::before {
    top: -100%;
    transform: translateY(100%); /* Move the pseudo-element into view */
}

.header .flex .navbar .fas {
    color: var(--font-color);
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition for transform and color */
    top: -100%;
}

.header .flex .navbar a:hover .fas {
    top: 100%;
    transform: translateY(100%); /* Move the main icon down */
    color: transparent; /* Make the main icon invisible */
}



/* Add data-icon attributes to your links */
.header .flex .navbar a[data-icon="&#xf015;"] i::before { content: "\f015"; }
.header .flex .navbar a[data-icon="&#xf09e;"] i::before { content: "\f09e"; }
.header .flex .navbar a[data-icon="&#xf001;"] i::before { content: "\f001"; }
.header .flex .navbar a[data-icon="&#xf025;"] i::before { content: "\f025"; }
.header .flex .navbar a[data-icon="&#xf0c9;"] i::before { content: "\f0c9"; }
.header .flex .navbar a[data-icon="&#xf781;"] i::before { content: "\f781"; }

.header .flex .icons > *{
    margin-left: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color:var(--text-color);
    display: flex;
}
 
.header .flex .icons > *:hover{
    color:var(--font-color);
}
 
.header .flex .icons a span{
    font-size: 1.2rem;
    vertical-align:super;
}
 
.header .flex .profile.active {
    display: inline-block;
    background-color: var(--main-color);
    border: 1px solid white;
}

.header .flex .profile.active a:hover {
    background-color: var(--main-color-hover);
    color: var(--text-color);
    width:100%;
}

.header .flex .profile {
    position: absolute;
    top: 33%;
    right: 2rem;
    background-color: var(--text-color);
    border-radius: var(--radius);
    box-shadow: var(--box-shadow);
    border: var(--border);
    /* padding: 2rem; */
    width: 15rem;
    padding-bottom: 0.5rem;
    display: none;
    animation: fadeIn .2s linear;
    z-index: 52;
}

.header .flex .profile p {
    /* text-align: center; */
    color: var(--text-color);
    /* font-size: 1.5rem; */
    margin-bottom: 0rem;
    font-style: italic;
    color: #a9a9a9;
}

.header .flex .profile .fas {
    color: var(--text-color);
}

.profile-top {
    color: var(--text-color);
    padding: 10px 2rem; 
    border-bottom: 1px solid #5a56a3;
    font-size: 16px;
    width: max-content;
    display: flex;
    width: 100%;
}

.profile-top .user-name {
  display: inline-block;        /* needed for width to work */
  max-width: 180px;             /* adjust to the width of your design */
  white-space: nowrap;          /* keep it on one line */
  overflow: hidden;             /* hide overflowed text */
  text-overflow: ellipsis;      /* show the … */
  vertical-align: middle;
  color: var(--text-color);
}


.drp-btn {
    width: 100%;
    display: flex;
    padding: 10px 0px;
    /* font-family: 'Inter', sans-serif; */
    padding: 1rem 2rem;
    align-items: center;
    font-size: 15px;
    color: white;
    text-decoration: none;
    font-family: var(--main-font);
}

.drp-btn i {
    margin-right: 8px;
}


.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--text-color);
    padding: 5px 20px;
    color: white;
    height: 45px;
    border-bottom: 1px solid #68319A;
}

 
#menu-btn{
    display: none;
}

.logo{
    display: flex;
    align-items: center;
    background-image: url(../img/purplewasp_logo.png);
    width: 20%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}
 
.logo i{
    color: var(--font-color);
    font-size: 28px;
    margin-right: 3px;
}
 
.logo span{
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: var(--main-font-weight);;
}
 
.navbar{
    display: flex;    
}

.navbar a{
    color: var(--text2-color);    
    font-size: 0.8rem;
    font-weight: var(--main-font-weight);
    transition: all .50s ease;
}
 
.navbar a:hover{
    color: var(--font-color);
}
 
.navbar a.active{
    color: var(--font-color);
}

.icons {
    display: flex;
    align-items: center;
}

.icons .notification-icon {
    position: relative;
    /*margin-right: 20px; /* Space between bell icon and other buttons */
}

.icons .notification-icon i {
    font-size: 18px;
    cursor: pointer;
}

.icons .notification-icon .fas {
    color: var(--main-color);
}
 
.main{
    display: flex;
    align-items: center;
}
 
.main a{
    margin-right: 25px;
    margin-left: 10px;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: var(--main-font-weight);
    transition: all .50s ease;
}
 
.main a:hover{
    color: var(--font-color);    
}
 
.user{
    display: flex;
    align-items: center;
}
 
.user i{
    color: var(--font-color);
    font-size: 28px;
    margin-right: 7px;
}
 
#menu-icon{
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}
 
.login-logout a {
    background-color: #fff;
    color: #333;
    padding: 5px 10px;
    border-radius: var(--radius);
    text-decoration: none;
}
  
.fa-bell {
    font-size: 16px;
}

/*.notification-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 9px;
} */

.notification-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    width: 200px;
    background: #141414;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    padding: 10px;
    z-index: 100;
    border-radius: var(--radius);
}

.notification-dropdown.show {
    display: block;
}

.notification-item {
    margin-bottom: 10px;
}

.notification-item a {
    text-decoration: none;
    color: var(--font-color);
    font-weight: bold;
}

.notification-item a:hover {
    text-decoration: underline;
}

.header .flex .navbar .sign-up {
    display: none;
}

#user-btn {
    display: flex;
    align-items: center;
}

#user-btn img {
    height: 35px;
    border-radius: 50%;
    align-items: center;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    display: flex;
    z-index: 99;
}

.profile-initials {
    width: 40px;
    height: 40px;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    /* z-index: 1; */
}

#user-btn .fa-chevron-down {
    border: 3px solid var(--main-color);
    border-radius: 50%;
    color: white;
    padding: 4px;
    left: -9px;
    position: relative;
    background-color: var(--main-color);
    width: 2rem;
}

.fa-chevron-down:before {
    content: "\f078";
    /* align-items: center; */
    /* border: 0.5px solid var(--font-color); */
    border-radius: 75%;
    /* display: flex; */
    /* background-color: var(--font-color); */
    /* padding: 4px; */
    /* left: -18%; */
    position: relative;
    /* font-size: 13px;*/
}

.icons .cm360-btn {
    background-color: var(--main-color); /* Button background */
    color: white;
    padding: 8px 15px;
    border-radius: var(--radius);
    text-decoration: none;
    margin-left: 10px;
    display: inline-block;
}

.icons .cm360-btn:hover {
    background-color: transparent; /* Lighter blue on hover */
    color: var(--main-color);
    padding: 8px 15px;
    border-radius: var(--radius);
    text-decoration: none;
    margin-left: 10px;
    display: inline-block;
    width: max-content;
    border: 1px solid var(--font-color);
}


.header .topbar .mobilemenu {
    display: contents;
    width: 10rem;
    color: var(--font-color);
    font-size: 1.5rem;
}


.header .topbar .mobilemenu .fa-bars{
    display: contents;
    width: 10rem;
    color: var(--main-color);
    font-size: 1.5rem;
    display: none;
}










/****************
# Horizontal Menu (fixed)
****************/

/* Make the bar the positioning context for full-width dropdowns */
.horizontal-menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-color);
  /*padding: 10px 0;*/
  min-height: 45px;              /* avoid clipping with fixed height */
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  font-family: 'Inter', sans-serif;
  z-index: 50;                   /* sit above page content */
}

/* Menu items */
.horizontal-menu .menu-item {
  position: relative;
  /*position: static;*/
  margin: 0 15px;
  list-style: none;
  /* height: 40px;        <-- avoid fixed height; let content size it */
}

/* Top-level links */
/* Top-level links */
.horizontal-menu .menu-item > a{
  position: relative;
  color: var(--font-color);
  text-decoration: none;
  font-size: 14px;
  padding: 10px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 215px;
  line-height: 1;

  /* reserve underline space so layout never jumps */
  border-bottom: 3px solid transparent;
}

/* animated bottom border */
.horizontal-menu .menu-item > a::after{
  content:"";
  position:absolute;
  left:10px;          /* aligns with padding (so it doesn't touch edges) */
  right:10px;
  bottom:0;
  height:3px;
  background: var(--main-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.horizontal-menu .menu-item > a:hover::after,
.horizontal-menu .menu-item > a:focus-visible::after{
  transform: scaleX(1);
}

/* keep your hover colors (optional) */
.horizontal-menu .menu-item > a:hover{
  /*background-color: var(--font-color);*/
  color: var(--font-color);
}

/* optional: focus ring */
.horizontal-menu .menu-item > a:focus-visible{
  outline: 3px solid rgba(90,34,166,.35);
  outline-offset: 2px;
}


/* Arrow icon: support .fas/.fa-solid */
.horizontal-menu .menu-item > a .fa-chevron-down {
  margin-left: 5px;
  transition: transform .3s ease-in-out;
}

.horizontal-menu .menu-item:hover > a .fa-chevron-down,
.horizontal-menu .menu-item:focus-within > a .fa-chevron-down {
  transform: rotate(180deg);
}

/* Mega container spans full width below the bar *
.horizontal-menu .outer-sub {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  display: none;
  justify-content: center;
  width: 100%;
  margin: 0;
  height: auto;
  z-index: 60;
}  */


.horizontal-menu .outer-sub {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 60;
} 


/* Show the mega dropdown on hover and keyboard focus */
.horizontal-menu .menu-item:hover .outer-sub,
.horizontal-menu .menu-item:focus-within .outer-sub {
  display: flex;
} 

.horizontal-menu .menu-item .submenu {
    display: none;
    /*position: absolute;*/
    position: relative;
    background-color: #ffffff;
    /*padding: 10px;*/
    list-style: none;
    margin-top: 0px;
    /*width: 15rem;*/
    color: var(--font-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 277px;
}

.horizontal-menu .menu-item:hover .submenu {
    display: flex;
    /*transform: translateX(-25%) translateY(0%);*/
    transition: all 0.3s;    
    border-radius: 0.5rem;
    box-shadow: 0 1.875rem 5rem 0 rgba(0, 0, 0, 0.35);
    max-width: 52rem;
    width: max-content;
}

.horizontal-menu .submenu a {
    color: var(--font-color);
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    font-size: 16px;
}

.horizontal-menu .submenu a:hover {
  /*background-color: var(--font-color);
  border-bottom: 3px solid var(--font-color); */
  color: var(--font-color);
}


.submenu .submenu-left {
    padding: 1rem;
    width: 100%;
}

.submenu .submenu-left .submenu-left-group {
    /*min-width: 13.125rem;
    max-width: 19.6875rem;*/
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    padding: 0;
    margin-left: 0.25rem;
}

.submenu .submenu-left .submenu-left-group .submenu-left-group-contents {
    display: block;
    width: 100%;    
    margin: 1rem 0rem;
}

.submenu .submenu-left .submenu-left-group .submenu-left-group-contents:hover {
    border-radius: 0.375rem;
    background: #f5f6f8;
}

.submenu .submenu-left .submenu-left-group .submenu-left-group-contents a {
    display: flex;
    text-decoration: none;
}

.submenu .submenu-left .submenu-left-group .submenu-left-group-contents p {
    color: #767676;    
    line-height: 1rem;
    margin-bottom: 0rem;
    font-size: 14px;
}

.submenu .submenu-left .submenu-left-group .submenu-left-group-contents .menu-icon {
    align-self: center;
    /* width: 4rem; */
    padding: 0rem 1rem;
}

.submenu .submenu-left .submenu-left-group .submenu-left-group-contents .menu-icon i {
    font-size: 25px;
}

.submenu .submenu-right {
    background-color: #f5f6f8;
    border-radius: 0.5rem;
}

.submenu-right-contents {
    padding: 2rem;
}

.submenu-right-contents-top img {
    border-radius: var(--radius);
}

.submenu-right-contents-bottom {
    margin-top: 2rem;
}

.submenu-right-contents-bottom h6 {
    color: var(--font-color);
    font-size: 16px;
}

.submenu-right-contents-bottom button {
    font-weight: var(--main-font-weight);;
    font-size: 12px;
    color: var(--font-color);
    background-color: transparent;
    padding: 0rem;
}




/* Optional icon nudge on hover (simplified) */
.menu-item-icon {
  font-size: 20px;
  transform: translateY(0);
  transition: transform .3s ease;
}
.menu-item:hover .menu-item-icon,
.menu-item:focus-within .menu-item-icon {
  transform: translateY(5px);
}

/* Menu bar container for items */
.menu-b {
  display: flex;
}

/* Hamburger icon inside the bar */
#menu-btn {
  color: var(--main-color);
  font-size: 20px;
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Small screens: stack or hide mega by default */
@media (max-width: 900px) {
  .horizontal-menu {
    justify-content: flex-start;
    overflow-x: auto;
  }
  .horizontal-menu .menu-item > a {
    max-width: none;
  }
  .horizontal-menu .outer-sub {
    position: static;
    display: none; /* keep hidden; use sidebar/mobile menu instead */
  }
}







/* Sidebar positioning */
.sidebar-menu {
  position: fixed;
  left: -250px;
  /*top: 0;*/
  width: 250px;
  height: 100%;
  background: var(--main-color);
  padding-top: 50px;
  transition: 0.3s ease-in-out;
  z-index: 1000; /* base above overlay (which is 999) */
}
.sidebar-menu.active { left: 0; }

/* Each item acts as a positioning context for its submenu */
.side-menu-item {
  position: relative;               /* <-- important */
  padding: 2rem;
  font-size: 16px;
  color: var(--text2-color);
  text-decoration: none;
  font-family: var(--main-font);
}

.side-menu-item:hover {
    background-color: var(--main-color-hover);
}

/* Links */
.side-menu-item > a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;                        /* avoid double padding */
  color: var(--text2-color);
  text-decoration: none;
  font-family: var(--main-font);
}

/* Submenu base (hidden) */
.sidebar-menu .submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 220px;
  background: var(--main-color);
  box-shadow: 2px 2px 6px rgba(0,0,0,.1);
  padding: 10px 0;
  display: none;
  z-index: 1001;
}


@media screen and (max-width: 767px){
    .sidebar-menu .submenu {
        position: relative;
        top: 0;
        left: 0;
        min-width: 220px;
        background: transparent;
        box-shadow: none;
        padding: 10px 0;
        display: none;
        z-index: 1001;
    }    
}

/* Keep submenu visible when hovering the parent OR the submenu itself */
.side-menu-item:hover > .submenu,
.side-menu-item:has(.submenu:hover) > .submenu {
  display: block;
}

/* Optional: also allow keyboard focus to keep it open */
.side-menu-item:focus-within > .submenu {
  display: block;
}

/* Remove the previous override that killed focus-within */
 /* DELETE this if it exists:
.sidebar-menu .side-menu-item:focus-within > .submenu {
  display: none !important;
} */

/* Submenu links */
.sidebar-menu .submenu a {
  display: block;
  padding: .75rem 1rem;
  font-size: 16px;
  color: var(--text2-color);
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-menu .submenu a:hover {
  background-color: var(--main-color-hover);
  color: var(--text-color);
}

/* Overlay stays below submenu due to z-indexes */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  z-index: 999;
}
.menu-overlay.active { display: block; }

/* Optional: remove the transform that created a hover gap */
 /* DELETE this if it exists:
transform: translateX(0px) translateY(-50px);
*/

.side-menu-item .fa-chevron-right {
    float: right;
    cursor: pointer;
    color: var(--text-color);
}

.side-menu-item .fas,
.side-menu-item .fa-money-bill-wave {
    color: var(--text-color);
}

#close-sidebar {
    color: white;
    right: 2rem;
    position: absolute;
    font-size: 20px;
    top: 1rem;
    cursor: pointer;
}




#modalCommentText p {
    margin-bottom: 10px;
}

#modalCommentText hr {
    border: 0;
    border-top: 1px solid #ccc;
}

















/*************************************************************************************************
# Main Container
*************************************************************************************************

.top {
    height: 0rem;
} */

.main-container {
    /*max-width: 1300px;*/
    width: 1300px;
    margin: auto;
    /*overflow-y: auto;*/
    height: auto;
    transition: max-height 0.3s ease;
    margin-top: 2rem;
    font-size: 14px;
    min-height: 50rem;
    margin-bottom: 5rem;
}

.main-container-assets {
    /*max-width: 1410px;*/
    margin: auto;
    /*overflow-y: auto;*/
    height: auto;
    transition: max-height 0.3s ease;
    margin-top: 2rem;
    font-size: 14px;
    min-height: 50rem;
}

.main-container-content {
    display: flex;
}

.container-inner {
    /*max-width: 1170px;*/
    width: 100%;
}


.main-container .container .con-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ddd;
    border-radius: 5px 5px 0px 0px;
    position: relative;
    /*z-index: 1;*/
}

.main-container .container .con-header .create-buttons {
    display: flex;
    gap: 20px;
}

.main-container .container .con-header h2 {
    color: var(--font-color);
    font-style: italic;
}

/*.main-container .container .con-header .fas {
    color: var(--text-color);
} */



.content-top-buttons {
    display: flex;
    justify-content: space-between; /* pushes left/right */
    align-items: flex-end;          /* aligns button with bottom of label */
    margin-bottom: 6px;
}

.content-top-buttons .form-label {
    margin-bottom: 0;
}

.ai-btn-wrap {
    display: flex;
    align-items: center;
}



/************************* Side Menu ******************************/
/* Sidebar shell *
.side-menu {
    width: 60px;                   /* collapsed *
    background-color: var(--text-color);
    position: fixed;
    left: 0;
    z-index: 3;
    border-right: 1px solid var(--font-color);
    height: 100%;
    box-shadow: 7px 10px 12px rgba(0, 0, 0, 0.2);
    transition: width 0.3s ease-in-out;
    overflow: hidden;            /* hide label when collapsed *
}

/* Expand on hover *
.side-menu:hover {
    width: 240px;
}

/* Each row *
.side-menu-inner {
    display: flex;
    align-items: center;
    height: 4rem;
    padding: 0 20px;
    border-bottom: 1px solid gray;
}

/* Icon *
.side-menu .fas {
    color: var(--font-color);
    font-size: 18px;
    min-width: 24px;               /* prevents jitter when expanding *
    transition: transform 0.2s ease-in-out;
}

/* Optional icon hover lift *
.side-menu a:hover .fas {
    transform: translateY(-3px);
}

/* Label: hidden by opacity while collapsed *
.menu-label {
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
    /* Uncomment if you want branded text color instead of white *
    color: var(--font-color);
    display: none;
}

/* Reveal label only when the rail is expanded *
.side-menu:hover .menu-label {
    opacity: 1;
    display: block;
}

/* Kill the old tooltip if still present anywhere *
.side-menu a::after,
.side-menu a:hover::after { content: none !important; }



/* Only target the hover menu buttons (don’t affect other buttons site-wide) *
  .side-menu-inner .menu-hover{
    background: transparent;
    border: 0;
    width: 100%;
    padding: 10px 0;          /* match your menu spacing *
    cursor: pointer;
    text-align: left;

    /* IMPORTANT: enables caret alignment + rotation behaving properly *
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Let the label take remaining space so caret can sit on the far right *
  .side-menu-inner .menu-hover .menu-label{
    flex: 1;
    min-width: 0;
  }

  /* default closed *
  .side-menu-group .sidemenu-submenu{
    display: none;
  }

  /* open on hover *
  .side-menu-group:hover .sidemenu-submenu{
    display: block;
  }

  /* open on keyboard focus *
  .side-menu-group:focus-within .sidemenu-submenu{
    display: block;
  }

  .side-menu-group .caret {
    display: none;
}

  /* caret behaviour *
  .side-menu-group .caret{
    flex: 0 0 auto;
    margin-left: auto;
    transition: transform .15s ease;
    transform: rotate(0deg);
  }

  .side-menu-group:hover .caret,
  .side-menu-group:focus-within .caret{
    display: block;
    transform: rotate(90deg);
  }

  
.side-menu-group { width: 100%; position: relative; }
/* Click-to-toggle *
.side-menu-group .sidemenu-submenu { display:none; }
.side-menu-group.is-open .sidemenu-submenu { display:block; }

.side-menu-group .caret { margin-left:auto; transition: transform .15s ease; }
.side-menu-group.is-open .caret { transform: rotate(90deg); }

.sidemenu-submenu-link.is-active { font-weight: var(--main-font-weight);; }

.sidemenu-submenu-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 8px;
  opacity: .92;
}

.sidemenu-submenu-link:hover{ opacity: 1; }
.sidemenu-submenu-link i{ font-size: 13px; opacity: .9; } */




/************************* Side Menu ******************************/
/* Sidebar shell */
.side-menu {
    width: 60px;                    /* collapsed */
    background-color: var(--text-color);
    position: fixed;
    left: 0;
    /*top: 0;*/
    z-index: 3;
    border-right: 1px solid var(--font-color);
    height: 100%;
    box-shadow: 7px 10px 12px rgba(0, 0, 0, 0.2);
    transition: width 0.3s ease-in-out;

    /* IMPORTANT: allow submenu to overflow */
    overflow: visible;
    min-height: 65vh;
}

/* Expand on hover */
.side-menu:hover {
    width: auto;
}

/* Each row */
.side-menu-inner {
  display: flex;
  align-items: center;
  height: 4rem;
  padding: 0 20px;
  border-bottom: 1px solid gray;
}

/* Links + button headers should fill row */
.side-menu-inner > div { width: 100%; }
.top-menu-contents {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Icon */
.side-menu .fas {
  color: var(--font-color);
  font-size: 18px;
  min-width: 24px;               /* prevents jitter when expanding */
  transition: transform 0.2s ease-in-out;
}

/* Optional icon hover lift */
.side-menu a:hover .fas {
  transform: translateY(-3px);
}

/* Label: hidden without display:none (prevents early pop-in) */
.menu-label {
  display: inline-block;         /* DO NOT use display:none */
  max-width: 0;                  /* collapsed: no space */
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;              /* clip label text only */
  color: var(--font-color);

  transition:
    max-width 0.3s ease-in-out,  /* matches sidebar expand timing */
    opacity 0.12s ease-in-out;
}

/* Reveal label only when the rail is expanded */
.side-menu:hover .menu-label {
  max-width: 220px;              /* enough for long labels */
  opacity: 1;
  transition-delay: 0s, 0.18s;   /* delay opacity until menu mostly open */
}

/* Kill the old tooltip if still present anywhere */
.side-menu a::after,
.side-menu a:hover::after { content: none !important; }

/********** Hover group header button **********/
.side-menu-inner .menu-hover {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 10px 0;               /* match your menu spacing */
  cursor: pointer;
  text-align: left;

  display: flex;
  align-items: center;
  gap: 10px;
}

/* Let label stretch so caret can sit far right */
.side-menu-inner .menu-hover .menu-label {
  flex: 1;
  min-width: 0;
}

/********** Submenu (floats out, not clipped) **********/
.side-menu-group {
  width: 100%;
  position: relative;
}

.side-menu-group .sidemenu-submenu {
  display: none;

  /* Float out to the right of the sidebar */
  position: absolute;
  left: 100%;
  top: 0;

  min-width: 220px;
  z-index: 9999;

  background: var(--text-color);
  border: 1px solid var(--font-color);
  box-shadow: 7px 10px 12px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  padding: 8px;
}

/* Show submenu only when sidebar expanded + group hovered/focused */
.side-menu:hover .side-menu-group:hover .sidemenu-submenu,
.side-menu:hover .side-menu-group:focus-within .sidemenu-submenu {
  display: block;
}

/********** Submenu links **********/
.sidemenu-submenu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 8px;
  opacity: 0.92;
}

.sidemenu-submenu-link:hover { opacity: 1; }
.sidemenu-submenu-link i { font-size: 13px; opacity: 0.9; }

/********** Caret behaviour **********/
.side-menu-group .caret {
  margin-left: auto;
  opacity: 0;                    /* hidden while collapsed */
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform: rotate(0deg);
}

/* show caret only when sidebar expanded */
.side-menu:hover .side-menu-group .caret {
  opacity: 1;
}

/* rotate caret when hovering/focusing a group (only when expanded) */
.side-menu:hover .side-menu-group:hover .caret,
.side-menu:hover .side-menu-group:focus-within .caret {
  transform: rotate(90deg);
}









/* The clickable area */
.top-menu-contents {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: white;                  /* label inherits this unless overridden */
    gap: 12px;                     /* space between icon and label */
}


.dashboard-top {
    margin: 0 auto;
    padding: 20px;
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* border-bottom: 1px solid #7a7a7a; */
    /* min-height: 9rem; */
    /* width: 100%; */
    box-shadow: 0px -2px 8px rgb(0 0 0 / 28%);
    /* background-color: var(--text-color);*/
    
}

.dashboard-org-info {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    min-height: 9rem;
    width: 100%;
    background-color: transparent;
    font-family: var(--font-primary);
    /*max-width: 1280px;*/
    max-width: 1190px;
    margin: auto;
    overflow-y: auto;
    height: auto;
    transition: max-height 0.3s ease;
}

.dasboard_org_info {
    max-width: 1280px;
    margin: auto;
    overflow-y: auto;
    height: auto;
    transition: max-height 0.3s ease;
    margin-top: 2rem;
}

.dashboard_logo {
    margin-right: 20px;
    overflow: hidden;
    display: inline-block;
    align-content: center;
}

.dashboard_logo img {
    max-width: 80px;
}

.dashboard-info {
    /* flex: 1; */
    /* display: flex; */
    flex-direction: column;
    align-content: center;
}

.dashboard-info h2 {
    font-size: 1.5rem;
    margin-bottom: 0rem;
}

.dashboard-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0rem;
}

.content .dashboard-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0rem;
}

.dashboard-info a {
    text-decoration: none;
    color: var(--font-color);
    font-family: 'Inter';
}

.text-center {
    text-align: center !important;
}

.menu-drp-btn {
    width: 100%;
    min-width: 13rem;
    padding: 1rem;
    background-color: transparent;
    border: none;    
    font-size: 14px;
    color: var(--font-color);
    font-family: var(--main-font);
}

.menu-drp-btn:hover {
    width: 100%;
    min-width: 1rem;
    padding: 1rem;
    background-color: var(--font-color);
    color: #fff;
    border: none;    
    font-size: 14px;
}




/********************************************************************************************
# Dashboard
********************************************************************************************/

.dashboard-container {
    margin-bottom: 1.5rem !important;
    width: 100%;
    /*padding: 30px;*/
}

.dashboard-items {
    font-family: var(--main-font);
    margin: 2rem 0rem;
}





.progress-container {
    text-align: center;
    display: inline-block;
    width: 200px;
    margin: 20px;
    position: relative;
}

.progress-container svg {
    transform: rotate(90deg);
} 

.progress-container circle {
    fill: none;
    stroke-width: 20;
    transition: stroke-dasharray 0.6s ease-in-out;
}

.bg {
    stroke: #e0e0e0;
}

.progress {
    stroke: #003166; /* Change this to modify progress bar color */
    stroke-linecap: round;
    stroke-dasharray: 0 565; /* Default 0 */
}

.percentage {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

/* Gauge Needle */
.needle {
    position: absolute;
    top: 17%;
    left: 50%;
    width: 10px;
    height: 90px;
    background: black;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform-origin: bottom center;
    transform: translate(-50%, 0) rotate(-180deg);
    transition: transform 0.6s ease-in-out;
    border-radius: 20px;
    z-index: 1;
    display: none;
}

.maturityLevel {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    color: #333;
}




.dashboard-card {
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;    
    /*border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: var(--bs-card-border-radius);*/
}

.dashboard-card-display {
    width: 32%;
    height: 8rem;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    box-shadow: 0px 4px 8px rgb(0 0 0 / 28%);
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: 2px;
    align-content: center;
    text-align: left;
    padding: 0rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.dashboard-card-display h4 {
    font-size: 1.5rem;
    text-align: center;
    margin: 1rem;
}

.dashboard-card-display h6 {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: var(--main-font-weight);;
    margin: 0;
}

.dashboard-card-display:hover {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 60%);
    transition: border-radius 300ms ease-in, background 300ms ease-in, box-shadow 300ms ease-in;
}

.dashboard-card-display a {
    text-decoration: none;
    /*color: var(--font-color);*/
}

.dashboard-card-display-quiz {
    width: 23%;
    height: 8rem;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    box-shadow: 0px 4px 8px rgb(0 0 0 / 28%);
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: 2px;
    align-content: center;
    text-align: left;
    padding: 0rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.dashboard-card-display-quiz h6 {
    font-size: 1rem;
}








.met-box-display .metric-box .dashboard-card-display {
    width: 48%;
    height: 8rem;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    box-shadow: 0px 4px 8px rgb(0 0 0 / 28%);
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: 2px;
    align-content: center;
    text-align: left;
    padding: 0rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.met-box-display .metric-box .dashboard-card-display h4 {
    font-size: 1.5rem;
    text-align: center;
    margin: 1rem;
}

.met-box-display .metric-box .dashboard-card-display h6 {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: var(--main-font-weight);;
}

.met-box-display .metric-box .dashboard-card-display:hover {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 60%);
    transition: border-radius 300ms ease-in, background 300ms ease-in, box-shadow 300ms ease-in;
}

.met-box-display .metric-box .dashboard-card-display a {
    text-decoration: none;
    color: var(--font-color);
}

.met-box-display .metric-box .dashboard-card-display-quiz {
    width: 23%;
    height: 8rem;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    box-shadow: 0px 4px 8px rgb(0 0 0 / 28%);
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: 2px;
    align-content: center;
    text-align: left;
    padding: 0rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
}


.card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
}

.card-title {
    font-weight: bold;
    font-size: 1.5rem;
    text-align: left;
    font-family: 'Montserrat';
}

.metric-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-box i {
    font-size: 2rem;
    color: #003166;
}

.metric-box h5 {
    font-size: 18px;
    /*margin: 0;*/
    line-height: 2rem;
}

.charts-container {
    display: flex;
    /*padding: 0px 30px;*/
    height: 350px;
    width: 100%;
    margin-bottom: 1.5rem !important;
}

.charts-canvas {
    display: block;
    box-sizing: border-box;
    height: 230px;
    width: 230px;
    justify-self: center;
}


.metric-box-charts {
    display: flex;
    align-items: center;
    /*width: 400px;
    height: 440px; */
    width: 100%;
    height: 100%;
    /*margin-right: 1rem;*/
}

.dashboard-card-chart {
    width: 100%;
    height: 100%;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    box-shadow: 0px 4px 8px rgb(0 0 0 / 28%);
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: 2px;
    align-content: center;
    text-align: left;
    padding: 0rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
}

.dashboard-card-chart h6 {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: var(--main-font-weight);;
}

.mt-3 {
    margin-top: 1.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.policy-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.policy-list-item:last-child {
    border-bottom: none;
}

.policy-list-item h6 {
    margin: 0;
    font-weight: bold;
}

.policy-list-item p {
    margin: 0;
    color: #888;
}

.btn-view {
    background-color: #003166;
    color: white;
    border-radius: 20px;
    padding: 5px 10px;
}

.btn-view:hover {
    background-color: #002244;
    color: white;
}





/* Basic table styling */
.policy-status-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.policy-status-table th, .policy-status-table td {
    padding: 12px 15px;
    text-align: left;
}

.policy-status-table th {
    background-color: var(--font-color);
    color: white;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

.policy-status-table td {
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

.policy-status-table tr:nth-child(even) td {
    background-color: #f2f2f2;
}

.policy-status-table tbody tr:hover {
    background-color: var(--main-color-hover);
    /*cursor: pointer;*/
}

/* Hover effect on specific cells */
.policy-status-table tbody tr:hover td:nth-child(1),
.policy-status-table tbody tr:hover td:nth-child(2), /* Read column */
.policy-status-table tbody tr:hover td:nth-child(3) { /* Quiz Status column */
    color: #fff; /* Change text color when hovering over these columns */
    background-color: var(--main-color-hover);
    font-style: italic;
}

/* Hover effect on specific cells */
.policy-status-table tbody tr:hover td { /* Quiz Status column */
    color: #fff; /* Change text color when hovering over these columns */
    background-color: var(--main-color-hover);
    font-style: italic;
}

/* Add a border and space around the table */
.policy-status-table {
    max-width: 100%;
    overflow-x: auto;
    /*max-height: 20rem;*/
}

.policy-status-table th:nth-child(2),
.policy-status-table th:nth-child(3) {
    text-align: center;
}

/* Styling for Yes/No and Quiz Status columns */
.policy-status-table td:nth-child(2),
.policy-status-table td:nth-child(3) {
    /*font-weight: bold;*/
    font-style: italic;
    padding: 6px 15px;
    text-align: center;
} 

/* Style for "Yes", "No", "Pending", "Passed", "Failed" states */
.policy-status-table td:nth-child(2):contains('Yes'),
.policy-status-table td:nth-child(3):contains('Passed') {
    color: green;
}

.policy-status-table td:nth-child(2):contains('No'),
.policy-status-table td:nth-child(3):contains('Failed') {
    color: red;
}

.policy-status-table td:nth-child(3):contains('Pending') {
    color: orange;
}





















/************************************************************************************
# Index Page
************************************************************************************/


.fade-slideshow {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.fade-slideshow img.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.fade-slideshow img.slide.active {
  opacity: 1;
  z-index: 1;
      display: block;
    /* height: 1984px; */
    position: relative;
}


.hero-sec {
        min-height: 34.38rem;
    }

    .hero-sec {
        padding: 30px 0;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }   

    .hero-sec.image-sec .row {
        align-items: center;
    }
    .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1* var(--bs-gutter-y));
        margin-right: calc(-.5* var(--bs-gutter-x));
        margin-left: calc(-.5* var(--bs-gutter-x));
    }

    @media (min-width: 992px) {
    .hero-sec .disc-col .hero-disc {
        margin-top: 0px !important;
        }
    }
    @media (max-width: 1400px) {
        .hero-sec .hero-disc {
            margin-top: 40px;
        }
    }

    @media (min-width: 1281px) {
        .hero-sec .hero-disc {
            padding-left: 0px;
        }
    }
    .hero-sec .hero-disc {
        max-width: 590px;
        margin-top: 60px;
        position: relative;
        z-index: 1;
        padding-left: 43px;
    }

    .hero-sec .hero-disc p {
        margin-top: 18px;
        font-size: 20px;
        line-height: 1.5;
        color: #231F20;
        max-width: 660px;
    }

    .hero-sec .hero-disc::before {
        content: "";
        position: absolute;
        left: -60px;
        top: 20px;
        width: 29px;
        max-height: 572px;
        height: 100%;
        background-image: url(../img/hero-shape.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .hero-sec .hero-disc h1, .hero-sec .hero-disc .h1 {
        font-size: 76px;
        line-height: 1;
        font-weight: var(--main-font-weight);
        color: var(--font-color);
        font-family: 'Anton';
        text-align: left;
    }

    .hero-sec .hero-disc .hero-cta {
        gap: 24px;
        display: flex;
        flex-wrap: wrap;
    }

    .hero-sec .hero-disc .hero-cta {
        margin-top: 24px;
    }

    @media (min-width: 992px) {
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
        }
    }

    @media (min-width: 992px) {
    .hero-sec.image-sec .hero-media {
        width: 100% !important;
        height: 100% !important;
        max-height: 715px !important;
        }
    }

    @media (max-width: 992px) {
        .hero-sec .row {
            position: relative;
        }

        .disc-col {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: 100%;
            align-content: center;
        }

        .media-col {
            position: relative;
            z-index: 1;
        }

        .hero-media img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .hero-sec .hero-disc {
            max-width: 590px;
            margin-top: 60px;
            position: relative;
            z-index: 1;
            padding-left: 20px;
        }

        .hero-sec .hero-disc h1, .hero-sec .hero-disc .h1 {
            font-size: 43px;
            line-height: 1;
            font-weight: bolder;
            color: var(--font-color);
            font-family: Inter;
            text-align: left;
        }

        .hero-sec .hero-disc p {
            margin-top: 0px;
            font-size: 20px;
            line-height: 1.5;
            color: #231F20;
            max-width: 460px;
            text-align: left;
        }
    }

    @media screen and (max-width: 767px){
        .hero-sec .hero-disc h1, .hero-sec .hero-disc .h1 {
            font-size: 60px;
            line-height: 1;
            font-weight: bolder;
            color: var(--font-color);
            font-family: Anton;
            /*text-align: center;*/
        }

        .pages-hero h1 {
            font-size: 46px;
            line-height: 1.1;
            margin: 0rem;
            font-weight: var(--main-font-weight);;
            letter-spacing: -.5px;
            color: var(--font-color);
        }

        #typewriter-text {
            font-size: 38px;
            color: var(--main-color-hover);
            font-family: Anton, sans-serif;
            max-width: 640px;
            top: 80px;
            height: 100%;
            white-space: pre-wrap;
            overflow: hidden;
            text-align: left;
        }
    }

    .hero-sec .hero-media {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        width: calc(100% + 79px);
        max-width: 814px;
        height: 715px;
    }

    .hero-sec .hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        background: none;
    }

    .hero-cta-button {
      display: inline-block;
      padding: 15px 30px;
      font-size: 18px;
      color: white;
      background-color: var(--font-color);
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      font-weight: bold;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      /* Apply animation */
      animation: pulse 2s infinite;
    }

    .hero-cta a {
      color: var(--text-color);
      text-decoration: none;
    }

    /* Pulse animation using keyframes */
    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      }
      50% {
        transform: scale(1.05);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      }
    }

    .hero-cta-button2 {
        width: auto;
        height: 60px;
        border: none;
        color: var(--font-color);
        border-radius: var(--radius);
        transition: ease-out 0.3s;
        font-size: 2rem;
        outline: none;
        border: 3px solid var(--font-color);
        position: relative;
        display: block;
        align-content: center;
        text-transform: uppercase;
        font-weight: var(--main-font-weight);
        padding: 0rem 2rem;
        background-color: var(--font-color);
    }

    .hero-cta-button2:hover {
        color: var(--font-color);
        cursor: pointer;
        z-index: 10;
    }

    .hero-cta-button2:before {
        transition: 0.5s all ease;
        position: absolute;
        top: 0;
        left: 50%;
        right: 50%;
        bottom: 0;
        opacity: 0;
        content: "";
        background-color: var(--text-color);
        /*border: 3px solid red;*/
    }

    .hero-cta-button2:hover:before {
        transition: 0.5s all ease;
        left: 0;
        right: 0;
        opacity: 1;
        z-index: -1;
    }


    .cta-bounce {
        display: inline-block;
        padding: 15px 30px;
        font-size: 18px;
        color: white;
        background-color: #4caf50;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-weight: bold;
        animation: bounce 1.5s infinite;
    }

    @keyframes bounce {
        0%, 100% {
        transform: translateY(0);
        }
        50% {
        transform: translateY(-10px);
        }
    }

    .cta-glow {
        display: inline-block;
        padding: 15px 30px;
        font-size: 18px;
        color: white;
        background-color: #6200ea;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-weight: bold;
        text-shadow: 0 0 5px white;
        animation: glow 2s infinite;
    }

    @keyframes glow {
        0%, 100% {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #6200ea, 0 0 30px #6200ea;
        }
        50% {
        box-shadow: 0 0 20px #ffffff, 0 0 30px #6200ea, 0 0 40px #6200ea;
        }
    }

    .cta-color-change {
        display: inline-block;
        padding: 15px 30px;
        font-size: 18px;
        color: white;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-weight: bold;
        background-color: #03a9f4;
        animation: colorChange 3s infinite;
    }

    @keyframes colorChange {
        0% {
        background-color: #03a9f4;
        }
        33% {
        background-color: #e91e63;
        }
        66% {
        background-color: #ffc107;
        }
        100% {
        background-color: #03a9f4;
        }
    }

    .cta-wiggle {
        display: inline-block;
        padding: 15px 30px;
        font-size: 18px;
        color: white;
        background-color: #ff9800;
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-weight: bold;
        animation: wiggle 1s infinite;
    }

    @keyframes wiggle {
        0%, 100% {
        transform: rotate(0);
        }
        25% {
        transform: rotate(3deg);
        }
        50% {
        transform: rotate(-3deg);
        }
        75% {
        transform: rotate(2deg);
        }
    }

    .cta-spin {
        display: inline-block;
        padding: 15px 30px;
        font-size: 18px;
        color: white;
        background-color: #009688;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-weight: bold;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% {
        transform: rotate(0deg);
        }
        100% {
        transform: rotate(360deg);
        }
    }

    .cta-border-expand {
        display: inline-block;
        padding: 15px 30px;
        font-size: 18px;
        color: white;
        background-color: #f44336;
        border: 2px solid transparent;
        border-radius: var(--radius);
        cursor: pointer;
        font-weight: bold;
        animation: borderExpand 2s infinite;
    }

    @keyframes borderExpand {
        0% {
        border-color: transparent;
        box-shadow: 0 0 0 rgba(255, 0, 0, 0.5);
        }
        50% {
        border-color: #f44336;
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
        }
        100% {
        border-color: transparent;
        box-shadow: 0 0 0 rgba(255, 0, 0, 0.5);
        }
    }



    .menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu li {
        padding: 10px 20px;
        cursor: pointer;
        margin: 10px 0;
        position: relative;
        display:flex;
    }

    .circle {
        width: 15px;
        height: 15px;
        background-color: #007bff;
        border-radius: 50%;
        position: absolute;
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translateY(-50%); */
    }

    .line {
        width: 25px;
        height: 25px;
        border: 2px solid red;
        border-radius: 50%;
        position: absolute;
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translateY(-50%); */
        /* transition: transform 0.3sease; */
        display: flex;
    }

    @keyframes beat {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
        }
    } 

    .menu li:hover .line {
        animation: beat 0.5s infinite;
    }

    .multi-col-sec .section-title {
        margin-bottom: 76px;
    }

    /* =========================
   Select2 – PurpleWASP theme (consolidated)
   ========================= */

/* Container */
.select2-container {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 100%;
}

/* Selection (multiple) */
.select2-container--default .select2-selection--multiple {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--font-color);
  border-radius: 0;
  cursor: text;
}

/* Focus state */
.select2-container--default.select2-container--focus .select2-selection--multiple {
  outline: 0;
  border-bottom: 1px solid var(--font-color);
}

/* Inline search field */
.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  appearance: none;           /* standard */
  -webkit-appearance: none;   /* WebKit */
  -moz-appearance: none;      /* Firefox */
  font-size: 14px;
  width: 100%;
}

/* Choice pills */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--font-color);
  border: 1px solid var(--font-color);
  color: #fff;
  border-radius: var(--radius);
  font-size: 14px;
  padding: 7px 24px 7px 10px;  /* leave room for remove “x” on the right */
  margin: 1px 5px 0 0;
  float: left;
  cursor: default;
}

/* Choice text */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 0;
  padding-right: 0;
  color: #fff; /* keep contrast on colored pill */
}

/* Choice remove button (right side) */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
}

/* Results list */
.select2-results__option[aria-selected] {
  cursor: pointer;
  font-size: 15px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--font-color);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--main-color-hover);
  color: #fff;
}

/* Results panel sizing */
.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

/* Dropdown panel */
.select2-container--open .select2-dropdown {
  left: 0;
      z-index: 999999999;

}
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-size: 14px;
  font-family: var(--main-font);
}
.select2-dropdown {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: var(--radius);
  box-sizing: border-box;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1055;
}

/* Validation helpers */
.invalid-answer { border: 2px solid red !important; }
.valid-answer   { border: 2px solid green !important; }




    .sleek-dropdown {
    background-color: transparent;
    /*max-height: inherit;
    min-height: 60px;*/
    height: 44px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 12px;
    transition: height .2s ease-out;
    width: 100%;
    word-break: break-word;
    font-size: 13px;
    letter-spacing: .1px;
    line-height: 20px;
    font-family: var(--font-primary);
    font-weight: var(--main-font-weight);;
    text-transform: none;
    color: #000000;
    resize: none;
    border: none;
    border-bottom: 1px solid #000000;
    margin-bottom: 1rem;
}

.sleek-dropdown option[disabled] {
    color: #999; /* Lighter color for placeholder */
}


















/*--------------------------------------------------------------
   # AI Intro
--------------------------------------------------------------*/
.purpai-wrapper {
    position: relative;
    /*overflow: hidden;
    max-width: 1300px; */
    justify-self: center;
    width: 100%;
    max-width: 1500px;
}

/* Initial wasp position (centered and floating) */
.ai-section {
    position: absolute;
    top: -120px;
    /* left: 73%; */
    /* transform: translateX(100%); */
    z-index: 10;
    transition: all 0.6s ease;
    /* left: 0; */
    right: 0;
}

/* Image styling */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(92, 45, 145, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(92, 45, 145, 0.6));
  }
}

.ai-intro-section img {
  width: 420px;
  height: auto;
  animation: float 3s ease-in-out infinite, pulse-glow 2.5s ease-in-out infinite;
  transition: filter 0.3s ease;
  cursor: pointer;
}

.ai-intro-section:hover img {
  filter: drop-shadow(0 0 10px rgba(92, 45, 145, 0.4));
}

/* Content hidden initially */
.ai-section-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding-top: 100px;
  display: none;
}

.purpai-contents {
  display: flex;
  align-items: center;
}

.purpai-content-left {
  width: 65%;
  padding-left: 150px;
}

.purpai-content-left h2 {
  color: var(--font-color);
  font-size: 30px;
}

.purpai-content-left p {
  font-size: 17px;
}

.purpai-content-right {
  width: 40%;
  height: 500px;
  position: relative;
}

/* --- HOVER BEHAVIOR --- */
.purpai-wrapper:hover .ai-section {
  /* Move to align with purpai-content-right */
  top: 100px; /* Adjust as needed */
  left: calc(100% - 25% - 200px); /* 40% right side, minus half image width */
  transform: none;
}

.purpai-wrapper:hover .ai-section-content {
  opacity: 1;
  pointer-events: auto;
  display: block;
}




.ai-section2 {
    position: relative;
    width: 100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
}

/* The wasp image will be positioned over the edge, responsive and fixed */
.ai-intro-section2 {
    position: absolute;
    top: -82px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100%;
}

/* Image sizing is responsive */
.ai-intro-section2 img {    
    width: 250px;
    height: auto;
    right: 0;
    position: absolute;
} 


/* Default style */
.ai-intro-section2 img {
  transition: transform 0.4s ease, filter 0.3s ease;
  will-change: transform;
}

/* On hover */
.ai-intro-section2:hover img {
  /*transform: scale(1.05) rotate(-2deg);*/
  filter: drop-shadow(0 0 10px rgba(92, 45, 145, 0.4));
}



@media screen and (max-width: 768px){
    .purpai-content-left {
        width: 65%;
        padding-left: 50px;
    }

    .ai-section {
        position: absolute;
        top: 100px;
        left: 30%;
        transform: translateX(0%);
        z-index: 10;
        transition: all 0.6s ease;
        overflow: hidden;
        width: 100%;
        margin: auto;
    }

    .ai-section-content {
        opacity: 1;
        pointer-events: none;
        transition: opacity 0.5s ease;
        padding-top: 100px;
        display: block;
        z-index: 13;
        position: relative;
    }

    .purpai-wrapper {
        position: relative;
        overflow: hidden;
    }

    .purpai-wrapper:hover .ai-section {
        top: 100px;
        left: calc(100% - 25% - 200px);
        transform: none;
        /* width: 100%; */
    } 
}
















/*--------------------------------------------------------------
   # Logo Section
--------------------------------------------------------------*/

.logoSlider {
    background: #0000;
    /*height: 75pt;*/
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    cursor: default;
    user-select: none;
    /*touch-action: none;
    /*margin-top: 10rem;
    margin-top: -13rem; */
    display: block;
    padding: 6rem 0rem 0rem 0rem;
}
 
.logoSlider:before {
    left: 0;
    top: 0;
}
 
.logoSlider:after,
.logoSlider:before {
    /*background: linear-gradient(
    to right,
    #000 0%,
    hsla(0, 0%, 100%, 0) 100%);*/
    content: "";
    height: 75pt;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.logoSlider:after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.logoSlider:after,
.logoSlider:before {
    /*background: linear-gradient(
    to right,
    #000 0%,
    hsla(0, 0%, 100%, 0) 100%);*/
    content: "";
    height: 75pt;
    position: absolute;
    width: 200px;
    z-index: 2;
}
 
.logoSlider .slide-track {
    animation: scroll-l 30s linear infinite;
    display: flex;
    width: 4500px;
}

.logoSlider .slide-track-2 {
    animation: scroll-r 30s linear infinite;
    display: flex;
    width: 4500px;
}
 
.logoSlider .slidee {
    height: 75pt;
    width: 250px;
    display: flex;
    align-items: center;
    text-align: center;
}

.logoSlider .slidee img {
    width: 180px;
    padding: 1pc;
    vertical-align: middle;
    margin: 0 auto;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.logoSlider .container .row .section-title h4 {
    font-family: var(--main-font);
    font-weight: var(--main-font-weight);
    line-height: 1.1;
    color: var(--font-color);
    font-size: 20px;
}
 
@keyframes scroll-l {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes scroll-r {
    100% {
        transform: translateX(0);
    }
    0% {
        transform: translateX(calc(-250px * 7));
    }
}



















/*******************************************************************************
    # Grid Section
*******************************************************************************/

.feature-grid-sec {
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
    
}

.feature-grid-sec .section-title {
    margin-bottom: 76px;
}

/*.section-title.title-shape {
    margin-top: 76px;
}*/

.section-title {
    margin-bottom: 20px;
    text-align: center;
}


.section-title.title-shape h2, .section-title.title-shape .h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

.section-title h2, .section-title .h2 {
    font-size: 30px;
    line-height: 49px;
    color: #231F20;
    font-family: var(--main-font);
    color: var(--font-color);
}

/*.section-title.title-shape h2:before, 
.section-title.title-shape .h2:before, 
.section-title.title-shape h2:after, 
.section-title.title-shape .h2:after {
    content: "";
    background-image: url(assets/img/shape1.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 478px;
    width: 100%;
    height: 28px;
    margin: 0 30px 0 -50px;
} */

.section-title.title-shape h2::before, 
.section-title.title-shape .h2::before, 
.section-title.title-shape h2::after, 
.section-title.title-shape .h2::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--font-color); /* or your desired line color */
    margin: 0 20px;
}

.section-title.title-shape h2:after, .section-title.title-shape .h2:after {
    /*margin: 0 -50px 0 30px;*/
    transform: rotate(180deg);
}

.feature-grid-sec .section-title p {
    margin-top: 29px;
}

.section-title.title-shape p {
    max-width: 770px;
    /*margin: 30px auto 0;*/
    text-align: center;
    color: var(--font-color);
    margin: auto;
    margin-bottom: 4rem;
}

.section-title p {
    font-size: 18px;
    line-height: 30px;
    /*margin-top: 29px;*/
}

.feature-grid-sec .grid-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -15px;
}

.feature-grid-sec .grid-card-head.grid-5 li {
    padding: 0 15px;
    max-width: 33.333%;
    flex: 0 0 33.333%;
    margin-bottom: 10rem;
}

.feature-grid-sec .grid-card-head li .grid-card {
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-radius: 6px;
    border: none;
    /*padding: 2rem;*/
    margin-bottom: 0rem;
}

.feature-grid-sec .grid-card-head li .grid-card:hover {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 10%);
    transition: 300ms ease-in, background 300ms ease-in, box-shadow 300ms ease-in;
}

.invisible-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    appearance: none;
    z-index: 9;
}

.feature-grid-sec .grid-card-head li .grid-card-body {
    margin-bottom: 0px;
}

.feature-grid-sec .grid-card-head li .grid-card .grid-img {
    /*max-width: 60px;
    height: 60px;*/
    width: 100%;
    margin: 0 auto 11px;
    transition: all 0.3s;
}

.feature-grid-sec .grid-card-head li .grid-card .grid-img img {
    width: 100%;
    object-fit: contain;
    object-position: center;
    height: 100%;
}

.feature-grid-sec .grid-card-head li .grid-card:hover .grid-img img {
    width: 100%;
    height: 100%;
    margin: auto;
    transition: 300ms ease-in, 300ms ease-out;
}

.feature-grid-sec .grid-card-head li .grid-card h3, .feature-grid-sec .grid-card-head li .grid-card .h3 {
    font-size: 20px;
    color: var(--font-color);
    line-height: 26px;
}

.feature-grid-sec .grid-card-head li .grid-card p {
    margin-top: 13px;
    color: var(--font-color);
    font-size: 16px;
}

.grid-card i {
    font-size: 5rem;
    color: var(--font-color);
}

.btn-tertiary {
    color: var(--font-color);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
    padding-right: 17px;
    font-family: "Inter", sans-serif;
    font-weight: bold;
    position: relative;
    transition: 0.3s;
    max-width: fit-content;
    display: inline-block;
    text-decoration: unset;
    z-index: 9;
}

.btn-tertiary i {
    position: absolute;
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #299A79;
}

.icon-double-arrow:before {
    content: "";
}






















/*******************************************************************************
    # Call To Action Section
*******************************************************************************/



.first-purple-div {
    background-color: var(--main-color);
    height: 6rem;
    clip-path: polygon(50% 0%, 50% 0%, 55.445% 1.005%, 60.825% 3.999%, 66.127% 8.953%, 71.338% 15.837%, 76.446% 24.619%, 81.439% 35.272%, 86.303% 47.763%, 91.026% 62.064%, 95.596% 78.144%, 100% 95.974%, 100% 100%, 0% 100%, 0% 95.974%, 0% 95.974%, 4.404% 78.144%, 8.974% 62.064%, 13.697% 47.763%, 18.561% 35.272%, 23.554% 24.619%, 28.662% 15.837%, 33.873% 8.953%, 39.175% 3.999%, 44.555% 1.005%, 50% 0%)
}
.second-purple-div {
    background-color: var(--main-color);
    height: 30rem;
}

.second-purple-div-tagline {
    color: white;
    justify-items: center;
    padding-top: 4rem;
}

.second-purple-div-tagline h2 {
    color: white;
    justify-items: center;
    font-size: 40px;
}

.three-pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    justify-self: center;
    padding-top: 2rem;
}

.pillar {
    flex: 1 1 280px;
    width: 30%;
    /*max-width: 320px; *
    background: #fff; */
    border-radius: 12px;
    padding: 25px;
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.08);*/
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.pillar-icon {
    font-size: 3rem;
    color: var(--text2-color);
    margin-bottom: 15px;
}

.pillar h3 {
    font-size: 1.6rem;
    margin: 1rem 0rem;
    color: var(--text2-color);
}

.pillar p {
    font-size: 22px;
    color: var(--text2-color);
    line-height: 1.5;
}

.our-products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -15px;
    padding: 2rem;
}

/*.main-card {
    background-color: red;
    height: 40rem;
    padding: 0 15px;
    max-width: 33.333%;
    flex: 0 0 33.333%;
    margin-bottom: 10rem;
    border-radius: var(--radius);
} */

.main-card {
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid #b6c1cc;

    max-width: 30%;
    flex: 0 0 33.333%;

    height: 100%;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s ease-in-out;
    margin: 12px 12px;
}

.feature-grid-sec .container .main-card:hover {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 10%);
    transition: 300ms ease-in, background 300ms ease-in, box-shadow 300ms ease-in;
}


.main-card img {
    width: 100%;
}

.main-card-text {
    padding: 24px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main-card-text-title p {
    margin-bottom: 0rem;
}

.main-card-text-title-header {
    font-size: 22px;
    font-weight: var(--main-font-weight);;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    letter-spacing: 0;
}

.main-card-text-title-body{
    font-size: 16px;
    /*line-height: 2.5rem;*/
}

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}


.main-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.main-card-link a {
    font-weight: var(--main-font-weight);
    /*font-size: 1.7rem;*/
    text-decoration: none;
    color: var(--font-color);
}

.section-title .title-shape-text {
    font-size: 2.5rem;
    font-weight: var(--main-font-weight);;
    margin-bottom: 24px;
    margin-bottom: 1.5rem;
    letter-spacing: 0;
    font-family: oswald;
    color: var(--pw-purple-dark);
    width: 90%;
    justify-self: center;
}

.section-title .title-shape-title {
    text-transform: uppercase;
    font-size: 2.5rem;
    color: var(--pw-purple);
    font-family: 'Oswald';
}



.faded-bg {
    background: linear-gradient(0deg, #b45af3 0%, #b54eff 15%, #b752ff 30%, rgba(255, 255, 255, 0) 70%), #fff;
    top: 6rem;
}

@media screen and (max-width: 767px){
    .main-card {
        max-width: 100%;
        height: 100%;
        overflow: visible;
    }

    .second-purple-div {
        background-color: var(--font-color);
        height: 100%;
    }

    .second-purple-div-tagline h2 {
        color: white;
        justify-items: center;
        font-size: 2.5rem;
        text-align: center;
    }

    .main-card img {
        height: auto;
        border-radius: 8px;
        width: -webkit-fill-available;
    }
}



















/*******************************************************************************
    # Call To Action Section
*******************************************************************************/

#royalty {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 35vh;
    /* background-color: #f0f0f0; */
    background-size: cover;
    background-color: var(--main-color);
}
  
#royalty1 {
    width: 100%;
    height: 100%;
    margin-top: 10rem;
    background-size: cover;
    background-position: center;
}
  
/*#royalty2 {
    position: absolute;
    top: 0;
    right: 100px;
    /*width: 200px; /* Adjust the width as needed *
    width: 50%; *
    height: 100%;
    /*background-color: #ddd;
    opacity: 0.8; *
    align-items: center;
    justify-content: center;
    display: flex;
} */

#royalty2 {
    position: absolute;
    top: 0;
    /* right: 100px; */
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
}
  
#royalty2 p {
    /*font-family: fantasy;*/
    font-family: var(main-font);
    /*font-size: 7rem;*/
    /*text-transform: uppercase;*/
    /*width: 70%;*/
}

.royalty-overlay {
        display: none;
    }


.button-wrapper {
    /*position: absolute;*/
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    /*z-index: 999;*/
    width: 70%;
}
    
.button-wrapper h2 {
    font-size: 6rem;
}


     
/*.button {
    border: none;
    border-radius: 1em;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    display: inline-block;
    font-size: 2rem;
    padding: 1em 2em;
    width: auto;
}
  
.cta-button {
    background-color: #000;
    color: #fff !important;
}
     
.cta-button:hover {
    background-color: #777;
} 

.cta-button {
    width: 300px;
    height: 100px;
    border: none;
    color: white;
    background-color: var(--font-color);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 0 #f9e506;
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
}

.cta-button:hover {
    box-shadow: inset 300px 0 0 0 #f9e506;
    cursor: pointer;
    color: var(--font-color);
} */

.cta {
    justify-items: center;
}

.demo-trigger {
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--main-font);
}

.cta-button {
    width: 200px;
    height: 60px;
    border: none;
    color: white;
    border-radius: var(--radius);
    transition: ease-out 0.3s;
    font-size: 17px;
    outline: none;
    border: 3px solid var(--text-color);
    position: relative;
    display: block;
    align-content: center;
    text-transform: uppercase;
    font-weight: var(--main-font-weight);;
    justify-self: center;
    text-decoration: none;
    /*background-color: transparent;*/
}

.cta-button:hover {
    color: var(--font-color);
    cursor: pointer;
}

.cta-button:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: "";
    background-color: var(--text-color);
    border: 3px solid var(--font-color);
}

.cta-button:hover:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}


.cta1 {
    font-family: var(--main-font);
    width: 40rem;
}


.cta1 h2 {
    font-size: 4rem;
    color: var(--text-color);
}


@media screen and (max-width: 767px) {
    .cta1 h2 {
        font-size: 2rem;
    }
}


.cta1 p {
    font-size: 17px;
    color: var(--text-color);
}









    

















/************************************************************************************
# Overview Page
************************************************************************************/
.overview {
    /*margin: 6rem 0rem;*/
}

.overview-ext {
    /*min-height: 70rem;*/
    background-color: #efefef;
    align-content: center;
    height: 100%;
}

.overview-container {
    min-height: 37.5rem;
    display: flex;
    flex-flow: row nowrap;
    height: 55rem;
    /*margin-bottom: 15rem;*/
}

.overview-container-left,
.overview-container-right {
    width: 50%;
    align-content: center;
}


.overview-container-left h2,
.overview-container-right h2 {
    color: var(--font-color);
    font-size: 2.75rem;
}

.overview-container-left p,
.overview-container-right p {
    margin-bottom: 1.25rem;
    font-size: 18px;
    /*line-height: 2rem;*/
}

.overview-container-left li,
.overview-container-right li {
    margin-bottom: 1.25rem;
    font-size: 18px;
    margin-left: 2rem;
}

.overview-container-in {
    margin: 0rem 10rem;
}

#overview-img {
    width: 100%;
    height: 100%;
    /* margin-top: 10rem; */
    background-size: cover;
    background-position: center;
}

.overview-hero-sec {
    position: relative;
    width: 100%;
    height: 77vh;
    overflow: hidden;
}

.overview-hero-sec iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /*width: 177.77vh; /* 16:9 aspect ratio for full cover */
    width: 100%;
    height: 120vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.hero-overlay {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(0, 0, 0, 0.4); /* subtle dark overlay */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hero-overlay h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-overlay p {
    font-size: 1.25rem;
    max-width: 600px;
}

/* Style to make the list items inline with the paragraph */
.inline-list {
    list-style-type: circle; /* Makes the list use a disc bullet */
    padding-left: 0; /* Removes default padding */
    margin: 0; /* Removes margin */
}

.inline-list li {
    display: list-item; /* Makes the list items inline */
    margin-right: 10px; /* Adds space between list items */
}

/*.inline-list li::before {
    content: "•"; /* Adds a disc bullet before the list item *
    margin-right: 5px; /* Space between bullet and text *
    vertical-align: middle; /* Aligns the bullet with the text *
} */

@media (max-width: 768px) {
    .hero-overlay h1 {
        font-size: 2rem;
    }

    .hero-overlay p {
        font-size: 1rem;
    }

    .overview-hero-sec {
        position: relative;
        width: 100%;
        height: 50vh;
        overflow: hidden;
    }

    .overview-hero-sec iframe {
        width: 300vw; /* widen to keep coverage on narrow screens */
        display: none;
    }

    .overview-container {
        min-height: 37.5rem;
        display: flex;
        flex-flow: row nowrap;
        height: 100%;
    }

    .overview-container-left,
    .overview-container-right {
        width: 100%;
        align-content: center;
        /*border-bottom: 1px solid #b7b7b7;*/
    }

    .overview-container-left h2, .overview-container-right h2 {
        color: var(--font-color);
        font-size: 2.75rem;
        text-align: center;
    }

    .overview-container-left p, .overview-container-right p {
        margin-bottom: 10rem;
        font-size: 18px;
        /* line-height: 2rem; */
        text-align: justify;
    }

    .overview-container-right {
        display: none;
    }

    .overview-container-in {
        margin: 0rem 1rem;
    }

    #request-demo .cta1 {
        font-family: var(--main-font);
        width: 100%;
    }
}






















/****************************************************************
    #   Pages
****************************************************************/

#pages-overview,
#pages-features,
#pages-workflow,
#pages-integrations,
#pages-security,
#pages-compare,
#pages-faq,
#pages-get-started {
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
}

.pages-container {
    max-width:1180px;
    margin:0 auto;
    padding:0 20px
}

.pages-container .art {
    background:#fff;
    border:1px dashed #d8c6d8;
    border-radius:16px;
    min-height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow)
}

@media (max-width: 980px) { 
    .pages-container .art{
        display: none;
    } 
}

.pages-container .tag {
    display:inline-flex;
    gap:.5rem;
    align-items:center;
    background:var(--pw-purple-50);
    color:var(--pw-purple);
    border:1px solid #ead9ea;
    padding:.35rem .6rem;
    border-radius: var(--radius);
    font-weight: var(--main-font-weight);;
    /*font-size:.82rem*/
    font-size: 15px;
}
    
.pages-container .eyebrow {
    margin-bottom:14px
}

.pages-container .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight: var(--main-font-weight);;cursor:pointer}
.pages-container .btn-primary{background:var(--pw-purple);color:#fff}
.pages-container .btn-primary:hover{background:var(--pw-purple-600)}
.pages-container .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.pages-container .btn-ghost:hover{border-color:#d2d2dd}

.pages-hero{
    background: radial-gradient(1100px 500px at 20% -10%, #ede3ed, transparent),
                radial-gradient(900px 500px at 110% 0%, #efe7ef, transparent),
                linear-gradient(180deg,#fff, #faf8fb 60%, #fff);
                /*border-bottom:1px solid var(--line);*/
}


/* Grid cards */
.pages-container .grid{display:grid;gap:18px}
.pages-container .grid.cols-3{grid-template-columns:repeat(3,1fr)}
.pages-container .grid.cols-2{grid-template-columns:repeat(2,1fr)}

@media (max-width: 980px) {
    .pages-container .hero-inner{grid-template-columns:1fr}
    .pages-container .kpis{grid-template-columns:repeat(2,1fr)}
    .pages-container .grid.cols-3{grid-template-columns:1fr}
    .pages-container .grid.cols-2{grid-template-columns:1fr}
}


/* Comparison *
.pages-container table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:5px;border:1px solid var(--line)}
.pages-container th,td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.pages-container th{background:#faf9fb;text-align:left} */
.pages-container tr:last-child td{border-bottom:0}


.pages-container table{width:100%;border-collapse:collapse;font-size:14px;}
.pages-container th,
.pages-container td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;}
.pages-container th{color:#111827;background:#fafafa;font-weight: var(--main-font-weight);;}
.pages-container tr:hover td{background:#faf5ff30;}



.pages-container .alerts{display:flex;flex-wrap:wrap;gap:8px;}
.pages-container .chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:var(--chip-bg);color:var(--chip-text);font-weight: var(--main-font-weight);;border:1px solid var(--border);}    
.pages-container .chip .dot{width:10px;height:10px;border-radius:50%;}
.pages-container .chip.ok .dot{background:var(--ok);} 
.chip.warn .dot{background:var(--warn);} 
.chip.err .dot{background:var(--err);}


.pages-container .card .hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.pages-container .card .bd{padding:16px; overflow: auto;}

.pages-container .title{font-weight: var(--main-font-weight);;letter-spacing:.2px;}
.pages-container .muted{color:var(--pw-muted);}


.pages-container .kpi{display:flex;align-items:center;gap:12px;padding:16px;}
.pages-container .kpi .icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--pw-purple-50);} 
.pages-container .kpi .val{font-size:22px;font-weight: var(--main-font-weight);;}
.pages-container .kpi .lbl{color:var(--pw-muted);font-size:12px;margin-top:2px;}
.pages-container .progress{width:100%;height:8px;background:#eef2f7;border-radius:999px;overflow:hidden;border:1px solid var(--border);} 
.pages-container .progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--pw-purple),var(--pw-accent));}

.pages-container .list{display:flex;flex-direction:column;gap:10px;}
.pages-container .row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);} 
.pages-container .row:last-child{border-bottom:none;}
.pages-container .row .left{display:flex;align-items:center;gap:10px;}
.pages-container .subtle{font-size:12px;color:var(--pw-muted);}


.pages-container .pill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--border);background:#fafafa;border-radius:999px;padding:6px 10px;font-weight: var(--main-font-weight);;color:#111827;}
.pages-container .status{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-weight: var(--main-font-weight);;}
.pages-container .status.ok{background:#ecfdf5;color:#065f46;border-color:#a7f3d0;} 
.pages-container .status.warn{background:#fffbeb;color:#92400e;border-color:#fde68a;}
.pages-container .status.err{background:#fef2f2;color:#991b1b;border-color:#fecaca;}

.pages-container .grid.cols-4 {
    grid-template-columns:repeat(4,1fr);
}

.pages-container .grid.cols-3 {
    grid-template-columns:repeat(3,1fr);
}

.pages-container .grid.cols-2 {
    grid-template-columns:repeat(2,1fr);
}    

@media (max-width:1100px) {
    .pages-container .grid.cols-4 {
        grid-template-columns:repeat(2,1fr);
    } 
}

@media (max-width:700px) {
    .pages-container .grid.cols-4,
    .pages-container .grid.cols-3,
    .pages-container .grid.cols-2 {
        grid-template-columns:1fr;
    } 
}

@media (max-width: 980px) { 
    .pages-container table{
        display: block;
    } 
}

.pages-hero-inner {
    padding:84px 0 40px; 
    display:grid; 
    grid-template-columns:1.2fr .9fr; 
    gap:40px; 
    align-items:center
}

.pages-hero-inner h1 {
    text-align: left;
    font-weight: var(--main-font-weight);;
}

.pages-hero h1 {
    font-size: 46px;
    line-height: 1.1;
    margin: 0rem;
    font-weight: var(--main-font-weight);;
    letter-spacing: -.5px;
    color: var(--font-color);
}

.pages-hero .lead {
    /*font-size: 2.15rem;*/
    color: #3a3f4b;
    /*max-width: 52ch;*/
}

.pages-hero .kpis {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:26px
}

.pages-hero .kpi {
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 16px;
    text-align:center
}

.pages-hero .kpi b {
    display:block;
    font-size:1.3rem
}

.pages-hero .small {
    font-size: 1rem;
    color:var(--muted)
}

[id^="pages-"] { scroll-margin-top: calc(95px + 24px); }

/* Sticky subnav */
.subnav-wrap{
    position: sticky; 
    top: 90px; 
    z-index: 50; 
    background: #fff; 
    border-bottom: 1px solid var(--line)}

@media (max-width: 980px) { 
    .subnav-wrap {
        position: sticky;
        top: 45px;
        z-index: 50;
        background: #fff;
        border-bottom: 1px solid var(--line);
    }

    .pages-hero-inner {
        padding: 84px 0 40px;
        display: flex;
        grid-template-columns: 1.2fr .9fr;
        gap: 40px;
        align-items: center;
        padding: 1rem;
    }
}


.subnav {
    display: flex;    
    gap: 14px;
    overflow: auto;
    padding: 14px 0
}

.subnav a{
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    white-space: nowrap;
    color: #2b2f3a;
    font-size: 17px;
    text-decoration: none;
}

@media (max-width: 980px) { 
    .subnav a {
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        white-space: nowrap;
        color: #2b2f3a;
        font-size: 17px;
        text-decoration: none;
    }
}

.subnav a.active,.subnav a:hover{border-color:var(--pw-purple);color:var(--pw-purple);background:var(--pw-purple-50)}


.pages-container h2 {
    font-size:32px;
    margin:0 0 10px;
    letter-spacing:-.2px;
    color: var(--font-color);
    font-weight: var(--main-font-weight);;
}

.pages-container .sub {
    color:var(--muted);
    margin-bottom:28px;
    font-size: 18px;
}

.pages-container .card {
    background: var(--card);
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    font-size: 15px;
}

.pages-container .card h3 {
    margin: .2rem 0 .4rem;
    /* font-size: 2.15rem; */
    color: var(--font-color);
    font-weight: var(--main-font-weight);;
}

.pages-container .card p {
    color: #444;
    font-size: 17px;
    line-height: 26px;
}

.pages-container .card .badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #f6f8ff;
    color: #334;
    border: 1px solid #e6eaff;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    /*font-size: 1.4rem;*/
    font-weight: var(--main-font-weight);;
    width: max-content;
}


/* Callouts */
.pages-container .callout {
    display:flex;gap:16px;
    align-items:center;
    background:linear-gradient(180deg,#fff,#faf7fb);
    border:1px solid var(--line);
    padding:18px;
    border-radius:14px;
    font-size: 15px;
}


/* Timeline / steps */
.pages-container .steps {
    counter-reset:step;
    display:grid;
    gap:14px
}

.pages-container .step {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:start
}

.pages-container .step .num {
    width:36px;
    height:36px;
    border-radius:10px;
    background:var(--pw-purple);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight: var(--main-font-weight);
}

.pages-container .step p {
    color: #444;
    font-size: 17px;
    line-height: 26px;
    margin: 1rem 0rem;
}

.pages-container .step h4 {
    margin:.2rem 0 .35rem;
    color: var(--font-color);
    font-weight: var(--main-font-weight);;
}


/* Integrations strip */
.pages-container .integrations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pages-container .int {
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:72px;
    font-size: 17px;
    width: 100%;
    padding: 2rem;
}

@media (max-width: 980px) { 
    .pages-container .integrations{
        grid-template-columns:repeat(2,1fr)
    }
    
    .pages-container .int {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
        font-size: 17px;
        width: 100%;
        padding: 2rem;
    }
}



 /* FAQ */
.pages-container .faq {
    font-size: 17px;
}

.pages-container .faq summary{
    list-style:none;
    cursor:pointer;
    font-weight: var(--main-font-weight);;
    padding:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff
}

.pages-container .faq details{
    margin-bottom:10px
}

.pages-container .faq details[open]  {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}

.pages-container .faq .answer {
    border:1px solid var(--line);
    border-top:0;
    margin-top:-10px;
    padding:16px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    background:#fff
}

.pages-container .cm360-btn:hover {
    font-size: 16px;
}
























/****************************************************************
    #   Partner Page
****************************************************************/

.partner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    color: var(--font-color);
}

.partner-container .hero1{/*border:1px solid var(--pw-border); background:
      radial-gradient(1200px 400px at 10% -20%, rgba(120,39,110,.18), transparent 60%),
      radial-gradient(800px 300px at 90% -10%, rgba(37,99,235,.12), transparent 60%),
      var(--pw-card);*/
      border-radius: var(--radius); padding:32px; display:grid; gap:16px;}
.partner-container .hero1 h1{font-size:32px; margin:0;text-align: left;}
.partner-container .hero1 p{color:#585859;; margin:0;}

.partner-container .quick-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:8px}
.partner-container .kpi{background:var(--card); border:1px solid var(--line); border-radius: var(--radius); padding:12px}
.partner-container .kpi .v{font-size:20px; font-weight: var(--main-font-weight);}


.partner-container .search{position:relative}
.partner-container .search input {
        width: 100%;
    padding: 12px 44px 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--pw-border);
    /* background: #141419; 
    color: var(--font-color); */
    border: none;
    border-bottom: 1px solid var(--font-color);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.partner-container .search i{position:absolute; right:12px; top:11px; color:var(--pw-muted)}

.partner-container .meta{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; color:var(--font-color); font-size:14px}

.partner-container .panel{margin-top:24px; background: #ffffff; border:1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--box-shadow);}
.partner-container .panel .hd{display:flex; 
    align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--pw-border)}
.partner-container .panel .bd{padding:16px 20px}


.partner-container .panel .bd .filters {/*display:grid; grid-template-columns:1fr auto;*/ display: block; width: 100%; gap:12px}

.partner-container .split .panel .bd a span {
    align-content: center;
    font-size: 13px;
    color: var(--font-color)
}

.partner-container .main-chips {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 8px 0px;
}

.partner-container .chips{display:flex; gap:8px; flex-wrap:wrap}
.partner-container .chip{
    padding:8px 12px; 
    border-radius: var(--radius); 
    border:1px solid var(--line); 
    background: var(--card); 
    cursor:pointer; 
    font-size:14px;
    color: var(--font-color);
    font-family: var(--main-font);
}
.partner-container .chip.active{
    background: var(--font-color);
    border-color: #8d2d80;
    color: white;
}

.partner-container h2, 
.partner-container h3 {
    font-family: var(--font-primary);
    font-weight: var(--main-font-weight);
    /* line-height: 1.1; */
    color: var(--font-color); 
    font-size: 20px;
}

.partner-container .muted {
    color: #4a067b;
    font-size: 14px;
}

.partner-container .card {
    background:var(--card); 
    border:1px solid var(--line); 
    border-radius: var(--radius);
    padding:16px; 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
    min-height:200px;
    box-shadow: var(--shadow);}
.partner-container .card h3{margin:0; font-size:18px}
.partner-container .tags{display:flex; gap:6px; flex-wrap:wrap}
.partner-container .tag{font-size:12px; 
    border:1px solid #e6eaff; background:#f6f8ff; padding:4px 8px; border-radius: var(--radius)}
.partner-container .card .actions{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}

.partner-container .list{display:flex; flex-direction:column; gap:10px}
.partner-container .list a{
    display:flex; 
    justify-content:space-between; 
    padding:10px 12px; 
    border:1px dashed var(--pw-border); 
    border-radius: var(--radius); 
    background:var(--card);
    text-decoration: none;
}

.partner-container .badge{font-size:12px; padding:4px 8px; border-radius: var(--radius); background:#f6f8ff; border:1px solid #e6eaff}
    
.partner-container details{background:var(--card); border:1px solid var(--pw-border); border-radius: var(--radius); padding:12px 16px}
.partner-container details + details{margin-top:10px}

.partner-container summary{cursor:pointer; font-weight: var(--main-font-weight);;
    font-size: 13px}


.partner-container .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; align-items: center;}































/************************************************************************************
# Pricing Page
************************************************************************************/

.hint { 
    color:#b36b00; 
}

.lock { 
    color:#a00; 
}



















/************************************************************************************
# Pricing Page
************************************************************************************/

.filters {
      /*display:grid;
      grid-template-columns:2fr 1fr 1fr 1fr auto;
      gap:10px;*/
      width: 25%;
      margin-right: 3rem;
}

.filters input{
    padding: 10px;
    border-radius: 10px;
    border-bottom: 1px solid var(--pw-border);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.wrap .tab {
    padding:10px 14px;
    border-radius:10px;
    border:1px solid var(--pw-border);
    background:#141419;
    cursor:pointer;
    color: var(--text2-color);
    font-size: 15px;
}
.wrap .tab.active {
    background:var(--pw-purple);
    border-color:#8d2d80;
    color: var(--text2-color);
    font-size: 15px;
}
    
.wrap .card {
    border:1px solid var(--pw-border);
    border-radius:12px;
    padding:12px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding: 1rem;
    font-size: 16px;
}
.wrap .card a.view {
    margin-top:6px;
    display:inline-block;
    text-decoration: none;
    color: var(--font-color);
}

.wrap .badge{
    font-size:12px;
    border:1px solid var(--font-color);
    border-radius: var(--radius);
    padding:2px 8px;
    background: var(--font-color);
    margin-left:6px;

}

.wrap .muted {color: #3d3d3d;}

.wrap .tile {
    /*background:#141419;*/
    border:1px solid var(--pw-border);
    border-radius:12px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    min-height:160px;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    text-decoration: none;
}

.wrap .tile img {max-width:120px;max-height:48px;object-fit:contain;filter:drop-shadow(0 0 1px rgba(0,0,0,.3))}

.wrap .tile .name {
    font-weight: var(--main-font-weight);;
    color: var(--font-color);
    text-decoration: none;
    font-size: 16px;
}

.wrap .row{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}


/* Slide-over drawer */
.drawer{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:60}
.drawer.open{display:block}

.drawer .panel {
    position: absolute;
    top: 8rem;
    right: 0;
    height: 100%;
    width: min(720px, 100%);
    border-left: 1px solid var(--pw-border);
    border-radius: 0;
    overflow: auto;
    background: var(--font-color);
}

.drawer .sticky-hd{position:sticky; top:0; /*background:var(--pw-card);*/ z-index:1}
.drawer .close-btn{
    /* border: 1px solid var(--pw-border); */
    background: transparent;
    border-radius: 10px;
    /* padding: 8px 12px; */
    cursor: pointer;
    position: relative;
}
    
.logo{max-width:180px; max-height:60px; object-fit:contain}
.kv{display:grid; grid-template-columns:140px 1fr; gap:8px; margin-top:8px}
.pill{display:inline-block; border:1px solid var(--pw-border); padding:4px 8px; border-radius: var(--radius); font-size:12px; background:#101018; margin:2px}
.section{margin-top:12px}
.section h3{margin:0 0 6px; font-size:16px}












.hero-sec {
    min-height: 34.38rem;
}

.hero-sec {
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.container {
    /*max-width: 1300px;*/
    width: 1300px;
}    

.hero-sec.image-sec .row {
    align-items: center;
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}

@media (min-width: 992px) {
.hero-sec .disc-col .hero-disc {
    margin-top: 0px !important;
    }
}
@media (max-width: 1400px) {
    .hero-sec .hero-disc {
        margin-top: 40px;
    }
}

@media (min-width: 1281px) {
    .hero-sec .hero-disc {
        padding-left: 0px;
    }
}
.hero-sec .hero-disc {
    max-width: 590px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
    padding-left: 43px;
}

.hero-sec .hero-disc p {
    margin-top: 18px;
    font-size: 20px;
    line-height: 1.5;
    color: #231F20;
    max-width: 460px;
}

.hero-sec .hero-disc::before {
    content: "";
    position: absolute;
    left: -60px;
    top: 20px;
    width: 29px;
    max-height: 572px;
    height: 100%;
    background-image: url(../img/hero-shape.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.hero-sec .hero-disc h1, .hero-sec .hero-disc .h1 {
    font-size: 76px;
    line-height: 1;
    font-weight: var(--main-font-weight);
    color: var(--font-color);
    font-family: 'Anton';
}

.hero-sec .hero-disc .hero-cta {
    gap: 24px;
    display: flex;
    flex-wrap: wrap;
}

.hero-sec .hero-disc .hero-cta {
    margin-top: 24px;
}

@media (min-width: 992px) {
.col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
    }
}

@media (min-width: 992px) {
.hero-sec.image-sec .hero-media {
    width: 100% !important;
    height: 100% !important;
    max-height: 715px !important;
    }
}

@media (max-width: 992px) {
    .hero-sec .row {
        position: relative;
    }

    .disc-col {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: rgba(255, 255, 255, 0.9);
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .media-col {
        position: relative;
        z-index: 1;
    }

    .hero-media img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .hero-sec .hero-disc {
        max-width: 590px;
        margin-top: 60px;
        position: relative;
        z-index: 1;
        padding-left: 0px;
    }

    .hero-sec .hero-disc h1, .hero-sec .hero-disc .h1 {
        font-size: 43px;
        line-height: 1;
        font-weight: var(--main-font-weight);
        color: var(--font-color);
        font-family: Anton;
        text-align: left;
    }

    .hero-sec .hero-disc p {
        margin-top: 18px;
        font-size: 20px;
        line-height: 1.5;
        color: #231F20;
        max-width: 460px;
        text-align: left;
    }
}

@media screen and (max-width: 767px){
    .hero-sec .hero-disc h1, .hero-sec .hero-disc .h1 {
        font-size: 43px;
        line-height: 1;
        font-weight: var(--main-font-weight);
        color: var(--font-color);
        font-family: Anton;
        text-align: left;
    }

    #typewriter-text {
        font-size: 38px;
        color: var(--main-color-hover);
        font-family: Anton, sans-serif;
        max-width: 640px;
        top: 80px;
        height: 65px;
        white-space: pre-wrap;
        overflow: hidden;
    }
}

.hero-sec .hero-media {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: calc(100% + 79px);
    max-width: 814px;
    height: 715px;
}

.hero-sec .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-cta-button {
    display: inline-block;
    padding: 5px 20px;
    font-size: 18px;
    color: white;
    background-color: var(--font-color);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* Apply animation */
    animation: pulse 2s infinite;
}

.hero-cta a {
    color: var(--text-color);
    text-decoration: none;
}

/* Pulse animation using keyframes */
@keyframes pulse {
    0% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    50% {
    transform: scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    }
    100% {
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
}

.hero-cta-button2 {
    width: auto;
    height: 60px;
    border: none;
    color: var(--font-color);
    border-radius: var(--radius);
    transition: ease-out 0.3s;
    font-size: 2rem;
    outline: none;
    border: 3px solid var(--font-color);
    position: relative;
    display: block;
    align-content: center;
    text-transform: uppercase;
    font-weight: var(--main-font-weight);
    padding: 0rem 2rem;
    background-color: var(--font-color);
}

.hero-cta-button2:hover {
    color: var(--font-color);
    cursor: pointer;
    z-index: 10;
}

.hero-cta-button2:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: "";
    background-color: var(--text-color);
    /*border: 3px solid red;*/
}

.hero-cta-button2:hover:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}


.cta-bounce {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    background-color: #4caf50;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: bold;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 100% {
    transform: translateY(0);
    }
    50% {
    transform: translateY(-10px);
    }
}

.cta-glow {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    background-color: #6200ea;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0 0 5px white;
    animation: glow 2s infinite;
}

@keyframes glow {
    0%, 100% {
    box-shadow: 0 0 10px #ffffff, 0 0 20px #6200ea, 0 0 30px #6200ea;
    }
    50% {
    box-shadow: 0 0 20px #ffffff, 0 0 30px #6200ea, 0 0 40px #6200ea;
    }
}

.cta-color-change {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: bold;
    background-color: #03a9f4;
    animation: colorChange 3s infinite;
}

@keyframes colorChange {
    0% {
    background-color: #03a9f4;
    }
    33% {
    background-color: #e91e63;
    }
    66% {
    background-color: #ffc107;
    }
    100% {
    background-color: #03a9f4;
    }
}

.cta-wiggle {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    background-color: #ff9800;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: bold;
    animation: wiggle 1s infinite;
}

@keyframes wiggle {
    0%, 100% {
    transform: rotate(0);
    }
    25% {
    transform: rotate(3deg);
    }
    50% {
    transform: rotate(-3deg);
    }
    75% {
    transform: rotate(2deg);
    }
}

.cta-spin {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    background-color: #009688;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}

.cta-border-expand {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    color: white;
    background-color: #f44336;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: bold;
    animation: borderExpand 2s infinite;
}

@keyframes borderExpand {
    0% {
    border-color: transparent;
    box-shadow: 0 0 0 rgba(255, 0, 0, 0.5);
    }
    50% {
    border-color: #f44336;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
    }
    100% {
    border-color: transparent;
    box-shadow: 0 0 0 rgba(255, 0, 0, 0.5);
    }
}



.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    padding: 10px 20px;
    cursor: pointer;
    margin: 10px 0;
    position: relative;
    display:flex;
}

.circle {
    width: 15px;
    height: 15px;
    background-color: #007bff;
    border-radius: 50%;
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translateY(-50%); */
}

.line {
    width: 25px;
    height: 25px;
    border: 2px solid red;
    border-radius: 50%;
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translateY(-50%); */
    /* transition: transform 0.3sease; */
    display: flex;
}

@keyframes beat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
} 

.menu li:hover .line {
    animation: beat 0.5s infinite;
}

.multi-col-sec .section-title {
    margin-bottom: 76px;
}

    






























/************************************************************************************
# Pricing Page
************************************************************************************/

.pricing-hero {
    display: flex;
    flex-wrap: wrap-reverse;
    text-align: center;
    justify-content: center;
    gap: 20px;
}

.pricing-hero-sec {
    /*margin: 40px;*/
}

.pricing-hero-dt {
    display: block;
    width: 100%;
    margin: 40px;
}

.pricing-hero-row {

}

.pricing-hero-row h1 {
    color: var(--font-color);
    font-size: 3rem;
    font-family: var(--main-font);
}


.pricing-controls label {
    margin-right: 1rem;
    font-weight: var(--main-font-weight);
    cursor: pointer;
}

.currency-selector select {
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
}


.pill-toggle {
    display: inline-flex;
    background: #eee;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.pill-option {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: var(--main-font-weight);
    color: #555;
    transition: all 0.2s ease;
}

.pill-option.active {
    background-color: #6b46c1; /* Purple shade */
    color: #fff;
}

.billing-calendar {
    display: flex;
    align-items: center;
}

.billing-calendar p {
    margin-top: 0;
    margin-bottom: 0rem;
    margin-left: 1rem;
    font-size: 14px;
    color: var(--main-color-hover);
}


.pricing-grid {
    display: grid;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-column-gap: 16px;
    column-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--main-color-hover);
}

.pricing-card:hover .most-popular{
    display: block;
}

.pricing-grid-card {
    border-radius: 16px;
    margin-top: 16px;
    /*padding: 20px;*/
    border: 2px solid #f1eeea;
}

.pricing-grid-card h3,
.pricing-grid-card p,
.pricing-grid-card li {
    color: var(--font-color)
}

.pricing-card-container {
    /* margin-top: 16px; */
    min-width: 0;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    border-radius: var(--radius);
    /* border: 1px solid #d5d5d5; */
    padding: 35px;
    box-shadow: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    font-size: 14px;
}

.tier-title-container {
    height: 50px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.tier-title {
    max-width: 100%;
    margin: 8px 0;
    font-size: 1.238rem;
    color: #333333;
    letter-spacing: -0.36px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    max-width: calc(100% - 80px);
}

.tier {
    float: left;
    font-weight: bold;
    margin-right: 4px;
    color: var(--font-color);
    font-size: 2rem;
}

.price-tag-container {
    height: 110px;
}

.price-tag {
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    font-size: 16px;
    font-family: Sofia Pro;
    font-weight: var(--main-font-weight);;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    height: 5rem;
    align-items: center;
}

.currency-sign {
    font-size: 48px;
    /*font-weight: var(--main-font-weight);;*/
}

.amount {
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: var(--main-font-weight);;
    letter-spacing: -1px;
    margin-right: 8px;
}

.price-tag .price-description {
    line-height: 18px;
    color: #323338;
    margin-bottom: 4px;
    align-self: center;
}

.tier-desc {
    font-size: 14px;
    font-style: normal;
    font-weight: var(--main-font-weight);;
    line-height: 22px;
    letter-spacing: normal;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.product-price-total {
    /*font-size: 0.875rem;*/
    font-weight: bold;
}

.features-container {
    display: flex;
}

.icon {
    margin-right: 1rem;
}

.feature {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.get-started {
    background-color: var(--font-color);
    padding: 1rem;
    display: flex;
    width: 100%;
    justify-content: center;
    text-decoration: none;
    color: var(--text2-color);
    border-radius: var(--radius);
    margin-top: 2rem;
}

.most-popular {
    background-color: var(--main-color-hover);
    display: block;
    width: 100%;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    padding: 6px 2rem;
    color: var(--text2-color);
    font-family: var(--main-font);
    font-size: 12px;
    display: none;
}



.feature-compare {
    padding: 6rem;
}

.feature-comparison-table {
    overflow-x: auto;
    margin-top: 1rem;
    font-size: 14px;
}

.feature-comparison-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.feature-comparison-table th,
.feature-comparison-table td {
    /*border: 1px solid #e0e0e0;*/
    border: 1px solid none;
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.feature-comparison-table th {
    /*background-color: #f5f5f5;*/
    background-color: none;
    font-weight: var(--main-font-weight);;
    /*text-align: center;*/
}

.feature-comparison-table tr:nth-child(even) {
    background-color: #fafafa;
}

.feature-comparison-table td:nth-child(2),
.feature-comparison-table td:nth-child(3),
.feature-comparison-table td:nth-child(4),
.feature-comparison-table td:nth-child(5),
.feature-comparison-table th:nth-child(2),
.feature-comparison-table th:nth-child(3),
.feature-comparison-table th:nth-child(4),
.feature-comparison-table th:nth-child(5) {
  text-align: center;
}

.feature-comparison-toggle button {
    background-color: #6b46c1;
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-weight: var(--main-font-weight);
    cursor: pointer;
    font-size: 14px;
}

.hidden {
    display: none;
}

@media (max-width: 768px) {
    .feature-comparison-table {
        font-size: 0.875rem;
    }
}

.feature-comparison-table {
    transition: all 0.3s ease;
    opacity: 1;
}

.feature-comparison-table.hidden {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.centered-feature {
    text-align: center;
}



.FAQ {
    color: var(--font-color);
    font-size: 16px;
    margin: 5rem;
}

.faq-section {
  margin-top: 80px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.faq-heading {
  text-align: center;
  font-size: 2.75rem;
  font-weight: bold;
  margin: 5rem 0rem;
  color: var(--font-color);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
}

.faq-question {
  all: unset;
  cursor: pointer;
  font-weight: var(--main-font-weight);;
  color: #333;
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  padding: 0.5rem 0;
}

.faq-question::after {
  content: '+';
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  content: '-';
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  color: #555;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  /*padding-top: 0.5rem;*/
  padding: 2rem;
}

#request-demo {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 30vh;
    background-color: #f0f0f0;
    background-size: cover;
    /* background-color: var(--bg-color); */
    align-content: center;
    color: var(--font-color);
}

#request-demo-inner {
    position: relative;
    top: 0;
    /* right: 100px; */
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0 auto;
}

#request-demo h2,
#request-demo p {
    color: var(--font-color);
}

.request-demo-cta-button {
    width: 200px;
    height: 60px;
    border: none;
    color: var(--font-color);
    border-radius: var(--radius);
    transition: ease-out 0.3s;
    font-size: 1rem;
    outline: none;
    border: 3px solid var(--font-color);
    position: relative;
    display: block;
    align-content: center;
    text-transform: uppercase;
    font-weight: var(--main-font-weight);;
    justify-self: center;
    text-decoration: none;
    /* background-color: transparent; */
}

.request-demo-cta-button:hover {
    color: var(--text-color);
    cursor: pointer;
}

.request-demo-cta-button:before {
    transition: 0.5s all ease;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    opacity: 0;
    content: "";
    background-color: var(--font-color);
    border: 3px solid var(--font-color);
}

.request-demo-cta-button:hover:before {
    transition: 0.5s all ease;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}

























.contact-us-main-container {
    max-width: 1100px;
    margin: auto;
    /* overflow-y: auto; */
    height: auto;
    transition: max-height 0.3s ease;
    margin-top: 2rem;
    font-size: 14px;
    min-height: 50rem;
    margin-bottom: 5rem;
    display: flex;
}
























/**************************************************************************************
# Admin Page
**************************************************************************************/
.admin-section {
    display: none;
}
.admin-section.active {
    display: block;
}
.interval-pill { 
    display:flex; 
    gap:.5rem; 
    align-items:center; 
    margin-bottom:.5rem;
}

.seat-pill {
    display:inline-block;
    margin-left:.5rem;
    padding:.1rem .5rem;
    border-radius:999px;
    font-size:.8rem;
    background: #722aff;
}
.seat-pill.full { background:#ffe3e3; } /* no seats left */

.edit-role-btn,
.edit-sensitivity-label {
    height: 100%;
    margin: 10px auto;
    margin-right: 10px;
}













/**************************************************************************************
# Policy Group Settings Page
**************************************************************************************/

#policy_group .new-group-button { display: flex; justify-content: space-between; align-items: center; }
#policy_group table { border-collapse: collapse; width: 100%; margin-top: 20px; }
#policy_group th,
#policy_group td { padding: 10px; border: 1px solid #ccc; }
#policy_group th { background-color: #f4f4f4; }
#policy_group .actions a { margin-right: 10px; }

/*.header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }*/
#policy_group .button { padding: 8px 16px; background: var(--font-color); color: #fff; text-decoration: none; border-radius: var(--radius); border: 0; cursor: pointer; }
#policy_group .button:hover { background: var(--main-color-hover); }

/* Modal */
.modal-backdrop { 
    display:none; 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,.5); 
}

/*.modal { 
    position:fixed; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    background:#fff; 
    width: 520px; 
    max-width: 95vw; 
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0,0,0,.2); 
    display:none; 
    height: max-content;
} */

.modal {
    background-color: #0808089e;
    align-content: center;
    justify-items: center; 
}

.modal-header { padding:16px 20px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.modal-body { padding: 16px 20px; }
.modal-footer { padding:16px 20px; border-top:1px solid #eee; display:flex; gap:10px; justify-content:flex-end; }




.close-x { background:var(--font-color); border:0; font-size:20px; cursor:pointer; }
.close-x:hover { background:transparent; border:1px solid var(--font-color); color: var(--font-color) }
.field { margin-bottom: 12px; }
.field input, .field textarea { width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; }
.error { color:#b00020; margin-bottom:10px; }
.hidden { display:none; }


.pw-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;}
.pw-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;width:520px;max-width:95vw;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:1001;}
.pw-modal .modal-header,.pw-modal .modal-footer{padding:16px 20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.pw-modal .modal-footer{border-top:1px solid #eee;border-bottom:0;justify-content:flex-end;gap:10px}



















/**************************************************************************************************************************
# Partner Resource Page
**************************************************************************************************************************/

.breadcrumbs{font-size:14px; color:var(--pw-muted); margin:8px 0 12px}
    .breadcrumbs a{color:var(--pw-muted)}

    /* Top navigation */
    .topnav-wrapper{background:#111116; border-bottom:1px solid var(--pw-border)}
    .topnav{max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between}
    .brand{display:flex; align-items:center; gap:10px; font-weight: var(--main-font-weight);}
    .brand i{color:var(--pw-purple)}
    .navlinks{display:flex; align-items:center; gap:14px}
    .navlinks a{padding:8px 10px; border-radius:10px}
    .navlinks a:hover{background:#1a1a22}
    .nav-auth a{padding:8px 12px; border:1px solid var(--pw-border); border-radius:10px; background:#15151b}
    .nav-auth a.logout{background:#22141f; border-color:#3a2740}

    .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
white-space:nowrap;border:0;padding:0;margin:-1px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:2000}

.modal-card{
    width: 100%;
    max-width: 380px;
    background: var(--text-color);
    border: 1px solid var(--font-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}

.modal-card h3{margin:0 0 10px}
.modal-card label{display:block;margin:10px 0 6px}

.modal-card input{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border-bottom: 1px solid #2a2f3a;
    /* background: #12151d; */
    color: var(--text-color);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px
}

.modal-actions{display:flex;gap:8px;margin-top:12px}
.modal-actions .btn{flex:1;background:#78276E;border:1px solid #8d2d80;border-radius:10px;color:#fff;padding:10px 12px;cursor:pointer;text-align:center}
.modal-close{background:transparent;border:0;color:#9aa0a6;cursor:pointer}
.modal-err{display:none;margin-top:8px;color:#f88}

    
    

    
    
    
    
    
    .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    
    .split{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
        
    .foot-cta{margin:28px 0 8px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
              background:linear-gradient(90deg, rgba(120,39,110,.25), rgba(37,99,235,.15)); border:1px solid var(--pw-border); border-radius:18px; padding:16px 20px}
    .note{font-size:13px; color:var(--pw-muted)}
    @media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr} .quick-kpis{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){.grid{grid-template-columns:1fr} .filters{grid-template-columns:1fr}}

    #clearFilters{opacity:.85}
  #clearFilters:hover{opacity:1}
















/***************************************************************************************
# Security Page
***************************************************************************************/




.section {
    display: none; /* Hidden by default */
}
.section.active {
    display: block; /* Show the active section */
}

.accord-button {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgb(232, 232, 236);
    border-right: 1px solid rgb(232, 232, 236);
    border-left: 1px solid rgb(232, 232, 236);
    border-radius: 5px 5px 0px 0px;
}

.accordion-content {
    border-radius: 0px 0px 5px 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgb(232, 232, 236);
    border-right: 1px solid rgb(232, 232, 236);
    border-left: 1px solid rgb(232, 232, 236);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  transition: .4s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #5e00f3;
}
input:checked + .slider:before {
  transform: translateX(26px);
}

























/***************************************************************************************
 # Resources
***************************************************************************************

.resources-wrap{max-width:1200px;margin:0 auto;padding:24px}
.resources-wrap .layout{display:grid;grid-template-columns:260px 1fr;gap:20px} @media(max-width:960px){.layout{grid-template-columns:1fr}}
.resources-wrap aside{position:sticky;top:18px;align-self:start;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.resources-wrap .side{padding:12px}
.resources-wrap .side h4{margin:6px 10px 10px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.resources-wrap .nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink)}
.resources-wrap .nav a.active{background:rgba(90,34,166,.08);border:1px solid #e6d9fb}
.resources-wrap header.hero{background:linear-gradient(135deg,var(--pw),#834bd9);color:#fff;border-radius:var(--r);padding:28px 20px;margin-bottom:16px}
.resources-wrap .tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px}
.resources-wrap .search{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--border);padding:10px 12px;border-radius:10px}
.resources-wrap .search input{border:0;outline:0;font-size:15px}
.resources-wrap .btn{display:inline-flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight: var(--main-font-weight);;cursor:pointer}
.resources-wrap .grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.resources-wrap .col-4{grid-column:span 4} @media(max-width:900px){.col-4{grid-column:span 6}} @media(max-width:600px){.col-4{grid-column:span 12}}
.resources-wrap .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.resources-wrap .title{font-weight: var(--main-font-weight);}
.resources-wrap .meta{color:var(--muted);font-size:13px}
.resources-wrap .tag{display:inline-block;background:#f3f2f8;color:#574d79;border:1px solid #e9e6f4;border-radius:999px;padding:6px 8px;font-size:12px;margin-right:6px}*/

.resources-main {
    width: 100%;
    position: relative;
    margin-left: 2rem;
    margin-top: 2rem;
}

.quiz-menu .side {
    border-bottom: 1px solid #ccc;
    padding: 0rem 0rem 1rem 1.5rem;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: var(--main-font-weight);
    color: var(--muted);
}

.quiz-menu .side h4 {
    margin: 6px 10px 10px;
}

.resources-main .hero {
    background:linear-gradient(135deg, #5a22a6,#834bd9);
    color:#fff;
    border-radius: var(--radius);
    padding:28px 20px;
    margin-bottom:16px;
}

.resources-main .hero h1 {
    font-size: 3.5em;
    margin: 15px 0px;
    font-weight: var(--main-font-weight);;
    color: var(--text2-color);
    text-align: left;
}

.resources-main .hero p {
    color: var(--text2-color);
}

.resources-main .tools {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:10px 0 18px
}

.resources-main .search {
    display:flex;
    gap:8px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    padding:10px 12px;
    border-radius:10px
}

.resources-main .search input {
    border:0;
    outline:0;
    font-size:15px
}

.resources-main .btn {
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    font-weight: var(--main-font-weight);;
    cursor:pointer;
    font-size: 14px;
}


.resources-main .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}

.resources-main .title {
    font-weight: var(--main-font-weight);
}

.resources-main .meta {
    color:var(--muted);
    font-size:13px
}

.resources-main .tag {
    display: inline-block;
    background: #f3f2f8;
    color: #574d79;
    border: 1px solid #e9e6f4;
    border-radius: 999px;
    padding: 6px 8px;
    font-size: 12px;
    margin-right: 6px
}



/* --- User Guide image blocks --- */
/* ---------- Container: breadcrumb / nav ---------- */
.resources-nav{
  color:#666;
  margin:0 auto 8px;
  max-width:1200px;
  width:100%;
  padding:16px;
}
@media (max-width:767px){
  .resources-nav{ padding:12px; }
}

/* ---------- User Guide layout (responsive) ---------- */
.userguide-layout{
  display:grid;
  grid-template-columns:minmax(240px,280px) 1fr;
  gap:24px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0 16px; /* page gutters */
}
@media (max-width:1024px){
  .userguide-layout{ grid-template-columns:1fr; }
}


















/*********************** ISMS Manual Full ***************************/
/* ---------- Layout ---------- */
.fullManualWrap{
  max-width: 1280px;
  margin: 22px auto;
  padding: 0 16px 40px 16px;
  display: grid;
  grid-template-columns: var(--tocW) 1fr;
  gap: 16px;
  align-items: start;
}

/* ---------- TOC container (card on desktop, drawer on mobile) ---------- */
.toc{
  position: sticky;
  top: var(--toc-offset, 14px);
  align-self: start;
  background: var(--paper, #fff);
  border: 1px solid var(--line, var(--pw-border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 10px 14px;
  max-height: calc(100vh - (var(--toc-offset, 14px) * 2));
  overflow: auto;
}

.toc li {
    margin: 6px 0;
}

.toc .lvl1,
.toc .lvl2 {
    border: none;
    box-shadow: none;
}

.toc a {
    text-decoration: none;
    color: var(--ink);
    line-height: 1.3;
    display: inline-block;
    border-radius: 10px;
    padding: 6px 8px;
}

/* Optional heading inside TOC */
.tocTitle,
.toc h4{
  font-weight: var(--main-font-weight);;
  font-size: 13px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, var(--pw-muted));
}

/* ---------- TOC list + links (from CSS #2, renamed) ---------- */
.tocList{ list-style:none; padding-left: 0; margin: 0; }
.tocList li{ margin: 6px 0; }

.tocList a{
  text-decoration:none;
  color: var(--ink, #111827);
  font-size: 12px;
  line-height: 1.3;
  display: inline-block;
  border-radius: 10px;
  padding: 6px 8px;
}
.tocList a:hover{ background: rgba(109,40,217,.08); }
.tocList a.active{ font-weight: var(--main-font-weight);; text-decoration: underline; }
.tocList a:focus-visible{ outline:3px solid rgba(90,34,166,.35); }

.tocRef{ color: var(--muted); font-weight: var(--main-font-weight);; margin-right: 6px; }

.tocList.lvl2{ padding-left: 10px; border: none; margin-left: 4px; }
.tocList.lvl3{ padding-left: 10px; border: none; margin-left: 4px; }
.tocList.lvl4{ padding-left: 10px; border: none; margin-left: 4px; }

/* Desktop/tablet: hide toggle button (from CSS #1) */
@media (min-width:601px){
  .toc .toc-toggle{ display:none; }
  .toc .toc-content{ overflow:auto; opacity:1; visibility:visible; height:auto; }
}

/* ---------- Right pane document card ---------- */
.docCard{
  background: var(--paper, #fff);
  border: 1px solid var(--line, var(--pw-border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 10px 18px;
  min-height: 240px;
}

.docTop{
  display:flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line, var(--pw-border));
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.docTop .meta h1{
    font-size: 18px;
    margin: 0;
    font-weight: bold;
    text-align: left;
}
.docTop .meta .sub{
  font-size: 12px;
  color: var(--muted, var(--pw-muted));
  margin-top: 3px;
}
.docTop .actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

.btnMini{
  border:1px solid var(--line, var(--pw-border));
  background:#fff;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}
.btnMini:hover{ filter: brightness(.98); }

/* ---------- Sections + depth typography ---------- */
.sec{ padding: 8px 0; }
.secTitle{
  display:flex;
  gap: 10px;
  align-items: baseline;
  margin: 12px 0 8px 0;
}
.secRef{
  font-weight: var(--main-font-weight);;
  color: var(--muted, var(--pw-muted));
  min-width: 46px;
}
.secName{ font-weight: var(--main-font-weight);; }

.depth1 .secTitle{ margin-top: 18px; }
.depth1 .secTitle .secName{ font-size: 18px; }
.depth2 .secTitle .secName{ font-size: 16px; }
.depth3 .secTitle .secName{ font-size: 14px; }
.depth4 .secTitle .secName{ font-size: 13px; }

.secBody{
  padding-left: 56px;
  color: #111827;
}
.secBody.empty{ color: var(--muted, var(--pw-muted)); }

/* Make pasted HTML behave */
.secBody p{ margin: 0 0 10px 0; }
.secBody h1, .secBody h2, .secBody h3{ margin: 10px 0 8px 0; }
.secBody ul{ margin: 0 0 10px 18px; }

/* ---------- Register accordions ---------- */
.regAcc{
    margin: 12px 0 6px 56px;
    /* border: 1px solid var(--line, var(--pw-border)); */
    /* border-radius: 14px; */
    /* background: #fff; */
    /* overflow: hidden; */
    /* width: 100%; */
    /* display: flex;*/
}

.regAccBtn{
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--main-font-weight);;
  display:flex;
  gap: 10px;
  align-items:center;
}

.regAccBtn:hover{ background: rgba(109,40,217,.06); }
.regAccBtn .chev{ color: var(--muted, var(--pw-muted)); font-weight: var(--main-font-weight); }
.regAccBody{ border-top: 1px solid var(--line, var(--pw-border)); }
.regAccInner{ padding: 12px; }

/* ============================================================
   MOBILE: TOC drawer (from CSS #1) — works with .fullManualWrap
   Expect markup:
   <aside class="toc">
     <button class="toc-toggle">☰</button>
     <div class="toc-content">...tocList...</div>
   </aside>
   <div class="toc-scrim" hidden></div>
   ============================================================ */
@media (max-width:600px){
  .fullManualWrap{ grid-template-columns: 1fr; }

  .toc{
    position:fixed;
    left:0;
    top: var(--toc-offset, 14px);
    height: calc(100vh - var(--toc-offset, 14px));
    width:56px;                 /* collapsed rail */
    padding:8px;
    background:transparent;     /* becomes white when open */
    border-radius:0 12px 12px 0;
    z-index:999;
    overflow:hidden;            /* hide list when collapsed */
    transition:width .25s ease, transform .25s ease;
    transform:translateX(0);
    border:0;
    box-shadow:none;
    max-height:none;
  }

  .toc .toc-toggle{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    border-radius:10px;
    border:1px solid var(--line, var(--pw-border));
    cursor:pointer; font-size:18px; line-height:1;
    background:#fff;
  }
  .toc .toc-toggle:focus-visible{ outline:3px solid rgba(90,34,166,.35); }

  .toc .toc-content{
    margin-top:8px;
    height:calc(100% - 48px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-right:8px;
    opacity:0; visibility:hidden;
    transition:opacity .2s ease;
    background:#fff;
    border-left:1px solid var(--line, var(--pw-border));
    border-radius:0 12px 12px 0;
  }

  .toc.is-open{
    width:min(85vw, 320px);
    background:#fff;
    box-shadow:7px 10px 12px rgba(0,0,0,.2);
    border-right:1px solid var(--line, var(--pw-border));
  }
  .toc.is-open .toc-content{ opacity:1; visibility:visible; }

  .toc-scrim[hidden]{ display:none; }
  .toc-scrim{
    position:fixed; left:0; top: var(--toc-offset, 14px); right:0; bottom:0;
    background:rgba(0,0,0,.25);
    backdrop-filter:blur(1px);
    z-index:998;
  }

  body.toc-open{ overflow:hidden; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .toc{ transition:none; }
  .toc .toc-content{ transition:none; }
}

/* ---------- Print (from CSS #2, adapted) ---------- */
@media print{
  body{ background:#fff; }
  .fullManualWrap{ grid-template-columns:1fr; max-width:none; margin:0; padding:0; }
  .toc{ display:none; }
  .docCard{ box-shadow:none; border:none; border-radius:0; padding:0; }
  .btnMini{ display:none; }
  .secBody{ padding-left:0; }
  .regAcc{ display:none; }
  .sec{ break-inside: avoid; }
  .side-menu{ display:none; }
  .header{ display:none; }
}


/* =============================
   Print: clean minutes
   ============================= */
@media print{
  body{ background:#fff; }
  .mr-grid{ grid-template-columns: 1fr; }
  .panel{ box-shadow:none; border:none; }
  .toolbar, #q, #btnAdd, #btnShowReadiness, #btnEdit, #btnActions, #btnPrint{ display:none !important; }
  .mr-modal{ display:none !important; }

  #details{ max-height:none; overflow:visible; }
  .mr-doc{ border:none; box-shadow:none; border-radius:0; }
  .mr-doc__head{ border:none; padding:0 0 10px; }
  .mr-rule{ border-top:2px solid #111; }
  .mr-section{ page-break-inside:avoid; }
}

























/* ---------- Document area ---------- */
.doc{ width:100%; min-width:0; }
.doc .hero{
  background:linear-gradient(135deg,#5a22a6,#834bd9);
  color:#fff;
  border-radius:var(--radius,16px);
  padding:24px 20px;
  margin-bottom:16px;
}
.doc .hero h1{
  font-size:clamp(1.75rem,2.5vw + 1rem,3rem);
  margin:10px 0;
  font-weight: var(--main-font-weight);;
  color:var(--text2-color);
  text-align:left;
}
.doc .hero p{ color:var(--text2-color); margin:0; }
.doc h2{ margin-top:clamp(2rem,5vw,5rem); }
.userguide-layout h3{ margin-top:clamp(1rem,4vw,2rem); font-weight: var(--main-font-weight);; }
.userguide-layout hr{ margin:clamp(1.5rem,4vw,4rem) 0; }
.back-top{ margin:28px 0; }

/* Smooth anchor jump offset (for sticky headers/TOC) */
.doc h2[id],
.doc h3[id],
.doc h4[id],
.doc section[id]{ scroll-margin-top:calc(var(--toc-offset) + 16px); }

/* ---------- User Guide images / placeholders ---------- */
.userguide-image, .userguide_image{
  margin:16px 0 24px;
  border:1px solid var(--pw-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,16,32,.08);
  overflow:hidden;
}
.userguide-image img, .userguide_image img{
  display:block; width:100%; height:auto;
}
.userguide-image figcaption, .userguide_image figcaption{
  font-size:13px; line-height:1.5; color:var(--pw-muted);
  padding:8px 12px; background:#fafafb; border-top:1px solid var(--pw-border);
}
/* Placeholder variant (no <img>) */
.userguide-image.is-placeholder, .userguide_image.is-placeholder{
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
  border:1.5px dashed #cfcfe8;
  background:repeating-linear-gradient(45deg,#fafafb,#fafafb 10px,#f1f1f8 10px,#f1f1f8 20px);
}
.userguide-image.is-placeholder::after, .userguide_image.is-placeholder::after{
  content:attr(data-label);
  color:#574d79; font-size:14px; text-align:center; padding:0 12px; opacity:.85;
}
.userguide-image.-sm, .userguide_image.-sm{ min-height:160px; }
.userguide-image.-lg, .userguide_image.-lg{ min-height:320px; }
.userguide-gallery{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); }
.userguide-gallery > .userguide-image, .userguide-gallery > .userguide_image{ grid-column:span 6; }
@media (max-width:800px){
  .userguide-gallery > .userguide-image, .userguide-gallery > .userguide_image{ grid-column:span 12; }
}

/* ---------- Licensing (plan cards) ---------- */
.plan-grid{ display:grid; gap:12px; grid-template-columns:repeat(12,1fr); margin:10px 0 16px; }
.plan-card{
  grid-column:span 4;
  border:1px solid var(--pw-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,16,32,.08);
  padding:14px 16px;
}
.plan-card h4{ margin:0 0 4px; font-weight: var(--main-font-weight);; }
.plan-card .plan-meta{ margin:0 0 6px; color:var(--pw-muted); font-weight: var(--main-font-weight);; font-size:13px; }
.plan-card ul{ margin:8px 0 0 18px; }
@media (max-width:980px){ .plan-card{ grid-column:span 6; } }
@media (max-width:640px){ .plan-card{ grid-column:span 12; } }

/* ---------- Permissions table (structure + states) ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--pw-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,16,32,.06);
}
.perm-table{ width:100%; min-width:880px; border-collapse:separate; border-spacing:0; }
.perm-table thead th{
  position:sticky; top:0;
  background:#fafafb; z-index:2;
  text-align:center; font-weight: var(--main-font-weight);;
  padding:12px 10px;
  border-bottom:1px solid var(--pw-border);
}
.perm-table th.feat{
  position:sticky; left:0; z-index:3;
  text-align:left; background:#fff; min-width:260px;
}
.perm-table td, .perm-table th{
  padding:10px 12px; border-bottom:1px solid var(--pw-border); vertical-align:top;
}
.perm-table tbody tr:last-child td, .perm-table tbody tr:last-child th{ border-bottom:0; }
.perm-table td{ text-align:center; white-space:nowrap; }
.perm-table td small{ display:block; color:var(--pw-muted); font-size:12px; margin-top:2px; }
.perm-table .dim{ color:var(--pw-muted); font-weight: var(--main-font-weight);; }

/* State styles */
.perm-table td.yes{ color:#0ea765; font-weight: var(--main-font-weight);; }
.perm-table td.no{ color:#c43b3b; font-weight: var(--main-font-weight);; }
.perm-table td.limited{ color:#b58900; font-weight: var(--main-font-weight);; }

/* Legend */
.legend{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-top:1px solid var(--pw-border); background:#fff; }
.badge{ display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; border-radius:6px; font-weight: var(--main-font-weight);; }
.badge.yes{ background:#e9f8ef; color:#0ea765; }
.badge.no{ background:#fdecec; color:#c43b3b; }
.badge.limited{ background:#fff5e0; color:#b58900; }

/* A11y helper */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Collapsible matrix (details/summary) ---------- */
.matrix-section{ scroll-margin-top:calc(var(--toc-offset) + 16px); }
.matrix-collapsible{
  border:1px solid var(--pw-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,16,32,.06);
  overflow:hidden;
}
.matrix-summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; cursor:pointer; background:#fafafb; position:relative;
}
.matrix-summary::-webkit-details-marker{ display:none; }
.matrix-summary::after{
  content:'▸'; font-size:16px; line-height:1; transform:rotate(0deg);
  transition:transform .2s ease; color:#574d79;
}
.matrix-collapsible[open] .matrix-summary::after{ transform:rotate(90deg); }
.matrix-summary h2{ margin:0; font-size:clamp(1.1rem, 1.2vw + 1rem, 1.6rem); }
.matrix-toggle-hint{ font-size:12px; color:var(--pw-muted); }
.matrix-collapsible > .table-wrap{
  border:0; border-top:1px solid var(--pw-border); border-radius:0 0 16px 16px;
}
@media (max-width:640px){
  .matrix-summary{ position:sticky; top:0; z-index:1; }
}




































/***************************************************************************************
 #OTP Page
***************************************************************************************/

 .otp-input { letter-spacing: 0.3rem; text-align:center; font-size:1.2rem; }


















/***************************************************************************************
 # Create Quiz Page
***************************************************************************************/

 .read {
    padding: 2rem;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    background: #f9f9f9;
    border-radius: var(--radius);
}
.quiz-answer.read-only {
    margin-left: 1rem;
    border: none;
    border-bottom: 1px solid;
    padding: 1rem 0rem;
}

.hidden {
    display: none !important;
}

.quiz-question {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    }

    .quiz-question p {
    margin-bottom: 0.5rem;
    }

    .quiz-question ul.options {
    list-style: none;
    padding-left: 1rem;
    }

    .quiz-question ul.options li {
    margin-bottom: 0.25rem;
    }









/***********
#
*************/

h1 {
    text-align: center;
}
form {
    /* display: flex; */
    /* background-color: #fff; */
    /* padding: 2rem; */
    width: 100%;
    margin: 10px auto;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
} 
.question-block {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 50px;
    border-radius: 8px;
    position: relative;
}
.question-block label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
/*input[type="text"] {
    width: calc(100% - 20px);
    padding: 8px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    border: 1px solid #ccc;
}
button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: var(--radius);
    margin-top: 10px;
} */
button.remove-btn {
    background-color: var(--font-color);
    position: absolute;
    right: 10px;
    top: 10px;
}
button.cancel-btn {
    background-color: var(--main-color-hover);
    margin-top: 20px;
}
button:hover {
    opacity: 0.9;
}







/******************
Policy Manager Dashboard
**********************/

#chart,
#chart-license-donut {
    /*width: 400px;*/
    width: 280px;
    height: 300px;
    margin: auto;
}

#conformanceChart {
    width: 600px;
    height: 250px;
    margin: auto;
}

/*#revisionChart {
    width: 400px;
    height: 300px;
    margin: auto;
} */

#trainingChart {
    width: 600px;
    height: 250px;
    margin: auto;
}











/***************************************************************************************
# Policy Page
***************************************************************************************/

/*#takeQuiz {
    border: 1px solid;
    border-radius: var(--radius);
    padding: 8px 15px;
    background-color: var(--font-color);
    color: white;
}

#takeQuiz:hover {
    border: 1px solid var(--font-color);;
    border-radius: var(--radius);
    padding: 8px 15px;
    background-color: transparent;
    color: var(--font-color);
} */

.policy_title {
    text-align: center;
}

.policy-sidebar {
    /* width: 25%; */
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    /* top: 4rem; */
    /* position: relative; */

    top: inherit;
    position: sticky;
}

/*.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ddd;
    border-radius: 5px 5px 0px 0px;
}

.header .create-buttons {
    display: flex;
    gap: 20px;
}

.header h2 {
    color: var(--font-color);
    font-style: italic;
} */


.nav-link {
    color: var(--font-color);
    font-weight: var(--main-font-weight);
}

.nav-link.active {
    font-weight: var(--main-font-weight);
}

.policy-container {
    display: flex;
    height: 100%;
}

.policy-main {
    width: 100%;
    /*margin: auto;*
    height: 100%; */
    position: relative;
    /*display: flex;*/
}

.policy-main-top {
    width: 100%;
    /*margin: auto;*/
    height: 100%;
    position: relative;
    display: flex;
}

.policy-navigator {
    text-align: right;
    margin: 1rem;
    display: flex;
}

.policy-list {
    list-style-type: none;
    padding: 0;
    position: relative;
}

.policy-list a {
    text-decoration: none;
    color: var(--font-color);
    font-weight: bold;
    display: grid;
    /* width: 100%; */
    border-bottom: 1px solid;
    padding: 2rem 1rem;
}

.policy-list a:hover {
    background-color: #dfdede;
}

.policy-list li {
    /* border-bottom: 1px solid; */
    cursor: pointer;
    /* width: 100%; */
    /*font-style: italic;*/
}

.policy-title {
    margin-bottom: 0px;
    color: #000;
}

.policy-type {
    font-style: italic;
    font-weight: var(--main-font-weight);;
    margin-bottom: 0px;
    color: #000;
}

.policy-list li:hover {
    background-color: #dfdede;
}

.unread-policy {
    background-color: var(--main-color-hover);
    color: white;
}

.unread-policy a .policy-title, 
.unread-policy a .policy-type {
    color: white;
}

.unread-policy:hover a .policy-title, 
.unread-policy:hover a .policy-type {
    color: var(--font-color);
}

.acknowledgment {
    background-color: var(--font-color);
    /* font-weight: bold; */
    color: #fff;
    /* padding: 7px; */
    border-radius: var(--radius);
    border: 1px solid var(--font-color);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    padding: 10px;
    margin-top: 3rem;
    font-family: var(--main-font);
}




.buttons {
    text-align: right;
    margin: 1rem;
    /*right: 0;
    position: absolute;*/
    display: flex;
    justify-content: right;
    align-items: center;
}

.top-buttons {
    text-align: right;
    margin: 1rem;
    right: 0;
    position: absolute;
}

.pdf-content {
    font-size: 15px;
    line-height: 1.2;
    margin: 0 auto;
    width: 100%;
    padding: 2rem;
    height: 100%;
}

.pdf-content h2 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.p-btn {
    padding: 10px;
}

.canback-btn {
    background-color: var(--main-color-hover);
    border-radius: var(--radius);
    border: 1px solid var(--main-color-hover);
    color: #fff;
    font-family: var(--main-font);
}

.canback-btn:hover {
    background-color: var(--font-color);
    color: #fff;
    /*padding: 7px;*/
    border: 1px solid var(--main-color-hover);
}

.trs {
    font-family: var(--main-font);
    font-size: 16px;
    margin: 0rem 10px;
}

.trs-btn {
    background-color: #d5d5d5;
    border: none;
    font-weight: bold;
    font-family: 'FontAwesome';
    border-radius: 2px;
    font-size: 20px;
    padding: 5px 10px;
}

.trs-btn:hover {
    background-color: var(--font-color);
    border: none;
    font-weight: bold;
    font-family: 'FontAwesome';
    border-radius: 2px;
    color: var(--text-color);
}

.cm360-btn {
    background-color: var(--main-color);
    /*font-weight: bold;*/
    color: var(--text-color);
    /*padding: 7px;*/
    border-radius: var(--radius);
    border: 1px solid var(--font-color);
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--main-font-weight);
    font-family: var(--main-font);
    /*width: 100%;*/
}

.cm360-btn:hover {
    background-color: transparent;
    color: var(--main-color);
    /*padding: 7px;*/
    border: 1px solid var(--main-color);
    font-size: 16px;
}

.cm360-btn .fas {
    color: var(--text-color);
}

.cm360-btn:hover .fas {
    color: var(--main-color);
}


.ai-buttons {
    margin-left: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
}


.cm360-btn.is-disabled {
    background-color: #c7c7c7;
    /* font-weight: bold; */
    color: var(--text-color);
    /* padding: 7px; */
    border-radius: var(--radius);
    border: none;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    font-weight: var(--main-font-weight);
    font-family: var(--main-font);
    /* width: 100%;*/
    cursor: not-allowed;
    pointer-events: none;
}

.cm360-btn.is-disabled:hover {
    background-color: inherit
}


.robot-icon {
    top: 7px;
    /* right: 0; */
    font-size: 14px;
    height: 27px;
    width: 27px;
    position: absolute;
    /* right: -10px; */
    background-color: #960ccf;
    color: white;
    border-radius: 50%;
    margin: auto;
    align-content: center;
    text-align: center;
}


.btn-primary {
    background-color: var(--font-color);
    border: none;
}

.btn-primary:hover {
    background-color: var(--font-color);
    border: none;
}


@media (max-width: 1024px) {
  .responsive-btn {
    white-space: nowrap;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
    width: 3rem;
  }

  .responsive-btn i {
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .responsive-btn .robot-icon {
    display: none;
  }
}

.light-btn {
    background-color: transparent;
    border: none;
    padding: 0px 10px;
    color: black;
    font-family: var(--main-font);
}

.light-btn:hover {
    background-color: transparent;
}

/* put this AFTER your .light-btn and .light-btn:hover rules */

/* Real buttons */
.light-btn:disabled,
.light-btn[disabled],
.light-btn.is-disabled {
  opacity: 0.45;             /* greys everything */
  color: #9ca3af;            /* softer text */
  cursor: not-allowed;
  pointer-events: none;      /* no hover/click */
}

/* Prevent your :hover rule from overriding the disabled look */
.light-btn:disabled:hover,
.light-btn.is-disabled:hover {
  background-color: inherit; /* or transparent */
}

/* Anchor “buttons” (since <a> can’t be truly disabled) */
a.light-btn.is-disabled,
a.light-btn[aria-disabled="true"] {
  opacity: 0.45;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
}

/* ensure icons follow the dimmed color */
.light-btn i,
.light-btn svg {
  color: currentColor;
  fill: currentColor;
}


.ai-ok-button {
    text-align: right;
    margin-right: 1rem;
}

#moreActionsOptions button {
    padding: 0.5rem 1rem;
}

.nav-tabs {
    position: sticky;
    top: 5.5rem;
    z-index: 2;
    background-color: #fff;
}

.tab-content {
    display: flex;

}

.tab-content>.active {
    display: block;
    width: 25%;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    /*overflow-y: auto;
    /*top: 4rem;*
    position: relative; */

    overflow-y: visible;
    top: 8.5rem;
    position: sticky;
}

.policyForm-title {
    display: block;
    /*display: grid;*/
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 20px;
    /*margin-bottom: 2rem;*/
    margin-bottom: 4rem;
}

.modal-lg, .modal-xl {
    --bs-modal-width: 80%;
}

.sensitivityLabel {
    right: 30px;
    position: absolute;
    color: gray;
    font-family: 'Poppins';
}

/*#versionDropdownContainer {
    display: block;
    text-decoration: none;
    color: #003166;
    font-weight: bold;
    display: grid;
    /* width: 100%; */
    /* border-bottom: 1px solid; *
    padding: 1.1rem 1rem;
    background-color: var(--text-color);
    border-right: none;
} */

.sort-filter {
    display: block;
    text-decoration: none;
    color: #003166;
    font-weight: bold;
    display: grid;
    /* width: 100%; */
    /* border-bottom: 1px solid; */
    padding: 1.1rem 1rem;
    background-color: var(--text-color);
    border-right: none;
}

.policy-header {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    /* border-bottom: 1px solid #7a7a7a; */
    min-height: 12rem;
    width: 100%;
    background-color: white;
    /* box-shadow: 0px 4px 8px rgb(0 0 0 / 28%); */
    background-color: transparent;
}

.policy-header-info {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    /* min-height: 9rem; */
    width: 100%;
    background-color: transparent;
    font-family: var(--font-primary);
    place-self: center;
    align-items: center;
}

.content-title {
    text-align: center;
}

.content h2 {
    font-size: 1.3rem;
    font-weight: var(--main-font-weight);;
    color: #000;
}

.content h3 {
    font-size: 1.2rem;
    font-weight: var(--main-font-weight);
    color: #000;
}

.content h4 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: var(--main-font-weight);
    color: #000;
}

.content p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #000;
}

.content strong {
    font-weight: var(--main-font-weight);;
}

.content br {
    margin-top: 0;
    margin-bottom: 1rem;
}

select option.current-approver {
    color: red;
    font-style: italic;
}

.nav-item {
    position: relative;
}

.nav-item .notification-count {
    background-color: #e74c3c;
    color: white;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 20px;
    width: 20px;
    text-align: center;
}



















.policy-group-header {
    height: 3rem;
    background-color: var(--font-color);
    color: var(--text2-color);
    align-content: center;
    padding: 0rem 0.5rem;

    font-weight: bold;
    cursor: pointer;
    /*background-color: #f5f5f5;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 6px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.policy-group {
    margin-bottom: 1rem;
}

.policy-group.collapsed ul {
    display: none;
}

.policy-group-header .caret {
    transition: transform 0.3s ease;
    font-size: 16px;
}

.policy-group.collapsed .caret {
    transform: rotate(180deg); /* rotates ">" to "v" */
}

.group-list {
    padding: 0rem;
}

.dropdown-section {
    margin-bottom: 1rem;
}

#sortFilterOptions,
#moreActionsOptions {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    z-index: 1;
}
















/********************************************************************
    # Forgot Password Page
*********************************************************************/

.form-contain {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.form-contain form {
    padding: 2rem;
    text-align: center;
    border-radius: var(--radius);
    /* width: 50rem; */
    border: var(--border);
    background-color: var(--text-color);
    color: var(--font-color);
    width: 462px;
    padding: 48px 48px 60px 48px;
}

.form-contain form img {
    width: 50%;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}


.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    /*margin-left: calc(var(--bs-border-width) * -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: none;
    border-bottom: 1px solid;
    border-bottom-right-radius: 0;*/

    /* margin-left: calc(var(--bs-border-width) * -1); */
    /* border-top-left-radius: 0; */
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-bottom-right-radius: 0;
}

.input-group .btn:hover {
    color: var(--text-color);
    background-color: var(--font-color);
    border-bottom: 1px solid;
}


.form-contain form .input-group input {
    /* height: 30px; */
    width: 100%;
    padding: 5px 10px;
    font-size: 16px;
    color: #000;
    height: 40px;
    font-size: 15px;
    border: transparent;
    display: block;
    border-bottom: 1px solid var(--font-color);
    background-color: transparent;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.form-contain form .form-group {
    margin: 1rem 0rem;
    background-color: var(--font-color);
    color: var(--text2-color);
    border-radius: var(--radius);
}

.form-contain form .producer {
    margin: 1.5rem 0rem;
    font-size: 1.2rem;
}







































/********************************************************************
    # Messages
*********************************************************************/

#message-count,
#notification-count {
    position: absolute;
    font-size: 12px;
    height: 20px;
    width: 20px;
    position: absolute;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    margin: auto;
    align-content: center;
    text-align: center;
    /*display: < ?= $unreadMessagesCount > 0 ? 'block' : 'none' ?>; /* Hide if no unread messages */
}

.messages-count {
    /*position: absolute;*/
    top: -5px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    height: 20px;
    width: 20px;
    text-align: center;
    /*display: < ?= $unreadMessagesCount > 0 ? 'block' : 'none' ?>; /* Hide if no unread messages */
}

.menu-messages-count {
    position: absolute;
    font-size: 12px;
    height: 20px;
    width: 20px;
    /* position: absolute; */
    /* right: -10px; */
    background-color: red;
    color: white;
    /* border-radius: 50%; */
    /* margin: auto; */
    align-content: center;
    text-align: center;
    /* padding: 1rem; */
    border-radius: 100%;
    line-height: 0;
}

.message-page {
    display: flex;
    min-height: 90vh;
}

#message-list {
    /*overflow-y: auto; */
    /* width: 100%; */
    /* max-width: 25rem; */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 27rem;
    overflow-y: auto;
    height: 80vh;
    position: sticky;
    top: 10rem;
}

#message-list .list-group {
    border-radius: 0px;
}

#message-list-outer {
        /* overflow-y: auto; */
    /* height: 80vh; */
    /* width: 100%; */
    /* max-width: 25rem; */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 25rem;
    /* position: sticky; */

}

.message-list-inner {
    /*position: sticky;
    top: -60rem;
    align-self: flex-start;
    overflow-y: auto;
    flex-grow: 1; */
    height: auto;
    border-right: 1px solid #ccc;
    padding-right: 1rem;
}

.message-top-buttons {
    background-color: #f9f9f9;
    height: 4rem;
    /* align-content: center; */
    text-align: end;
    border-right: 1px solid #e5e1e1;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.message-main {
    width: 66.66666667%;
}

.message-main-top {
    background-color: #f9f9f9;
    height: 4rem;
    align-content: center;
    text-align: end;
    padding: 1rem;
}

#message-content {
    padding-left: 3rem;
    flex: 1;
    height: 80%;
}

#message-list .list-group-item {
    cursor: pointer;
}

#message-list .bg-warning {
    background-color: #658cb7; 
    /*background-color: var(--main-color-hover);*/
}

#message-list .bg-unread {
    background-color: #658cb7;
    /*background-color: var(--main-color-hover);*/
}

#message-list .message-checkbox {
    margin-right: 10px;
}

/* Optional: Add a hover effect for messages in the list */
#message-list .list-group-item:hover {
    background-color: #f1f1f1;
}

/* Font Awesome trash icon styling *
.fas.fa-trash-alt {
    font-size: 16px;
    color: var(--font-color) /* Red color for the delete icon *
} */

.message-inbox{
    display: flex;
}

.row .col-md-4 {
    flex-shrink: 0;
    padding-right: 0;
    padding-left: 0;
    margin-top: var(--bs-gutter-y);
}

.no-message {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
    height: 100%;
}

.no-messages {
    justify-content: center;
    align-items: center;
    display: block;
    color: var(--font-color);
}

.no-messages .fa-envelope {    
    color: var(--font-color);
}










/********************************************************************
    # Accordion
*********************************************************************/

/* Accordion container and item styling */
.accordion-container {
    width: 100%;
}

.accordion-item {
    /*border: 1px solid #ccc;*/
    margin-bottom: 10px;
    border-radius: var(--radius);
    padding: 2rem 0rem;
}

.accord-button {
    width: 100%;
    background-color: var(--main-color);
    padding: 15px;
    border: none;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between; /* Space between text and arrow */
    align-items: center;
    font-weight: bold;
    font-family: var(--main-font);
}

.accord-button:hover {
    background-color: var(--main-color-hover);
}

/* Style for the arrow */
.arrow {
    font-family: 'FontAwesome';
    /* transform: rotate(-90deg); */
    transition: transform 0.3s ease; /* Smooth rotation */
}

.accordion-content {
    display: none;
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

/* Add smooth transition */
.accordion-content.show {
    display: block;
} 

/*.accordion-content {
    padding: 15px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: block; /* Display by default *
}

/* Add smooth transition *
.accordion-content.collapse {
    display: none;
} 

/* Rotate the arrow when content is collapsed *
.accord-button.collapsed .arrow {
    transform: rotate(-180deg); /* Arrow points to the right when collapsed *
} */

/* Style for the arrow */
.arrow i {
    transition: transform 0.3s ease;  /* Smooth rotation */
}

/* Rotate the arrow when content is visible */
.arrow i.rotate {
    transform: rotate(180deg);  /* Rotates 180 degrees */
} 






/********************************************************************
Table
*********************************************************************/

.tables {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}

.tables th, .tables td {
    padding: 12px 15px;
    border: 1px solid #ddd;
}

.tables th {
    background-color: #f2f2f2;
    color: #333;
}

.tables tr:nth-child(even) {
    background-color: #f9f9f9;
}

.tables tr:hover {
    background-color: #f1f1f1;
}

.severity-high {
    background-color: red;
    color: white;
}
.severity-medium {
    background-color: orange;
    color: white;
}
.severity-low {
    background-color: green;
    color: white;
}

.severity-undefined {
    background-color: gray;
    color: white;
}



/**************************************************************************
Register Edit
***************************************************************************/

.edit-mode input, .edit-mode select {
    display: block;
}
.edit-mode span {
    display: none;
}
.edit-mode .save-button {
    display: inline-block;
}
.edit-mode .edit-button {
    display: none;
}



/*******************************************************************************
# Custom Modal
*******************************************************************************/

/* Modal styles */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.custom-modal-content {
    background-color: #fff;
    margin: 15% auto;
    /*padding: 20px;*/
    padding: 1rem 5rem 3rem 5rem;
    border: 1px solid #888;
    width: 80%;
    /*max-width: 500px;*/
    border-radius: var(--radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.custom-modal-content h3 {
    font-size: 24px;
    text-align: center;
}

.custom-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.custom-modal-close:hover,
.custom-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modall {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.modall-dialog {
    position: relative;
    margin: 1.75rem auto;
    max-width: 80%;
}

.modall-content {
    background-color: #fff;
    border-radius: 0.3rem;
    padding: 1.5rem;
    width: 80rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    margin-bottom: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
}









/**********************************************************************************
# Custom DropDown
**********************************************************************************/


.custom-dropdown {
    position: relative;
    border: 1px solid #ccc;
    cursor: pointer;
    background: white;
    padding: 10px 0px;
    width: 100%;
}

.custom-dropdown-selected {
    padding: 5px;
}

.custom-dropdown-options {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.dropdown-group {
    border-top: 1px solid #eee;
}

/*.dropdown-group:hover {
    background-color: var(--main-color-hover);
}*/

.dropdown-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f0f0;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
}

.dropdown-group-header:hover {
    background-color: var(--main-color-hover);
    color: var(--text-color);
}
.arrow {
    transition: transform 0.2s ease;
    margin-right: 10px;
    display: inline-block;
}

/* Rotate the arrow when active */
.dropdown-group-header.active .arrow {
    transform: rotate(90deg); /* Down arrow */
}

.dropdown-group-items {
    display: none;
    padding-left: 10px;
}

.dropdown-option {
    padding: 5px;
    cursor: pointer;
    background-color: transparent;
}

.dropdown-option:hover {
    background: var(--main-color-hover);
    color: var(--text-color);
}

.dropdown-option:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.dropdown-option:first-child {
    font-weight: var(--main-font-weight);
}




/*.custom-dropdown { position: relative; }
.custom-dropdown-options {
  max-height: 340px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; padding: 0;
} */
 
.dropdown-search {
  position: sticky; top: 0; background: #fff; z-index: 1;
  display: flex; gap: .5rem; align-items: center; padding: .5rem;
  border-bottom: 1px solid #e5e7eb;
}
.dropdown-group-header { cursor: pointer; display: flex; justify-content: space-between; padding: .5rem .75rem; }
.dropdown-group-items { display: none; padding: .25rem .5rem .5rem; }
.dropdown-group.open > .dropdown-group-items { display: block; }
.dropdown-option { padding: .4rem .75rem; cursor: pointer; }
.dropdown-option:hover { background: #795e97; }
.dropdown-no-results { padding: .75rem; color: #6b7280; }
mark { padding: 0 .15em; border-radius: .2em; }
.dropdown-supergroup + .dropdown-supergroup { margin-top: 0.75rem; }
.dropdown-supergroup-header {
  font-weight: var(--main-font-weight);; 
  padding: .4rem .6rem; 
  opacity: .8; 
  text-transform: uppercase; 
  font-size: .85rem;
}


.new_version_banner {
    background-color: #390343;
    margin: 0rem 1rem;
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem;
}

.new_version_banner_text {
    color: var(--text-color);
    align-items: flex-start !important;
    justify-content: space-between !important;
    display: flex !important;
}

.new_version_banner_text_1 {
    font-weight: var(--main-font-weight) !important;
}

.new_version_banner_text_2 {
    --bs-text-opacity: 1;
    font-size: .875em;
}

.new_version_banner_btn_1 {
    background-color: transparent;
    border-radius: var(--radius);
    padding: 5px;
    border: 1px solid var(--text2-color);
    color: var(--text2-color);
}

.new_version_banner_btn_1:hover {
    background-color: var(--text2-color);
    color: var(--font-color);
    border: 1px solid var(--text2-color);
}

.new_version_banner_btn_2 {
    background-color: transparent;
    border-radius: var(--radius);
    padding: 5px;
    border: 1px solid #979494;
    color: #979494;
}

.new_version_banner_btn_2:hover {
    background-color: #979494;
    color: var(--font-color);
    border: 1px solid #979494;
}






/**********************************************************************************
# Create Modals
**********************************************************************************/

.close-button {
    text-align: right;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    /* width: 50%; */
    width: 40vw;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    padding: 2rem;
    font-family: var(--main-font);
    font-size: 14px;
}

.modal-content .form-label {
    margin-bottom: .5rem;
    color: #9b9b9b;
}

.modal-title {
    font-weight: bold;
    font-size: 16px;
}


.policyForm-title .form-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.policyForm-title .form-group {
    flex: 1;
}

.policyForm-title .form-group select,
.policyForm-title .form-group input {
    width: 100%;
}

/* --- Quill Snow toolbar icon fixes --- */

.ql-snow * {
    box-sizing: border-box;
    color: var(--text2-color);
}

/* If a global reset sets content:none / normal on ::before/::after, restore it here */
.ql-snow .ql-toolbar button:before,
.ql-snow .ql-toolbar .ql-picker-label:before,
.ql-snow .ql-toolbar .ql-picker-item:before {
  content: "" !important;   /* ensure the pseudo-element exists so the SVG background shows */
  display: inline-block;
}

/* Make sure icon strokes/fills are visible on your purple toolbar */
.ql-snow .ql-stroke { stroke: #fff; }
.ql-snow .ql-fill   { fill:   #fff; }

/* Keep the toolbar readable and not clipping items */
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: var(--main-color);
  color: #fff;
  padding: 8px;
  box-sizing: border-box;
  overflow: visible;           /* avoid clipping dropdowns */
  /* optional: make layout resilient */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.ql-toolbar .ql-formats { margin-right: 8px; }

/* Editor body and join between toolbar and editor */
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.ql-container.ql-snow {
  border: 1px solid #e3e5ea;
  border-radius: 0 0 6px 6px;
  min-height: 200px;
  background: #fff;
}

/* Hover affordances */
.ql-toolbar button:hover,
.ql-toolbar .ql-picker:hover {
  background: #f5f5f7;
  border-radius: var(--radius);
}

/* Ensure buttons/pickers have size even if a global reset touched them */
.ql-toolbar .ql-formats button,
.ql-toolbar .ql-formats .ql-picker {
  display: inline-block;
  vertical-align: middle;
  min-width: 28px;
  min-height: 28px;
}

/* Make color/size pickers readable on dark toolbar */
.ql-snow .ql-picker {
  color: #fff;
}
.ql-snow .ql-picker-options {
  background: #fff;
  color: #222;
  border: 1px solid #ddd;
} 

.ql-editor h2 {
    color: #000;
}

.ql-editor p {
    color: #000;
}




.custom-file-upload {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-file-upload .custom-file-button {
    background-color: var(--font-color);
    color: white;
    padding: 10px 15px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: var(--main-font-weight);
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.custom-file-upload .custom-file-button:hover {
    background-color: var(--font-color);
}

.custom-file-upload #file-chosen {
    font-size: 14px;
    color: #555;
}

.custom-file-upload input[type="file"] {
    display: none;
}







.modal-review-dialog {
    position: relative;
    width: auto;
    margin: var(--bs-modal-margin);
    pointer-events: none;
    margin-right: auto;
    margin-left: auto;
    transition: transform .3s ease-out;
    transform: translate(0, -50px);
}

.modal-review {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 200rem;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    padding: 1rem;
    font-family: var(--main-font);
    font-size: 14px;
}


.contextMenu {
    display:none; 
    border-radius: 3px; 
    position:absolute; 
    background-color:white; 
    border:1px solid #ccc; 
    padding:5px;z-index: 9999;
}

.contextMenu button {
    border: none;
    color: var(--font-color);
    background-color: transparent;
}

.contextMenu button:hover {
    border: none;
    color: #fff;
    background-color: var(--font-color);
    border: 1px solid;
    border-radius: 3px;
}


.commentModal {
    display:none; 
    position:fixed; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    background-color:white; 
    border:1px solid #ccc; 
    padding:20px; 
    z-index: 10000; 
    border-radius: var(--radius);  
    font-family: var(--main-font);
    font-size: 12px;
    width: 30rem;
}

#commentInput {
    border: 1px solid #afadad;
    border-radius: 2px;
    width: 100%;
}

#policyReviewModal .modal-body h2 {
    font-size: 22px;
}

#policyReviewModal .modal-body h3 {
    font-size: 18px;
}

#policyReviewModal .modal-body p {
    font-size: 14px;
}








.modal-foot {
    text-align: center;
}


#useTemplateModal .modal-content,
#createPolicyModal .modal-content,
#uploadPolicyModal .modal-content,
#managePolicyModal .modal-content,
#reviewPolicyModal .modal-content,
#reviewPdfPolicyModal .modal-content,
#editChangesRequestedPolicyModal .modal-content,
#editReviewModal .modal-content,
#takeQuizModal .modal-content,
#policy-summary .modal-content,
#policyReviewModal .modal-content,
#editResubmitPolicyModal .modal-content {
    min-width: 70em;
}


#useTemplateModal .modal-content svg,
#createPolicyModal .modal-content svg,
#uploadPolicyModal .modal-content svg,
#managePolicyModal .modal-content svg,
#reviewPolicyModal .modal-content svg,
#reviewPdfPolicyModal .modal-content svg,
#editChangesRequestedPolicyModal .modal-content svg,
#editReviewModal .modal-content svg,
#editResubmitPolicyModal .modal-content svg {
    visibility: visible;
}








/**********************************************************************************
# Quiz Modal
**********************************************************************************/

.quiz-pass {
    text-align: center;
}

.quiz-pass .fa-check-cirle {
    font-size: 6rem;
    color: var(--font-color);
}

.quiz-page {
    display: flex;
}

#quiz-list {
    /* border-right: 1px solid #ddd;
     padding-right: 20px;
     overflow-y: auto; 
    height: 80vh; */
    position: sticky;
    top: var(--toc-offset, 14px);
    align-self: start;
    background: var(--paper, #fff);
    /* border: 1px solid var(--line, var(--pw-border)); */
    border-radius: var(--radius);
    /*box-shadow: var(--shadow);
    padding: 14px 14px 10px 14px;
    max-height: calc(100vh - (var(--toc-offset, 14px) * 2)); */
    overflow: auto;
    width: auto;
 }

.quiz-menu {
    flex: 0 0 auto;
    width: 20%;
    /*top: 3rem;*/
    position: relative;
}

.quiz-main {
    flex: 0 0 auto;
    width: 85%;
    /* margin-top: 2.5rem; */
}

.quiz-menu-inner {
    margin-top: 2rem;
    /* display: none; */
    max-width: 15rem;
    flex: 1 0 100%;
    /* margin-top: 1rem; */
    padding: 0px;
    /* top: 13.25rem; *
    padding-block: 1rem; */
    border: 1px solid rgb(232, 232, 236);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    position: sticky;
    /* top: 10rem; */
    font-family: var(--main-font);
}

.quiz-menu-inner-top {
    border-bottom: 1px solid var(--border);
    padding: 15px 20px;
    font-weight: 600;
}

.quiz-menu-item {
    padding: 7px 20px;
    width: 100%;
    display: flex;
    text-decoration: none;
    color: black;
    font-size: 15px;
    cursor: pointer;
    align-items: center;
    gap: 8px;
}

.quiz-menu-item:hover {
    background-color: var(--main-color-hover);
    color: var(--text-color);
}

.quiz-menu-item.active {
    font-weight: bold;  /* Bold when active */
    color: var(--text-color);
    background-color: var(--main-color-hover);
    /*border: 1px solid var(--font-color);*/
}

.quiz-questions {
    font-family: var(--main-font);
    border: 1px solid;
    /* background-color: var(--font-color); */
    padding: 50px;
    margin-bottom: 2rem;
    border-radius: 10px;
}

.quiz-questions-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.quiz-answers {
    margin-top: 2rem;
}

#quizContainer {
    /* border: 1px solid #c3c3c3;
    padding: 20px;
    border-radius: 15px; */
    font-family: var(--main-font);
}

.quiz-input {
    /* height: 30px; */
    width: 100%;
    padding: 5px 10px;
    font-size: 16px;
    color: #000;
    height: 40px;
    font-size: 15px;
    border: transparent;
    display: block;
    border-bottom: 1px solid var(--font-color);
    background-color: transparent;
}

.quiz-answers-input {
    display: flex;
    margin: 15px 0px 15px 0px;
    /* display: block; */
    height: 44px;
    font-size: 15px;
    position: relative;
}

.quiz-answers-correct {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: var(--main-font-weight);;
    /* line-height: 1.5; */
    color: var(--bs-body-color);
    text-align: center;
    white-space: nowrap;
    /* background-color: var(--bs-tertiary-bg); */
    /* border: var(--bs-border-width) solid var(--bs-border-color); */
    /* border-radius: var(--bs-border-radius); */
    border-bottom: 1px solid var(--font-color);
    height: 40px;
}

.sleek-dropdown {
    background-color: transparent;
    /*max-height: inherit;
    min-height: 60px;*/
    height: 44px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 12px;
    transition: height .2s ease-out;
    width: 100%;
    word-break: break-word;
    font-size: 13px;
    letter-spacing: .1px;
    line-height: 20px;
    font-family: var(--font-primary);
    font-weight: var(--main-font-weight);;
    text-transform: none;
    color: #000000;
    resize: none;
    border: none;
    border-bottom: 1px solid #000000;
    margin-bottom: 1rem;
}

.sleek-dropdown option[disabled] {
    color: #999; /* Lighter color for placeholder */
}


#selectPolicyForm {
    border-radius: 8px;
    /*width: 100%;*/
    margin: 10px auto;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    display: block;
    padding: 2rem;
}

.quiz-select{
    display: flex;
    width: 100%;
}

#confirmationDialog {
    z-index: 9999;
}

.form-select select, input, option {
    font-size: 14px;
    /*background-color: white;
    color: var(--font-color) */
    cursor: pointer;
}




.form-control {
    background-color: transparent;
	padding: 10px;
	font-size: 16px;
}

.dropdown-wrapper {
	/*background-color: #141414;
	padding: 10px; */
    padding: 0px;
    top: 0;
    position: relative;
}

#mySelect {
	background-color: #141414;
	color: #fff;
	/* optional, for text color */
	border: none;
	/* optional, to remove border */
	font-size: 18px;
}













/**********************************************************************************
# Footer
**********************************************************************************/

ul li, ol li {
    list-style-type: none;
}

/*--------------------------------------------------------------
    # Footer
--------------------------------------------------------------*
#footer {
  /*background: #f2f5f8;*
  padding: 0 0 30px 0;
  font-size: 14px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  border-bottom: 2px solid hsl(0deg 0% 100% / 50.98%);
  border-top: 2px solid hsl(0deg 0% 100% / 50.98%);
}*/

.footer-area-bottom {
    border-top: 1px solid;
    margin-top: 4rem;
}

.footer .copyright {
    text-align: center;
    padding-top: 0px;
    float: left;
    padding-bottom: 0px;
    color: var(--text-color);
    font-size: 13px;
}

.footer .credits {
    text-align: center;
    font-size: 13px;
    color: #555;
    float: right;
    padding-top: 30px;
}

.footer .credits a {
    color: #9f9f9f;
    padding-right: 30px;
}

/*.container {
    max-width: 1170px;
    margin: auto;
} */

.container-assets {
    padding: 20px;
    margin-left: 60px;
    transition: margin-left 0.3s;
}

.row {
    /*padding: 50px 0;*/
    padding: 50px 0 50px 0;
    display: flex;
    flex-wrap: wrap;
    /*border-bottom: 1px solid hsl(0deg 0% 100% / 50.98%);*/
}

ul {
    list-style: none;
}

footer {
    font-size: 1spx;
    position: relative;
    bottom: 0px;
    width: 100%;
    border-top: 1px solid hsl(0deg 0% 100% / 50.98%);
    background-color: var(--main-color);
    padding-top: 2rem;
    z-index: 3;
}

.footer-col {
    width: 25%;
    /*padding: 0 15px; */
}

.footer-col h4 {
    font-size: 18px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: var(--main-font-weight);
    position: relative;
}

.footer-col h4::before {
    content: '';
    position: absolute;
    /*left: 0;*/
    bottom: -10px;
    height: 2px;
    box-sizing: border-box;
    background-color: var(--text-color);
    width: 50px;
}

.footer-col ul {
    padding: 0;
}

.footer-col ul li:not(:last-child) {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 15px;
    text-transform: capitalize;
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--main-font-weight);;
    color: #bbbbbb;
    display: block;
    transition: all .50s ease;
}

.footer-col ul li a:hover {
    color: var(--text-color);
    padding-left: 10px;
    font-weight: var(--main-font-weight);;
}

.footer-col .social-links a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: var(--text-color);
    transition: all 0.5s ease;
    align-content: center;
}

.footer-col .social-links a:hover {
    color: var(--text-color);
    background-color: var(--font-color);
}






/************************************************************************************
# Footer Bottom
************************************************************************************/

.footer-bottom .footer-bottom-up {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 22px;
}

.footer-social {
    display: flex;
    align-items: center;
}

.footer-social a:not(:last-of-type) {
    margin-right: 34px;
}

.footer-social a i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    transition: .3s;
}



.footer-bottom .footer-bottom-up {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 22px;
    margin-top: 2rem;
}

.footer-social {
    display: flex;
    align-items: center;
}

.footer-social a:not(:last-of-type) {
    margin-right: 34px;
}

footer .footer-social a {
    font-size: 0;
}
.footer-social a {
    width: 20px;
    height: 20px;
}

.footer-social a i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    transition: 0.3s;
}

.footer-bottom .footer-bottom-up .social-links a i {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: var(--radius);
    color: var(--text-color);
    transition: all 0.5sease;
    align-content: center;
    font-size: 1.3rem;
}




.footer-bottom .footer-bottom-down {
    border-top: 1px solid #bbbbbb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 3rem;
}


.footer-logo img {
    width: 100%;
    height: auto;
    max-width: 200px;
}

.footer-site-info {
    max-width: 750px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.footer-site-info p {
    font-size: 10px;
    line-height: 20px;
    color: #fff;
    margin-bottom: 0rem;
    font-size: 13px;
}

.footer-site-info p a {
    font-size: 13px;
    line-height: 20px;
    text-decoration: unset;
    text-transform: capitalize;
    padding: 0 6px;
    position: relative;
    color: #fff;
    display: inline-block;
    margin: 0;
}

.footer-site-info p a:not(:last-of-type):before {
    content: "";
    position: absolute;
    right: -1px;
    top: 2px;
    width: 1px;
    height: calc(100% - 3px);
    background-color: #fff;
}































/************************************************************************************
# Chat Functions
************************************************************************************/

.chat-container {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 10;
}

.chat-options {
    /*display: none; /* Initially hidden *
    margin-bottom: 10px; /* Add some space between the buttons *
    position: fixed;
    bottom: 70px;
    left: 30px;
    z-index: 98;
    cursor: pointer;*/
    display: none;
    /* margin-bottom: 10px; */
    position: fixed;
    bottom: 75px;
    left: 68px;
    z-index: 98;
    cursor: pointer;
    width: 20rem;
    background-color: var(--font-color);
    border-radius: var(--radius);
    padding: 1rem;
    width: auto;
}

.chat-options.visible {
    /*display: block; /* Show when toggled */
    display: flex;
}

.chat-toggle {
    cursor: pointer;
    font-size: 2rem; /* Adjust size as needed */
    color: #25D366; /* WhatsApp green color */
}



.chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: 'Segoe UI', sans-serif;
  width: fit-content;
}

.chat-toggle button {
    border: none;
    background: var(--main-color);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);*/
    transition: transform 0.2s ease;
    padding: 0px;
    align-content: center;
    margin: 0px;
}

footer .chat-container .chat-toggle .chat-support-btn .fa-comment-dots {
    font-size: 3rem;
    color: var(--text-color);
}

footer .container .row .footer-bottom .footer-bottom-down .footer-site-info .copyright #current-year {
    color: var(--text-color);
}

.chat-toggle button:hover {
    transform: scale(1.1);
    background-color: var(--main-color);
}

.chat-widget {
  display: none;
  width: 320px;
  height: 460px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  flex-direction: column;
  position: fixed;
  bottom: 100px;
  right: 20px;
  transition: all 0.3s ease;
}

.chat-widget.visible {
  display: flex;
}

#chat-header {
    background: linear-gradient(135deg, #6b08c5, #b409d3);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#chat-header h4 {
  margin: 0;
  font-size: 16px;
}

#close-chat {
  background: none;
  border: none;
  font-size: 18px;
  color: white;
  cursor: pointer;
}

#chat-messages {
  flex: 1;
  padding: 12px;
  background: #f5f5f7;
  overflow-y: auto;
}

.message-wrapper {
  display: flex;
  margin-bottom: 15px;
}

.message-wrapper.user {
  justify-content: flex-end;
}

.message-wrapper.bot {
  justify-content: flex-start;
}

.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #58179f;
  margin: 0 10px;
}

.message.user {
  background: #ded0f3;
  color: #1e1030;
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 70%;
}

.message.bot {
  background: #eeeaf6;
  color: #2d2d2d;
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 70%;
}

#chat-form {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background: white;
}

#chat-form input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border-radius: 25px;
  border: 1px solid #ccc;
  font-size: 14px;
  outline: none;
  transition: border 0.2s ease;
}

#chat-form input[type="text"]:focus {
  border-color: #442962;
}

#chat-form button {
  margin-left: 10px;
  padding: 10px 16px;
  background-color: var(--font-color);
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#chat-form button:hover {
  background-color: #442962;
}













































/****************************************************************
    Ask PurpAI
****************************************************************/

.ask-purpai {
    border: 1px solid var(--font-color);
    padding: 7px 18px;
    border-radius: 28px;
}

.ask-purpai button {
    display: flex; 
    align-items: center;
    text-decoration: none;
    background-color: transparent;
    color: var(--font-color);
    padding: 0px;
    border: none;
    margin: 0px;
}

.ask-purpai button:hover {
    background-color: transparent;
}

.ask-purpai img {
    margin-right: 10px;
}

.ask-purpai p {
    margin-bottom: 0rem;
    font-size: 13px;
    text-decoration: none;
}


.ask-purpai-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}
.ask-purpai-btn img {
    height: 20px;
    width: 15px;
}





/****************************************************************
    Chat
****************************************************************/






































/*************************************************************************************
        #Contact Us Page
*************************************************************************************/


button {
  background-color: var(--font-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: var(--font-color);
}

/* Contact Section */
.contact-section {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-header h1 {
  font-size: 2.5rem;
  color: #333;
}

.contact-header p {
  font-size: 1.1rem;
  color: #666;
}

/* Contact Content */
.contact-content {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.contact-form,
.contact-info {
  flex: 1;
    align-self: center;
    padding: 3rem;
}

.contact-form h2,
.contact-info h2 {
  font-size: 12px;
  color: #333;
  margin-bottom: 0px;
  margin-left: 1rem;
}

/*
.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    /* border-radius: var(--radius); *
    font-size: 1rem;
    border-bottom: 1px solid;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #007bff;
  outline: none;
} */

.contact-info p {
    font-size: 12px;
    color: #333;
    margin-bottom: 0px;
}

.contact-info a {
  color: #007bff;
  transition: color 0.3s ease;
}

.contact-info a:hover {
  color: #0056b3;
}


.contact-us-container {
    width: 50%;
    align-self: center;
    padding: 3rem;
}

.contact-us-card {
    /* padding: 18px 18px; */
    width: 100%;
    max-width: 550px;
    flex: 1;
    margin-bottom: 30px;
    position: relative;
    /* border: 1px solid black; */
    height: auto;
    box-shadow: 0 3px 8px rgb(85 10 116 / 26%);
    border-radius: 6px;
    padding: 22px;
}

.contact-us-card:hover{
    transform: scale(1.05);
    box-shadow: 0 3px 26px rgba(89, 78, 240, 0.26);
    transition: 300ms ease-in, background 300ms ease-in, box-shadow 300ms ease-in;
}

.contact-us-header {
    display: flex;
    flex-wrap: wrap-reverse;
    text-align: center;
    justify-content: center;
    gap: 20px;
    /*margin: 40px;*/
    height: 25rem;
}

.contact-us-header-dt {
    display: block;
    width: 100%;
    align-self: center;
}

.contact-us-header-dt h1 {
    color: var(--text-color);
    font-size: 4rem;
    font-family: var(--main-font);
}

.contact-us-header-dt p {
    color: var(--text-color);
    font-family: var(--main-font);
}

.contact-us-card-icon {
    display: flex;
    align-items: center;
    /*color: var(--font-color);*/
    color: black;
    padding-bottom: 10px;
}

.contact-us-card-icon i {
    font-size: 22px;
    padding: 0rem 1rem 0rem 0rem;
}

.contact-us-card-icon h3 {
    color: var(--font-color);
}


/* Basic styling for the input container */
.contact-us-input-container {
    position: relative;
    /*margin-bottom: 2rem;*/
}

.contact-us-input-container select {
    font-size: 16px;
}

/* Style for input fields */
.contact-us-input {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: var(--radius);
    background-color: transparent;
    outline: none;
    height: 5rem;
}

.contact-us-input textarea {
    height: 20rem;
}

/* Floating label effect */
.contact-us-input:focus + label,
.contact-us-input:not(:placeholder-shown) + label {
    top: 1px;
    left: 10px;
    font-size: 11px;
    color: var(--font-color);
    /*font-weight: bold;*/
    transition: all 0.3s ease;
}

/* Position and style the label */
#contactForm label {
    position: absolute;
    top: 16px;
    left: 10px;
    font-size: 15px;
    color: #777;
    pointer-events: none;
    transition: all 0.3s ease;
    display: flex;
}

#contactForm label p {
    margin-top: 0;
    margin-bottom: 0rem;
    color: red;
}

/* Optional: Add a focus border color when input is focused */
.contact-us-input:focus {
    border-color: var(--font-color);
}

.social-media {
    justify-items: center;
}

.social-media .social-icons a {
    margin: 0em 1rem;
}


.contact-us-input-container .select2-container--default.select2-container--focus .select2-selection--multiple {
    padding: 10px;
    font-size: 15px;
    min-height: 5rem;
    border: 1px solid #ccc;
}

.contact-us-input-container .select2-container--default .select2-selection--multiple {
    /* background-color: var(--font-color); */
    /* border: 1px solid #aaa; */
    border-radius: var(--radius);
    cursor: text;
    border: none;
    border-bottom: 1px solid var(--font-color);
    border: 1px solid #ccc;
    min-height: 5rem;
}

.contact-us-input-container .select2-container span {
    display: block;
    width: 100%;
    align-content: center;
}




















/********************************************************************************************************
    # EUSA Page
********************************************************************************************************/

.eusa-page {
    max-width: 1300px;
    display: flex;
    justify-self: anchor-center;
}

.toggle-icon {
    display: none;
}

.toggle-button {
    display: none;
}

.sidebar {
    /* position: fixed; */
    top: 100px;
    left: 0;
    width: 70rem;
    height: 100%;
    overflow-y: auto;
    background-color: #f5f5f5;
    padding: 20px;
    border-right: none;
    transition: transform 0.3s ease-in-out;
    font-size: 16px;
    position: sticky;
    margin: 8rem 0rem;
    border-radius: var(--radius);
}

.sidebar a {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
}

.sidebar a.active {
    font-weight: bold;
    color: var(--font-color);
}

.eusa-content {
    margin-left: 30px;
    padding: 0px 20px;
}

.eusa-content h2,
.eusa-content h3,
.eusa-content h4 {
    color: var(--font-color);
}

.eusa-content p,
.eusa-content li {
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
}

.eusa-content section {
    margin: 8rem 0rem;
}

html {
scroll-behavior: smooth;
}

@media (max-width: 768px) {
    .sidebar {
        top: auto;
        position: fixed;
        width: 315px;
        height: 100%;
        transform: translateX(-87%);
        z-index: 1000;
        display: flex;
        scrollbar-width: none;
        margin: 0rem 0rem;
        border-right: 1px solid #ccc;
        border-radius: 0px;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar a.active {
        font-weight: bold;
        color: var(--text-color);
    }

    .sidebar.expanded {
        transform: translateX(0);
    }

    .toggle-icon {
        display: block;
        width: 4rem;
        text-align: center;
        height: max-content;
        position: absolute;
        right: 0px;
    }

    .toggle-button {
        display: block;
        position: fixed;
        top: 15px;
        left: 15px;
        background-color: var(--font-color);
        color: #fff;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 1001;
    }

    .eusa-content {
        margin-left: 35px;
        padding: 20px;
    }     
}



















/********************************************************************************************************
    # Privacy Page
********************************************************************************************************/

.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 16px;
    line-height: 1.5;
}

.privacy-table th,
.privacy-table td {
    /*border: 1px solid #ccc;*/
    border: none;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

.privacy-table th {
    background-color: #f7f7f7;
    font-weight: bold;
}

.privacy-table tr:nth-child(even) {
    background-color: #fafafa;
}

.privacy-table caption {
    caption-side: top;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    font-size: 18px;
}

@media (max-width: 768px) {
    

    .privacy-table thead {
        display: none; /* Hide header for mobile */
    }

    .privacy-table, 
    .privacy-table tbody, 
    .privacy-table tr, 
    .privacy-table td {
        display: block;
        width: 100%;
    }

    .privacy-table tr {
        margin-bottom: 1.5rem;
        background-color: #fafafa;
        padding: 10px;
        border-radius: 6px;
    }

    .privacy-table td {
        padding: 10px;
        background-color: #fff;
        position: relative;
    }

    .privacy-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 6px;
        color: #444;
    }
}
















/************************************************************************************
# Locate a Partner
************************************************************************************/


.leaflet-top, .leaflet-bottom {
    position: absolute;
    z-index: 900;
    pointer-events: none;
}

.locatepartner .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px; 
    /*margin-top: 2rem;*/
}

.locatepartner .wrap h1 {color: var(--font-color);font-size: 3rem;}

.locatepartner #map {
    width: 100%;
    height: 420px;
    border-radius: 12px;
    border: 1px solid var(--pw-border)
}

.locatepartner .results {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    margin-top: 12px
}

.locatepartner .tabs{display:flex;gap:8px;margin-top:10px}
    
.locatepartner .panel{/*background:var(--pw-card);border:1px solid var(--pw-border);*/border-radius:16px;margin-top:12px}
    
.locatepartner .panel .hd{
      display: flex;
      gap: 12px;
      align-items: end;
      justify-content: space-between;
      padding: 0px 16px;
      border-bottom: 1px solid var(--pw-border);
      font-size: 23px;
    }
    
.locatepartner .panel .bd{padding:14px 16px; display:flex;}
    
.locatepartner button.primary{background:var(--pw-purple);border-color:#8d2d80;cursor:pointer} button.ghost{background:transparent;cursor:pointer}
  
.locatepartner .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    
.locatepartner .empty{padding:10px;border:1px dashed var(--pw-border);border-radius:10px;color:var(--pw-muted);text-align:center}

@media (max-width:900px){ 
    .locatepartner .filters{grid-template-columns:1fr 1fr} 
    .locatepartner .results{grid-template-columns:1fr} 
    .locatepartner .grid{grid-template-columns:repeat(2,1fr)} 
}
    
/*    /*h1{margin:8px 0 4px} .muted{color:var(--pw-muted)}*

*/


























/************************************************************************************
# Error Page
************************************************************************************/


.containerr {
    /*max-width: 1300px;*/
    width: 1300px;
    margin: auto;
}

.containerr .roww {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--main-font);
  color: var(--blue);
  font-size: 2em;
  /*background-color: #000;*/
  min-height: 60vh;
}

.roww-inner2 {
    padding-left: 20px;
}

button {
  font-family: var(--main-font);
}

/*ul {
  list-style-type: none;
  -webkit-padding-start: 35px;
          padding-inline-start: 35px;
}*/

svg {
  width: 100%;
  /*visibility: hidden;*/
}

h1 {
  font-size: 7.5em;
  margin: 15px 0px;
  font-weight: bold;
  color: var(--font-color);
}

h2 {
  font-weight: bold;
  color: var(--font-color);
}

.hamburger-menu {
  position: absolute;
  top: 0;
  left: 0;
  padding: 35px;
  z-index: 2;
}
.hamburger-menu button {
  position: relative;
  width: 30px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.hamburger-menu button span {
  position: absolute;
  height: 3px;
  background: #000;
  width: 100%;
  left: 0px;
  top: 0px;
  transition: 0.1s ease-in;
}
.hamburger-menu button span:nth-child(2) {
  top: 9px;
}
.hamburger-menu button span:nth-child(3) {
  top: 18px;
}
.hamburger-menu [data-state=open] span:first-child {
  transform: rotate(45deg);
  top: 10px;
}
.hamburger-menu [data-state=open] span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
.hamburger-menu [data-state=open] span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}



.btnn {
  z-index: 1;
  overflow: hidden;
  background: transparent;
  position: relative;
  padding: 8px 50px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1em;
  letter-spacing: 2px;
  transition: 0.2s ease;
  font-weight: bold;
  margin: 5px 0px;
}
.btnn.green {
  border: 4px solid var(--font-color);
  color: var(--font-color);
}
.btnn.green:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: var(--font-color);
  z-index: -1;
  transition: 0.2s ease;
}
.btnn.green:hover {
  color: var(--text-color);
  background: var(--font-color);
  transition: 0.2s ease;
}
.btnn.green:hover:before {
  width: 100%;
}

/*p {
   color: var(--font-color);
} */

a {
    color: var(--text-color);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a:hover {
    color: var(--text-color);
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

@media screen and (max-width: 768px) {
  body {
    display: block;
  }

  .containerr {
    margin-top: 70px;
    margin-bottom: 70px;
  }
  
  .containerr .roww {
      display: block;
      align-items: center;
      justify-content: center;
      font-family: var(--main-font);
      color: var(--blue);
      font-size: 2em;
      /*background-color: #000;*/
      min-height: 60vh;
    }
    
    .roww-inner {
        width: 100%;
    }
    
    .roww-inner img {
        width: 100%;
        text-align-last: center;
    }
}






































/*************************************************************************************
    # Compliance Management
*************************************************************************************/

.comp-container {
    width: 88%;
    margin: 0 auto;
    top: 2rem;
    position: relative;
    min-height: 90vh;
}


.comp-container .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
}



/************************ Dashboard ****************************/

/* Header */
.dash-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.card .bd .top-dashtop-left {
    width: 70%;
    /*border: 1px solid;*/
}

.bd-inner {
    display: flex;
}

.card .bd .top-dashtop-right {
    width: 30%;
    text-align: right;
}

.card .bd .top-dashtop-right .score-title,
.card .bd .top-dashtop-right .score,
.card .bd .top-dashtop-right .drivers {
    /*border: 1px solid;*/
}

.card .bd .top-dashtop-right .drivers {
    height: 4rem;
    align-content: end;
}

#kpi_compliance_pct {
    font-size: 4rem;
}

.dash-title h1{
    margin:0;
    font-size:22px;
    letter-spacing:.2px;
    text-align: left;
}

.dash-meta{
  margin-top:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dash-meta .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 24px rgba(23,18,31,.05);
  font-size:12px;
  color: var(--text);
}

.dash-meta .pill i{
  opacity:.85;
}

.dash-meta .pill .k{
  color: var(--muted);
  font-size:11px;
}

.dash-meta .pill strong{
  font-weight:500;
  letter-spacing:.2px;
}

/* Actions to the right */
.dash-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.dash-actions .ctrl{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:170px;
}

.dash-actions .ctrl label{
  font-size:11px;
  color:var(--muted);
}

@media (max-width: 980px){
  .dash-top{ flex-direction:column; align-items:stretch; }
  .dash-actions{ justify-content:flex-start; }
}


/* KPI grid */
.comp-container .kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width:1180px){ .comp-container .kpis{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:720px){ .comp-container .kpis{ grid-template-columns: repeat(2, 1fr); } }

.comp-container .kpi{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /*background: linear-gradient(180deg, rgba(17,24,39,.02), rgba(17,24,39,.01));*/
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.comp-container .kpi .kpi-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.comp-container .kpi .kpi-top .kpi-top-1{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.comp-container .kpi .lbl{ color:var(--muted); font-size:12px; }
.comp-container .kpi .val{
  font-size:26px;
  font-weight:950;
  margin-top:6px;
  letter-spacing:.2px;
  color: var(--text);
}
.comp-container .kpi .sub{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.comp-container .chip{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:4px 8px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: var(--chip);
  font-size:11px;
  color: var(--text);
}
.comp-container .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.comp-container .dot.good{ background: var(--good); }
.comp-container .dot.warn{ background: var(--warn); }
.comp-container .dot.bad{ background: var(--bad); }
.comp-container .dot.info{ background: var(--info); }

/* Main dashboard grid */
.comp-container .grid-2{
  --gap: 14px;
  display:grid;
  gap: var(--gap);
  align-items:start;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* column spans */
.comp-container .grid-2 .column-12{ grid-column: span 12; }
.comp-container .grid-2 .column-11{ grid-column: span 11; }
.comp-container .grid-2 .column-10{ grid-column: span 10; }
.comp-container .grid-2 .column-9 { grid-column: span 9;  }
.comp-container .grid-2 .column-8 { grid-column: span 8;  }
.comp-container .grid-2 .column-7 { grid-column: span 7;  }
.comp-container .grid-2 .column-6 { grid-column: span 6;  }
.comp-container .grid-2 .column-5 { grid-column: span 5;  }
.comp-container .grid-2 .column-4 { grid-column: span 4;  }
.comp-container .grid-2 .column-3 { grid-column: span 3;  }
.comp-container .grid-2 .column-2 { grid-column: span 2;  }
.comp-container .grid-2 .column-1 { grid-column: span 1;  }

.comp-container .grid-2 .card{ min-width:0; }

/* Responsive collapse */
@media (max-width:1100px){
  .comp-container .grid-2{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .comp-container .grid-2 .column-7,
  .comp-container .grid-2 .column-8,
  .comp-container .grid-2 .column-9,
  .comp-container .grid-2 .column-10,
  .comp-container .grid-2 .column-11,
  .comp-container .grid-2 .column-12{ grid-column: span 6; }
  .comp-container .grid-2 .column-6{ grid-column: span 6; }
  .comp-container .grid-2 .column-5{ grid-column: span 6; }
  .comp-container .grid-2 .column-4{ grid-column: span 6; }
  .comp-container .grid-2 .column-3{ grid-column: span 3; }
}
@media (max-width:720px){
  .comp-container .grid-2{ grid-template-columns: 1fr; }
  .comp-container .grid-2 [class*="column-"]{ grid-column: 1 / -1; }
}
@media (max-width:420px){
  .comp-container .grid-2{ --gap: 10px; }
}

/* Cards */
.comp-container .card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;

  /* ✅ enforce consistent widget height */
  display:flex;
  flex-direction:column;
  /*height: 420px; /* adjust if you like */
}

.comp-container .card .comp-filters {
    padding: 3rem 2rem;
}

.comp-container .card .hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,24,39,.03), rgba(17,24,39,.01));
}
.comp-container .card .hd .t{
  display:flex; gap:10px; align-items:center;
  font-weight: var(--main-font-weight);
  letter-spacing:.2px;
  color: var(--text);
}
.comp-container .card .hd .t i{
  color: var(--pw-purple);
  width: 22px; height: 22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  background: rgba(75,9,131,.10);
  border: 1px solid rgba(75,9,131,.18);
}
.comp-container .card .hd .meta{ color:var(--muted); font-size:12px; }

/* ✅ card body uses fixed chart area + scroll-safe detail area */
.comp-container .card .bd{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  min-height:0;
}

.comp-container .card table td {
    align-content: center;
}

/* ✅ chart always at top with fixed height */
.comp-container .chartShell{
  width:100%;
  height: 190px;
  min-height:190px;
  display:block;
}

/* ✅ detail area beneath chart (clipped) */
.comp-container .widgetDetails{
  flex:1;
  min-height:0;
  overflow:hidden;
}
.comp-container .widgetDetails .clip{
  max-height: 150px;
  overflow:hidden;
}

/* Footer inside widget */
.comp-container .widgetFooter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.comp-container .widgetFooter .muted{ color:var(--muted); font-size:12px; }

/* Small button */
.comp-container .btnSmall{
  padding:6px 10px;
  font-size:12px;
}

/* Clickable cards (drill-down) */
.comp-container .card.clickable{
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.comp-container .card.clickable:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(23,18,31,.10);
}

/* Compliance banner should be auto-height (override fixed height) */
.comp-container .card.banner{
  height:auto;
}

/* Footer note */
.comp-container .note{
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.comp-container .note .sep{ opacity:.6; }

/* Optional: banner badge prominence */
.comp-container #complianceMessage.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  letter-spacing:.2px;
}








/********************* ISMS Manual *******************************/

.inline-reg-toggle{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:flex-start;
}

.inline-reg-btn{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--main-font-weight);;
  display:inline-flex;
  gap: 8px;
  align-items:center;
}

.inline-reg-btn:hover{ filter: brightness(.98); }
.inline-reg-btn .chev{ color: var(--muted); font-weight: var(--main-font-weight); }









/******************** Statement of Applicability *****************************/

/* SoA page: single-column layout (no left clause nav) */
.soa-content{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 18px 40px;
}

.soa-content .content-body .card {
    height: auto;
}

.soa-content .content-body .card .card-bd .badge {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    font-size: 12px;
    font-weight: var(--main-font-weight);
    color: var(--font-color);
}

  .wrap{ display: block !important; }

  /* --- PurpleWASP-style KPI row + ellipsis menu --- */
  .soa-kpi-row{
    display:grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap:12px;
  }
  .soa-kpi{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px 14px 12px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
  }
  .soa-kpi__label{
    font-size:12px;
    color: var(--muted);
    font-weight: var(--main-font-weight);;
    letter-spacing:.2px;
  }
  .soa-kpi__value{
    font-size:26px;
    font-weight: var(--main-font-weight);;
    margin-top:6px;
    color: var(--text);
  }
  .soa-kpi__foot{
    margin-top:6px;
    font-size:12px;
    line-height:1.35;
  }
  .soa-kpi__bar{
    margin-top:10px;
    height:10px;
    border-radius:999px;
    background: rgba(75, 9, 131, .08);
    overflow:hidden;
    border: 1px solid rgba(75, 9, 131, .10);
  }
  .soa-kpi__barfill{
    height:100%;
    width:0%;
    border-radius:999px;
    background: linear-gradient(90deg, var(--pw-main-color), var(--main-color-hover));
  }

  .soa-mini-strip{
    margin-top:10px;
    display:grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap:12px;
  }
  .soa-mini{
    background: var(--soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
  }
  .soa-mini__value{
    font-weight: var(--main-font-weight);;
    margin-top:4px;
  }
  .soa-mini__bar{
    margin-top:8px;
    height:10px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
    overflow:hidden;
  }
  .soa-mini__barfill{
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--pw-main-color), var(--main-color-hover));
  }

  /* Ellipsis menu */
  .soa-menu{ position:relative; }
  .soa-iconbtn{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    font-size:18px;
    font-weight: var(--main-font-weight);;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
  }
  .soa-iconbtn:hover{
    border-color: rgba(75, 9, 131, .25);
    transform: translateY(-1px);
  }
  .soa-dropdown{
    position:absolute;
    right:0;
    top:44px;
    width:320px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow: 0 14px 40px rgba(17, 24, 39, .14);
    padding:10px;
    z-index: 50;
    display:none;
  }
  .soa-dropdown.is-open{ display:block; }
  .soa-dd-title{
    font-size:12px;
    font-weight: var(--main-font-weight);;
    color: var(--muted);
    margin-bottom:8px;
  }
  .soa-dd-item{
    width:100%;
    text-align:left;
    padding:10px 10px;
    border-radius:10px;
    border:1px solid transparent;
    background:#fff;
    cursor:pointer;
    font-weight: var(--main-font-weight);;
  }
  .soa-dd-item:hover{
    background: rgba(75, 9, 131, .06);
    border-color: rgba(75, 9, 131, .12);
  }
  .soa-dd-sep{
    height:1px;
    background: var(--line);
    margin:10px 0;
  }
  .soa-dd-label{
    display:block;
    font-size:12px;
    font-weight: var(--main-font-weight);;
    color: var(--muted);
    margin:10px 0 6px;
  }
  .soa-dd-control{ width:100%; }

  @media (max-width: 1100px){
    .soa-kpi-row{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    .soa-mini-strip{ grid-template-columns: 1fr; }
  }



  /* ============================
   PurpleWASP SoA Modal (Control Workspace)
   ============================ */

.soa-modal .issues-modal__dialog{ max-width: 1100px !important; }
.soa-modal__dialog{ border-radius: 18px; overflow:hidden; }

.soa-modal__head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:16px 16px 14px;
    background: linear-gradient(90deg, rgba(75,9,131,1), rgba(93,24,173,1));
    color: var(--text-color);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.soa-modal__head .badge {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: transparent;
    font-size: 12px;
    font-weight: var(--main-font-weight);;
}

.soa-modal__title { 
    font-size:20px; 
    font-weight: var(--main-font-weight); 
    letter-spacing:.2px;
    color: var(--text-color);
}

.soa-modal__sub {
    margin-top:2px; 
    opacity:.92; 
    font-weight: var(--main-font-weight);; 
    color: var(--text-color);
}

.soa-modal__meta { 
    margin-top:8px; 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap;
    color: var(--text-color);
}

.soa-modal__head-right { 
    display:block; 
    align-items:flex-start; 
    gap:10px; 
}

.soa-modal__head-right .soa-cover-text { 
    color: var(--text-color);
}


.soa-modal__head-right .soa-cover-link {
    text-align: right;
    /* background: rgba(255, 255, 255, .14); */
    /* border: 1px solid rgba(255, 255, 255, .18); */
    padding: 8px 10px;
    border-radius: 999px;
    /* display: flex; */
    /* align-items: center; */
    gap: 8px;
    font-weight: var(--main-font-weight);
    top: 2rem;
    position: relative;
    /* color: var(--text-color);*/
}

.soa-modal__head-right .soa-cover-link .mini-btn {
    color: var(--text2-color);
}


.soa-modal__head-right .soa-cover-link .mini-btn:hover {
    position: relative;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent; /* reserve space */
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden; /* ensures underline respects radius */
}

/* the animated “border” */
.soa-modal__head-right .soa-cover-link .mini-btn::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background: var(--text-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
}

.soa-modal__head-right .soa-cover-link .mini-btn:hover::after,
.soa-modal__head-right .soa-cover-link .mini-btn:focus-visible::after{
    transform: scaleX(1);
}

/* optional: nicer focus ring */
.soa-modal__head-right .soa-cover-link .mini-btn:focus-visible{
    outline: 3px solid rgba(90,34,166,.35);
    outline-offset: 2px;
}

/* Primary variant: keep your gradient, but also set underline color */
.soa-modal__head-right .soa-cover-link .mini-btn.primary{
    border-color: transparent;
    background: linear-gradient(180deg, #5b11a0 0%, var(--pw-purple) 100%);
    color:#fff;
}
    
.soa-modal__head-right .soa-cover-link .mini-btn.primary::after{
    background: rgba(255,255,255,.9); /* or var(--main-color) if you prefer */
}

.soa-modal__head-right .soa-cover-link .mini-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}
    
.soa-modal__head-right .soa-cover-link .mini-btn:disabled::after{
    transform: scaleX(0);
}

.soa-modal__dialog #soaModalClose {
    width: max-content;
    position: fixed;
    /* border: 1px solid; */
    border-radius: 50%;
    align-self: end;
    background-color: transparent;
}

.soa-modal__dialog #soaModalClose .fas {
    color: var(--text-color);
}

.soa-modal__coverage{
    background: rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    padding:8px 10px;
    border-radius: var(--radius);
    display:flex;
    align-items:center;
    gap:8px;
    font-weight: var(--main-font-weight);;
    top: 2rem;
    position: relative;
}

.soa-cover-dot{
  width:10px; height:10px; border-radius:99px;
  background: #cbd5e1;
}

.soa-cover-dot.good{ background:#22c55e; }
.soa-cover-dot.warn{ background:#f59e0b; }
.soa-cover-dot.bad{ background:#ef4444; }

.soa-modal__body{ padding:14px 14px 16px; background: var(--soft); }

.soa-tabs{ display:flex; gap:8px; margin-bottom:12px; }

.soa-tabs .mini-btn,
.soa-proof__head .mini-btn,
.panel .mini-btn,
.modal__toolbar .mini-btn {
    background: transparent;
    color: var(--font-color);
    border-bottom: 3px solid var(--font-color);
    border: 0;
    border-bottom: 3px solid var(--font-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.soa-tabs .mini-btn.primary,
.soa-proof__head .mini-btn.primary,
.panel .mini-btn.primary,
.modal__toolbar .mini-btn.primary {
    /* border-color: rgba(75, 9, 131, .25); */
    /* background: linear-gradient(180deg, #5b11a0 0%, var(--pw-purple) 100%); */
    background: transparent;
    color: var(--font-color);
    border-bottom: 3px solid var(--font-color);
    border: 0;
    border-bottom: 3px solid var(--font-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.soa-modal__controltext{ margin-bottom:12px; }
.soa-ctl-panel {
    background:#fff; 
    border:1px solid var(--line); 
    border-radius: var(--radius); 
    padding:12px; 
}

.soa-ctl-text{ font-weight: var(--main-font-weight);; line-height:1.45; }

.soa-modal__grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.soa-modal__grid2 .soa-card .badge,
.soa-mini-strip .badge {
    color: var(--bg-color);
    font-weight: var(--main-font-weight);;
}

.soa-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
  padding:12px;
}
.soa-card__title{
  font-size:13px;
  font-weight:950;
  color: var(--text);
  margin-bottom:10px;
}
.soa-card__row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px;
  align-items:start;
  margin-bottom:10px;
}
.soa-just-panel{
  background: var(--soft);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:10px;
  min-height:46px;
}

.soa-proof{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
  overflow:hidden;
}

.soa-proof__head{
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(75,9,131,.06), rgba(75,9,131,0));
}

.soa-proof__title{ font-weight: var(--main-font-weight); font-size: 14px; }
.soa-proof__sub{ color: var(--muted); font-weight:750; margin-top:2px; }

.soa-proof__tabs{
  display:flex;
  gap:6px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.soa-proof__tab{    
    padding: 8px 10px;
    /* border-radius: 999px; */
    background: transparent;
    color: rgba(75, 9, 131, .25);
    border-color: rgba(75, 9, 131, .25);
    border: 0;
    border-bottom: 3px solid rgba(75, 9, 131, .25);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-weight: var(--main-font-weight);
    cursor: pointer;
}

.soa-proof__tab:hover{
  background-color: transparent;
}

.soa-proof__tab.is-active{
  /*border-color: rgba(75, 9, 131, .25);*/
  border-bottom: 3px solid var(--font-color);
  color: var(--font-color)
  /*background: rgba(75, 9, 131, .06);*/
}

.soa-proof__grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:0;
  min-height: 420px;
}

.soa-proof__list{
  border-right:1px solid var(--line);
  background: var(--soft);
}
.soa-proof__list-inner{
  padding:12px;
  max-height: 420px;
  overflow:auto;
}

.soa-proof__preview{ background:#fff; }
.soa-proof__preview-hd{
  padding:12px;
  border-bottom:1px solid var(--line);
}
.soa-proof__preview-title{ font-weight:950; }
.soa-proof__preview-bd{ padding:12px; }
.soa-proof__viewer{
  background: var(--soft);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  min-height: 340px;
}

.soa-proof__preview .soa-proof__preview-bd .pw-posture-grid .pw-posture-charts {
    display: flex;
}

.soa-proof__preview .soa-proof__preview-bd .pw-posture-grid .pw-posture-charts .insight-chart {
    width: 100%;
}


.soa-proof__preview .soa-proof__preview-bd .pw-side-head,
.soa-proof__preview .soa-proof__preview-bd .pw-icon-btn  {
    background-color: transparent;
    padding: 0rem;
    margin-top: 3rem;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--font-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.soa-proof__preview .soa-proof__preview-bd .pw-acc-panel .pw-side-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.soa-proof__preview .soa-proof__preview-bd .pw-acc-panel .pw-side-body .pw-grid2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    width: max-content;
}

.soa-proof__preview .soa-proof__preview-bd .pw-acc-panel .pw-side-body .pw-icon-btn{
    display: none;
}

.soa-proof__preview .soa-proof__preview-bd .pw-acc-panel .pw-side-body .pw-kv-row,
.soa-proof__preview .soa-proof__preview-bd .pw-acc-panel .pw-side-body .pw-grid2 {
    padding: 1rem 0rem;
    border-bottom: 1px solid var(--border);
} 

.soa-proof__preview .soa-proof__preview-bd .pw-card-body .pw-check,
.soa-proof__preview .soa-proof__preview-bd .pw-card-body .ov-confirm,
.soa-proof__preview .soa-proof__preview-bd .pw-card-body .pw-error,
.soa-proof__preview .soa-proof__preview-bd .pw-card-body .pw-actions {
    display: none;
}

/*.soa-proof__preview .soa-proof__preview-bd .pw-side-stack {
    display: flex;
} */

.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab button {
    background-color: transparent;
}

.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab {
    position: relative;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent; /* reserve space */
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--font-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden; /* ensures underline respects radius */
}

.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab:hover {
    position: relative;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent; /* reserve space */
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--font-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden; /* ensures underline respects radius */
}

/* the animated “border” */
.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background: var(--main-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
}

.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab::after,
.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab:focus-visible::after{
    transform: scaleX(1);
}

/* optional: nicer focus ring */
.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab:focus-visible{
    outline: 3px solid rgba(90,34,166,.35);
    outline-offset: 2px;
}

/* Primary variant: keep your gradient, but also set underline color */
.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab.primary{
    border-color: transparent;
    background: linear-gradient(180deg, #5b11a0 0%, var(--pw-purple) 100%);
    color:#fff;
}
    
.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab.primary::after{
    background: rgba(255,255,255,.9); /* or var(--main-color) if you prefer */
}

.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab:disabled{
    opacity:.6;
    cursor:not-allowed;
}
    
.soa-proof__preview .soa-proof__preview-bd .pw-card .pw-tabs .pw-tab:disabled::after{
    transform: scaleX(0);
}



.soa-linker{
  margin-top:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
  overflow:hidden;
}
.soa-linker__hd{
  padding:12px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, rgba(75,9,131,.06), rgba(75,9,131,0));
}
.soa-linker__bd{ padding:12px; }
.soa-linker__preview{ margin-top:10px; }

.soa-radio{ display:flex; gap:14px; flex-wrap:wrap; }
.soa-radio__item{
  display:flex; gap:8px; align-items:center;
  background: var(--soft);
  /*border:1px solid var(--line);
  border-radius:999px;*/
  padding:8px 10px;
  font-weight: var(--main-font-weight);;
}

/* Responsive */
@media (max-width: 980px){
  .soa-modal .issues-modal__dialog{ max-width: 96vw !important; }
  .soa-modal__grid2{ grid-template-columns: 1fr; }
  .soa-proof__grid{ grid-template-columns: 1fr; }
  .soa-proof__list{ border-right:0; border-bottom:1px solid var(--line); }
  .soa-proof__list-inner{ max-height: 240px; }
}






/* Active selection + fade others (Linked Proof list) */
.soa-proof__list-inner.is-dim .soa-proof-item{
  opacity: .38;
  filter: grayscale(.25);
  transform: none;
  transition: opacity .12s ease, filter .12s ease, box-shadow .12s ease, transform .12s ease;
}

.soa-proof__list-inner.is-dim .soa-proof-item.is-active{
  opacity: 1;
  filter: none;
  box-shadow: 0 10px 22px rgba(17,24,39,.12);
  border: 1px solid rgba(75, 9, 131, .25);
  transform: translateY(-1px);
}

.soa-proof-item{
  cursor: pointer;
  border-radius: var(--radius);
}

/* Optional: make the active one feel “selected” even more */
.soa-proof-item.is-active{
  outline: 2px solid rgba(75, 9, 131, .18);
  outline-offset: 2px;
}

/* Optional: hover should still look nice */
.soa-proof-item:hover{
  opacity: 1;
}


.comp-container .content-body {
    padding: 16px;
    display: grid;
    gap: 12px;
}



/* Tag multi-select (Select2-like) */
.pw-tagselect{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:10px;
  background:#fff;
  position:relative;
  min-height:44px;
  /*display:flex;
  flex-wrap:wrap;*/
  gap:8px;
  align-items:center;
}

.pw-tagselect:focus-within{
  box-shadow:0 0 0 4px rgba(75,9,131,.10);
  border-color: rgba(75,9,131,.35);
}

.pw-tagselect__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pw-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:6px 10px;
  background: linear-gradient(180deg,#fff 0%, #fbf8ff 100%);
  font-weight:500;
  font-size:12px;
}

.pw-chip button{
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  line-height:1;
  padding:0 2px;
  opacity:.7;
  color: var(--font-color);
}
.pw-chip button:hover{ opacity:1; }

.pw-tagselect__input{
  border:0;
  outline:0;
  min-width:220px;
  flex:1;
  font-size:13px;
  padding:6px 4px;
}

.pw-tagselect__menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(23,18,31,.10);
  overflow:hidden;
  z-index:2000;
}

.pw-tagselect__opt{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.pw-tagselect__opt:hover{
  background: rgba(75,9,131,.06);
}

.pw-tagselect__opt .muted{
  font-weight:600;
  font-size:12px;
}


/* =========================
   SoA → Embedded Risk viewer
   ========================= */


.pw-posture-meta{
    display: flex;
    gap: 30px;
}


/* Give the preview area space + scrolling */
#soaLinkedViewer{
  min-height: 560px;
  max-height: 78vh;
  overflow: auto;
}

/* When we are showing a risk, remove the “panel” feel so risk UI can be full-width */
#soaLinkedViewer.soa-risk-mode{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Ensure any common wrappers inside the risk UI do not clamp width */
#soaLinkedViewer.soa-risk-mode .wrap,
#soaLinkedViewer.soa-risk-mode .content,
#soaLinkedViewer.soa-risk-mode .mr-wrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* If your risk UI uses a grid with right sidebar, this helps it breathe */
#soaLinkedViewer.soa-risk-mode *{
  box-sizing: border-box;
}






























/****************** Legal Register ***********************/































/******************** Evidence (SoA-style) *****************************/
    .evidence-content{
      width:100%;
      max-width:1400px;
      margin:0 auto;
      padding:18px 18px 40px;
    }
    .wrap{ display:block !important; }
    .muted{ opacity:.82; }

    /* KPI row (same vibe as SoA) */
    .ev-kpi-row{
      display:grid;
      grid-template-columns: repeat(4, minmax(220px, 1fr));
      gap:12px;
      margin: 14px 0;
    }
    .ev-kpi{
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      padding:14px 14px 12px;
      box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
    }
    .ev-kpi__label{
      font-size:12px;
      color: var(--muted);
      font-weight: var(--main-font-weight);;
      letter-spacing:.2px;
      text-transform:uppercase;
    }
    .ev-kpi__value{
      font-size:26px;
      font-weight:950;
      margin-top:6px;
      color: var(--text);
    }
    .ev-kpi__foot{ margin-top:6px; font-size:12px; line-height:1.35; }
    .ev-kpi__bar{
      margin-top:10px;
      height:10px;
      border-radius:999px;
      background: rgba(75, 9, 131, .08);
      overflow:hidden;
      border: 1px solid rgba(75, 9, 131, .10);
    }
    .ev-kpi__barfill{
      height:100%;
      width:0%;
      border-radius:999px;
      background: linear-gradient(90deg, var(--pw-main-color), var(--main-color-hover));
    }

    /* Ellipsis menu (SoA clone) */
    .ev-menu{ position:relative; }
    .ev-iconbtn{
      width:38px;height:38px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      font-size:18px;
      font-weight: var(--main-font-weight);;
      cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
    }
    .ev-iconbtn:hover{ border-color: rgba(75, 9, 131, .25); transform: translateY(-1px); }
    .ev-dropdown{
      position:absolute; right:0; top:44px;
      width:320px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:14px;
      box-shadow: 0 14px 40px rgba(17, 24, 39, .14);
      padding:10px;
      z-index: 60;
      display:none;
    }
    .ev-dropdown.is-open{ display:block; }
    .ev-dd-title{ font-size:12px; font-weight: var(--main-font-weight);; color: var(--muted); margin-bottom:8px; }
    .ev-dd-item{
      width:100%;
      text-align:left;
      padding:10px 10px;
      /*border-radius:10px;
      border:1px solid transparent;*/
      background:#fff;
      cursor:pointer;
      font-weight:850;
    }

    .ev-dd-item:hover{ background: rgba(75, 9, 131, .06); border-color: rgba(75, 9, 131, .12); }
    .ev-dd-sep{ height:1px; background: var(--line); margin:10px 0; }
    .ev-dd-label{ display:block; font-size:12px; font-weight:850; color: var(--muted); margin:10px 0 6px; }
    .ev-dd-control{ width:100%; }

    /* icon menu items */
    .ev-dd-item{
    display:flex;
    align-items:center;
    gap:10px;
    }
    .ev-dd-ico{
    width:18px;
    text-align:center;
    opacity:.9;
    }
    .ev-dd-item:hover .ev-dd-ico{ opacity:1; }

    /* inline confirm */
    .ev-confirm{
    margin-top:8px;
    padding:10px;
    border-radius:12px;
    border:1px solid rgba(180,35,24,.16);
    background: rgba(180,35,24,.06);
    }
    .ev-confirm-title{
    font-weight: var(--main-font-weight);;
    margin-bottom:8px;
    }
    .ev-confirm-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    }
    .ev-dd-item.is-hidden{ display:none; }

    .ev-danger{
    margin-top:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid rgba(239,68,68,.18);
    background: rgba(239,68,68,.06);
    }
  .ev-danger__title{ font-weight:950; }


    /* Table tweaks */
    .ev-tablewrap{
      overflow:auto;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
    }

    .ev-tablewrap .badge {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 6px 10px;
        border-radius: var(--radius);
        border: 1px solid var(--line);
        background: #fff;
        font-size: 12px;
        font-weight: var(--main-font-weight);;
        color: var(--font-color);
    }

    .ev-tablewrap button:hover {
        background-color: transparent;
    }

    /* --- Evidence modal as workspace (SoA-ish) --- */
    .ev-modal .issues-modal__dialog{ max-width: 1100px !important; }
    .ev-modal__dialog{ border-radius: 18px; overflow:hidden; }

    .ev-modal__head{
      display:flex;
      justify-content:space-between;
      gap:14px;
      padding:16px 16px 14px;
      background: linear-gradient(90deg, rgba(75,9,131,1), rgba(93,24,173,1));
      color: var(--text-color);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .ev-modal__title{ font-size:20px; font-weight:650; letter-spacing:.2px; color: var(--text-color); }
    .ev-modal__sub{ margin-top:2px; opacity:.92; font-weight: var(--main-font-weight);; color: var(--text-color); }
    .ev-modal__meta{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; color: var(--text-color); }
    .ev-modal__meta .badge{
      display:inline-flex; gap:6px; align-items:center;
      padding:6px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.10);
      font-size:12px; font-weight:650;
    }

    .ev-modal__dialog #evModalCloseX{
      width:max-content;
      position: fixed;
      border-radius: 50%;
      align-self:end;
      background-color: transparent;
      border:0;
    }
    .ev-modal__dialog #evModalCloseX .fas{ color: var(--text-color); }

    .ev-modal__body{ padding:14px 14px 16px; background: var(--soft); }

    .ev-tabs{ display:flex; gap:8px; margin-bottom:12px; }
    .ev-tabs .mini-btn,
    .ev-tabs .mini-btn.primary{
      background: transparent;
      color: var(--font-color);
      border:0;
      border-bottom: 3px solid var(--font-color);
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;
      font-weight: var(--main-font-weight);;
    }

    .ev-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
    @media (max-width: 980px){
      .ev-kpi-row{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
      .ev-grid2{ grid-template-columns: 1fr; }
      .ev-modal .issues-modal__dialog{ max-width: 96vw !important; }
    }

    .ev-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
      padding:12px;
    }
    .ev-card__title{ font-size:13px; font-weight:950; color: var(--text); margin-bottom:10px; }

    .field label{ display:block; font-size:12px; margin-bottom:6px; opacity:.85; font-weight: var(--main-font-weight);; }

    /* Preview workspace */
    .ev-preview{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
      overflow:hidden;
    }
    .ev-preview__head{
      padding:12px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, rgba(75,9,131,.06), rgba(75,9,131,0));
    }
    .ev-preview__title{ font-weight: var(--main-font-weight);; font-size:14px; }
    .ev-preview__sub{ color: var(--muted); font-weight:750; margin-top:2px; }

    .ev-preview__body{ padding:12px; }
    .ev-preview__viewer{
      background: var(--soft);
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px;
      min-height: 340px;
    }

    /* Active selection + fade others (table row selection) */
    #evTable tbody.is-dim tr{ opacity:.38; filter: grayscale(.25); transition: opacity .12s ease, filter .12s ease; }
    #evTable tbody.is-dim tr.is-active{
      opacity:1; filter:none;
      outline: 2px solid rgba(75, 9, 131, .18);
      outline-offset: -2px;
      background: rgba(75,9,131,.04);
    }


    /* Evidence row actions: ellipsis menu */
.ev-actions{ position:relative; display:flex; justify-content:flex-end; }
.ev-ellipsis{
      width: 36px;
    height: 36px;
    border-radius: 12px;
    /* border: 1px solid var(--line); */
    background: #fff;
    font-size: 18px;
    font-weight: var(--main-font-weight);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 6px 18px rgba(17, 24, 39, .06); */
    color: var(--font-color);
}
.ev-ellipsis:hover{ border-color: rgba(75, 9, 131, .25); transform: translateY(-1px); }

.ev-dd{
  position:absolute;
  right:0;
  top:40px;
  width:190px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(17,24,39,.14);
  padding:8px;
  z-index: 80;
  display:none;
}
.ev-dd.is-open{ display:block; }

.ev-dd .ev-dd-item{
    width: 100%;
    text-align: left;
    /*padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid transparent;*/
    cursor: pointer;
    font-weight: var(--main-font-weight);;
    color: var(--font-color);
}
.ev-dd .ev-dd-item:hover{
  background: rgba(75, 9, 131, .06);
  border-color: rgba(75, 9, 131, .12);
}
.ev-dd .ev-dd-item.danger{ color:#b42318; }
.ev-dd .ev-dd-item.danger:hover{
  background: rgba(180,35,24,.08);
  border-color: rgba(180,35,24,.14);
}
.ev-dd-sep{ height:1px; background: var(--line); margin:8px 0; }























/************* Management Review Details (right pane) ****************/
/* =============================
   Management Review Meetings UI
   ============================= */
.mr-wrap { 
    width:90%; 
    max-width:1400px; 
    margin:0 auto; 
    padding:18px 18px 40px; 
    min-height: 80vh;
}

.wrap{ display:block !important; }

.mr-grid{ display:grid; grid-template-columns: 350px 1fr; gap:14px; }

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(23,18,31,.08);
}
.panel-hd{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.panel-hd strong{ color: var(--pw-purple); }
.panel-bd{ padding:12px; }

.toolbar{ display:flex; gap:8px; align-items:center; }

.btn{
  color: var(--font-color);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: var(--shadow2);
  border-bottom: 3px solid var(--font-color);
  /*border-bottom-right: 0px;*/
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background:#fff;
  border-left:none; border-right:none; border-top:none;
}
.btn.primary{
  background: linear-gradient(180deg, rgb(135 6 243) 0%, rgb(112 12 197) 100%);
  color:#fff;
  border-bottom-color: rgb(112 12 197);
}
.btn.danger{ background:#fff; border-bottom-color: rgba(210,60,60,.75); color:#b20; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.ellipsis-btn {
    /* border: 1px solid var(--line); */
    background: transparent;
    color: var(--font-color);
    /* border-radius: var(--radius); */
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: var(--shadow2);
    border: 1px solid transparent;
    /* border-bottom-left-radius: 0px; */
    /* border-bottom-right-radius: 0px;*/
}

.ellipsis-btn:hover {
    /* border: 1px solid var(--line); */
    background: transparent;
    color: var(--font-color);
    /* border-radius: var(--radius); */
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: var(--shadow2);
    border: 1px solid var(--main-color);
    /* border-bottom-left-radius: 0px; */
    /* border-bottom-right-radius: 0px; */
}

.muted{ opacity:.8; font-size:12px; }

/* Right panel scroll area */
#details{
  /*max-height: calc(100vh - 220px);*/
  overflow: auto;
}

/* =============================
   Minutes "Document" styling
   (no box-box-box)
   ============================= */
.mr-doc{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(23,18,31,.06);
  overflow:hidden;
}

/* “paper header” */
.mr-doc__head{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.mr-doc__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.mr-doc__title{
  font-size:26px;
  font-weight:950;
  margin:0;
  color:#24324a;
  letter-spacing:-.2px;
}
.mr-doc__sub{
  margin-top:4px;
  font-size:13px;
  opacity:.78;
}
.mr-doc__right{
  text-align:right;
  min-width:220px;
  font-size:13px;
}
.mr-doc__right b{ font-weight:950; }

.mr-rule{ border:none; border-top:2px solid rgba(36,50,74,.35); margin:12px 0 0; }

/* meeting meta as “key: value” lines (not a box) */
.mr-meta{
  margin-top:12px;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:8px 14px;
  font-size:14px;
}
.mr-meta .k{ font-weight: var(--main-font-weight);; color:#24324a; }
.mr-meta .v{ color:#1e293b; }

.mr-doc__body{ padding:16px 18px 20px; }

/* sections like official minutes */
.mr-section{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(36,50,74,.18); }
.mr-section:first-child{ margin-top:0; padding-top:0; border-top:none; }

.mr-h{
  font-weight:950;
  margin:0 0 10px;
  font-size:16px;
  color:#24324a;
  letter-spacing:-.1px;
}

/* Agenda list */
.mr-agenda ol{
  margin:0;
  padding-left:18px;
  line-height:1.7;
  font-size:14px;
}
.mr-agenda li{ margin:4px 0; }

/* “a) Heading then text under it” */
.mr-item{
  padding:10px 0;
  border-top:1px solid rgba(36,50,74,.12);
}
.mr-item:first-child{ border-top:none; padding-top:0; }
.mr-item__h{
  font-weight: var(--main-font-weight);;
  color:#111827;
  font-size:14px;
  margin:0 0 6px;
}
.mr-item__b{
  white-space:pre-wrap;
  line-height:1.65;
  font-size:14px;
  color:#1f2937;
}
.mr-item__b.muted,
.mr-indent-2.muted { 
    color: rgba(31,41,55,.78); 
}

/* 2-column arrangement when needed, but still “minutes” */
.mr-cols2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 980px){ .mr-cols2{ grid-template-columns:1fr; } }

/* performance trends sub-items */
.mr-subitems{ margin-top:8px; }
.mr-subitem{
  padding:8px 0;
  border-top:1px dashed rgba(36,50,74,.18);
}
.mr-subitem:first-child{ border-top:none; padding-top:0; }
.mr-subitem__h{
  font-weight: var(--main-font-weight);;
    font-size: 14px;
  color:#24324a;
  margin:0 0 6px;
}
.mr-subitem__b{
  white-space:pre-wrap;
  line-height:1.65;
  font-size:14px;
  /*color:#1f2937;*/
}

/* Chips for objectives summary (kept, but lighter) */
.mr-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px; }
.mr-chip{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(36,50,74,.18);
  background:#fff;
  font-weight: var(--main-font-weight);;
  color:#24324a;
}
.mr-note{ font-size:12px; opacity:.78; }

/* Actions table stays as a proper table */
.mr-tablewrap{
  overflow:auto;
  border:1px solid rgba(36,50,74,.18);
  border-radius:12px;
  background:#fff;
}
.mr-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:740px;
}
.mr-table th, .mr-table td{
  padding:10px;
  border-bottom:1px solid rgba(36,50,74,.12);
  text-align:left;
}
.mr-table th{
  background:#fff;
  font-weight:950;
  color:#24324a;
  border-bottom:2px solid rgba(36,50,74,.18);
}

/* Minutes free-form block should look like text, not a card */
.mr-minutes{
  border-top:1px solid rgba(36,50,74,.12);
  padding-top:10px;
}
.mr-minutes .muted{ margin-top:6px; }

/* Make details panel content feel like a document */
#details .mr-doc{ margin-bottom:14px; }

/* =============================
   Modals (keep yours)
   ============================= */
.mr-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.mr-modal.show{ display:block; }
.mr-modal__backdrop{ position:absolute; inset:0; background: rgba(23,18,31,.45); backdrop-filter: blur(2px); }
.mr-modal__dialog{
  position:relative;
  max-width: 920px;
  margin: 6vh auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(23,18,31,.25);
  overflow: hidden;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.mr-modal__head{
  padding: 12px 14px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.mr-modal__title{ font-weight:950; color: var(--pw-purple); }
.mr-modal__body{ padding: 14px; overflow: auto; flex: 1 1 auto; }
.mr-modal__foot{ padding: 12px 14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; background:#fff; }
.mr-modal__head, .mr-modal__foot{ flex: 0 0 auto; }

/*.row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } */
label{ font-size:12px; opacity:.85; display:block; margin-bottom:6px; }
input, select, textarea{ width:100%; border:1px solid var(--line); border-radius:4px; padding:10px 10px; }
textarea{ min-height:90px; resize:vertical; }
.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
.hr{ border:none; border-top:1px solid var(--line); margin: 12px 0; }
.chip{ font-size:11px; padding:3px 9px; border-radius:4px; border:1px solid var(--line); }




/* Minutes indentation (official minutes feel) */
.mr-indent-1{ margin-left: 18px; }
.mr-indent-2{ margin-left: 36px; }

/* Give the indented blocks a subtle visual guide (optional but nice) */
.mr-indent-1,
.mr-indent-2{
  padding-left: 12px;
  border-left: 2px solid rgba(36,50,74,.12);
}

/* Make multi-line responses look like paragraphs */
.mr-item__b,
.mr-subitem__b{
  white-space: pre-wrap;
  line-height: 1.65;
}


/* Ensure muted works inside the minutes document even if other rules override it */
.mr-doc .muted{
  opacity: .78;
}

/* Specifically target subitem bodies that are muted */
.mr-doc .mr-subitem__b.muted{
  opacity: .78;
  color: rgba(23,18,31,.68);
}

/* (Optional) also allow muting sub-headings */
.mr-doc .mr-subitem__h.muted{
  opacity: .82;
  color: rgba(23,18,31,.72);
}



/* =============================
   Collapsible left pane pattern
   ============================= */

/* Make grid animatable */
.mr-grid{
  display:grid;
  grid-template-columns: 350px 1fr;
  gap:14px;
  position: relative;
}

/* Smooth transitions */
.mr-grid,
#leftPanel,
#rightPanel{
  transition: all .22s ease;
}

/* Collapsed state */
.mr-grid.is-collapsed{
  grid-template-columns: 0px 1fr;
  gap: 0;
}

/* Hide left panel without messing layout */
.mr-grid.is-collapsed #leftPanel{
  width:0;
  min-width:0;
  border:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  margin:0;
  padding:0;
}

/* Right panel expands naturally */
.mr-grid.is-collapsed #rightPanel{
  margin-left:0;
}

/* Collapse/expand icon button (top-right of left panel header) */
.pane-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  box-shadow: 0 10px 25px rgba(23,18,31,.08);
  color: var(--pw-purple);
}
.pane-btn:hover{ filter: brightness(.98); }
.pane-btn:active{ transform: translateY(1px); }

/* Floating open button (only when collapsed) */
.pane-fab{
  position:absolute;
  top: 10px;              /* aligns with headers */
  left: 10px;             /* sits where left panel used to be */
  z-index: 20;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  box-shadow: 0 18px 40px rgba(23,18,31,.10);
  display:none;
  align-items:center;
  justify-content:center;
  color: var(--pw-purple);
}

/* show only when collapsed */
.mr-grid.is-collapsed .pane-fab{ display:inline-flex; }

/* Mobile: default collapsed makes sense, but optional */
@media (max-width: 980px){
  .mr-grid{ grid-template-columns: 1fr; }
  .mr-grid.is-collapsed{ grid-template-columns: 1fr; }
  .mr-grid.is-collapsed #leftPanel{ display:none; }
  .pane-fab{ left: 10px; }
}

























/***************** Training *********************/

.modal__dialog .modal__body .applyBox { 
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:12px; 
    background:#fff; 
}

.modal__dialog .modal__body .applyBox .applyModes { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.modal__dialog .modal__body .applyBox .applyModes label { margin:0; display:inline-flex; align-items:center; gap:8px; font-size:13px; opacity:1; }
.modal__dialog .modal__body .applyBox .rolePick {
    margin-top:10px;
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:10px;
    background: linear-gradient(180deg,#fff 0%, #fbf8ff 100%);
}
.modal__dialog .modal__body .applyBox .rolePickTop { 
    display:flex; 
    gap:10px; 
    align-items:center; 
    justify-content:space-between; 
    flex-wrap:wrap; 
}

.modal__dialog .modal__body .applyBox .roleList {
    margin-top:10px;
    max-height: 220px;
    overflow:auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:8px;
}

.modal__dialog .modal__body .applyBox .roleItem {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 8px;
    border-radius:10px;
}

.modal__dialog .modal__body .applyBox .roleItem:hover { 
    background: rgba(75,9,131,.04); 
}

.modal__dialog .modal__body .applyBox .roleItem input { 
    width:18px; 
    height:18px; 
}

.modal__dialog .modal__body .applyBox .roleName{ 
    font-weight:850; 
}


.comp-container .panel .rowTitle {
    font-weight: 600;
}
















/***************** Access Review / Joiners / Leavers / Movers *********************/

.ev-card{
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding:10px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
    background:#fff;
}
.ev-card .t{ font-weight:900; }
.ev-card .m{ font-size:12px; opacity:.85; margin-top:3px; }
.ev-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* Evidence picker modal (pw-modal) */
.pw-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.pw-modal.show{ display:block; }
.pw-modal__backdrop{ position:absolute; inset:0; background: rgba(23,18,31,.45); backdrop-filter: blur(2px); }
.pw-modal__dialog{
    position:relative;
    max-width: 920px;
    margin: 7vh auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px rgba(23,18,31,.25);
    overflow:hidden;
    max-height: 86vh;
    display:flex;
    flex-direction:column;
}
.pw-modal__head{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    background: linear-gradient(180deg,#fff 0%,#fbf8ff 100%);
    display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.pw-modal__title{ font-weight:950; color: var(--pw-purple); }
.pw-modal__body{ padding:14px; overflow:auto; flex:1 1 auto; }
.pw-modal__foot{ padding:12px 14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; background:#fff; }

.list{ display:flex; flex-direction:column; gap:8px; }
.item{ /*border:1px solid var(--line); border-radius:12px;*/ padding:10px 10px; cursor:pointer; }
.item:hover{ background: var(--main-color-hover); }
/*item .t{ font-weight:900; display:flex; justify-content:space-between; gap:10px; }
.item .m{ font-size:12px; opacity:.85; margin-top:4px; } */

.item:hover .t {color: var(--text-color)}
.item:hover .m {color: var(--text2-color)}


.list{ display:flex; flex-direction:column; gap:8px; }
.item{
  padding:10px 10px;
  cursor:pointer;
  border-bottom: 3px solid var(--font-color);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
/*.item:hover{ background: var(--main-color-hover); }*/
.item.active{ 
    border-bottom-color: rgba(75,9,131,.55); 
    box-shadow: 0 10px 25px rgba(75,9,131,.12); 
    background: var(--main-color-hover);
    color: var(--text-color);
}

.item.active .t {color: var(--text-color)}
.item.active .m {color: var(--text2-color)}


/* Evidence preview modal (issues-modal) */
.issues-modal{ position:fixed; inset:0; display:none; z-index:10001; }
.issues-modal.show{ display:block; }
.issues-modal__backdrop{
    position:absolute; inset:0;
    background: rgba(23,18,31,.45);
    backdrop-filter: blur(2px);
}
.issues-modal__dialog{
    position:relative;
    max-width: 980px;
    margin: 7vh auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px rgba(23,18,31,.25);
    overflow:hidden;
    max-height: 88vh;
    display:flex; flex-direction:column;
}
.issues-modal__head{
    padding: 12px 14px;
    border-bottom:1px solid var(--line);
    background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.issues-modal__title{ font-weight:950; color: var(--pw-purple); }
.issues-modal__body{ padding:14px; overflow:auto; flex:1 1 auto; } 
























/***************** Internal Audit *********************/

.audit-wrap{ width:100%; max-width:1400px; margin:0 auto; padding:18px 18px 40px; }
.wrap{ display:block !important; }

.topbar{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    /*margin-bottom: 12px;*/
}
.title h1{ margin:0; font-size:22px; font-weight:950; color: var(--pw-purple); 
    text-align: left;
}

.title .sub{ margin-top:4px; opacity:.85; font-size:13px; }

.card{
    background:#fff; border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(23,18,31,.08);
    overflow:hidden;
}
.card-hd{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-hd .left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card-hd .right{ display:flex; align-items:center; gap:8px; }
.muted{ opacity:.75; font-size:12px; }

.btn{
    border:1px solid var(--line);
    background:#fff;
    padding:10px 12px;
    border-radius: 12px;
    cursor:pointer;
    font-weight: var(--main-font-weight);;
}
.btn.primary{
    background: linear-gradient(180deg, rgb(135 6 243) 0%, rgb(112 12 197) 100%);
    color:#fff;
    border:1px solid rgba(75, 9, 131, .25);
}
.btn.small{ padding:7px 10px; border-radius:10px; font-size:12px; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

table{ width:100%; border-collapse:collapse; }
th, td{ text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; opacity:.75; }
tr:hover td{ background: rgba(135,6,243,.03); }

/* row-click affordance for plan view */
#programTable tbody tr{ cursor:pointer; }
#programTable tbody tr:hover td{ background: rgba(135,6,243,.05); }
/* but not on buttons */
#programTable button{ cursor:pointer; }

.pill{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--line);
    border-radius: 999px;
    padding:6px 10px;
    font-size:12px;
    font-weight: var(--main-font-weight);;
    background:#fff;
}
.notice{
    padding:10px 12px;
    border:1px dashed rgba(75,9,131,.35);
    border-radius: 12px;
    background: rgba(135,6,243,.05);
}
.notice b{ color: var(--pw-purple); }
.kbar{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------- Modal ---------------- */
.modal{ position:fixed; inset:0; display:none; z-index:9999; }
.modal.show{ display:block; }
.modal__backdrop{
    position:absolute; inset:0;
    background: rgba(23,18,31,.45);
    backdrop-filter: blur(2px);
}
.modal__dialog{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px rgba(23, 18, 31, .25);
    overflow: hidden;
    max-height: calc(100vh - 14vh);
    display: flex;
    flex-direction: column;
    width: 85%;
}


.modal__dialog .badge {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: transparent;
    font-size: 12px;
    font-weight: var(--main-font-weight);
}


.modal__head{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px 14px;
    background: linear-gradient(90deg, rgba(75, 9, 131, 1), rgba(93, 24, 173, 1));
    color: var(--text-color);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    height: 8rem;
}

.modal__title{ 
    font-size: 20px;
    font-weight: var(--main-font-weight);
    letter-spacing: .2px;
    color: var(--text-color);
}

.modal__dialog #btnClose,
.modal__dialog #btnViewClose,
.modal__dialog #btnCloseEvidence,
.modal__dialog #pmCloseBtn,
.modal__dialog #pvCloseBtn,
.modal__dialog #amCloseBtn,
.modal__dialog #fmCloseBtn {
    background-color: transparent;
    color: var(--text2-color);
    width: 100%;
    text-align: right;
    position: absolute;
}

.modal__dialog #btnClose .fas,
.modal__dialog #btnViewClose .fas,
.modal__dialog #btnCloseEvidence .fas,
.modal__dialog #pmCloseBtn .fas,
.modal__dialog #pvCloseBtn .fas,
.modal__dialog #refreshBtn .fas,
.modal__dialog #amCloseBtn .fas,
.modal__dialog #fmCloseBtn .fas {
    color: var(--text2-color);
}

.comp-container .mr-grid #refreshBtn {
    background-color: transparent;
    color: var(--text2-color);
    /* width: 100%; */
    text-align: right;
    /* position: absolute;*/
}

.modal__head .modal_cover_link {
    text-align: right;
    /* background: rgba(255, 255, 255, .14); */
    /* border: 1px solid rgba(255, 255, 255, .18); */
    padding: 8px 10px;
    border-radius: 999px;
    /* display: flex; */
    /* align-items: center; */
    gap: 8px;
    font-weight: var(--main-font-weight);
    /* bottom: -3.8rem; */
    position: relative;
    /* color: var(--text-color);*/
    align-content: end;
}

.modal__head .modal_cover_link .mini-btn {
    color: var(--text2-color);
}


.modal__head .modal_cover_link .mini-btn:hover {
    position: relative;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent; /* reserve space */
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden; /* ensures underline respects radius */
}

/* the animated “border” */
.modal__head .modal_cover_link .mini-btn::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background: var(--text-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
}

.modal__head .modal_cover_link .mini-btn:hover::after,
.modal__head .modal_cover_link .mini-btn:focus-visible::after{
    transform: scaleX(1);
}

/* optional: nicer focus ring */
.modal__head .modal_cover_link .mini-btn:focus-visible{
    outline: 3px solid rgba(90,34,166,.35);
    outline-offset: 2px;
}

/* Primary variant: keep your gradient, but also set underline color */
.modal__head .modal_cover_link .mini-btn.primary{
    border-color: transparent;
    background: linear-gradient(180deg, #5b11a0 0%, var(--pw-purple) 100%);
    color:#fff;
}
    
.modal__head .modal_cover_link .mini-btn.primary::after{
    background: rgba(255,255,255,.9); /* or var(--main-color) if you prefer */
}

.modal__head .modal_cover_link .mini-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}
    
.modal__head .modal_cover_link .mini-btn:disabled::after{
    transform: scaleX(0);
}
/*.modal__sub{ font-size:12px; opacity:.75; margin-top:2px; }*/

.modal__sub {
    margin-top: 2px;
    opacity: .92;
    font-weight: var(--main-font-weight);
    color: var(--text-color);
}

.modal__meta {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--text-color);
}

.modal__close {
    width: max-content;
    position: fixed;
    /* border: 1px solid; */
    border-radius: 50%;
    align-self: end;
    background-color: transparent;
}

.modal__body{ 
    padding:12px 14px;
    /*padding: 14px;*/
    overflow: auto;
    flex: 1 1 auto; }

.modal__body .card {
    border: none;
    border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.modal__foot {
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
}

/*.row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:10px; }*/
@media (max-width: 760px){ .row{ grid-template-columns:1fr; } }

label { 
    display:block; 
    font-size:12px; 
    font-weight: var(--main-font-weight); 
    color: var(--font-color); 
    margin-bottom:6px; 
}

input, textarea, select {
    width:100%; 
    border: none;
    border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding:10px 10px; 
    outline:none; 
    background:#fff;
}

textarea { min-height:92px; resize:vertical; }

.schedWrap {
    border:1px solid var(--line);
    border-radius: 12px;
    overflow:auto;
    background:#fff;
}

.schedWrap input, .schedWrap select {
    padding:8px 8px;
    /* border-radius: 10px; */
}


/* -------- Calendar (read-only modal) -------- */
.pv-cal {
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap:8px;
}

.pv-cal .dow {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    opacity:.7;
    padding:0 6px;
}

.pv-cal .day {
    border:1px solid var(--line);
    border-radius: 12px;
    min-height: 110px;
    padding:8px;
    background:#fff;
}

.pv-cal .day.muted {
    opacity:.5;
    background: rgba(135,6,243,.03);
}

.pv-cal .day .dnum {
    font-weight: var(--main-font-weight);;
    font-size:12px;
    opacity:.85;
    margin-bottom:6px;
}

.pv-cal .item {
    border:1px solid rgba(75, 9, 131, .20);
    background: rgba(135,6,243,.06);
    border-radius: 10px;
    padding:6px 8px;
    margin:6px 0;
    font-size:12px;
    line-height:1.25;
}

.pv-cal .item b { 
    display: block; 
}

.pv-cal .item .meta { 
    opacity:.75; 
    font-size:11px; 
}



/* -------- Matrix view (read-only modal) -------- */
table.mx{ width:100%; border-collapse:collapse; min-width: 980px; }
table.mx th, table.mx td{ border-bottom:1px solid var(--line); padding:8px 8px; }
table.mx thead th{ position:sticky; top:0; background:#fff; z-index:2; }
table.mx .area{ position:sticky; left:0; background:#fff; z-index:3; min-width:240px; font-weight: var(--main-font-weight);; }
table.mx td.cell{ text-align:center; width:64px; }
table.mx .tag{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px;
    border-radius: 10px;
    font-weight:950;
    border:1px solid rgba(75,9,131,.18);
}

table.mx .tag.P{ 
    background:#d81d0a; 
    color:#fff; 
    border-color:#d81d0a;
    width: 100%;
    border-radius: 0;
}  /* planned */

table.mx .tag.C{ 
    background:#22c55e; 
    color:#0b2a16; 
    border-color:#22c55e; 
    width: 100%;
    border-radius: 0;
} /* complete */

table.mx .tag.E{ 
    background:#f59e0b; 
    color:#2a1b00; 
    border-color:#f59e0b; 
    width: 100%;
    border-radius: 0;
} /* external */


/* Right scroll area */
#reportView{
  /*max-height: calc(100vh - 230px);*/
  overflow:auto;
  padding: 12px 14px;
}
.report-view h2{ margin:10px 0 6px; font-size:16px; color: var(--pw-purple); }
.report-meta{ 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:10px; 
    margin-top:10px;
    margin-bottom:3rem;
}

#reportView #rvBody h2 {
    margin: 50px 0 6px;
}

@media (max-width: 760px){ .report-meta{ grid-template-columns:1fr; } }

.meta-box{ 
    border:1px solid var(--line); 
    border-radius:var(--radius); 
    padding:10px; 
    background:#fff; 
}

.meta-k{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.meta-v{ 
    font-weight:500; 
    margin-top:4px; 
}

.meta-box .meta-v .badge {
        display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    font-size: 12px;
    font-weight: var(--main-font-weight);
    color: var(--font-color);
}
.kv{ margin:10px 0; }
.kv .k{ font-weight:950; color:var(--pw-purple); margin-bottom:4px; }
.kv .v{ white-space:pre-wrap; }



























/*************************************************************************************
    # Asset Management
*************************************************************************************/

.asset-dashboard{
  width: min(100%, 1240px);
  margin: 24px auto;
  padding: 0 16px;
}

@media (min-width: 1440px){
  .asset-dashboard{
    width: min(100%, 1400px);
  }
}
.asset-dashboard .title{display:flex;align-items:center;gap:12px;margin:8px 0 16px}
.asset-dashboard .title h1{font-size:22px;margin:0}
.asset-dashboard .bar{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:14px}
.asset-dashboard .card{background:var(--card);border:1px solid var(--line);border-radius: var(--radius);padding:14px;height:100%;}
.asset-dashboard .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.asset-dashboard .kpi{display:flex;flex-direction:column;gap:4px}
.asset-dashboard .kpi .v{font-size:26px;font-weight: var(--main-font-weight);}
.asset-dashboard .kpi .l{font-size:12px;color:var(--muted)}
.asset-dashboard .filters {
    grid-column:1/-1;
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    gap:8px;
    align-items:center;
    width: 100%;
    margin: auto 0;
}
.asset-dashboard .sel,
.asset-dashboard .inp,
.asset-dashboard .btn{height:36px;padding:0 10px;border:1px solid var(--line);border-radius: var(--radius);background:#fff}
.asset-dashboard .btn{cursor:pointer}
.asset-dashboard .btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.asset-dashboard .btn.ghost{background:#fff}
.asset-dashboard .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:12px}
.asset-dashboard .col-6{grid-column:span 6;width:100%;}
.asset-dashboard .col-4{grid-column:span 4;width:100%;}
.asset-dashboard .col-8{grid-column:span 8;width:100%;}
.asset-dashboard .col-12{grid-column:span 12;width:100%;}
.asset-dashboard .h{font-weight: var(--main-font-weight);;margin:0 0 8px;font-size:14px;color:#111827}
.asset-dashboard .chart{height:320px}
.asset-dashboard .table{width:100%;border-collapse:separate;border-spacing:0 8px}
.asset-dashboard .table th{font-size:12px;color:var(--muted);text-align:left;padding:0 8px}
.asset-dashboard .row{background:#fff;border:1px solid var(--line);border-radius: var(--radius);}
.asset-dashboard .row td{padding:10px 8px;font-size:14px}
.asset-dashboard .pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius:  var(--radius);
    border: 1px solid var(--line);
    font-size: 12px;
    background: transparent;
}
.asset-dashboard .ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.asset-dashboard .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.asset-dashboard .sm{height:32px;font-size:13px}
.asset-dashboard .footnote{font-size:12px;color:var(--muted);margin-top:6px}
.asset-dashboard .flex{display:flex;gap:8px;align-items:center}
@media (max-width:1100px) {
    .asset-dashboard .kpis{
        grid-template-columns:repeat(2,1fr)
    } 

    .asset-dashboard .col-6,
    .asset-dashboard .col-8,
    .asset-dashboard .col-4 {
        grid-column:span 12
    }
}



















@media (min-width: 768px) and (max-width: 991px) {  /* Adjust this breakpoint as needed */
    .horizontal-menu .menu-item a {
        white-space: nowrap;
        overflow: hidden;
    }

    .dashboard-org-info {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        min-height: 9rem;
        width: 100%;
        background-color: transparent;
        font-family: var(--font-primary);
        max-width: 1090px;
        margin: auto;
        overflow-y: auto;
        height: auto;
        transition: max-height 0.3s ease;
    }

    .main-container {
        max-width: 100%;
        width: 100%;
    }

    .policyForm-title .form-row {
        flex-direction: column;
    }

    .policy-status-table table {
        width: 100%;
        font-size: 14px;
    }
    .policy-status-table th, .policy-status-table td {
        padding: 10px 12px;
    }
}















/**********************************************************************
# ISMS
**********************************************************************/



.comp-container .topbar{
position:sticky; top:0; 
/*z-index:51;*/
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
height: auto;
}

.comp-container .topbar .inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 18px;
    display:flex; align-items:center; gap:14px; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight: var(--main-font-weight);; }
/*.logo{
    width:36px; height:36px; border-radius: var(--radius);
    background: radial-gradient(120% 120% at 10% 10%, var(--pw-purple-2) 0%, var(--pw-purple) 55%, #2e0550 100%);
    box-shadow: 0 10px 22px rgba(75, 9, 131, .25);
}*/
.brand small{ display:block; font-weight: var(--main-font-weight);; color:var(--muted); margin-top:2px; }
.actions{ display:flex; gap:10px; align-items:center; }
/*.btn{
    border:1px solid var(--line);
    background: var(--font-color);
    color:var(--text-color);
    border-radius: var(--radius);
    padding: 10px 12px;
    /*font-weight: var(--main-font-weight);;*
    cursor:pointer;
    box-shadow: var(--shadow2);
} */

.btn {
    /* border: 1px solid var(--line); */
    /* background: var(--font-color); */
    color: var(--font-color);
    border-radius: var(--radius);
    padding: 10px 12px;
    /* font-weight: var(--main-font-weight);; */
    cursor: pointer;
    box-shadow: var(--shadow2);
    border-bottom: 3px solid var(--font-color);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.btn.primary{
    border-color: rgba(75, 9, 131, .25);
    background: linear-gradient(180deg, var(--main-color-hover) 0%, var(--pw-purple) 100%);
    color:#fff;
    box-shadow: 0 14px 28px rgba(75, 9, 131, .22);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px;
    display:grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
}
.cm-side-nav{
    background:#fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /*overflow:hidden;*/
    min-height: 70vh;
}
.nav-head{
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
}
.nav-title{
    font-weight: var(--main-font-weight);;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.pill{
    font-size:12px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--soft);
    border:1px solid var(--line);
    color: var(--pw-purple);
    font-weight: var(--main-font-weight);;
}
.nav-search{ margin-top:10px; }
.nav-search input{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  outline:none;
  background:#fff;
  font-weight: var(--main-font-weight);;
}
.nav-search input:focus{
  border-color: rgba(75, 9, 131, .35);
  box-shadow: 0 0 0 4px rgba(75, 9, 131, .10);
}
.nav-list{ padding: 10px; }

/* Main panels for Narrative/Register/Evidence */
.main-panel{ display:none; }
.main-panel.active{ display:block; }

.clause{
  position:relative;
  border:1px solid transparent;
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.clause > button{
  width:100%;
  border:0;
  background: transparent;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-radius: var(--radius);
  color: var(--text);
}
.clause > button:hover{ background: var(--main-color-hover); color: var(--text-color); }

.clause.active > button{
  background: linear-gradient(180deg, rgb(135 6 243) 0%, rgb(112 12 197) 100%);
  border: 1px solid rgba(75, 9, 131, .20);
  color: var(--text-color);
}
.clause .meta{
  display:block;
  font-size:12px;
  color: var(--font-color);
  margin-top: 2px;
}
.clause > button:hover .meta{ color: var(--text-color); }
.clause.active > button:hover .meta,
.clause.active .meta{ color: var(--text2-color); }

/* --------- Clause flyout (first level) --------- *
.submenu{
  display:none;
  position:absolute;
  top:0;
  left: calc(100% + 1px);
  z-index:50;
  width:260px;
  margin:0;
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow2);
  border:1px solid var(--main-color-hover);
  overflow: visible;
}*/

.clause .submenu {
    display:none;
    position:absolute;
    top:0;
    left: calc(100% + 1px);
    z-index:50;
    width:260px;
    margin:0;
    border-radius: var(--radius);
    background:#fff;
    box-shadow: var(--shadow2);
    border:1px solid var(--main-color-hover);
    overflow: visible;
}

/* show clause submenu on hover OR on click-open */
.clause:hover .submenu{ display:block; }
.clause.open .submenu{ display:block; }

/* ✅ IMPORTANT: allow nested flyouts to escape */
.cm-side-nav,
.nav-list,
#navList,
.clause,
.submenu{
  overflow: visible;
}

/* ================================
   NESTED SUBKIDS (FLYOUT TO RIGHT)
   ================================ */

.submenu .subgroup{
  position: relative; /* anchor for flyout */
}

/* flyout panel */
.submenu .subgroup > .subkids{
  display:none;
  position:absolute;
  top:0;
  left: calc(100% - 1px); /* overlap eliminates flicker gap */
  z-index:200;
  width:260px;
  margin:0;
  padding:6px;
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow2);
  border:1px solid var(--main-color-hover);
}

/* ✅ HOVER OPEN (no media query, always works) */
.submenu .subgroup:hover > .subkids{ display:block; }
/* keep open when moving into the flyout */
.submenu .subgroup > .subkids:hover{ display:block; }

/* keyboard open on the group button (won’t stick like focus-within) */
.submenu .subgroup > .subitem.group:focus-visible + .subkids{ display:block; }

/* touch/click-open (JS toggles .open) */
.submenu .subgroup.open > .subkids{ display:block; }

/* Mobile: don’t fly out; render inline under group */
@media (max-width: 900px){
  .submenu{ position: static; width:auto; margin: 0 6px 8px 6px; }

  .submenu .subgroup > .subkids{
    position: static;
    width:auto;
    margin: 6px 0 8px 14px;
    padding: 6px 6px 6px 10px;
    border-left: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
  }
}

/* Make group look like a heading */
.subitem.group .chev{ opacity:.8; }
.subgroup.open .subitem.group .chev{ transform: rotate(180deg); }

/* Sub items */
.subitem{
  width:100%;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
  text-align:left;
  padding: 10px 10px;
  border-radius: var(--radius);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.subitem:hover{
  background: var(--main-color-hover);
  color: var(--text-color);
}
.subitem.active{ background: var(--font-color); }

.subitem .ref{ color: var(--pw-purple); min-width: 58px; }
.subitem .label{ color: var(--font-color); line-height:1.2; }

.subitem:hover .ref,
.subitem:hover .label{ color: var(--text-color); }

.subitem.active .ref,
.subitem.active .label{ color: var(--text-color); }

.subitem .chev{
  color: var(--muted);
  min-width: 14px;
  text-align:right;
}


    .isms-content{
      background:#fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 70vh;
    }
    .content-head{
      /*padding: 16px 16px 12px 16px;*/
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
    }

    .content-head-info{
      padding: 16px 16px 12px 16px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
      /*display:flex;*/
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
    }
    .crumb{ font-size: 12px; color: var(--muted); font-weight: var(--main-font-weight);; }
    .h1{ margin: 6px 0 0 0; font-size: 20px; line-height:1.15; font-weight: 950; }
    .status{
      display:inline-flex; align-items:center; gap:8px;
      font-size:12px; font-weight: var(--main-font-weight);;
      padding: 8px 10px;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: #fff;
      color: var(--muted);
      white-space:nowrap;
    }
    .dot{ width:8px; height:8px; border-radius: var(--radius); background:#c7bfd3; }
    .status.draft .dot{ background:#f59e0b; }
    .status.in_review .dot{ background:#38bdf8; }
    .status.approved .dot{ background:#22c55e; }

    .content-body{ padding: 16px; display:grid; gap:12px; }
    .editor{
      /*border:1px solid var(--line);*/
      border-radius: var(--radius);
      overflow:hidden;
      background:#fff;
      box-shadow: var(--shadow2);
    }
    .editor-toolbar{
      padding: 10px;
      border-bottom: 1px solid var(--line);
      display:block;
      gap:8px;
      align-items:center;
      justify-content:space-between;
      background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
      padding-top: 0px;
    }
    .tag-div {
      width:100%;
    }
    .tag{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--font-color);
      /*font-weight: var(--main-font-weight);*/
      color: var(--text-color);
      width: 110px;
      height: 60px;
      /* width: 100%; */
      /* height: 60px; */
      right: -12px;
      position: relative;
      /* text-align: right; */
      text-align: center;
      align-content: end;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }
    
    .mini-btn{
        position: relative;
        background: transparent;
        border: 0;
        border-bottom: 4px solid transparent; /* reserve space */
        border-radius: var(--radius);
        padding: 8px 10px;
        cursor: pointer;
        color: var(--font-color);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        overflow: hidden; /* ensures underline respects radius */
    }

    .mini-btn:hover {
        position: relative;
        background: transparent;
        border: 0;
        border-bottom: 4px solid transparent; /* reserve space */
        border-radius: var(--radius);
        padding: 8px 10px;
        cursor: pointer;
        color: var(--font-color);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        overflow: hidden; /* ensures underline respects radius */
    }

    /* the animated “border” */
    .mini-btn::after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:4px;
        background: var(--main-color);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 220ms ease;
    }

    .mini-btn:hover::after,
    .mini-btn:focus-visible::after{
        transform: scaleX(1);
    }

    /* optional: nicer focus ring */
    .mini-btn:focus-visible{
        outline: 3px solid rgba(90,34,166,.35);
        outline-offset: 2px;
    }

    /* Primary variant: keep your gradient, but also set underline color */
    .mini-btn.primary{
        border-color: transparent;
        background: linear-gradient(180deg, #5b11a0 0%, var(--pw-purple) 100%);
        color:#fff;
    }
        
    .mini-btn.primary::after{
        background: rgba(255,255,255,.9); /* or var(--main-color) if you prefer */
    }

    .mini-btn:disabled{
        opacity:.6;
        cursor:not-allowed;
    }
        
    .mini-btn:disabled::after{
        transform: scaleX(0);
    }


    .viewer{ padding: 14px 0px; }
    .empty{
      border: 1px dashed rgba(75, 9, 131, .35);
      background: rgba(75, 9, 131, .06);
      color: var(--pw-purple);
      border-radius: var(--radius);
      padding: 12px;
      font-weight: var(--main-font-weight);;
    }
    /*.html{ font-weight: var(--main-font-weight);; line-height:1.6; }*/
    textarea{
      width:100%;
      min-height:300px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding:12px;
      font-weight: var(--main-font-weight);;
      line-height:1.5;
      outline:none;
    }
    textarea:focus{
      border-color: rgba(75, 9, 131, .35);
      box-shadow: 0 0 0 4px rgba(75, 9, 131, .10);
    }
    /*.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }*/
    .muted{ color:var(--muted); /*font-weight:650;*/ font-size:13px; line-height:1.5; }

    /*.summary{
      margin-top:10px;
      border:1px solid var(--line);
      background: var(--soft);
      border-radius: var(--radius);
      padding: 10px 12px;
      box-shadow: var(--shadow2);
    }*/

    .summary {
      margin-top: 10px;
      /* border: 1px solid var(--line); */
      /* background: var(--soft); */
      border-radius: var(--radius);
      /* padding: 10px 12px; */
      box-shadow: var(--shadow2);
    }
    .summary .label{
      font-size:12px;
      font-weight:950;
      color: var(--pw-purple);
      margin-bottom:6px;
    }
    .summary .text{
      font-size:13px;
      font-weight:650;
      color: var(--text);
      line-height:1.5;
    }

    .summary .muted{ color:var(--muted); /*font-weight:650;*/ font-size:13px; line-height:1.5; }

    /* ---- Register panel (tabs) ---- */
.reg-wrap{
  margin-top: 12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:none;
}
.reg-wrap.show{ display:block; }

.reg-head{
  padding: 10px 12px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.reg-head .left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.reg-title{
  font-weight:950;
  color: var(--pw-purple);
}
.reg-sub{
  color: var(--muted);
  font-weight: var(--main-font-weight);;
  font-size:12px;
}
.reg-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width: fit-content;
}
.tab-btn{
  border:1px solid var(--line);
  background: var(--font-color);
  border-radius: var(--radius);;
  padding: 8px 10px;
  /*font-weight: var(--main-font-weight);;*/
  cursor:pointer;
  font-size:12px;
}
.tab-btn.active{
  border-color: rgba(75, 9, 131, .25);
  background: rgba(75, 9, 131, .08);
  color: var(--pw-purple);
}
.reg-body{ padding: 12px; }
.reg-panel{ display:none; }
.reg-panel.active{ display:block; }

.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.card-hd{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card-hd .title{ font-weight:950; color: var(--pw-purple); }
.card-hd .sub{ color: var(--muted); font-weight: var(--main-font-weight);; font-size:12px; margin-top:2px; }
.card-bd{ padding: 12px; }

.table{
  width:100%;
  border-collapse: collapse;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align: top;
  font-weight: var(--main-font-weight);;
  font-size:13px;
}
.table th{
  background: var(--soft);
  color: var(--pw-purple);
  font-weight:950;
}
.table tr:last-child td{ border-bottom:0; }

.badge{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding: 6px 10px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
  font-weight: var(--main-font-weight);;
}
.badge.purple{
  background: rgba(75, 9, 131, .08);
  border-color: rgba(75, 9, 131, .20);
  color: var(--pw-purple);
}
.badge.gray{ color: var(--muted); }

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){
  .grid-2{ grid-template-columns: 1fr; }
}

.field{
  display:grid;
  gap:6px;
  margin-bottom: 10px;
}
.field label{
  font-size:12px;
  font-weight: var(--main-font-weight);;
  color: var(--muted);
}
.input, .select{
  width:100%;
  padding: 10px 12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  outline:none;
  font-weight:650;
}
.input:focus, .select:focus{
  border-color: rgba(75, 9, 131, .35);
  box-shadow: 0 0 0 4px rgba(75, 9, 131, .10);
}
.preview{
  border:1px solid var(--line);
  background: var(--soft);
  border-radius: var(--radius);
  padding: 12px;
  font-weight:650;
  line-height:1.55;
}

.mini-btn.active{
  border-color: rgba(75, 9, 131, .25);
  background: rgba(75, 9, 131, .08);
  color: var(--pw-purple);
}


/* --- Modal --- */
/* --- Modal --- */
.issues-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;

  /* ✅ allow scrolling when content is taller than viewport */
  overflow:auto;
  -webkit-overflow-scrolling: touch;

  /* optional: give some breathing room */
  padding: 7vh 0;
}
.issues-modal.show{ display:block; }

.issues-modal__backdrop{
  position:fixed; /* better than absolute when container scrolls */
  inset:0;
  background: rgba(23,18,31,.45);
  backdrop-filter: blur(2px);
}

.issues-modal__dialog{
  position:relative;
  max-width: 720px;

  /* ✅ center horizontally, keep vertical spacing via modal padding */
  margin: 0 auto;

  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px rgba(23,18,31,.25);
  overflow:hidden;

  /* ✅ constrain height to viewport; head stays visible */
  max-height: calc(100vh - 14vh);
  display:flex;
  flex-direction:column;
}

.issues-modal__head{
  padding: 12px 14px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%);
  display:flex; align-items:center; justify-content:space-between; gap:10px;

  /* ✅ keep header visible while body scrolls */
  flex: 0 0 auto;
}

.issues-modal__body{
  padding: 14px;

  /* ✅ this is the scroller */
  overflow:auto;
  flex: 1 1 auto;
}

@media (max-width: 760px){
  .issues-modal{
    padding: 10vh 12px; /* replaces dialog margin */
  }
  .issues-modal__dialog{
    margin: 0;
    max-height: calc(100vh - 20vh);
  }
}


/* Quill tweaks to match PurpleWASP UI */
#quillEditor .ql-editor{
  min-height: 280px;
  font-weight: 650;
  line-height: 1.6;
}
#quillToolbar .ql-formats button,
#quillToolbar .ql-formats .ql-picker{
  border-radius: var(--radius);
}

/* Force the toolbar to stay on ONE line */
.toolbar-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;          /* ✅ override .row wrap */
  width:100%;
}

/* Left can shrink; right must not */
.toolbar-left{
  display:flex;
  align-items:center;
  min-width:0;
  flex:1 1 auto;
}

/* Don’t let the tabs wrap either */
.toolbar-left .reg-tabs{
  flex-wrap:nowrap;          /* ✅ override reg-tabs wrap */
  white-space:nowrap;
}

/* Spacer pushes right group to the edge */
.toolbar-spacer{
  flex:1 1 auto;
  min-width:10px;
}

/* Keep right controls together */
.toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  white-space:nowrap;
}

/* status colours */
#statusPill.not_started { background:#c7bfd3; }  /* grey */
#statusPill.in_progress { background:#f59e0b; }  /* amber */
#statusPill.in_review { background:#38bdf8; }  /* blue */
#statusPill.approved { background:#22c55e; }  /* green */
#statusPill.completed { background:#6d28d9; }  /* purple */



    @media (max-width: 980px){
      .wrap{ grid-template-columns: 1fr; }
      .nav{ min-height:auto; }
    }


/* Clickable table rows */
#soaTable tbody tr[data-soa-open]{
  cursor:pointer;
}
#soaTable tbody tr[data-soa-open]:hover{
  background: rgba(75, 9, 131, .06);
}








/* --- Registers submenu --- */

.top-menu-contents.menu-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 10px 12px;
}

.top-menu-contents.menu-toggle .caret{
  margin-left: auto;
  transition: transform .18s ease;
  opacity: .8;
  font-size: 12px;
}

.sidemenu-submenu{
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 1px);
    z-index: 50;
    width: 260px;
    /* padding: 6px 6px 10px 6px; */
    margin: 0;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow2);
    border: 1px solid var(--main-color-hover);
}






















































/************************************************************************************************************

**************       ******      ******        *******      **********        ******  ******************
***************      ******      ******       *********     ***********       ******  ******************
******     ******    ******      ******      ***********    ************      ******  ******
******     ******    ******      ******     *************   ****** *******    ******  ******
****************     ******************    ***************  ******   ******   ******  ******************
***************      ******************    ***************  ******    ******  ******  ******************
******               ******      ******     *************   ******     ****** ******  ******
******               ******      ******      ***********    ******      ************  ******
******               ******      ******       *********     ******       ***********  ******************
******               ******      ******        *******      ******        **********  ******************

************************************************************************************************************/


/* Responsive stacking for mobile */
@media screen and (max-width: 767px){
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .row>* {
        padding-left: 0px;
        padding-right: 0px;
    }

    /****************************************************************
     Header Section
    ****************************************************************/
    .hide-on-mobile {
        display: none;
    }

    .header .topbar .mobilemenu {
        display: contents;
        width: 10rem;
        color: var(--font-color);
        font-size: 1.5rem;
    }

    .header .topbar .mobilemenu .fa-bars{
        display: contents;
        width: 10rem;
        color: var(--font-color);
        font-size: 1.5rem;
    }
    
    .header .flex .navbar{
        position: absolute;
        top:99%; left:0; right:0;
        border-top: var(--border);
        border-bottom: var(--border);
        background-color: var(--text-color);
        transition: .2s linear;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
  
    .header .flex .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        display: block;
        height: 100rem;
        background-color: black;
        width: 35rem;
        padding: 2rem;
    }
  
    .header .flex .navbar a{
        display: block;
        text-align: left;
        font-size: 15px;
        font-weight: var(--main-font-weight);
        border-bottom: 1px solid var(--text2-color);
        width: 100%;
        padding: 2rem;
    }


    .header .flex .icons > *{
        margin-left: 0rem;
        /*font-size: 1.5rem;
        cursor: pointer;
        color:var(--text-color);
        display: flex; */
    }


    .login-btn {
        /* background-color: var(--font-color); */
        display: block;
        width: auto;
        /* margin-top: 1rem; */
        border-radius:  var(--radius);
        padding: 1rem 0rem;
        font-size: 14px;
        text-transform: capitalize;
        color: var(--font-color);
        cursor: pointer;
        text-align: center;
        /* border: 1px solid var(--font-color); */
        text-decoration: none;
        font-weight: var(--main-font-weight);
        text-transform: uppercase;
    }

    
    #menu-btn{
        display: inline-block;
        /* margin-right: 1rem; */
        margin-top: 0.8rem;
        font-size: 20px;
        color: var(--font-color);
    }

    .flex-btn{
        flex-flow: column;
        gap:0;
        display: contents;
    }
    
    .flex-btn .btn{
        background-color: var(--font-color);
        width: auto;
        /*margin-right: 1rem;*/
        font-size: 12px;
        border: none;
    }
    
    .flex-btn .sign-up-btn {
        display: none;
    }


    .responsive-btn {
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
        position: relative;
    }

    .responsive-btn i {
        text-indent: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .responsive-btn .robot-icon {
        display: none;
    }

    
    .header .flex .navbar .sign-up {
        bottom: 0;
        position: fixed;
        border: 1px solid var(--font-color);
        padding: 3rem;
        left: -2.1rem;
        display: block;
    }

    .logo{
        display: flex;
        align-items: center;
        background-image: url(../img/purplewasp.png);
        /*background-image: url(../img/thrixity_logo_b.png);*/
        width: 10%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }






    /****************
    # Horizontal Menu
    ****************/
    .horizontal-menu {
        display: none;
    }

    /* Base styles for the horizontal menu */
    .horizontal-menu {
        position: fixed;
        top: 0;
        left: -100%; /* Hidden off-screen */
        width: 250px; /* Width of the menu */
        height: 100%;
        background-color: #333; /* Background color */
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 1rem;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
        transition: left 0.3s ease; /* Smooth sliding animation */
        z-index: 1000; /* Above all other elements */
    }

    /* Show the menu by changing the left position */
    .horizontal-menu.active {
        left: 0;
    }

    /* Menu item styles */
    .horizontal-menu .menu-item {
        width: 100%;
        padding: 1rem 0.5rem;
        text-align: left;
        border-bottom: 1px solid #444;
        cursor: pointer;
    }

    .horizontal-menu .menu-item a {
        color: #ffffff;
        text-decoration: none;
        font-size: 14px;
        padding: 10px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 215px;
    }

    /* Menu button styles */
    #menu-btn {
        display: block;
        cursor: pointer;
        font-size: 1.5rem;
        color: #333;
        z-index: 1001; /* Above menu */
    }

    /* Overlay for when the menu is open */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Below menu but above everything else */
    }

    .menu-overlay.active {
        display: block;
    }

    
    
    
    
    
    
    
    
    /****************************************************************
     Menu Section
    ****************************************************************/
    /* Adjust the width of the menu */
    .side-menu {
    	/*width: 100%;*/
    	display: none;
    }
    
    .active {
    	background-color: var(--font-color);
    	color: #fff;
    }
    
    /* Adjust the width of the menu */
    .top-menu {
    	/*width: 100%;*/
    	display: grid;
    	text-align: center;
    }
    
    .top-menu-contents {
    	display: block;
    	width: 100%;
    	margin-top: 1rem;
    	border-radius:  var(--radius);
    	padding: 1rem 3rem;
    	font-size: 1.7rem;
    	text-transform: capitalize;
    	color: var(--text-color);
    	cursor: pointer;
    	text-align: center;
    	border-bottom: 0.5px dashed #6c6c6c;
    }
    
    .top-menu .fas {
    	color: var(--text2-color);
    	margin-right: 1.5rem;
    }














    /****************************************************************
        # Grid
    ****************************************************************/

    .feature-grid-sec .grid-card-head.grid-5 li {
        /* padding: 0 15px; */
        /* max-width: 33.333%; */
        /* flex: 0 0 33.333%; */
        /* margin-bottom: 10rem; */
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 10rem;
        border-bottom: 1px solid black;
    }

    .feature-grid-sec .grid-card-head li .grid-card {        
        margin-bottom: 5rem;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    /****************************************************************
        # CTA
    ****************************************************************/

    #royalty1 {
        width: 100%;
        height: 100%;
        margin-top: 10rem;
        background-size: cover;
        background-position: unset;
    }

    #royalty2 {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
        width: 100%;
    }
    
    #royalty2 p {
        /* font-family: fantasy; */
        font-family: var(--main-font);
        font-size: 1.2rem;
        /*text-transform: uppercase;
        /* width: 70%; */
        color: var(--text-color);
    }

    .royalty-overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background-color: rgba(0, 0, 0, 0.5);*/
        z-index: 5;
    }

    #royalty2 .cta1 {
        font-family: var(--main-font);
        width: 100%;
        z-index: 9;
        text-align: center;
    }

    #royalty2 .cta1 p {
        color: var(--text-color);
    }






    /*--------------------------------------------------------------
        # Footer
    --------------------------------------------------------------*/
    
    .row {
        padding: 50px 0; 
        display: contents;
        /* flex-wrap: wrap; */
        border-bottom: 1px solid hsl(0deg 0% 100% / 50.98%);
        text-align: center;
    }

    .footer-col{
        width: 100%;
        margin-bottom: 30px;
        display: none;
    }

    .footer-col:nth-child(1) {
        display: block;
    }

    .footer .copyright {
        text-align: center;
        padding-top: 30px;
        float: none;
        padding-bottom: 90px;
        color: var(--text-color);
    }
    
    .footer .credits {
        text-align: center;
        font-size: 13px;
        color: #555;
        float: none;
        padding-top: 30px;
    }

    .footer-site-info {
        max-width: 750px;
        padding: 0 15px;
        display: block;
        align-items: center;
    }

    .copyright {
        text-align: center;
        padding-top: 30px;
        float: none;
        padding-bottom: 90px;
        color: var(--text-color);
    }

    .footer-bottom .footer-bottom-up {
        display: flex;
        justify-content: flex-end;
        padding-bottom: 22px;
        justify-content: center;
        margin-top: 0rem;
    }

    .footer-bottom .footer-bottom-down {
        border-top: 1px solid #6641f3;
        display: block;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
    }


    .footer-col h4::before {
        content: '';
        position: absolute;
        /* left: 0; */
        bottom: -10px;
        height: 2px;
        box-sizing: border-box;
        background-color: var(--text-color);
        width: 50px;
        justify-self: anchor-center;
    }


    .section-title.title-shape h2, .section-title.title-shape .h2 {
        display: block;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        /* width: 100%; */
        font-size: 20px;
    }
    
    .section-title.title-shape h2::before, 
    .section-title.title-shape .h2::before, 
    .section-title.title-shape h2::after, 
    .section-title.title-shape .h2::after {
        content: "";
        display: block;
        width: auto;
        height: 1px;
        background-color: var(--font-color); /* or your desired line color */
        margin: 0 20px;
        /*display: none;*/
    } 

    .feature-grid-sec ol ul {
        padding-left: 0rem;
    }

    .feature-grid-sec .grid-card-head {
        padding-left: 0rem;
    }

    .pricing-grid {
        display: contents;
    }

    .feature-compare {
        display: none;
    }

    .horizontal-menu .menu-item a {
        white-space: nowrap;
        overflow: hidden;
    }

    .dashboard-org-info {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        min-height: 9rem;
        width: 100%;
        background-color: transparent;
        font-family: var(--font-primary);
        max-width: 1090px;
        margin: auto;
        overflow-y: auto;
        height: auto;
        transition: max-height 0.3s ease;
    }

    .main-container {
        max-width: 100%;
        width: 100%;
    }

    .policyForm-title .form-row {
        flex-direction: column;
    }

    .policy-status-table table {
        width: 100%;
        font-size: 14px;
    }
    .policy-status-table th, .policy-status-table td {
        padding: 10px 12px;
    }
    
    .header .topbar .mobilemenu {
        display: contents;
        width: 10rem;
        color: var(--font-color);
        font-size: 1.5rem;
    }

    .header .topbar .mobilemenu .fa-bars{
        display: contents;
        width: 10rem;
        color: var(--font-color);
        font-size: 1.5rem;
    }




    /*************************************************************************************
        #Contact Us Page
    *************************************************************************************/

    .contact-us-main-container {
        max-width: 1100px;
        margin: auto;
        /* overflow-y: auto; */
        height: auto;
        transition: max-height 0.3s ease;
        margin-top: 2rem;
        font-size: 14px;
        min-height: 50rem;
        margin-bottom: 5rem;
        display: block;
    }

    .contact-us-container {
        width: 100%;
        align-self: center;
        padding: 3rem;
    }
} 













/* Responsive Styles */
@media screen and (max-width: 450px) {
    .sidebar a { font-size: 18px; }

    .login-image {
        width: 100%;
        background: url(../../assets/img/log-in.png) no-repeat center center;
        background-size: cover;
        /* display: list-item; */
        height: 100%;
        position: fixed;
    }

    .login-form {
        width: 100%;
        padding: 10px;
        min-height: 100vh;
        display: flex;
        /* display: block; */
        align-items: center;
        justify-content: center;
        position: absolute;
    }

    .header .topbar .mobilemenu {
        display: contents;
        width: 10rem;
        color: var(--font-color);
        font-size: 1.5rem;
    }

    .header .topbar .mobilemenu .fa-bars{
        display: contents;
        width: 10rem;
        color: var(--font-color);
        font-size: 1.5rem;
    }
}