/* Structural  */
:root {
  --white:#fff;
  --lightgrey:#f5f5f5;
  --grey: #c1c1c1;
  --darkgrey:#D9D9D9;
  --red:#E21B24;
  --lightblue:#eaf4fb;
  --gradient:linear-gradient(45deg,rgba(158, 158, 158, 1) 0%, rgba(198, 198, 198, 1) 50%);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}
h1, h2 {
  text-align:center;
  margin-bottom:10px;
}
h3{
  margin-bottom:10px;
}
* {
  margin: 0;
}
th{
  text-align: left;
}

button, [role="button"], a.button {
  font-size:16px;
  width:100%;
  cursor: pointer;
  display:block;
  margin:20px auto;
  max-width:250px;
  padding:10px 15px;
  border:1px solid var(--darkgrey);
  background-color: var(--red);
  color:var(--white);
  border-radius:5px;
  text-decoration: none;
  text-transform: uppercase;
  text-align:center;
  box-shadow: 1px 1px 1px var(--darkgrey);
}

button:hover,
[role="button"]:hover,
a.button:hover {
    box-shadow:inset 0px 0px 5px var(--grey);
    background-color:var(--white);
    border-color:var(--red);
    color:var(--red);
}

* {
  font-family: system-ui;
}
img,
svg {
  display: block ;
}
img,
video {
  max-width: 100%;
  height: auto;
}


header {
  padding:20px;
  height:75px;
}
.header .header-container {
  display:flex;
  align-items: center;
  justify-content: space-between;
}

footer {
  min-height:125px;
  padding:40px 20px;
}
.footer {
  background-color:var(--gradient);
}
.footer img {
  margin:0 auto;
}
.footer .footer-content {
  text-align:center;
}

body .content-area {
  background-color:var(--lightgrey);
  min-height:calc(100vh - 200px);
}
body .content-area .content {
  max-width:980px;
  width:100%;
  margin:0 auto;
}
* .content {
  padding:25px;
}

form label{
  display:flex;
  margin-bottom:10px;
}
form label span {
  max-width:150px;
  min-width:150px;
  font-weight:bold;
}

form label input,
form label select,
form label span,
form label textarea {
  display: block;
  flex:1;
}
form label.checkbox-field input{
  flex:0;
  height: 20px;
    text-align: left;
    float: left;
}
form label.tag-field-label {
  margin-bottom:0;
}
form label.tag-display-label {
  margin-top:10px;
}
.breadcrumbs {
  font-size:17px;
  margin-left: 5px;
  padding-bottom:5px;
  padding-top:10px;
  display: block;
}
.breadcrumbs span.clickable {
  cursor: pointer;
  text-decoration: underline;
  margin-right:5px;
}
.breadcrumbs span:not(.clickable){
  margin-left:5px;
}
.hideme {
  visibility:hidden;
}
/* fontawesome default */
.fai {
  color:var(--red);
  margin-right:5px;
  font-size:20px;
}


/* Top Search Section */
.top-search {
  background: var(--gradient);
  text-align:center;
  padding:25px 10px;
}
.top-search input {
  width:100%;
  max-width:500px;
  padding:5px;
}


/* Featured/Trending Content Section */
.featured-content,
.trending-content {

}
.fc-items,
.tc-items  {
  display: flex;
  flex-wrap: wrap;
}
.fc-item:nth-child(odd),
.tc-item:nth-child(odd)  {
  margin-right:20px;
}
.fc-item:nth-child(even),
.tc-item:nth-child(even)  {
  margin-left:20px;
}
.fc-item,
.tc-item  {
  background-color:var(--white);
  border:1px solid var(--darkgrey);
  box-shadow:1px 1px 1px  var(--grey);
  width: calc(50% - 20px);
  box-sizing: border-box;
}
.fc-item:hover,
.tc-item:hover  {
  cursor:pointer;
  background: var(--lightgrey);
  box-shadow: inset 0px 0px 5px var(--grey);
}
.fc-item-container,
.tc-item-container  {
  padding:5px 10px;
}
.fc-type,
.tc-type  {
  font-size:10px;
  padding-left:10px;
}
.fc-title,
.tc-title  {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-bottom:5px;
}

/* Solutions Section  */
.solutions-section {

}

