[contenteditable] {
  outline: none;
  padding: 8px;
}
[contentEditable]:empty:not(:focus):before {
  content: attr(data-placeholder);
  color: #ccc;
}
[contentEditable]:hover {
  background: #e9ecef;
  border-radius: 0.25rem;
}
[contentEditable]:focus {
  background: white;
}
:focus {
  border: 1px solid pink;
  caret-color: red
}
.row.section-text {
  margin-top: 8px;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.section-text > .card-tools > a.btn-tool,
.section-text > .card-tools > turbo-frame > a.btn-tool,
turbo-frame > .card-tools > a.btn-tool,
turbo-frame > .text-center a.btn-tool { font-size: 1.1rem; padding: 0.25rem 0.1rem }
.row.section-attachments { padding-bottom: 0px }
.report-section { margin: 0px }
.report-section-attachment { margin-top: 15px }
span.section-header.report_section-category { font-size: 28px; font-weight: bolder; }
span.section-header.report_section-cumulative_vulnerability_valuation,
span.section-header.report_section-environmental_analysis,
span.section-header.report_section-layer,
span.section-header.report_section-location,
span.section-header.report_section-physical_security_assessment,
span.section-header.report_section-prioritization_summary,
span.section-header.report_section-references,
span.section-header.report_section-risk_definitions,
span.section-header.report_section-section_by_severity,
span.section-header.report_section-section_by_priority,
span.section-header.report_section-severity_by_section,
span.section-header.report_section-text,
span.section-header.report_section-vendors {
  font-size: 25px; font-weight: bolder;
}
span.section-header.report_section-area { font-size: 22px; font-weight: bolder; color: #00f}
span.section-header.report_section-risk { font-size: 19px; font-weight: bold; color: #733}
span.section-header.report_section-mitigation { font-size: 20px; color: #030 }
span.section-header.report_section-mitigated_vulnerability { font-size: 20px; color: #030 }

.btn-hover-danger:hover { color: #ffa07a }
.btn-hover-danger { color: #f00 }
.btn-hover-success:hover { color: #90dd90 }
.btn-hover-success { color: #00ff00 }
.btn-hover-primary:hover { opacity: 0.7 } /* : #87cefa */
.btn-hover-primary { color: #0000ff }

.btn-add-vendor { color: steelblue }
.btn-add-vendor:hover { color: steelblue; opacity: 0.5 }
.btn-add-reference { color: steelblue }
.btn-add-reference:hover { color: steelblue; opacity: 0.5 }
.btn-add-mitigation { color: darkgreen }
.btn-add-mitigation:hover { color: darkgreen; opacity: 0.5 }
.btn-add-layer { color: darkslateblue }
.btn-add-layer:hover { color: darkslateblue; opacity: 0.5 }
.btn-add-area { color: darkblue }
.btn-add-area:hover { color: darkblue; opacity: 0.5 }
.btn-add-vulnerability { color: darkred }
.btn-add-vulnerability:hover { color: darkred; opacity: 0.5 }
.btn-add-text { color: steelblue }
.btn-add-text:hover { color: steelblue; opacity: 0.5 }
.btn-delete-section { color: red }
.btn-delete-section:hover { color: red; opacity: 0.5 }
.btn-add-picture { color: goldenrod }
.btn-add-picture:hover { color: goldenrod; opacity: 0.5 }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

.btn-primary {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    box-shadow: none;
}
.card-primary:not(.card-outline)>.card-header {
  background-color: #17a2b8;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
  background-color: #17a2b8;
  color: #fff;
}
.btn-outline-primary {
  color: #007bff;
  border-color: #17a2b8;
}
.btn-primary:hover {
    color: #fff !important;
    background-color: #138496 !important;
    border-color: #117a8b !important;
  }
.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #138496 !important;
  border-color: #117a8b !important;
}
.bg-primary { background-color: #17a2b8 !important; }
.swal2-confirm.btn, .swal2-cancel.btn { margin-left: 5px; margin-right: 5px; }
.swal2-confirm.btn-primary { background-color: #17a2b8 !important; }
.swal2-confirm.btn-primary:hover {
  color: #fff !important;
  background-color: #138496 !important;
  border-color: #117a8b !important;
}