/*********************************************************
<!--
body, th, td, div, p, ul, li, ol, dl, dt, dd {  font-family: Verdana,Arial, Helvetica, Sans-Serif;  }
body{ color: #000000; background: #fff;  margin-top:0px; }
ul, ol, p, td, th, div { font-size: 11px; }
td p { font-size: 9px; padding-bottom: 0em; padding-top: 0em; margin-bottom:4px; margin-top:0px;}
li p { font-size: 9px; padding-bottom: 0em; padding-top: 0em; margin-top:0px; margin-bottom:4px; }
td ul, li ul { font-size: 11px  }
li { margin-bottom:6px; margin-top:6px; }
li ol { font-size: 11px; list-style-type: lower-roman; }
dt {font-size: 11px; font-weight:bold; margin-top:24px;}
li dt {font-size: 11px; font-weight:bold; margin-top:24px;}
ol li ul { list-style-type: disc; }
table { margin-bottom: 12px;}
td { vertical-align:top; }






.topic {
	margin-top:16px;
	margin-left:20px;
	width:100%;


	}

.istopic-head {
	margin-left:48px;
	margin-top: 10px;
	
}


.topic-head {
    width: 100%;
    height: 48px;
	margin-left:0px;
	text-indent: 0cm;
	color:#2680b3; font-style:normal; font-variant:normal; font-weight:bold; font-size:16px; font-family:Arial, Helvetica, Verdana, sans-serif;	
    padding-right:0; padding-top:13px; padding-bottom:3px	
}

.button1 {
	background:url('images/bluebutton1.gif') no-repeat;
	padding-left:50px; 
	
}

.button2 {
	background:url('images/bluebutton2.gif') no-repeat;
	padding-left:50px; 
}
.button3 {
	background:url('images/bluebutton3.gif') no-repeat;
	padding-left:50px; 
}
.button4 {
	background:url('images/bluebutton4.gif') no-repeat;
	padding-left:50px; 
}
.movieButton {
	background:url('images/movieButton.gif') no-repeat;
	padding-left:50px; 
}

.logo {
	background:url('images/about.png') no-repeat;
	padding-left:50px; 
}

.getstarted {
	background:url('images/flag_green.png') no-repeat;
	padding-left:50px; 
}


.expand {
	width:100%;
	cursor:hand;
		}	

.collapse {
	display:none;
	float:right;
	background: url('images/nav_right_blue.png') no-repeat;
	height:18px;
	vertical-align:middle;
	margin-left:0px;
	cursor:hand
}
**********************************************************/


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, textarea, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

body {
    font: 1em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    font-weight: 500;
    color: #333333;
    font-weight: 500;
    line-height: 16px;
    background-color: transparent;
    cursor: auto;
    padding: 10px 10px 5px 10px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.topDiv {
    top: 50%;
    left: 50%;
    border: 1px solid #A0A0A0;
    background-color: white;
    margin-left: -250px;
    margin-top: -250px;
    box-shadow: 10 5 5px black;
    z-index: 3;
}

.topDivWide {
    top: 50%;
    left: 50%;
    border: 1px solid #A0A0A0;
    background-color: white;
    margin-left: -250px;
    margin-top: -250px;
    box-shadow: 10 5 5px black;
    z-index: 3;
}

.topDivForIFrame {
    top: auto;
    left: auto;
    border: 1px solid #ccc;
    background-color: #ffffff;
    margin: 20px auto;
    padding: 12px !important; /* symmetric padding on all sides */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 3;
    position: relative;
    max-width: 960px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 40px);
}

.topDivForIFrameSmall {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 400px;
    border: 1px solid #A0A0A0;
    background-color: white;
    margin-left: 0px;
    margin-top: 0px;
    box-shadow: 10 5 5px black;
    z-index: 3;
}

.center {
    margin: auto;
    width: 100%;
    padding: 8px 0px 0px 0px !important; /* side and bottom padding removed to prevent double padding with .topDivForIFrame */
    background-color: transparent;
    box-sizing: border-box;
    flex: 1 1 auto;
    overflow-y: auto;
}

