/*
 * Main CSS stylesheet for service and maintenance documentation
 */

/** FONTS **/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Red+Hat+Mono&family=Ubuntu+Mono&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css');

/** MOLLIE COLOURS **/

:root {
  --mollie-black: #000000; /* PRIMARY BLACK */
  --mollie-white: #FFFFFF; /* PRIMARY WHITE */
  --mollie-grey-50: #FBFBFB;
  --mollie-grey-100: #F6F6F6; /* BACKGROUND GREY */
  --mollie-grey-200: #F1F1F1; /* TABLE AND IMAGE BORDERS */
  --mollie-grey-300: #E6E6E6;
  --mollie-grey-400: #C3C3C3;
  --mollie-grey-500: #A5A5A5;
  --mollie-grey-600: #7C7C7C;
  --mollie-grey-700: #676767;
  --mollie-grey-800: #484848;
  --mollie-grey-900: #262626; /* BODY FONT TEXT */
  --mollie-blue-50: #F0F4FF;
  --mollie-blue-100: #CCD9FF;
  --mollie-blue-200: #99B3FF;
  --mollie-blue-300: #668CFF;
  --mollie-blue-400: #3366FF;
  --mollie-blue-500: #0040FF; /* PRIMARY BLUE -- MAIN BRAND COLOUR */
  --mollie-blue-600: #0033CC;
  --mollie-blue-700: #0029A3;
  --mollie-blue-800: #002185;
  --mollie-blue-900: #00175C;
  --mollie-red-50: #FFF0F3;
  --mollie-red-100: #FFCCD5;
  --mollie-red-200: #FF8FA3;
  --mollie-red-300: #FF6B86;
  --mollie-red-400: #FF4769;
  --mollie-red-500: #FF244C;
  --mollie-red-600: #FF002E; /* PRIMARY RED -- ERROR, DANGER */
  --mollie-red-700: #CC0026;
  --mollie-red-800: #99001C;
  --mollie-red-900: #660012;
  --mollie-yellow-50: #FFFAF0;
  --mollie-yellow-100: #FFEAB8;
  --mollie-yellow-200: #FFE099;
  --mollie-yellow-300: #FFDA85;
  --mollie-yellow-400: #FFD166;
  --mollie-yellow-500: #FFC847;
  --mollie-yellow-600: #FFBE2A; /* PRIMARY YELLOW -- WARNING, NOTE */
  --mollie-yellow-700: #FFB200;
  --mollie-yellow-800: #D69600;
  --mollie-yellow-900: #AD7900;
  --mollie-green-50: #F3FCF3;
  --mollie-green-100: #D8F4D7;
  --mollie-green-200: #B0E9AF;
  --mollie-green-300: #7DDA7B;
  --mollie-green-400: #4DCD4B;
  --mollie-green-500: #32AD30; /* PRIMARY GREEN -- POSITIVE, TIP */
  --mollie-green-600: #2B9429;
  --mollie-green-700: #247C22;
  --mollie-green-800: #1D641C;
  --mollie-green-900: #154814;
  --mollie-purple-50: #FBF1FE;
  --mollie-purple-100: #F0CFFC;
  --mollie-purple-200: #E1A0F8;
  --mollie-purple-300: #D270F5;
  --mollie-purple-400: #C341F1;
  --mollie-purple-500: #B513EE; /* PRIMARY PURPLE -- ACCENT COLOUR */
  --mollie-purple-600: #980EC8;
  --mollie-purple-700: #7B0CA2;
  --mollie-purple-800: #5E097C;
  --mollie-purple-900: #410656;
}

/** FOOTER **/

.pager {
    display: none;
}

/** PORTAL HOME PAGE **/

.portal-contents, .portal-contents .featured-content {
    display: none;
}

.featured-content-label {
    display: none;
}

.toggle-label .showmore {
    display: inline;
    background-color: var(--mollie-black);
    color: white;
    padding: 10px;
    text-transform: lowercase;
    border-radius: 50px;
    padding-left: 8px 18px 8px 18px;
    text-align: right;
    float: right;
}

.toggle-label .showmore:hover {
    background-color: var(--mollie-grey-700);
}

/** MAIN **/

body {
    background-color: var(--mollie-white);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--mollie-grey-800);
}

body.theme2 {
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    color: var(--mollie-grey-900);
    font-weight: 600;
}

a, .text-primary, .btn-primary .badge, .btn-link, .pagination>li>a, .pagination>li>span, .nav-site-sidebar .active>a, .portal-single-publication .portal-single-publication .publication-icon .fa, .publication-contents a:hover, .publication-contents h4 a, .titlepage h1.title, .titlepage h2.title, .titlepage h3.title {
    font-family: 'Inter', sans-serif;
    color: var(--mollie-grey-900);
    font-weight: 600;  
}

