:root {
    --dspf-font-family: monospace;
    --dspf-font-size: 1em;
    --dspf-line-height: 1.5;
    --dspf-color: #333;
    --dspf-background-color: #56e49d;
  }
  
  @media print {
    div.control-buttons { display:none;}
    pricelist-navbar { display:none;}
    button { display:none;}
    th.option-column,td.option-column { display:none;}
    th.select-column,td.select-column { display:none;}
  }

  @media (min-width: 1400px)
  {
      .container{
          max-width: 1300px;
      }
  }    
  @media (min-width: 1600px)
  {
      .container{
          max-width: 1500px;
      }
  }    

  @media (min-width: 1800px)
  {
      .container{
          max-width: 1700px;
      }
  }    


body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
  padding:7px;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
  padding:7px;
}

span.bg-link-like {
    color:black;
}

span:hover.bg-link-like {
    cursor:pointer;
    color:#0056b3;
}

span.input-readonly-like {
    background-color: #e9ecef;
    padding:6px 12px;
    display:block;
    border-radius:.25rem;
    border:1px solid #ced4da;    
    width:100%;
    line-height: 1.5;
}

span:hover.span-link-like {
    cursor:pointer;
}

.ac-background-white {
  background-color:white;
}

.ac-border-thin {
  border-color:grey;
  border-width:1px;
}

.navbar-dark .steve-navbar-text
{
  color: rgba(255,255,255,.55);
 }

 .flex-column {
    display: flex;
    flex-direction: column;
    gap: 1em;
 }

 /* Style for error message div */
 .error-message {
   color: red;
   background: #ffebee;
   border: 1px solid #f44336;
   padding: 10px;
   margin: 10px 0;
   border-radius: 4px;
   font-size: 14px;
 }

 /* Hide the error-message div completely when it's empty or contains only whitespace */
 .error-message:empty PROFESSIONAL,
 .error-message:has(only-child:empty) {
   display: none;
 }

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

 .flex-row {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 2em;
   /* width: 90%; */
   margin-left: auto;
   margin-right: auto;
 }

.form-row-horizontal {
  display: flex;
  align-items: center;
  gap: 12px;
}


 .flex-row-left 
 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2em;
 }

 .flex-row-center
 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-left: auto;
    margin-right: auto;
 }

 .flex-row-label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
 }

 .flex-row-label label {
   margin-bottom: 0;
   white-space: nowrap;
 }

 .vert-checkbox {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 }

 .vert-checkbox .label-text {
   text-align: center;
   font-weight: bold;
 }

 input[type="checkbox"]
 {
   margin: 0;
   width: 18px;
   height: 18px;
 }

 .vert-input > :first-child {
   margin-bottom: 0.5rem;
   display: block;
 }

 .vert-input-center {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .vert-input input {
   display: block;
   background-color: #fff;
   border-radius: 0.375em;
   border: 1px solid #dee2e6;
 }

 .vert-input input:not([type="checkbox"]) {
   width: 100%;
   padding: 6px 12px;
   line-height: 1.5;
 }

 .vert-input input:focus {
   border-color: #86b7fe;
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
 .vert-input-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

.vert-input .label-text {
  text-align: left;
  font-weight: bold;
}

.vert-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vert-select .label-text {
  text-align: center;
  font-weight: bold;
}

 .flex-100 {
   display: flex;
  margin-left: auto;
    margin-right: auto;
   width: 100%;
 }

 .width-50 {
   width: 50%;
 }

 .main-container {
   display: flex;
   width: 100%;
   gap: 25px;
   box-sizing: border-box;
 }

 .side-by-side-panel {
   flex: 1;
 }

 .srcmbr-textarea {
    width: 100%;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0.375em;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    overflow-x: auto;
 }

.xsrcmbr-text-editor {
  width: 100%;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
  border-radius: 0.375em;
  border: 1px solid #dee2e6;
  white-space: nowrap;
  overflow-x: auto;
}
 .dspf-render-div {
  position: relative;
    font-family: var(--dspf-font-family);
   width: 60em;
   height:40em;
   overflow: auto;
   background-color: var(--dspf-background-color);
   border: 1px solid var(--dspf-background-color);
   padding: 10px;
   box-sizing: border-box;
  font-size: var(--dspf-font-size);
    line-height: var(--dspf-line-height);
    white-space: pre-wrap;
    word-break: normal;
 }

 .dspf-render-div:focus {
  border: 2px solid blue;
  outline: none;
 }

 .dspf-literal {
    position: absolute;
    color: var(--dspf-color);
 }

 .dspf-input {
   position: absolute;
   background-color: var(--dspf-background-color);
   color: var(--dspf-color);
 }

 .dspf-record-div {
   position: absolute;
   width: 100%;
 }  

.underline-input {
  border: none;
  border-bottom: 1.5px solid var(--dspf-color);
  outline: none;
  background: transparent;
  padding: 1px 0;
}

.dspf-input-textbox {
  border: 1px solid #ced4da;
  border-radius: 0.375em;
  padding: 1px;
}

.dspf-output {
  border: none;
  outline: none;
  background: transparent;
  padding: 1px 0;
  /* background-color: #56e49d; */
}

/* Hide everything except the print content during printing */
@media print
{
  @page {
    margin: 1.5cm;

    @bottom-left {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 9pt;
        color: #666;
      }

      @bottom-right {
        content: "Generated on " attr(data-date);
        font-size: 9pt;
        color: #666;
      }
  }

  custom-home-navbar, .control-buttons, button {
    display: none;
  }

  .browser-container {
    display: none;
  }

  #html-output {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
    margin: 0 !important;
    border: none !important;
    /* Reset any other container-like styles */
    box-sizing: border-box;
  }

    #print-div.container {
      all: unset !important;
    }
}

