@charset "utf-8";
/*
Starting this file intended for consolidating default_layout1.css and default_layout2.css, etc.
This is to avoid duplicating new CSS declarations as the KB evolves and with new features and elements.
*/

body {font-family: Arial, sans-serif; color:#333333; margin: 0; padding: 0;}

/* Override froala css */
.fr-view table td { padding: 5px; }

/* Generic headings, pre, form, img, etc */
h1 {font-size:20px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
h4 {font-size:14px;}
.kb-page-see-also h2 {font-size:16px;}
p { min-height: 1px; }
form {margin:0;}
img {border:none; max-width:100%; height:auto;} /*for ie8 add: width:auto\9;*/
a[name] {color:inherit; background-color:inherit; text-decoration:inherit;}
pre {font-size:11px; white-space:pre-wrap; word-wrap:break-word;}
abbr, span.abbr, acronym  {cursor:help; border-bottom: 1px dashed #000;}
hr.kbhr1 {border:0;height:1px;background:#333;}
.auto-pre-txt {font-size:10pt;font-family:arial,sans-serif,helvetica;line-height:1.25em;}

/* Search result condensed format */
#resp-table {width: 100%; display: table; background: #fff; margin-bottom: 1rem;}
#resp-table a:link {text-decoration: none;}
#resp-table a:hover {text-decoration: underline;}
#resp-table-caption {display: table-caption; visibility: hidden;}
#resp-table-header {display: table-header-group; background-color: rgb(225, 224, 224); font-weight: bold; font-size: 1rem;}
.table-header-cell {display: table-cell; padding: 0.2rem; text-align: justify; border: 1px solid #d9d9d9; border-right: 0;}
#resp-table-body {display: table-row-group;}
.resp-table-row {display: table-row;}
.resp-table-row.row:nth-child(even) {background: #f8f6f5;}
.table-body-cell {display: table-cell; padding: 0.25rem; border: 1px solid #d9d9d9; border-top: 0; border-right: 0;}
.center {text-align: center;}
.date-Ymd {white-space: nowrap;}
.extra-left-padding {padding-left: 0.6rem;}
.last-cell {border-right: 1px solid #d9d9d9;}
#resp-table-footer {display: table-footer-group; background-color: #f4f2f1; font-weight: bold; font-size: inherit; color: rgba(255, 255, 255, 0.45);}
.table-footer-cell {display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid #d9d9d9;}
@media all and (max-width: 430px) {  .date-Ymd {white-space: pre-wrap;}  }

/* KB page info section */
.doc-info {display: flex; flex-wrap: wrap; font-size: 1rem;}
.doc-info div {display: inline-block; line-height: 2; padding: 2px 5px;}
.doc-info .doc-attr {flex: 1 1 50%; display: flex; flex-wrap: nowrap;}
.doc-info .doc-attr-name {font-weight: bold;}
.doc-info .doc-attr-value {display: block;}
.doc-attr.keywords, .doc-attr.sites, .doc-attr.feedback, .doc-attr.cleanurl {flex: 1 1 100%;}

/* QA (question answering) popup form */
.qa-form-popup {
    display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #0479a8; z-index: 19; width: 48rem;
    font-size: 1rem; overflow-y: auto; max-height: 80vh; border-radius: 8px;
}
.qa-form-container { max-width: 100%; padding: 10px; background-color: var(--uwBgGray); }
.qa-form-container textarea {
    width: 97%; padding: 10px; margin: 5px 0 10px 0; border: none; background: #FFFFFF;
    resize: none; overflow-y: auto; /* Enable vertical scrolling for textarea */
}
.qa-response {
    margin-top: 20px; padding: 0 10px 0 10px; border: 1px solid #ccc;
    background-color: #f9f9f9; max-height: 800px;  overflow-y: auto;
}
.qa-form-container .qa-btn {
    background-color: #04AA6D; color: white; padding: 8px 12px; border: none; cursor: pointer;
    width: 48%; margin-right: 2%; opacity: 0.8;
}
.qa-form-container .qa-btn-container { display: flex; justify-content: space-between; }

/* Interactive action status message */
.kb-success-msg, .kb-warning-msg, .kb-error-msg {
    font-family: sans-serif, arial, helvetica; font-size: 0.88rem;
    margin: 12px 0 2px 0; padding: 8px; border-radius: 3px;
}
.kb-info-msg { color: #059; background-color: #BEF; }
.kb-success-msg { color: #270; background-color: #DFF2BF; }

/* Split button menus similar to those in admin tools */
.kb-button-container {display: flex; gap: 1px; justify-content: center; margin: 10px 0 12px 0; text-align: left;}
.split-button {position: relative; display: inline-block;}
.split-button button::after {content: url('/css/svg/arrow-up-24.svg'); margin-left: 6px; transform: rotate(-180deg); transition: transform 0.3s;}
.split-button button.blue {background: #207ab7; padding-left: 0; height: 100%;}
.split-button button.blue::after {content: url('/css/svg/arrow-up-white-24.svg'); margin-left: 6px; transform: rotate(-180deg); transition: transform 0.3s;}
.split-button button.rotate::after {transform: rotate(-360deg);}
.split-button a.copy::after {content: url('/css/svg/copy-14.svg'); margin: 0.2rem 0 0 0.4rem; vertical-align: middle;}
.split-button a.new-tab::after {content: url('/css/svg/external-link-13.svg'); margin: 0.2rem 0 0 0.4rem; vertical-align: middle;}
.split-btn {
    display: flex; color: #135e96; font-weight: 700; cursor: pointer; align-items: center; justify-content: space-between;
    border: 2px solid #207ab7; border-radius: 3px; margin-bottom: 8px; margin-right: 4px; padding-left: 14px;
}
.dropdown-menu {
    display: none; position: absolute; margin-top: -6px; border-radius: 3px; background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); white-space: nowrap; z-index: 1;
}
.dropdown-menu a, .dropdown-menu a:visited {
    color: black; padding: 6px 16px; text-decoration: none; display: block; cursor: pointer;
    border: 1px solid transparent; border-radius: 3px; font-family: sans-serif, arial, helvetica;
}
.dropdown-menu a:hover {color: black; background-color: #e6e5e5; border: 1px solid #999; border-radius: 3px;}
.dropdown-menu a:first-child {margin-top: 8px;}
.dropdown-menu a:last-child {margin-bottom: 8px;}
.dropdown-menu.open {display: block;}
.dropdown-menu-right, .dropdown-menu-right2 {right: 0; left: auto;}
.kb-dropdown-divider {border-top: 1px solid #ccc; margin: 6px 0;}

/* KB page action buttons and their tooltips */
.kb-doc-action-btn {cursor: pointer; margin-right: 0.4rem;}
.kb-tooltip {position: relative; display: inline-block;}
.kb-tooltip .kb-tooltip-text {
    position: absolute; visibility: hidden; white-space: nowrap; background-color: #333; color: #fff; padding: 5px 10px;
    border-radius: 5px; font-size: 12px; text-align: left; z-index: 3; top: -36px; left: 2%; opacity: 0; transition: opacity 0.5s;
}
.kb-tooltip:hover .kb-tooltip-text {visibility: visible; opacity: 1;}

/* Paging links for search results etc. */
.kbt-paging {text-align:center; font-weight:normal; font-size:90%; padding:10px 0; margin-left:auto; margin-right:auto; width:96%;}
.kbt-paging ul {list-style-type: none;}
.kbt-paging li {display: inline; margin: 0 1px !important;}
.kbt-paging a:hover {color: rgb(2, 84, 131); background-color:#cccccc;border:1px solid #666666;}
.kbt-paging a {display: inline-block; border: 1px solid #999; padding: 1px 8px; margin: 1px 2px;
    text-decoration: none; color: #0479a8; border-radius: 3px; min-width: 20px;
}
a.pag-ellipsis {border: none !important; color: #000 !important; padding: 1px 4px !important;}
a.pag-ellipsis:hover {background: none !important; border: none !important; color: inherit !important;}
a[aria-current] {background: #0479a8 !important; color: #fff !important; border-color: #0479a8 !important;}
a[aria-current]:hover {background: #0479a8; color: #fff; border-color: #0479a8;}