a {
    color: var(--mollie-blue-500);
    font-weight: 400;
}

#topic-content > section > .titlepage .title {
    margin: 0em 0 28px;
    font-weight: 700;
}

.subtitle {
    color: var(--mollie-grey-700);
    font-size: 18px;
    font-weight: 400;
}

.section {
    padding: 20px 0px 0px 0px;
    width: 820px;
}

.inner h1 {
    color:  white;
}

.portal-single-publication .publication-icon i, .portal-single-publication .publication-icon .fa {
    color:  var(--mollie-blue-500);
    width: 48px;
}

.portal-single-publication>a>img {
    max-height: 60px;
    filter: grayscale(1);
    max-width: 180px;
}

.portal-single-publication>a:hover>img {
    filter: none;
}

.portal-header .portal-search button {
    background-color: var(--mollie-blue-500);
}

.portal-header .portal-search button:hover {
    background-color:  var(--mollie-blue-800);
}

.portal-header::after {
    filter:  none;
    opacity: 1.0;
}

.portal-single-publication a {
    background-color: transparent;
    border-radius: 12px;
    border: 1px solid var(--mollie-grey-100);
}

.toolbar {
    background-color: var(--mollie-white);
    color: var(--mollie-black);
}


a {
    color: var(--mollie-blue-500);
}

a:hover {
    color: var(--mollie-blue-800);
}

.top-nav-menu .sm .sm-simple {
    color: var(--mollie-black);
}

.portal-footer {
    background-color:  var(--mollie-black);
}

.inlinemediaobject img:not([height]):not([width]) {
    vertical-align: 0;
    height: 20px;
}