.solution-items {
  display: flex;
  gap: 50px;
}

.solution-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.solution-item.child-item {
  margin-left: 50px;
}

.solution-item {
  background-color:var(--white);
  border:1px solid var(--darkgrey);
  box-shadow:2px 2px 10px  var(--darkgrey);
  width: 100%;
  box-sizing: border-box;
  height:100px;
  margin-bottom:20px;
  display: flex;
  align-items: center;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.solution-item-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0px 25px;
  width:100%;
}
.solution-item:hover {
  background: var(--lightgrey);
  box-shadow: inset 0px 0px 5px var(--grey);
  cursor:pointer;
}
.solution-item .solution-name {
  color: var(--red);
  font-size:24px;
  margin-right:10px;
}
span.solution-icon {
  height:75px;
  width:75px;
}
span.solution-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* Solution Browser */
.solution-browser {
  display: flex;
}
.solution-browser .sb-section {
  flex: 1;
}
.solution-browser .sb-section.left {
  max-width: calc(33% - 25px);
  padding-right:25px;

}
.solution-browser .sb-section.right {
  max-width: calc(67% - 25px);
  padding-left:25px;
}

.sb-solution .solution-name {
  font-size:14px;
  flex:1;
}
.sb-solution .solution-icon {
  color: var(--red);
  width:30px;
  height:30px;
  margin-right:10px;
  display: block;
  text-align:center;
}
.sb-solution .solution-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.solution-browser .solution,
.solution-browser .category,
.solution-browser .document {
  border:1px solid var(--darkgrey);
  box-shadow:1px 1px 1px  var(--grey);
  box-sizing: border-box;
  min-height:44px;
  display: flex;
  align-items: center;
  padding:0 14px;
}
.solution-browser .solution:hover,
.solution-browser .document:hover,
.sb-solution.active  {
  cursor:pointer;
  background: var(--lightgrey);
  box-shadow: inset 0px 0px 5px var(--grey);
}
.solution-browser .solution {
  background-color:var(--white);
}
.solution-browser .category {
  background-color:var(--red);
  color:var(--white);
}
.solution-browser .category:hover,
.solution-browser .category.active {
  cursor:pointer;
  background: #c61b1b;
  box-shadow: inset 0px 0px 5px var(--grey);
}
.solution-browser .document {
  background-color:var(--white);
}
.sbs-container,
.sbc-container {
  align-items:center;
  display: flex;
  flex:1;
  height:100%;
}

.solution-browser .document .sb-document-title {
  color:#666;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-bottom:5px;
}

.solution-browser .document.sb-document {
  flex-direction: column;
  justify-content: center;
  align-items: start;
  margin-left: 15px;
  padding-top:5px;
  padding-bottom:5px;
}

.sbc-container {
  justify-content: space-between;
}


.sb-solution.active {
  background: var(--darkgrey);
  border-color:#aaa;
}
.sb-category.hidden {
  display: none;
}
.sb-category {
  background-color:var(--lightgrey);
}
.fc-item-container .sb-document-tags,
.tc-item-container .sb-document-tags {
  text-wrap-mode: nowrap;
  overflow: scroll;
}
.fc-item-container .fc-title-tags,
.tc-item-container .tc-title-tags {
  width:100%;
}
.fc-item-container,
.tc-item-container {
  overflow:hidden;
}

.sb-tag {
  font-size:10px;
  display: inline-block;
  margin: 2px;
  padding: 2px 6px;
  background: var(--lightgrey);
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--grey);
}

.sb-category.dragging {
  opacity: 0.5;
  border: 2px dashed #888;
}

.dragging-hidden {
  display: none !important;
}

.document-container {
  display: flex;
  gap:20px;
}
.document-viewer {

  width: 60%;
}
.doc-actions-stats {

  width:40%;
}
.document-view {
  max-width: 100%;
  min-height: 500px;
  width: 100%;
  height: 100%;
}

.doc-action-stats {
  flex: 1;
}
.doc-actions-stats input {
  width:100%;
}

.doc-actions-stats section {
  margin-bottom:20px;
}
.download-url a{
  text-decoration:none;
}
.detail {
  border:1px solid #ccc;
  margin:5px 0;
  padding:10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}


.detail strong{
  display:block;
  word-wrap: break-word;
}