/* .table-sticky-headers {
  height: 300px;
  overflow-y: auto;
} */

.table-sticky-headers thead th
{
  position: sticky;
  top: 0;
  /* Stick to the top of the container */
  background-color: #f1f1f1;
                  /* Background to cover scrolling content */
                  z-index: 1;
                  /* Ensure it layers above body cells */
}

textarea.markdown-input {
  width: 100%;
  height: 400px;
  resize: vertical;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
  font-family: 'Courier New', Courier, monospace;
}

#html-output {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px;
  min-height: 400px;
  background: #fafafa;
}

@media print {
  pre, code {
    white-space: pre-wrap !important;
    /* Allows wrapping while preserving original line breaks */
    word-break: break-all;
    /* Breaks very long words (e.g. minified code, URLs, base64) */
    overflow-wrap: break-word;
    /* Modern alias for word-wrap */
    overflow: visible !important;
    /* Prevents clipping */
    page-break-inside: avoid;
    /* Tries to keep the whole block on one page if possible */
    max-width: 100% !important;
  }
}


.boot-like-select {
  display: inline-block;
  width: auto;

  /* Match Bootstrap font, size, colors, border, etc. */
  font-family: var(--bs-input-font-family);
  font-size: var(--bs-input-font-size);
  line-height: var(--bs-input-line-height);
  color: var(--bs-input-color);
  background-color: var(--bs-input-bg);
  border: var(--bs-input-border-width) solid var(--bs-input-border-color);
  border-radius: var(--bs-border-radius);

  /* Important: Extra right padding so the caret doesn't overlap text */
  /* padding: var(--bs-input-padding-y) var(--bs-input-padding-x) var(--bs-input-padding-y) calc(var(--bs-input-padding-x) + 1.5em); */
}

/* Optional: keep the focus style like Bootstrap */
.boot-like-select:focus {
  border-color: var(--bs-input-focus-border-color);
  outline: 0;
  box-shadow: 0 0 0 var(--bs-input-focus-width) var(--bs-input-btn-focus-color);
}

.hidden {
  display: none !important;
}