.mediaobject {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mediaobject .taxonomy-images-screenshot {
  border: solid 1px var(--mollie-grey-200);
  margin: 1%;
  width: 100%;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.colored-top .site-sidebar-header, .site-sidebar-header {
    border-bottom: 1px solid var(--mollie-white);
    text-align: center;
    background-color: var(--mollie-white);
    box-shadow: 0 4px 18px 0 rgb(0 0 0 / 12%), 0 7px 10px -5px rgb(0 0 0 / 15%);
}

.colored-top.theme2 .site-sidebar {
    background-color: var(--mollie-white);
    border-right: ;
}

@media (min-width: 992px)
main article {
    float: left;
    width: 60%;
}

.nav-site-sidebar {
    padding: 80px 0px 20px;
}

.listitem>p {
    line-height: 1.8;
    margin-bottom:  0.5em;
}

.itemizedlist {
    margin-top: 10px;
    margin-bottom: 0em;
}

main article p {
    line-height:  1.85em;
    margin-bottom: 0.5em;
}


/** PROCEDURE LISTS **/

.procedure {
    margin-left: 4em;
}

.theme2 .procedure > li::before {
    background-color: var(--mollie-blue-50);    
}

.procedure > li::before {
    float: left;
    margin-left: -40px;
    width: 28px;
    padding-left: 0px;
    height: 28px;
    line-height: 28px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: var(--mollie-blue-600);
    background-color: var(--mollie-blue-50);    
    display: block;
    font-weight: 700;
    content: counter(step-counter);
    font-size: 16px;
    text-align: center;
}

.procedure > li {
    margin-bottom: 12px;
    margin-top: 12px;
}

.procedure > li > p {
    margin-bottom: 4px;
}

.procedure-title, .variablelist-title, .orderedlist-title, .itemizedlist-title, .task-title {
    font-weight: 400;
}


h1, h2, h3, h4, h5 {
    margin: 0 0 0.5em;
}

.h2, .titlepage h2.title, h2 {
    font-size:  22px;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

p, pre {
    margin: 0 0 0.8em;
}

.breadcrumb-link {
    color: var(--mollie-grey-400);
}

.breadcrumb-node {
    color: var(--mollie-grey-600);
}

.pager li>a:hover {
    background-color: transparent;
    color: var(--mollie-blue-800);
    font-weight: 400;
}


/** ADMONITIONS **/

.caution h3, .important h3, .note h3, .tip h3, .warning h3, .danger h3 {
    display: none;
    font-size: 14px;
    font-weight: 600;
    margin-top: 0.4em;
}

.warning > p, .note > p, .important > p, .caution > p, .tip > p, .danger > p {
    margin-top: 0.4em;
    margin-left: -10px;
    font-size: 14px;
    margin-bottom: 0.3em;
}


.notice:before, .note:before, .tip:before, .warning:before, .caution:before, .important:before {
    font-size: 18px;
    font-weight: 300;
    position: absolute;
    left: 20px;
    top: 22px;
    vertical-align: middle;
    font-family: FontAwesome;
}

.note:before {
    content: '\f05a';
    color: var(--mollie-blue-700);
}

.note {
  background-color: var(--mollie-blue-50);
  border: none;
  color: var(--mollie-blue-800);
  font-size: 13px;
  border-radius: 4px;
}

.warning:before {
    content: '\f071';
    color: var(--mollie-yellow-800);
}

.warning {
  background-color: var(--mollie-yellow-50);
  border: none;
  color: var(--mollie-yellow-900);
  font-size: 13px;
  border-radius: 4px;
}


.tip:before {
    content: '\f058';
    color: var(--mollie-green-700);
}

.tip {
  background-color: var(--mollie-green-50);
  border: none;
  color: var(--mollie-green-800);
  font-size: 13px;
  border-radius: 4px;
}

.warning.danger:before {
    content: '\f06a';
    color: var(--mollie-red-700);
}

.danger {
  background-color: var(--mollie-red-50);
  border: none;
  color: var(--mollie-red-800);
  font-size: 13px;
  border-radius: 4px;
}


/** TOP NAVIGATION **/

.site-sidebar .logo {
    padding: 18px;
}

.tool-search-form .search-field {
    background-color: var(--mollie-black);
}

.portal-header-navbar .logo {
    padding:  5px;
}

/** PORTAL PAGE **/

.portal-single-publication .a .img {
    max-width: 50%;
}

/** SIDEBAR **/


.theme2 .site-sidebar {
    background-color: var(--mollie-white);
}

.topic-link.section.taxonomy-publication-nav-section {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.theme2 .toc > li {
    border: none;
}

.nav-site-sidebar ul .active > a {
    font-weight: 600;
    background-color: var(--mollie-blue-50);
    border-radius: 6px;
}

.nav-site-sidebar .active>a {
    font-weight: 600;
    background-color: var(--mollie-blue-50);
    border-radius: 6px;
}

.nav-site-sidebar ul .active > a:hover,
.nav-site-sidebar .active>a:hover,
.topic-link .active a:hover,
.taxonomy-publication-nav-section .active a:hover {
    font-weight: 600;
    background-color: var(--mollie-blue-100);
    border-radius: 6px;
}

.nav-site-sidebar ul > li > a:hover,
.nav-site-sidebar ul > a:hover,
.nav-site-sidebar a:hover,
.topic-link a:hover,
.taxonomy-publication-nav-section a:hover {
    background-color: var(--mollie-blue-50);
    border-radius: 6px;
}

/** SECTION PAGE NAVIGATION (TILES) **/

.section-toc-title {
    display: none;
}

.section-toc {
    margin-top: 30px;
    margin-bottom: 50px;
}

.section-toc .section-toc-after > ul {
    display: inline-flex;
    margin-left: -10px;
}

.section-toc .topic-link {
    padding: 10px;
    margin: 10px;
    margin-left: -2px;
    padding-left: 20px;
    font-weight: 400;
    font-size: 13px;
    color: var(--mollie-grey-800);
    border-radius: 6px;
    background-color: var(--mollie-white);
    vertical-align: baseline;
    height: 80px;
    max-width: 820px;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    flex-direction: row;
    font-weight: 400;
    text-align: center;
    box-shadow: 0 3px 15px rgb(0 0 0 / 9%);
    transition: box-shadow 0.1s ease-in-out, -webkit-box-shadow 0.1s ease-in-out;
}

.section-toc .topic-link:hover {
    box-shadow: 0 10px 25px rgb(0 0 0 / 16%);
}

.section-toc > ul {
    display: inline-flex;
    flex-direction: row;
    justify-items: start;
    justify-content: left;
    align-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}


/** IN-PAGE NAVIGATION **/

.theme2 .section-nav.nav>li.active>a:before {
    background-color: var(--mollie-blue-700);
}

.theme2 .section-nav.nav li.active>a {
    color: var(--mollie-blue-700);
}

.theme2 .section-nav.nav li.active>a:hover {
    color: var(--mollie-blue-300);
}

.page-toc .section-nav-container::before {
    content: "On this page";
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mollie-grey-900);
    padding-bottom: 10px;
}

.page-toc .section-nav-container {
    padding-top: 20px;
}

.section-nav.nav>li:first-child a {
    font-weight: 400;
    display: none;
}