.document-page .tag-container {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.document-page .tag-container .doc-tag {
  background: #eee;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.doc-import .tag-list {
  border: 1px solid #ccc;
  padding: 4px;
  margin-left:150px;
  list-style: none;
  max-height:175px;
  overflow-y: auto;
  position:relative;
  background: #fff;
}

.doc-import .tag-list .tag {
  cursor: pointer;
  padding: 2px 4px;
}

.doc-import .tag-display {
  font-size:10px;
  display: inline-block;
  margin: 2px;
  padding: 2px 6px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #666;
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.icon-item input {
  margin-bottom: 4px;
}
.icon-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px;
  background: white;
}

.users-table,
.domains-table,
.inactive-documents-table {
  width:100%;
  border-collapse:collapse;

}
.users-table tr,
.domains-table tr,
.inactive-documents-table tr {
  padding:5px;
}
.users-table tr:nth-child(odd),
.domains-table tr:nth-child(odd),
.inactive-documents-table tr:nth-child(odd) {
  background-color:var(--lightgrey);
}
.users-table tr:nth-child(even),
.domains-table tr:nth-child(even),
.inactive-documents-table tr:nth-child(even) {
  background-color:var(--lightblue);
}
.users-table th,
.users-table td,
.domains-table th,
.domains-table td,
.inactive-documents-table th,
.inactive-documents-table td{
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 50px;
  padding:10px;
  border:1px solid var(--darkgrey);
}

thead tr{
  background-color: var(--grey) !important;
  font-weight: bold;
}

th, td {
  border: 1px solid #666;
  padding: 10px;
}

tbody tr:nth-child(odd) {
  background-color:var(--lightgrey);
}

tbody tr:nth-child(even) {
  background-color:var(--lightblue);
}

tbody tr:hover {
  background-color: #d0ebff;
}

.login.content-area {
  text-align: center;
}
.login form input,
.login form label{
  display: block;
  margin:0 auto;
  text-align:center;
}

.admin-button-container {
  display:flex;
  align-items: center;
  justify-content: center;
  margin:10px 0;
}

.admin-button-container a.button {
  width:31%;
  margin:0px 1.5%;
}

.divider {
  margin-bottom:25px;
}

.non-admin-error,
.file-error {
  background-color:#E6B8AF;
  text-align:center;
  max-width:980px;
  padding:10px;
  margin:0 auto;
}



.content-upload {
  color: transparent;
}
.content-upload::-webkit-file-upload-button,
.content-upload::file-selector-button {
  visibility: hidden;
}
.content-upload::before {
  content: 'Choose File';
  display: inline-block;
  background: #ddd;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #aaa;
  cursor: pointer;
  color: #000;
  font-size: 14px;
}
.filename-container {
  font-size:14px;
  margin-top:5px;
}


.notice{
  padding:10px;
  background-color:#f08d91;
}

.searched-for {
    text-align:center;
    font-size:22px;
    margin-bottom:40px;
}
.searched-for span.searchterm {
    font-size:40px;
    line-height:40px;
    margin-left:10px;
    text-decoration:underline;
}
.no-results {
  text-align:center;
  padding-top:25px;
}


.helpcenter-button {
  position: fixed;
  right:0;
  top:50%;
  width:125px;
  display: flex;
  align-items:center;
  text-align: left;
  justify-content: center;
}
.helpcenter-button i {
    font-size:30px;
    text-align:right;
}
.helpcenter-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.75);
  z-index: 2;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.helpcenter-content h2{
  text-decoration: underline;
}
.helpcenter-content {
  background-color:#fff;
  max-width:800px;
  width:100%;
  padding:40px;
  margin:auto;
  max-height:90vh;
  width:666px;
  overflow:scroll;
}
.helpcenter-content h4{
  margin-top:20px;
  margin-bottom:5px;
}

.helpcenter-content ul.cm-ul,
.helpcenter-content ul.iwc-ul {
  column-count: 2;
}

.helpcenter-content ul{
  list-style-type: none;
  padding-left:25px;
}
.helpcenter-content ul.ccd-ul li{
  margin-bottom:10px
}

.helpcenter-content hr {
  max-width: 75%;
  border-color: var(--grey);
  margin: 20px auto;
  border-style: solid;
  border-width: 1px;
  line-height: 5px;
}