.description_label
{
    font-size: 11px;
    color: grey;
}


/* Styles markdown quotes */
blockquote p {
    border-left: thin solid #aaa;
    padding-left: 4px;
}



// // https://www.digitalocean.com/community/tutorials/css-scrollbars
// /* Works on Firefox */
// * {
//     scrollbar-width: medium;
//     // scrollbar-color: blue orange;
// }

// /* Works on Chrome, Edge, and Safari */
// *::-webkit-scrollbar {
//     width: 10px;
//     height: 12px;
// }

// *::-webkit-scrollbar-track {
//     // background: #555;
// }

// *::-webkit-scrollbar-thumb {
//     background-color: #ccc;
//     border-radius: 10px;
//     // border: 3px solid #555;
// }

.app_header
{
    margin-right: 0px;
    width: 100%;
    max-width: 100%;
    min-width: 0px;
    // background-color: rgb(206,206,206);
    position: fixed;


}

@media screen and (max-width: 600px) {
    .app_header
    {
        // Quick hack to allow the create "+" buttons to be visible on the acitons list page on a mobile screen.
        // Not perfect as the drop down menus for the knowledge views are cropped
        max-height: 70px;
        overflow-y: auto;
    }
}


// +++++++++  Tooltip  +++++++++
//
// From https://stackoverflow.com/a/71250946/539490
[data-tooltip] {
    position: relative;
}

[data-tooltip]:after {
    z-index: 100000000; // Unfortunately the element is still hidden by other things
    content: attr(data-tooltip);
    position: absolute;
    left: -40%; // Would be good to find a way to center this, perhaps something like this: https://stackoverflow.com/a/14569139/539490
    bottom: -40%;
    background-color: #555;
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 12px;
    color: white;
    width: max-content;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-in-out;
}

[data-tooltip]:hover:after {
    opacity: 1;
}

[data-tooltip_left_-20]:after { left: -20%; }
[data-tooltip_left_-10]:after { left: -10%; }
[data-tooltip_left_0]:after { left: 0%; }
[data-tooltip_bottom_-60]:after { bottom: -60%; }
[data-tooltip_bottom_-140]:after { bottom: -140%; }

div[data-tooltip]:after {
    // left: 5px!important;  // disabled as was not sure what this was doing
}
// ---------  Tooltip  ---------