.header {
    font-size: 1.5em;
    color: darkslategrey;
    border-radius: 16px !important;
    overflow: hidden !important;
    border-spacing: 0px;
    background: var(--styleb-header-bg, linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 50%, #ffffff 100%)) !important;
    text-align: center;
    margin: 0 !important;
    padding: 8px 15px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    container-type: inline-size;
    container-name: header;
}


.header2 {
    font-size: 0.875em;
    font-weight: 500;
    color: #1a1919;
    background: #ffffff;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px !important;
    margin-left: 10px;
}

.header3 {
    font-size: 1.5em;
    color: darkslategrey;
    border-radius: 1px 3px 0 0;
    border-spacing: 0px;
    background: linear-gradient( #dddbdb, #ffffff);
    text-align: center;
    margin-bottom: 20px;
}


input[type=license], input[type=username], input[type=password] {
    width: 100%;
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 18px;
    height: 34px;
    color: #1a1919;
    background: white;
    border: 2px solid #a3b8c7;
    width: 100%;
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 0 !important;
    height: 34px;
    color: #1a1919;
    /*  background: white; */
    border: 2px solid #a3b8c7;
    border-color: #4a9db8;
    /*outline-color: #dceefc;
            outline-offset: 0;*/
}

.grid {
    width: 100%;
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 18px;
    height: 34px;
    color: #1a1919;
    margin-left: 2px;
}

    .grid td {
        padding-left: 5px;
        padding-top: 5px;
        border: 2px solid #a3b8c7;
        -moz-border-radius: 3px;
        border-radius: 3px;
        overflow: hidden;
    }

input[type=username]:focus {
    border-color: #3fb3d9;
}

select {
    width: 100%;
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 18px;
    margin-right: 0px;
    height: 34px;
    /*color: #b9b2b2;*/
    border: 2px solid #a3b8c7;
    line-height: 34px;
    width: 104%;
}

    select:focus {
        border-color: #3fb3d9;
    }

option[value=""][disabled] {
    display: none;
    /*color:grey;*/
}

option {
    color: black;
}

select, input[type=text] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.placeholderSpan {
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    line-height: 34px;
    color: #b9b2b2;
    background: white;
    padding-left: 8px;
    vertical-align: middle;
    margin-top: 3px;
    position: absolute;
    z-index: -1;
    left: 30px;
}

.footer {
    margin: auto;
    width: 95%;
    text-align: left;
    background-color: white;
    padding-bottom: 15px;
}

.button {
    font: 1em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    float: right;
    padding: 11px 25px;
    color: #fff;
    text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
    background: darkorange;
    border: 1px solid #ee8505;
    cursor: pointer;
    box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
    -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
    -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

    .button:hover {
        background: #fc8412;
        border: 1px solid rgba(256,256,256,0.75);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    }

    .button:focus {
        position: relative;
        bottom: -1px;
        background: darkorange;
        box-shadow: inset 0 1px 3px rgba(256,256,256,0.75);
        -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
        -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
    }

    .button:disabled {
        box-shadow: none;
        color: #d5d2d2;
        background: #A0A0A0;
        border: 1px solid rgba(0,0,0,0.5);
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
    }

.footer .poweredBy {
    color: #2c2d35;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
    text-transform: lowercase;
}

.message {
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 15px;
    color: #1a1919;
    background: white;
}

.label {
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 15px;
    color: #1a1919;
    /*height: 34px;*/
    font-weight: 500;
    line-height: 16px;
}

.label_light {
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 15px;
    color: #1a1919;
    /*height: 34px;*/
    font-weight: 400;
    line-height: 16px;
}

.validatorError {
    font: bold 1.5em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    color: red;
    vertical-align: middle;
    text-align: right;
    padding-left: 10px;
}

.checkImg {
    border: 0;
    outline: 0;
}

.footer .poweredBy {
    color: #2c2d35;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
    text-transform: lowercase;
}

.consentLink a,
.consentLink a:link,
.consentLink a:visited,
.consentLink a:active,
.consentLink a:hover {
    font-size: inherit !important;
    text-decoration: none;
    cursor: pointer;
}

a {
    display: inline-block;
    border: 0px solid #ddd;
    border-radius: 2px;
    padding: 3px;
    margin-bottom: 0px;
    color: black;
}


    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
        border: 1px solid #A0A0A0;
        /*box-shadow: 0 0 1px 1px #A0A0A0;*/ /*rgba(0, 140, 186, 0.5);*/
    }

    a:active {
        text-decoration: none;
    }

.def {
    text-align: left;
    vertical-align: middle;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    border: 0;
}

.subdef {
    text-align: left;
    vertical-align: top;
    padding-left: 85px;
    padding-right: 0px;
    padding-top: 0px;
    font-size: .8em;
    color: gray;
}

.DropDownListCssClass {
    width: 100%;
    font: 0.875em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    margin-bottom: 18px;
    height: 30px;
    color: #1a1919;
    /*  background: white; */
    border: 2px solid #a3b8c7;
    border-radius: 3px;
    padding-left: 10px;
    line-height: 34px;
}




@media screen and (max-width: 800px) {
    #lblTitle {
        font-size: 17px;
    }
}

.largeCheckbox input {
    font-size: 6px;
    width: 20px;
    height: 20px;
    margin-top: 10px;
    margin-left: 15px;
    position: relative;
    top: +6px;
    text-decoration: none;
    cursor: pointer;
}

.mediumCheckbox input {
    width: 20px;
    height: 20px;
    margin-top: 5px;
    position: relative;
    top: +3px;
    left: -10px;
}

.box-content {
    max-height: 300px;
    overflow: auto;
}

#lblTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.left-image {
    float: left;
    margin-left: 10px;
    margin-top: -30px;
}

.left-text {
    float: left;
    margin-left: -5px;
    text-align: left;
}

.right-label {
    float: right;
    margin-left: 5px;
    text-align: left;
}

.left-label {
    float: left;
    border: 1px solid black;
    margin-left: 5px;
    margin-right: 15px;
    text-align: left;
}

.right-checkbox {
    float: right;
    margin-left: 0px;
    margin-top: 7px;
    text-align: left;
}

.left-checkbox {
    float: left;
    display: flex;
    align-items: flex-start;
    margin-left: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    text-align: left;
    text-indent: 0px !important;
    padding-left: 10px;
}

.center-title {
    text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 10px;
    padding-top: 20px;
}

