input.red_btn{
   font-family: Arial, Sans-Serif;
   font-size: 10px;
   color:#FFFFFF;
   font-weight:bold;
   background-color:#990000;
   border:2px solid;
   border-top-color:#FFCCCC;
   border-left-color:#FFCCCC;
   border-right-color:#330000;
   border-bottom-color:#330000;
}
input.green_btn{
   font-family: Arial, Sans-Serif;
   font-size: 10px;
   color:#FFFFFF;
   font-weight:bold;
   background-color:#009900;
   border:2px solid;
   border-top-color:#CCFFCC;
   border-left-color:#CCFFCC;
   border-right-color:#003300;
   border-bottom-color:#003300;
}
input.blue_btn{
   font-family: Arial, Sans-Serif;
   font-size: 10px;
   color:#FFFFFF;
   font-weight:bold;
   background-color:#000099;
   border:2px solid;
   border-top-color:#CCCCFF;
   border-left-color:#CCCCFF;
   border-right-color:#000033;
   border-bottom-color:#000033;
}
input.form_field {
    font-family: Arial, Sans-Serif;
    font-size: 10px;
    margin-bottom: 3px;
    padding: 2px;
    border: solid 1px #000066;
}
textarea.form_field {
    font-family: Arial, Sans-Serif;
    font-size: 10px;
    margin-bottom: 3px;
    padding: 2px;
    border: solid 1px #000066;
}
select.form_field {
    font-family: Arial, Sans-Serif;
    font-size: 10px;
    margin-bottom: 3px;
    padding: 2px;
    border: solid 1px #000066;
} 


/* ================================================================
   RESPONSIVE FIXES
   The template only hides sidebar for data-sidebartype="mini-sidebar"
   on mobile. Our wrapper uses data-sidebartype="full", so we must
   add the hide rule ourselves here.
   ================================================================ */

/* Scrolling chat divs - override fixed px widths from vicidial_stylesheet.css */
div.scrolling         { width: 100% !important; max-width: 320px; box-sizing: border-box; }
div.scrolling_transcript  { width: 100% !important; max-width: 370px; box-sizing: border-box; }
div.scrolling_chat_display { width: 100% !important; max-width: 150px; box-sizing: border-box; }

/* ── MOBILE  (≤ 767px) ─────────────────────────────────────────── */
@media (max-width: 767.98px) {

  /* 1. Hide full-type sidebar off-screen (template misses this case) */
  #main-wrapper[data-sidebartype="full"] .left-sidebar {
    left: -260px !important;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 1001;
    transition: left 0.3s ease;
  }

  /* 2. Burger button shows sidebar by adding .show-sidebar */
  #main-wrapper.show-sidebar .left-sidebar {
    left: 0 !important;
  }

  /* 3. Content area fills full width (no more 260px left margin) */
  #main-wrapper[data-layout="vertical"][data-sidebartype="full"] .page-wrapper {
    margin-left: 0 !important;
  }

  /* 4. Topbar header takes full width */
  #main-wrapper[data-layout="vertical"][data-sidebartype="full"]
    .topbar .top-navbar .navbar-header {
    width: 100% !important;
  }

  /* 5. Bootstrap columns: stack to 100% on mobile */
  .col-md-6, .col-lg-8, .col-lg-4,
  .col-md-6.col-lg-8, .col-md-6.col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 6. Less padding inside page on mobile */
  .page-wrapper > .container-fluid {
    padding: 12px !important;
  }

  /* 7. Chat divs go full width on mobile */
  div.scrolling, div.scrolling_transcript, div.scrolling_chat_display {
    max-width: 100% !important;
  }

  /* 8. Images never overflow */
  img { max-width: 100%; height: auto; }
}

/* ── TABLET  (768 – 991px) ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {

  /* Stack the two main content cards */
  .col-md-6.col-lg-8, .col-md-6.col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .page-wrapper > .container-fluid { padding: 20px !important; }
}