body {
    color: #47555c;
    font-size: 16px;
    font-family: sans-serif;
    margin: 0;
    background: #eff4ff;
}

a:link { color: #008fee; }
a:visited { color: #008fee; }
a:hover { color: #22a7ff; }

h1 { font-size:26px; font-weight: normal; }
h2 { font-size:22px; font-weight: normal; }
h3 { font-size:18px; font-weight: normal; }
h4 { font-size:16px; font-weight: bold; }

hr {
    height: 1px;
    background: #c1cce4;
    border: 0px;
    margin: 15px 0;
}

tt {
    font-family: monospace;
}

span.parameter {
    font-family: monospace;
    font-weight: bold;
    color: rgb(99, 115, 131);
}

span.optional_param {
    font-style: italic;
    color: rgb(143, 166, 230);
}

.types {
    white-space: pre;
}

td span.types {
    flex-flow: nowrap;
    display: inline-flex;
    width: 100%;
}

.type {
    flex-basis: auto;
    font-weight: bold;
    font-style:italic;
    pointer-events: none;
    text-decoration: none;
    color: #008fee;
    text-align: center;
    flex-grow: 1;
}

p.name {
    font-family: monospace;
}

kbd,
p code,
ol code,
ul code,
dd > code,
td code,
span.default_value,
.see_also_description code,
.important_box code
{
    background-color: #eaedf587;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #b7bac1;
    font-family: monospace;
    margin-left: 5px;
    margin-right: 5px;
}

#main {
    display: flex;
}

#navigation {
    --sidebar-width: 14em;
    --sidebar-toggle-width: 24px;

    background-color: white;
    border-right: 1px solid #d3dbec;
    border-bottom: 1px solid #d3dbec;

    width: var(--sidebar-width);
    overflow: visible;

    margin-left: calc(-1 * var(--sidebar-width) + var(--sidebar-toggle-width));
    transition: margin-left 0.2s ease-out;
}

#navigation.open {
    margin-left: 0;
}

@media (hover: hover) {
    #navigation:hover {
        margin-left: 0;
    }
}

@media all and (min-width: 768px) {
    #navigation {
        margin-left: 0;
    }
}

#navigation br {
    display: none;
}

#navigation h1 {
    background-color: white;
    border-bottom: 1px solid #d3dbec;
    padding: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#navigation h2 {
    font-size: 18px;
    background-color: white;
    border-bottom: 1px solid #d3dbec;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 0px;
}

#content {
    overflow: hidden;
}

#content h1 {
    background-color: #2c3e67;
    color: white;
    padding: 15px;
    margin: 0px;
}

#content h2 {
    background-color: #6c7ea7;
    color: white;
    padding: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 0px;
}

#content h2 a {
    background-color: #6c7ea7;
    color: white;
    text-decoration: none;
}

#content h2 a:hover {
    text-decoration: underline;
}

#content h3 {
    font-style: italic;
    padding-top: 15px;
    padding-bottom: 4px;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 5px;
    border-bottom: solid 1px #bcd;
    font-weight: normal;
}

#content h4 {
    margin-right: 15px;
    margin-left: 15px;
    border-bottom: solid 1px #bcd;
}

#content pre, .auto_genenerated_code {
    margin: 15px;
}

pre, .auto_genenerated_code {
    background-color: rgb(50, 55, 68);
    color: white;
    border-radius: 3px;
    /* border: 1px solid #C0C0C0; /* silver */
    padding: 15px;
    overflow: auto;
    font-family: monospace;
    max-width: 720px;
}

#content ul pre.example {
    margin-left: 0px;
}

table.index {
    /* border: 1px #00007f; */
}

table.index td {
    text-align: left;
    vertical-align: top;
}

#navigation ul {
    font-size:1em;
    list-style-type: none;
    margin: 1px 1px 10px 1px;
}

#navigation li {
    text-indent: -1em;
    display: block;
    margin: 3px 0px 0px 0;
}

#navigation li li a {
    margin: 0px 3px 0px -1em;
}

#content p {
    padding-left: 15px;
    padding-right: 15px;
}

table, table th, table td  {
    border: solid 1px rgb(193, 204, 228);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-left: 15px;
    margin-right: 15px;
}

table th, table td {
    padding: 2px;
}

.important_box {
    padding-left: 40px;
    min-height: 32px;
    max-width: 640px;
    vertical-align: middle;
    background-image: url("images/warning_icon.svg");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: left center;
    margin-top: 15px;
    margin-bottom: 5px;
    margin-left: 10px;
}

.see_also, .see_also td, .see_also th {
    border-style: hidden !important;
    padding-left: 5pt;
    padding-right: 5pt;
}