.right-button {
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.topright-align {
    float: right;
    margin: 0;
    width: auto;
    min-width: 120px;
    font: 0.675em 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

.left-item {
    float: left;
    margin-left: 55px;
    margin-bottom: 25px;
    text-align: left;
}


table.gridview {
    border-collapse: collapse;
}

    table.gridview td, table.gridview th {
        border: 1px solid black;
    }

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
    border: 1px solid #ddd;
}

/*********************************************************
This is a customer specific css file. 
This file will not be replaced when upgrading QLM.
**********************************************************/

/* Logo responsive styling */
.logo-responsive {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Logo section default styling - will be overridden by server-side logic */
.logo-section {
    width: 100%;
    padding: 15px 0;
    overflow: hidden; /* Clear floats */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    /* Center alignment (default) - vertical stack */
    .logo-section.center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        .logo-section.center img {
            float: none !important;
            margin: 0 auto !important;
            display: block !important;
        }

    /* Left alignment - horizontal layout, logo and title on same row, positioned to left */
    .logo-section.left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* Position the logo+title group to the left */
    }

        .logo-section.left img {
            float: none !important;
            margin: 0 !important;
            display: block !important;
        }

    /* Right alignment - horizontal layout, logo and title on same row, positioned to right */
    .logo-section.right {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end; /* Position the logo+title group to the right */
    }

        .logo-section.right img {
            float: none !important;
            margin: 0 !important;
            display: block !important;
        }

/* Ensure form content appears below logo */
.form-content {
    clear: both;
    width: 100%;
    margin-top: 20px;
}

/* Title alignment styles for horizontal layouts */
.center-title.left {
    text-align: left !important;
    float: none !important;
    display: block !important;
    margin: 0 0 0 15px !important; /* Space after logo */
}

.center-title.right {
    text-align: right !important;
    float: none !important;
    display: block !important;
    margin: 0 0 0 15px !important; /* Space after logo, text aligned right */
}

/* Title alignment for vertical layout */
.center-title.center,
.center-title {
    text-align: center !important;
    float: none !important;
    display: block !important;
    margin: 10px auto 0 auto !important;
}

/* Independent title alignment classes (override container alignment) */
.title-left {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.title-right {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.title-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .logo-responsive {
        max-width: 80%;
    }

    .logo-section {
        padding: 10px 0;
    }

        /* On mobile, force vertical layout for all alignments for better UX */
        .logo-section.left,
        .logo-section.right {
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }

            .logo-section.left img,
            .logo-section.right img {
                margin: 0 auto !important;
            }

    .center-title.left,
    .center-title.right {
        text-align: center !important;
        margin: 10px auto 0 auto !important;
    }

    /* On mobile, center all titles for better UX unless specifically overridden */
    .title-left,
    .title-right {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===========================================
   HTML / BODY RESPONSIVENESS
   =========================================== */

html {
    height: 100%;
    overflow-y: auto;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
}

@media (max-height: 700px) {
    body {
        padding: 10px;
    }
}

@media (max-height: 500px) {
    body {
        padding: 5px;
    }
}

/* ===========================================
   TOPDIVFORIFRAME RESPONSIVENESS
   =========================================== */

@media (max-width: 768px) {
    .topDivForIFrame {
        margin: 10px auto;
        max-width: 100%;
        max-height: calc(100vh - 20px);
    }
}

@media (max-height: 700px) {
    .topDivForIFrame {
        margin: 10px auto;
        max-height: calc(100vh - 20px);
    }
}

@media (max-height: 500px) {
    .topDivForIFrame {
        margin: 5px auto;
        max-height: calc(100vh - 10px);
    }
}

/* ===========================================
   CONTAINER-FLUID
   =========================================== */

.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ===========================================
   HEADER RESPONSIVENESS
   =========================================== */

@media (max-width: 768px) {
    .header {
        padding: 10px 15px;
    }
}

@media (max-height: 700px) {
    .header {
        padding: 10px 15px;
    }
}

@media (max-height: 500px) {
    .header {
        padding: 8px 12px;
    }
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 15px;
    min-height: 64px; /* natural content height; grows/wraps dynamically instead of a fixed breakpoint */
}

.logo-container {
    flex: 0 0 auto;
    margin-right: 15px;
    order: -2;
}

    .logo-container.logo-align-center {
        order: 0;
        margin: 0 auto;
    }

.logo-container.logo-align-right {
    order: 3;
    margin-left: 15px;
    margin-right: 0;
}

/* When both the logo and the title are centered, stack them in their own
   column (logo above title) while the language dropdown stays to the right,
   vertically centered against that stacked column. A three-column grid is
   used with a matching empty spacer column on the left so the logo/title
   column is centered in the full header width, not just the remaining
   space after the dropdown. */
.header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "spacer logo lang"
        "spacer title lang";
    align-items: center;
}

.header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) .logo-container.logo-align-center {
    grid-area: logo;
    margin: 0 auto;
    justify-self: center;
}

.header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) .title-container.title-align-center {
    grid-area: title;
    text-align: center;
    justify-self: center;
    width: 100%;
}

.header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) .language-container {
    grid-area: lang;
    align-self: center;
    justify-self: end;
    margin-left: 15px;
}

/* When the header becomes too narrow for the logo/title column and the
   dropdown to share a row comfortably, drop the dropdown to its own row
   below, centered, instead of squeezing it into the grid. Switch to a
   flex column here (instead of a single-column grid) so the standard
   flex centering rules apply consistently. */
@container header (max-width: 480px) {
    .header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) .logo-container.logo-align-center,
    .header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) .title-container.title-align-center,
    .header-content:has(.logo-container.logo-align-center):has(.title-container.title-align-center) .language-container {
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 10px;
        justify-self: unset;
        align-self: center;
        width: auto;
    }
}

@media (max-height: 600px) {
    .logo-container img {
        max-width: 48px !important;
        max-height: 48px !important;
    }
}

