:root {
    --background-color-light: #f8f8f8;
    --text-color-light: #333;
    --mainsquares-bg-light: #fff;
    --mainsquares-border-light: #ddd;
    --form-control-bg-light: #fff;
    --form-control-border-light: #ccc;
    --form-control-text-light: #555;
    --form-control-focus-bg-light: #eee;
    --form-control-focus-border-light: #aaa;
    --input-group-addon-bg-light: #e0e0e0;
    --input-group-addon-border-light: #ccc;
    --input-group-addon-text-light: #555;
    --inner-rule-output-bg-light: #f0f0f0;
    --inner-rule-output-border-light: #ccc;
    --inner-rule-output-text-light: #333;
}

[data-theme='dark'] {
    --background-color: #222;
    --text-color: #fff;
    --mainsquares-bg: #333;
    --mainsquares-border: #444;
    --form-control-bg: #444;
    --form-control-border: #555;
    --form-control-text: #fff;
    --form-control-focus-bg: #555;
    --form-control-focus-border: #777;
    --input-group-addon-bg: #444;
    --input-group-addon-border: #555;
    --input-group-addon-text: #fff;
    --inner-rule-output-bg: #444;
    --inner-rule-output-border: #555;
    --inner-rule-output-text: #fff;
}

body {
    background-color: var(--background-color, var(--background-color-light));
    color: var(--text-color, var(--text-color-light));
    transition: background-color 0.3s, color 0.3s;
}

.mainsquares {
    background-color: var(--mainsquares-bg, var(--mainsquares-bg-light));
    border: 1px solid var(--mainsquares-border, var(--mainsquares-border-light));
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rulebody {
    margin-top: 20px;
}

#globalcontainer h1 {
    color: var(--text-color, var(--text-color-light));
    text-align: center;
    margin-bottom: 20px;
}

.form-control {
    background-color: var(--form-control-bg, var(--form-control-bg-light));
    border: 1px solid var(--form-control-border, var(--form-control-border-light));
    color: var(--form-control-text, var(--form-control-text-light));
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    margin-bottom: 10px; /* Add some spacing between form controls */
}

.form-control:focus {
    background-color: var(--form-control-focus-bg, var(--form-control-focus-bg-light));
    border-color: var(--form-control-focus-border, var(--form-control-focus-border-light));
    color: var(--form-control-text, var(--form-control-text-light));
}

#rightarrow {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color, var(--text-color-light));
    display: inline-block;
    vertical-align: middle;
}

.plusexplode {
    cursor: pointer;
}

.contentHeaders {
    font-weight: bold;
    color: var(--text-color, var(--text-color-light));
    margin-bottom: 15px; /* Add spacing below headers */
}

#GlobalResults {
    margin-top: 20px;
    color: var(--text-color, var(--text-color-light));
}

.check {
    color: var(--text-color, var(--text-color-light));
}

.item-overlay.top {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Custom styles for Bootstrap integration */
.input-group .form-control {
    flex: 1;
}

.input-group-addon {
    background-color: var(--input-group-addon-bg, var(--input-group-addon-bg-light));
    border: 1px solid var(--input-group-addon-border, var(--input-group-addon-border-light));
    color: var(--input-group-addon-text, var(--input-group-addon-text-light));
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.checkbox label {
    margin-right: 15px;
    margin-bottom: 10px; /* Add spacing below checkboxes */
}

#innerRuleOutput {
    background-color: var(--inner-rule-output-bg, var(--inner-rule-output-bg-light));
    color: var(--inner-rule-output-text, var(--inner-rule-output-text-light));
    border: 1px solid var(--inner-rule-output-border, var(--inner-rule-output-border-light));
    padding: 15px;
    min-height: 150px; /* Adjust as needed */
    overflow-y: auto;
    border-radius: 8px;
}

#themeToggle {
    margin-top: 10px;
    margin-bottom: 20px;
}

.selectedProtoOptions h3 {
    text-align: center;
    margin-bottom: 15px;
}

/* Header element styles */
.headerelement {
    margin-bottom: 5px;
}

#headerInner1 .row {
    margin-left: -5px;
    margin-right: -5px;
}

#headerInner1 .col-md-2,
#headerInner1 .col-md-3,
#headerInner1 .col-md-5,
#headerInner1 .col-md-6 {
    padding-left: 5px;
    padding-right: 5px;
}

.tcpinputs {
}

#headermessage {
}

#datasizeEval, #reftype, #thresholdtype, #trackby {
}

#datasize, #referencetext, #count, #seconds {
}

#contentdiv, #pcrediv {
    position: static !important;
    height: auto !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0; /* Remove padding that might cause issues */
}

#contentplus, #preplus {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 15px; /* Add spacing below plus icons */
}

.contentpluses {
    left: auto !important;
    top: auto !important;
}

.check {
    position: static !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
}

.rulebody,
.protoOptions,
.contentMatch,
.ruleOutput {
    height: auto !important;
    line-height: normal !important;
}

#globalcontainer {
}

#innerRuleOutput {
    position: static !important;
    transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -o-transform: none !important;
}

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

hr.style1 {
    display: none;
}

.item-overlay.top {
    display: none;
}

/* Sticky Footer */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--mainsquares-bg, var(--mainsquares-bg-light));
    border-top: 1px solid var(--mainsquares-border, var(--mainsquares-border-light));
    padding: 10px 0;
    z-index: 1000;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.sticky-footer a {
    color: var(--text-color, var(--text-color-light));
    text-decoration: none;
}

.sticky-footer a:hover {
    text-decoration: underline;
}

body {
    padding-bottom: 60px;
}

/* Google Ads Section */
.ads-section {
    text-align: center;
}

.ads-header {
    color: var(--text-color, var(--text-color-light));
    margin-bottom: 10px;
    font-size: 14px;
}

/* Bottom Ads Section */
.bottom-ads-section {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

/* Sticky Footer */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--mainsquares-bg, var(--mainsquares-bg-light));
    border-top: 1px solid var(--mainsquares-border, var(--mainsquares-border-light));
    padding: 10px 0;
    z-index: 1000;
}

body {
    padding-bottom: 60px;
}