.see_also tr td:nth-of-type(1) {
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
}

.see_also tr:hover {
    background-color: #f7fbff;
}

.see_also tr th {
    color: rgb(168, 168, 168);
    padding-top: 15px;
    padding-bottom: 4px;
    font-weight: normal;
    text-decoration: none;
    font-style:italic;
    font-size: 85%;
}

.see_also_description {
    max-width: 640px;
}

.see_also_sublist td:nth-of-type(1) {
    margin-left: 10px;
    padding-left: 15px;
    border-left: 1px solid rgb(200, 200, 200) !important;
}

.widget_list td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.widget_list tr td:first-child {
    padding-left: 5px;
}

.widget_list tr td:last-child {
    padding-right: 10px;
}

.widget_list {
    border-collapse: unset;
    overflow: hidden;
    border-style: solid;
    border-width: 0.5px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.widget_list th {
    background-color: #2c3e67;
    font-weight: bold;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.widget_list th:first-child {
    border-top-left-radius: 7px;
    border-bottom-width: 1px;
    padding-left: 20px;
    padding-right: 20px;
}

.widget_list th:last-child {
    border-top-right-radius: 7px;
    border-width: 0px;
    border-bottom-width: 1px;
    padding-left: 20px;
    padding-right: 20px;
}

.widget_list td {
    border-style: solid;
    border-width: 0px;
    border-right-width: 1px;;
    border-bottom-width: 1px;
}

.flex-list {
    display: flex;
    flex-wrap: wrap;
}

.flex-list > div {
    flex-grow: 1;
    /* Use base width based on font size
       to make sure text fits when zooming */
    width: 9em;

    text-align: center;
    padding: 10px;
    margin: 5px;
    border: 1px solid rgb(193, 204, 228);
}

#about {
    padding: 15px;
    background-color: white;
    border-top: 1px solid #d3dbec;
    border-bottom: 1px solid #d3dbec;
}

@media all and (min-width: 768px) {
    #about {
        padding-left: calc(14em + 15px);
    }
}

table.module_list, table.function_list {
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    border-collapse: collapse;
    margin: 15px;
}
table.module_list td, table.function_list td {
    border-width: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
table.module_list td.name, table.function_list td.name {
    min-width: 200px;
    border-left-width: 0px;
    border-right-width: 0px;
}
table.module_list td.summary, table.function_list td.summary {
    width: 100%;
    border-left-width: 0px;
    border-right: none;
}

table.function_list td.shortname {
    border-left-width: 0px;
    border-right-width: 0px;
}

table.function_list td.inheritance {
    border-right-width: 0px;
    border-left-width: 0px;
    color: #a4c7ff;
    min-width: 200px;
}

.proptype {
    padding-right: 20px;
    float: right;
}

span.inheritance {
    color: #9db9f3;
    font-weight: normal;
}

span.not_applicable {
    color: rgb(200, 200, 200);
    font-style:italic;
    font-size: 85%;
    text-align: center;
    display: block;
}

.summarytype {
    color: #a4c7ff;
    font-size: 85%;
    border-left: none;
    border-right: none;
    text-align: right;
}

span.chips {
  border: 1px solid #9db9f3;
  border-radius: 25px;
  padding-left: 5pt;
  padding-right: 5pt;
  padding-top: 1pt;
  padding-bottom: 1pt;
  font-size: 85%;
  color: #9db9f3;
  background-color: #FFF;
  margin-left: 10px;
  vertical-align: middle;
}

table.function_list .function_args /*.function_modname*/ {
    color: #94b1ff;
    text-decoration: underline;
    text-decoration-color: #bbd3ff;
}

table.function_list .function_args b {
    font-weight: 500;
    color: #95b1ff;
    text-decoration: underline;
    text-decoration-color: #bbd3ff;
}

table.function_list .function_named_args b {
    color: #b37cff;
    text-decoration: underline;
    text-decoration-color: #bbd3ff;
}

table.function_list .function_named_args {
    color: #ba97ff;
    text-decoration: underline;
    text-decoration-color: #bbd3ff;
}

table.function_list td.baseclass {
    color: #a4c7ff;
    min-width: 200px;
    border-left: none;
    border-right: none;
    text-align: right;
}

.baseclass {
    font-size: 85%;
}

dl.function {
    margin-right: 15px;
    margin-left: 15px;
    border-bottom: solid 1px rgb(193, 204, 228);
    border-left: solid 1px rgb(193, 204, 228);
    border-right: solid 1px rgb(193, 204, 228);
    background-color: white;
}

dl.function dt {
    color: rgb(99, 123, 188);
    font-family: monospace;
    border-top: solid 1px rgb(193, 204, 228);
    padding: 15px;
}

dl.function dd {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 15px;
}

#content dl.function dd h3 {
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 0px;
    font-size: 16px;
    color: rgb(128, 128, 128);
    border-bottom: solid 1px #def;
}