@media (max-height: 500px) {
    .logo-container img {
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

/* When the logo is left/right aligned (not centered) but the title is
   centered, the title should be centered against the full header width
   rather than just the remaining flex space next to the logo/language
   containers. Take it out of the flex flow and absolutely center it. */
.header-content:not(:has(.logo-container.logo-align-center)) .title-container.title-align-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex: none;
    width: max-content;
    max-width: calc(100% - 40px);
    text-align: center;
}

.title-container {
    order: 1;
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
}

    .title-container.title-align-left {
        order: -1;
        flex: 0 1 auto;
        text-align: left;
    }

    .title-container.title-align-right {
        order: 4;
        flex: 0 1 auto;
        text-align: right;
    }

.title-container .center-title {
    margin: 0 !important;
    padding-top: 0 !important;
    display: inline-block !important;
    font-size: 1.5em;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    vertical-align: middle;
}

.title-container.title-align-center .center-title {
    text-align: center;
}

.title-container.title-align-left .center-title {
    text-align: left;
}

.title-container.title-align-right .center-title {
    text-align: right;
}

@media (max-width: 768px) {
    .title-container .center-title {
        font-size: 1.3em;
    }
}

@media (max-width: 650px) {
    .title-container .center-title {
        font-size: 1.15em;
    }
}

@media (max-width: 600px) {
    .title-container .center-title {
        font-size: 1.1em;
    }
}

@media (max-height: 600px) {
    .title-container .center-title {
        font-size: 1.2em;
    }
}

@media (max-height: 500px) {
    .title-container .center-title {
        font-size: 1em;
    }
}

.language-container {
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    margin-left: auto;
    order: 2;
}

.language-container select {
    background-color: white;
    pointer-events: auto;
}

/* Stacked/mobile header layout: a pure-CSS container query stacks the logo,
   title and language dropdown vertically (top to bottom) as soon as they no
   longer fit on a single line, instead of relying on a fixed viewport breakpoint.
   Each element keeps the same left-to-right "order" value used in the row
   layout, so the top-to-bottom stacking order matches the alignment settings
   (e.g. a left-aligned element stays first/top, a right-aligned one stays
   last/bottom). The @media fallback below covers browsers without container
   query support. */
@container header (max-width: 560px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .logo-container,
    .logo-container.logo-align-center,
    .logo-container.logo-align-right {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .title-container,
    .title-container.title-align-left,
    .title-container.title-align-right,
    .title-container.title-align-center,
    .header-content:not(:has(.logo-container.logo-align-center)) .title-container.title-align-center {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .title-container .center-title,
    .title-container.title-align-left .center-title,
    .title-container.title-align-right .center-title,
    .title-container.title-align-center .center-title {
        text-align: center;
    }

    .language-container {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .logo-container,
    .logo-container.logo-align-center,
    .logo-container.logo-align-right {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .title-container,
    .title-container.title-align-left,
    .title-container.title-align-right,
    .title-container.title-align-center,
    .header-content:not(:has(.logo-container.logo-align-center)) .title-container.title-align-center {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .title-container .center-title,
    .title-container.title-align-left .center-title,
    .title-container.title-align-right .center-title,
    .title-container.title-align-center .center-title {
        text-align: center;
    }

    .language-container {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .topright-align {
        min-width: 150px;
    }
}

/* ===========================================
   CENTER RESPONSIVENESS
   =========================================== */

@media (max-width: 768px) {
    .center {
        padding: 0 15px 15px 15px;
    }
}

@media (max-width: 480px) {
    .center {
        padding: 0 10px 10px 10px;
    }
}

@media (max-height: 700px) {
    .center {
        padding: 0 15px 10px 15px;
    }
}

@media (max-height: 500px) {
    .center {
        padding: 0 10px 5px 10px;
    }
}

/* ===========================================
   VERTICAL SPACING MANAGEMENT
   =========================================== */

.row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-height: 700px) {
    .row {
        margin-bottom: 8px;
    }

        .row:has(.col-sm-12:empty),
        .row > .col-sm-12:only-child:empty {
            margin-bottom: 4px;
            min-height: 8px;
        }
}

@media (max-height: 500px) {
    .row {
        margin-bottom: 5px;
    }

        .row:has(.col-sm-12:empty),
        .row > .col-sm-12:only-child:empty {
            margin-bottom: 2px;
            min-height: 5px;
        }
}

/* ===========================================
   FORM CONTROLS RESPONSIVENESS
   =========================================== */

.form-control,
.form-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-height: 600px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    textarea {
        padding: 8px;
        font-size: 14px;
    }
}

@media (max-height: 500px) {
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    textarea {
        padding: 6px;
        font-size: 13px;
    }
}

/* ===========================================
   INPUT FORM-CONTROL OVERRIDES
   =========================================== */

input[type="email"].form-control,
input[type="tel"].form-control {
    font-size: 1rem !important;
    border-radius: 8px !important;
}

/* ===========================================
   VALIDATION SPAN
   =========================================== */

.validatorError.field-validation-valid {
    display: none !important;
}

/* ===========================================
   LEFT-CHECKBOX NESTED OVERRIDES
   =========================================== */

.left-checkbox .largeCheckbox {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

    .left-checkbox .largeCheckbox input[type="checkbox"] {
        flex-shrink: 0;
        margin-top: 0px !important;
        margin-left: 0px !important;
        margin-right: 10px;
        position: static !important;
    }

.left-checkbox .label_light {
    flex: 1;
    margin: 0;
    padding-top: 2px;
    line-height: 1.4;
}

/* ===========================================
   BUTTON RESPONSIVENESS
   =========================================== */

.btn {
    padding: 10px 20px;
    font-size: 1em;
}

@media (max-width: 768px) {
    .btn {
        padding: 12px 24px;
        font-size: 1.1em;
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-height: 600px) {
    .btn {
        padding: 8px 16px;
        font-size: 0.95em;
    }
}

@media (max-height: 500px) {
    .btn {
        padding: 6px 12px;
        font-size: 0.9em;
    }
}

/* ===========================================
   ALERT RESPONSIVENESS
   =========================================== */

.alert {
    margin: 15px 0;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .alert {
        font-size: 0.9em;
        padding: 12px;
    }
}

@media (max-height: 600px) {
    .alert {
        margin: 10px 0;
        padding: 10px;
        font-size: 0.85em;
    }
}

@media (max-height: 500px) {
    .alert {
        margin: 8px 0;
        padding: 8px;
        font-size: 0.8em;
    }
}

/* ===========================================
   IMAGES RESPONSIVENESS
   =========================================== */

img {
    max-width: 100%;
    height: auto;
}

@media (max-height: 600px) {
    .center img:not(.logo-responsive) {
        max-height: 80px;
    }
}

@media (max-height: 500px) {
    .center img:not(.logo-responsive) {
        max-height: 60px;
    }
}

/* ===========================================
   SCROLLBAR STYLING
   =========================================== */

.topDivForIFrame::-webkit-scrollbar,
.center::-webkit-scrollbar {
    width: 8px;
}

.topDivForIFrame::-webkit-scrollbar-track,
.center::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.topDivForIFrame::-webkit-scrollbar-thumb,
.center::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .topDivForIFrame::-webkit-scrollbar-thumb:hover,
    .center::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* ===========================================
   FORM CHECK (CHECKBOX) RESPONSIVENESS
   =========================================== */

@media (max-height: 600px) {
    .form-check {
        margin-bottom: 8px;
    }

    .form-check-label {
        font-size: 0.9em;
    }
}

@media (max-height: 500px) {
    .form-check {
        margin-bottom: 5px;
    }

    .form-check-label {
        font-size: 0.85em;
    }
}

/* ===========================================
   DROPDOWN CLIPPING FIXES
   =========================================== */

select.form-control {
    position: relative;
    z-index: 100;
}

.center:has(select:focus) {
    overflow: visible;
}

.row:has(select.form-control) {
    position: relative;
    z-index: 50;
}

.topDivForIFrame:has(select:focus) {
    overflow: visible;
}

/* ===========================================
   CUSTOM DROPDOWN - Country Select
   =========================================== */

.custom-dropdown {
    position: relative;
    width: 100%;
    font-size: 1rem;
}

.custom-dropdown-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: 1.5px solid var(--styleb-input-border, #ced4da);
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    min-height: 38px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
}

    .custom-dropdown-selected input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        background: transparent;
        cursor: pointer;
        width: 100%;
    }

        .custom-dropdown-selected input:not([readonly]) {
            cursor: text;
        }

        .custom-dropdown-selected input::placeholder {
            color: #6c757d;
            opacity: 1;
        }

    .custom-dropdown-selected:hover {
        border-color: #4a9fe0;
    }

    .custom-dropdown.open .custom-dropdown-selected,
    .custom-dropdown-selected:has(input:focus) {
        border-color: #4a9fe0;
        box-shadow: 0 0 0 0.25rem rgba(11, 94, 215, 0.25);
    }

.custom-dropdown-arrow {
    width: 10px;
    height: 7px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%23888' stroke-width='1.5' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 7px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 10px;
    margin-right: 10px;
    pointer-events: none;
}

.custom-dropdown.open .custom-dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-selected:hover .custom-dropdown-arrow {
}

.custom-dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: -1px;
}

.custom-dropdown.open .custom-dropdown-options {
    display: block;
}

.custom-dropdown-search {
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 8px;
    border-bottom: 1px solid #e9ecef;
    z-index: 1001;
}

    .custom-dropdown-search input {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        font-size: 0.9rem;
        outline: none;
        box-sizing: border-box;
    }

        .custom-dropdown-search input:focus {
            border-color: #4a9fe0;
            box-shadow: 0 0 0 0.2rem rgba(11, 94, 215, 0.15);
        }

.custom-dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .custom-dropdown-option:hover {
        background-color: #e9ecef;
    }

    .custom-dropdown-option.selected {
        background-color: #0b5ed7;
        color: white;
    }

        .custom-dropdown-option.selected:hover {
            background-color: #094db3;
        }

.custom-dropdown-options::-webkit-scrollbar {
    width: 8px;
}

.custom-dropdown-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 0 0.25rem 0;
}

.custom-dropdown-options::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .custom-dropdown-options::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

@media (max-height: 600px) {
    .custom-dropdown-options {
        max-height: 200px;
    }

    .custom-dropdown-option {
        padding: 6px 10px;
        font-size: 0.9em;
    }

    .custom-dropdown-selected input {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}

@media (max-height: 500px) {
    .custom-dropdown-options {
        max-height: 150px;
    }

    .custom-dropdown-option {
        padding: 5px 8px;
        font-size: 0.85em;
    }

    .custom-dropdown-selected input {
        padding: 5px 8px;
        font-size: 0.85rem;
    }
}

/* Action icons (Activate/Deactivate/Info/Email) */
.action-icon {
    vertical-align: middle;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Tint overlay wrapper - sizes itself to the image automatically (no
   explicit width/height anywhere); the wrapper's --icon-src custom
   property (set inline per-icon) is used as a CSS mask so only the
   icon's own pixels get colored - the transparent background around
   the icon stays transparent instead of becoming a colored box.
   Theme files set the tint color via .icon-tint::after background-color. */
.icon-tint {
    position: relative;
    display: inline-block;
    line-height: 0;
}

    .icon-tint img {
        visibility: hidden;
    }

    /* Muted variant for subtle branding elements like "powered by QLM" */
    .icon-tint.muted {
        opacity: 0.5;
    }

    .icon-tint::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--icon-tint-color, #2f6fa0);
        -webkit-mask-image: var(--icon-src);
        mask-image: var(--icon-src);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        pointer-events: none;
    }

/* --- HIGH END MODERN STYLE B OVERRIDES & COMPONENTS --- */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    /* Base theme colors - defaults map to standard light mode but support theme overriding */
    --styleb-primary: var(--theme-accent, #2f6fa0);
    --styleb-primary-rgb: var(--theme-accent-rgb, 47, 111, 160);
    --styleb-primary-hover: var(--theme-accent-hover, #255a83);
    /* Containers */
    --styleb-panel-bg: rgba(255, 255, 255, 0.98);
    --styleb-panel-border: rgba(0, 0, 0, 0.08);
    --styleb-panel-shadow: 0 15px 35px rgba(0, 0, 0, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04);
    --styleb-header-line: rgba(0, 0, 0, 0.06);
    --styleb-title-gradient: linear-gradient(135deg, #091e3a 30%, var(--styleb-primary) 100%);
    /* Cards */
    --styleb-card-bg: #fafafa;
    --styleb-card-border: rgba(91, 200, 232, 0.15);
    --styleb-card-text: #111827;
    --styleb-card-text-muted: #6b7280;
    --styleb-card-hover-bg: #f3f4f6;
    --styleb-card-active-bg: rgba(var(--styleb-primary-rgb), 0.05);
    /* Content Area */
    --styleb-content-bg: #ffffff;
    --styleb-content-border: rgba(0, 0, 0, 0.08);
    --styleb-content-text: #374151;
    --styleb-content-heading: #111827;
    /* Form Inputs */
    --styleb-input-bg: #ffffff;
    --styleb-input-border: #cbd5e1;
    --styleb-input-text: #111827;
    --styleb-input-focus-border: var(--styleb-primary);
    --styleb-input-focus-shadow: rgba(var(--styleb-primary-rgb), 0.15);
    /* Buttons */
    --styleb-btn-bg: var(--styleb-primary);
    --styleb-btn-hover: var(--styleb-primary-hover);
    --styleb-btn-text: #ffffff;
    --styleb-btn-shadow: rgba(var(--styleb-primary-rgb), 0.2);
    /* Tables */
    --styleb-table-hdr-text: var(--styleb-primary);
    --styleb-table-border: rgba(0, 0, 0, 0.05);
    --styleb-table-text: #374151;
    /* Alerts */
    --styleb-alert-success-bg: #e8f5e9;
    --styleb-alert-success-border: #c8e6c9;
    --styleb-alert-success-text: #2e7d32;
    --styleb-alert-danger-bg: #ffebee;
    --styleb-alert-danger-border: #ffcdd2;
    --styleb-alert-danger-text: #c62828;
}

/* Detect Dark Themes based on html background-color or theme colors */
@media (prefers-color-scheme: dark) {
    /* (System default, but we will target specific theme signatures below) */
}

/* Purple Dark Theme & overall dark theme detection overrides */
html[style*="background-color: #1a1a3e"],
html[style*="background: #1a1a3e"],
body[style*="background-color: #1a1a3e"],
html[style*="1f1f3a"],
html[style*="0f1a2e"],
html[style*="1a1a"] {
    --styleb-panel-bg: rgba(30, 30, 60, 0.45) !important;
}

/* If the theme stylesheet sets colors, override our local custom variables to match their mood */
:root {
}

/* Force dark colors if body background is dark */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Safe theme sensing: If the document background is dark, we use translucent high-contrast styles.
   If it's light, we use clean crisp solid card style with proper contrast. */
@media screen {
    /* If page background is light/white, or when inside a light container */
    .topDivForIFrame {
        /* Default clean glass style that matches BOTH dark and light backgrounds because we adapt the variables */
    }
}

/* Let's redefine components with fallback values and adapt to theme variables */
.topDivForIFrame {
    /* Read body/html background to determine style. Since we can't do conditional logic easily in CSS, 
       we use CSS custom properties that check if theme-accent is light or dark, OR we detect if the theme background is dark. */
    background: var(--styleb-panel-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--styleb-panel-border) !important;
    border-radius: 24px !important;
    padding: 12px !important; /* symmetric padding on all sides */
    box-shadow: var(--styleb-panel-shadow) !important;
    max-width: 1040px !important;
    margin: 40px auto !important;
    color: var(--styleb-card-text) !important;
}

/* Check background of .topDivForIFrame. Since themes specify .topDivForIFrame { background-color: #1a1a3e; },
   we let that style pass or we override it explicitly.
   In theme-purple.css: .topDivForIFrame is background-color: #1a1a3e;
   In theme-darkblue.css: .topDivForIFrame is background-color: #0f1a2e;
   Our properties should dynamically inherit that or apply beautiful overrides.
*/
.topDivForIFrame {
    /* If background-color is set by the theme, we want to respect its dark body backdrop but build a highly legible glassmorphic card on top.
       We can apply these smart CSS rules to adapt automatically based on active color: */
}

/* When the theme is purple/dark blue (.header2 is dark or body has dark bg) */
html, body, :root {
    /* If the theme's active accent is light/pastel, we are in dark mode. 
       Let's check if --theme-accent is set. If theme accent is a light color (e.g. #c4b5fd, #7ec8f2),
       then we use the Dark Mode styling variables. If theme-accent is not set or is dark, we use clean high contrast light mode. */
}

/* Detect dark themes based on the presence of our theme files by matching known variables */
@media screen {
    /* Set default crisp light theme styles first (no !important) so that if a theme CSS stylesheet 
       is loaded afterwards in the head, the theme's custom properties will override these defaults seamlessly. */
    body {
        --styleb-primary: #2f6fa0;
        --styleb-primary-rgb: 47, 111, 160;
        --styleb-primary-hover: #255a83;
        --styleb-panel-bg: rgba(255, 255, 255, 0.98);
        --styleb-panel-border: rgba(0, 0, 0, 0.08);
        --styleb-panel-shadow: 0 15px 35px rgba(0, 0, 0, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04);
        --styleb-header-bg: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 50%, #ffffff 100%);
        --styleb-header-line: rgba(0, 0, 0, 0.06);
        --styleb-title-gradient: linear-gradient(135deg, #091e3a 30%, var(--styleb-primary) 100%);
        --styleb-card-bg: #ffffff;
        --styleb-card-border: rgba(47, 111, 160, 0.15);
        --styleb-card-text: #111827;
        --styleb-card-text-muted: #6b7280;
        --styleb-card-hover-bg: #f3f4f6;
        --styleb-card-active-bg: rgba(47, 111, 160, 0.05);
        --styleb-content-bg: #ffffff;
        --styleb-content-border: rgba(0, 0, 0, 0.08);
        --styleb-content-text: #374151;
        --styleb-content-heading: #111827;
        --styleb-input-bg: #ffffff;
        --styleb-input-border: #cbd5e1;
        --styleb-input-text: #111827;
        --styleb-input-focus-border: var(--styleb-primary);
        --styleb-input-focus-shadow: rgba(47, 111, 160, 0.15);
        --styleb-btn-bg: var(--styleb-primary);
        --styleb-btn-hover: var(--styleb-primary-hover);
        --styleb-btn-text: #ffffff;
        --styleb-btn-shadow: rgba(47, 111, 160, 0.2);
        --styleb-table-hdr-text: var(--styleb-primary);
        --styleb-table-border: rgba(0, 0, 0, 0.05);
        --styleb-table-text: #374151;
        --styleb-alert-success-bg: #e8f5e9;
        --styleb-alert-success-border: #c8e6c9;
        --styleb-alert-success-text: #2e7d32;
        --styleb-alert-danger-bg: #ffebee;
        --styleb-alert-danger-border: #ffcdd2;
        --styleb-alert-danger-text: #c62828;
    }
}

/* Base top container card */
.topDivForIFrame {
    background: var(--styleb-panel-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--styleb-primary-rgb), 0.6) !important;
    border-radius: 24px !important;
    padding: 12px !important; /* symmetric padding on all sides */
    /* Themed glowing outer edge (uses the active theme accent color) layered on top of the panel shadow. */
    box-shadow:
        var(--styleb-panel-shadow),
        0 0 0 1px rgba(var(--styleb-primary-rgb), 0.35),
        0 0 20px rgba(var(--styleb-primary-rgb), 0.35),
        0 0 40px rgba(var(--styleb-primary-rgb), 0.15) !important;
    max-width: 1040px !important;
    margin: 10px auto !important;
    color: var(--styleb-card-text) !important;
}

/* Header tweaks */
.header {
    border-bottom: 1px solid var(--styleb-header-line) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

.center-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--styleb-primary) !important; /* Force highly-legible solid accent block on all views */
    letter-spacing: -0.01em !important;
    display: inline-block !important;
    line-height: normal !important; /* prevent vertical clipping of text height inside absolute layout */
    padding-bottom: 5px !important; /* add tiny spacing fallback */
}

/* On explicit dark backgrounds, apply gradient style safely */
body[style*="background-color: #1a1a3e"] .center-title,
body[style*="background-color: #0f1a2e"] .center-title {
    background: var(--styleb-title-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Language selector modern styling */
.topright-align {
    background: var(--styleb-input-bg) !important;
    border: 1px solid var(--styleb-input-border) !important;
    border-radius: 8px !important;
    padding: 6px 32px 6px 15px !important;
    color: var(--styleb-input-text) !important;
    outline: none !important;
    font-size: 0.6em !important; /* override the tiny 0.675em from the base .topright-align rule */
    line-height: normal !important; /* prevent vertical clipping of selected option text */
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%23888' stroke-width='1.5' d='M1 1l5 5 5-5'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 7px !important;
}

    .topright-align option {
        background-color: var(--styleb-header-bg) !important;
        color: var(--styleb-input-text) !important;
    }

/* --- Navigation Card Grid (Style B) --- */
.modern-card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

.modern-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 10px !important;
    border-radius: 16px !important;
    background: var(--styleb-card-bg) !important;
    border: 1px solid var(--styleb-card-border) !important;
    text-decoration: none !important;
    color: var(--styleb-card-text) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

/* Specific light background card border fallback to ensure clean visibility on white backgrounds */
body:not([style*="background-color: #1a1a3e"]):not([style*="background: #1a1a3e"]):not([style*="background-color: #0f1a2e"]) .modern-card,
.topDivForIFrame:not([style*="background-color: #1a1a3e"]):not([style*="background-color: #0f1a2e"]) .modern-card,
html:not([style*="background-color: #1a1a3e"]):not([style*="background: #1a1a3e"]):not([style*="background-color: #0f1a2e"]) body:not([style*="background-color: #1a1a3e"]) .modern-card {
    border: 1.5px solid rgba(91, 200, 232, 0.22) !important;
    box-shadow: 0 2px 8px rgba(91, 200, 232, 0.04) !important;
}

.modern-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0 !important;
    background: radial-gradient(circle at top right, rgba(var(--styleb-primary-rgb), 0.15), transparent 60%) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.modern-card:hover, .modern-card.active-tab {
    background: var(--styleb-card-hover-bg) !important;
    border-color: rgba(var(--styleb-primary-rgb), 0.4) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.modern-card.active-tab {
    border-color: var(--styleb-primary) !important;
    background: var(--styleb-card-active-bg) !important;
    box-shadow: 0 4px 15px rgba(var(--styleb-primary-rgb), 0.12) !important;
}

    .modern-card:hover::before, .modern-card.active-tab::before {
        opacity: 1 !important;
    }

.modern-card img {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px !important;
    transition: transform 0.25s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.modern-card:hover img {
    transform: scale(1.08) !important;
}

.modern-card strong {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--styleb-card-text) !important;
    margin-bottom: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

.modern-card span {
    display: block !important;
    font-size: 0.82rem !important;
    color: var(--styleb-card-text-muted) !important;
    line-height: 1.2 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure the links within the card-grid don't force a white color */
.modern-card-grid a.modern-card,
.modern-card-grid a.modern-card:visited,
.modern-card-grid a.modern-card strong,
.modern-card-grid a.modern-card span {
    text-decoration: none !important;
}

/* --- Content Container Wrapper --- */
.styleb-content-container {
    background: var(--styleb-content-bg) !important;
    border: 1px solid var(--styleb-content-border) !important;
    border-radius: 16px !important;
    padding: 18px 24px !important;
    color: var(--styleb-content-text) !important;
    margin-top: 5px !important;
}

    .styleb-content-container h4 {
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        font-size: 1.15rem !important;
        color: var(--styleb-content-heading) !important;
    }

.styleb-input-group {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Form Fields */
.form-control, .form-select {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--styleb-input-border) !important;
    background-color: var(--styleb-input-bg) !important;
    color: var(--styleb-input-text) !important;
    font-size: 0.9rem !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    height: 38px !important;
}

.form-select {
    padding-right: 32px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%23888' stroke-width='1.5' d='M1 1l5 5 5-5'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 7px !important;
}

select.form-control {
    padding-right: 32px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%23888' stroke-width='1.5' d='M1 1l5 5 5-5'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px 7px !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--styleb-input-focus-border) !important;
    box-shadow: 0 0 10px var(--styleb-input-focus-shadow) !important;
    background-color: var(--styleb-input-bg) !important;
}

/* Labels */
label, .left-item {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--styleb-table-hdr-text) !important;
    margin-bottom: 4px !important;
}

/* Primary Action Buttons */
.btn-deactivate, .btn-activate, .btn-ok, .styleb-btn {
    background: var(--styleb-btn-bg) !important;
    border: none !important;
    color: var(--styleb-btn-text) !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-deactivate:hover, .btn-activate:hover, .btn-ok:hover, .styleb-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px var(--styleb-btn-shadow) !important;
        background: var(--styleb-btn-hover) !important;
    }

    /* Disabled buttons */
    .btn-activate:disabled, .btn-deactivate:disabled, .btn-ok:disabled, .styleb-btn:disabled {
        background: #e5e7eb !important; /* solid beautiful grey fallback for light mode backgrounds */
        color: #9ca3af !important; /* readable muted lettering */
        border: 1px solid #d1d5db !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 0.8 !important;
    }

/* For explicit dark theme states - fall back to elegant translucency */
body[style*="background-color: #1a1a3e"] .btn-activate:disabled,
body[style*="background-color: #0f1a2e"] .btn-activate:disabled,
body[style*="background-color: #1a1a3e"] .btn-deactivate:disabled,
body[style*="background-color: #0f1a2e"] .btn-deactivate:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Grid & Tables to display licenses modernly */
.styleb-computers-table, .license-info-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
    margin-top: 15px !important;
}

    .styleb-computers-table th, .license-info-table th {
        border-bottom: 2px solid var(--styleb-table-border) !important;
        padding: 12px 10px !important;
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        color: var(--styleb-table-hdr-text) !important;
        font-weight: 700 !important;
    }

    .styleb-computers-table td, .license-info-table td {
        padding: 12px 10px !important;
        border-bottom: 1px solid var(--styleb-table-border) !important;
        font-size: 0.9rem !important;
        color: var(--styleb-table-text) !important;
    }

/* Success/danger messages inside layout */
.alert {
    border-radius: 10px !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    font-size: 0.92rem !important;
}

.alert-success {
    background-color: var(--styleb-alert-success-bg) !important;
    border-color: var(--styleb-alert-success-border) !important;
    color: var(--styleb-alert-success-text) !important;
}

.alert-danger {
    background-color: var(--styleb-alert-danger-bg) !important;
    border-color: var(--styleb-alert-danger-border) !important;
    color: var(--styleb-alert-danger-text) !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .styleb-input-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .form-control, .btn-activate, .btn-deactivate, .btn-ok {
        width: 100% !important;
    }

    .topDivForIFrame {
        padding: 10px !important;
        margin: 10px auto !important;
    }
}