#content dl.function dd ul, #content dl.function dd ol {
    padding: 0px;
    padding-left: 15px;
    margin-left: 16px;
    list-style-type: disc;
}

ul.nowrap {
    overflow:auto;
    white-space:nowrap;
}

.section-description {
    padding-left: 15px;
    padding-right: 15px;
}

.deprecated_label {
    color: #9db9f3;
    font-weight: normal;
}

/*.inheritedmethodparent {
    color: #9db9f3;
    font-weight: normal;
}*/

/* stop sublists from having initial vertical space */
ul ul { margin-top: 0px; }
ol ul { margin-top: 0px; }
ol ol { margin-top: 0px; }
ul ol { margin-top: 0px; }

/* make the target distinct; helps when we're navigating to a function */
a:target + * {
  background-color: #FF9;
}

/* tag + awful.tag */
.listplusign {
    color: #b7c1ff;
    text-decoration: underline;
    text-decoration-color: white;
}

/* styles for prettification of source */
pre .comment { color: #bbccaa; }
pre .constant { color: #a8660d; }
pre .escape { color: #844631; }
pre .keyword { color: #ffc090; font-weight: bold; }
pre .library { color: #0e7c6b; }
pre .marker { color: #512b1e; background: #fedc56; font-weight: bold; }
pre .string { color: #8080ff; }
pre .number { color: #f8660d; }
pre .operator { color: #2239a8; font-weight: bold; }
pre .preprocessor, pre .prepro { color: #a33243; }
pre .global { color: #c040c0; }
pre .user-keyword { color: #800080; }
pre .prompt { color: #558817; }
pre .url { color: #272fc2; text-decoration: underline; }

#navigation h1 {
  background-image: url(images/AUTOGEN_wibox_logo_logo_and_name.svg);
  height:160px;
  background-position: 10px 10px;
  background-repeat:no-repeat;
  color:transparent;
}

/* Hide some extra documentation noise by default */
.hide_extra {
    display: none
}
.show_more {
    display: default
}
.show_more_button {
    display:block;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1px solid rgb(210, 210, 220);
    color: rgb(128, 128, 128);
    border-radius: 7px;
}

.index_guides div {
    margin: 0 auto;
    display: table;
    margin-bottom: 10px;
}

.index_guides div a {
    display: inline-block;
    border: solid 1px #cccccc;
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.index_guides div a:hover {
    background-color: #99b3ec;
}

/* Inheritance diagram */
.inheritance .inheritance__level {
    list-style: none;
}

.inheritance .inheritance__level--root {
    padding-left: 0;
}

.inheritance .inheritance__level__node::before {
    content: "↳";
}

.inheritance .inheritance__level__node--root::before {
    /* simulate the spacing of the arrow character */
    content: "   ";
    white-space: pre;
}

.extra-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.extra-header__section {
    flex-grow: 1;
}

.summary_row {
    background-color: white;
}

.summary_row:hover {
    background-color: #f7fbff;
}

/* CSS for beautiful.fg_normal */
.svg_stroke, .svg_fill {
    color: black;
}

#content > .components-relationship {
    margin-left: 15px;
    margin-right: 15px;
}

.components-relationship--diagrams {
    display: flex;
    flex-direction: column;
}

.components-relationship--diagram {
    flex-grow: 1;
    flex-basis: 100%;
}

.components-relationship--diagram > table {
    margin: 0;
    width: 100%;
}

.components-relationship--diagram + .components-relationship--diagram {
    margin-top: 15px;
}

/* on wide displays, put both diagrams next to each other */
@media all and (min-width: 1100px) {
    .components-relationship--diagrams {
        flex-direction: row;
    }

    .components-relationship--diagram {
        flex-grow: 1;
        flex-basis: 50%;
    }

    .components-relationship--diagram + .components-relationship--diagram {
        margin-top: 0;
        margin-left: 15px;
    }
}

.components-relationship--legend {
    color: #00000044;
    margin-top: 15px;
}

.img-object {
    max-width: 100%;
    padding: 5px;
}

.copy-link {
    font-size: 9px;
    padding: 2px;
    border-radius: 9px;
    vertical-align: middle;
    text-decoration: none;
}
.copy-link--success {
    background-color: green;
}
.copy-link--failure {
    background-color: red;
}