@media screen
{
    html { overflow-y: scroll; }
    h1, h2, h3, h4, h5
    {
        clear: both;
        margin: 0;
        padding: 0;
        text-decoration: none;
        text-align: left;
    }
    h1, h2
    {
        color: #28b905;
        font-family: "Rajdhani", sans-serif;
        font-size: 32px;
        font-weight: normal;
    }
    h3, h4, h5
    {
        color: #000000;
        font-family: "Rajdhani", sans-serif;
        font-size: 16px;
        font-weight: 600;
    }

    a, .link-label
    {
        color: #7d0f6e;
        cursor: pointer;
        text-decoration: underline;
    }

    a:hover, .link-label:hover
    {
        color: #28b905;
    }

    ul
    {
    	margin: 0;
    	padding: 0 0 0 20px;
    }

    li
    {
    	padding: 0 0 5px 0;
    	list-style: none;
    }

    div
    {
        padding: 0;
        margin: 0;
    }

    body
    {
        color: #000000;
        text-align: left;
        font-size: 14px;
        font-weight: normal;
        font-family: "proxima-nova", "Proxima Nova", sans-serif;
        margin: 0;
        padding: 0;
        text-align: center;
        background: #CCCCCC url(/img/background.png) no-repeat bottom right fixed;
        background-size: contain;
    }

    /* the-wrapper wraps all other content */
    div#the-wrapper
    {
        text-align:left;
        width: 1300px;
        margin: 0 auto;
        padding: 0;
    }

    /* the-banner is a container for the header banner */
    div#the-banner
    {
        background: #28b905 url(/img/banner.png) no-repeat bottom right;
        background-size: cover;
        height: 130px;
    	margin: 0;
        opacity: 1;
        overflow: hidden;
    	padding: 0;
    }

    /* the-middle-part is everything between the-top-bar and the-bottom-bar */
    div#the-middle-part
    {
        display: flex;
        margin: 0;
        overflow: hidden;
        padding: 0;
        width: 100%;
    }

    /* the-menu is the left-hand-side menu */
    div#the-menu
    {
        padding: 0;
        margin: 0;
        float: left;
        width: 130px;
        padding-bottom: 1000000px;
        margin-bottom: -1000000px;
        opacity: 1;
    }

    /* the-content is the tabs along the top plus the page contents */
    div#the-content
    {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        float: left;
        margin: 0px;
        margin-right: 0;
        opacity: 1;
        padding: 0;
        width: 1170px;
    }

    /**
     * Vertical Menu - left-hand-side menu
     *
     * <div class="vmenu">
     *   <ul>
     *     <li><a><div></div></a></li>
     *     <li><a><div class="selected"></div></a></li>
     *   </ul>
     * </div>
     */
    .qlabs-menu
    {
        background-color: #FFFFFF;
        color: #000000;
    }
    .qlabs-menu ul
    {
        line-height: 1;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .qlabs-menu li
    {
        border: 0 solid;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        padding: 0;
        margin: 0 0 2px 0;
    }
    .qlabs-menu li a
    {
        text-decoration: none;
    }
    .qlabs-menu li a div
    {
        font-weight: normal;
        padding: 12px 0 12px 12px;
        background-color: #FFFFFF;
        color: #000000;
        border-right-width: 3px;
        border-right-style: solid;
        border-right-color: #FFFFFF;
    }
    .qlabs-menu li a div:hover
    {
        background-color: whitesmoke;
        color: #000000;
        border-right-color: whitesmoke;
    }
    .qlabs-menu li a div.selected
    {
        background-color: #7d0f6e;
        color: #FFFFFF;
        border-right-color: #7d0f6e;
    }

    /**
     * Qlabs Bar - top and bottom bars
     *
     * <div class="qlabs-bar">
     *   <ul class="left">
     *     <li><div></div></li>
     *     <li><a><div></div></a></li>
     *   </ul>
     *   <ul class="right">
     *     <li><div></div></li>
     *     <li><a><div></div></a></li>
     *   </ul>
     * </div>
    **/
    div#the-top-bar
    {
        border-bottom-right-radius: 0px;
        display: flex;
        height: 34px;
        line-height: 34px;
    }
    div#the-bottom-bar
    {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        display: flex;
        height: 28px;
        line-height: 28px;
        margin-bottom: 2em;
    }
    .qlabs-bar
    {
        background-color: #FFFFFF;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    	color: #000000;
        margin: 0;
    	padding: 0;
        overflow: hidden;
    }
    .qlabs-bar *
    {
    	height: inherit;
        line-height: inherit;
    }
    .qlabs-bar ul
    {
        list-style-image: none;
    	list-style-position: outside;
    	list-style-type: none;
    	padding: 0;
    	overflow: hidden;
    }
    .qlabs-bar li
    {
        margin: 0;
    	padding: 0;
    }
    .qlabs-bar ul.left
    {
        display: flex;
        flex-grow: 1;
        float: left;
    }
    .qlabs-bar ul.left li
    {
        clear: right;
        flex-grow: 0;
        float: left;
    }
    .qlabs-bar ul.left li:last-child
    {
        flex-grow: 1;
    }
    .qlabs-bar ul.right
    {
        flex-grow: 0;
        float: right;
    }
    .qlabs-bar ul.right li
    {
        clear: left;
        float: right;
    }
    .qlabs-bar div
    {
        box-sizing: border-box;
        font-size: 100%;
        font-weight: normal;
        padding: 0 1em;
    }

    /* top bar node colours */
    .qlabs-bar ul.left li.node-filler div
    {
        padding: 0;
        position: relative;
        width: 100%;
    }
    .qlabs-bar ul.left li.node-filler div:before
    {
        border-top: 3px solid #000000;
        content: '';
        margin: 0 1em 0 0;
        position: absolute;
        top: calc(50% - 2px); /* halfway minus half the border width */
        width: calc(100% - 1em); /* full width minus the size of the margin */
    }
    .qlabs-bar ul.left li div.node-color
    {
        border-left: 6px solid #000000;
        color: #000000;
    }

    /* link areas */
    .qlabs-bar li div
    {
    	background-color: #FFFFFF;
        border: 0 solid #CCCCCC;
        color: #000000;
    }
    .qlabs-bar li a
    {
        text-decoration: none;
    }
    .qlabs-bar li a:hover div
    {
    	color: #000000;
    	background-color: whitesmoke;
    }
    .qlabs-bar ul.right li div
    {
        border-left-width: 1px;
    }

    /**
     * Standard separator classes
    **/
    .qlabs-vspace
    {
        padding: 10px 0 0 0;
    }

    .qlabs-separator
    {
        padding-top: 5px;
        border-bottom: solid 1px rgba(0, 0, 0, 0.5);
        margin-bottom: 5px;
    }

    /**
     * QLabs Color Classes - system objects
    **/
    .qlabs-status-running,
    .qlabs-status-valid { color: #28b905; }

    .qlabs-status-stopped,
    .qlabs-status-untrusted,
    .qlabs-status-invalid
    {
        color: #d50000;
        font-weight: bold;
    }

    .qlabs-status-unknown,
    .qlabs-status-expiring
    {
        color: #dda90e;
        font-weight: bold;
    }

    /**
     * QLabs Color Classes - field highlights
    **/
    .qlabs-field { color: #28b905; }
    .qlabs-field.red { color: #d50000; }
    .qlabs-faded { color: #999999; }

    /**
     * QLabs Color Classes - system services
    **/
    .color-running { color: #28b905; }
    .color-stopped { color: #d50000; }
    .color-warning { color: #FF960A; }
    .color-filter { color: lightskyblue; }
    .color-node-highlight { color: #000000; }

    /**
     * FontAwesome Icons
    **/
    .fas, .far, .fal, .fad
    {
        height: auto;
        font-size: 120%;
        vertical-align: middle;
    }

    /**
     * Hamburger menu
    **/
    div.hamburger-menu
    {
        cursor: pointer;
        display: inline-block;
        outline: none;
    }

    div.hamburger-menu span
    {
        padding-right: 0.5em;
    }

    div.hamburger-menu img
    {
        height: 10px;
    }

    .hamburger-menu:hover
    {
        color: #000000;
        background-color: whitesmoke;
        border-top-color: whitesmoke;
        border-bottom-color: whitesmoke;
    }
    .hamburger-menu:focus
    {
        /* clicking on label should toggle the menu */
        pointer-events: none;
    }
    .hamburger-menu:focus + div > .hamburger-menu-content
    {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* .hamburger-div - relative-positioned container for content */
    div.hamburger-div
    {
        border-width: 0;
        direction: rtl;
        height: auto;
        min-height: 34px;
        padding: 0;
    }

    /* .hamburger-menu-content - containing element for dropdown options */
    .hamburger-menu-content
    {
        opacity: 0;
        position: absolute;
        transition: visibility 0.5s;
        visibility: hidden;
        width: 300px;
        z-index: 1;
        margin-top: -1px;
    }
    .hamburger-menu-content li
    {
        width: 100%;
    }
    .hamburger-menu-content li a div
    {
        border: 1px solid #CCCCCC;
        border-right-width: 0;
        box-sizing: border-box;
        margin-top: -1px;
    }
    .hamburger-menu-content li:first-child a div
    {
        margin-top: 0;
    }


    /**
     * Dashboard Boxes
    **/
    .dashboard-info
    {
        font-size: 1.0em;
        margin: 0.25em;
        padding: 1.2em 1.5em;
    }
    .dashboard-info a
    {
        font-weight: 700;
    }
    .dashboard-info a:hover
    {
        text-decoration: underline;
    }

    .dashboard-box-container
    {
        display: flex;
        flex-flow: row wrap;
        flex: 1 1 50%;
    }

    .dashboard-box
    {
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        margin: 0.25em;
        min-height: 100px;
        padding: 1.5em;
        width: calc(50% - 0.5em); /* Half the page, minus horizontal margins */
    }
    .dashboard-box *
    {
        display: block;
    }

    /* h3 elements have different font colors depending on the */
    /* vendor, so set to currentcolor here to match with the rest */
    /* of the text, differing depending on severity */
    .dashboard-box h3
    {
        color: currentcolor;
        font-family: "proxima-nova", "Proxima Nova", sans-serif;
        padding-bottom: 0.2em;
    }
    .dashboard-box a
    {
        font-weight: 700;
        padding-top: 0.5em;
    }
    .dashboard-box a:hover
    {
        text-decoration: underline;
    }

    .dashboard-box-info
    {
        color: #1b1e21;
        background-color: #d6d8d9;
        border-color: #c6c8ca;
    }
    div.dashboard-box-info a
    {
        color: #040505;
    }
    div.dashboard-box-info a:hover
    {
        color: #040505;
    }

    .dashboard-box-good
    {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    div.dashboard-box-good a
    {
        color: #0b2e13;
    }
    div.dashboard-box-good a:hover
    {
        color: #0b2e13;
    }

    .dashboard-box-warning
    {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    div.dashboard-box-warning a
    {
        color: #533f03;
    }
    div.dashboard-box-warning a:hover
    {
        color: #533f03;
    }

    .dashboard-box-fail
    {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    div.dashboard-box-fail a
    {
        color: #491217;
    }
    div.dashboard-box-fail a:hover
    {
        color: #491217;
    }

    /**
     * Qlabs Submenu - tabs
     *
     * <div class="qlabs-submenu">
     *   <ul class="left">
     *     <li><div></div></li>
     *     <li><a><div></div></a></li>
     *   </ul>
     *   <ul class="right">
     *     <li><div></div></li>
     *     <li><a><div></div></a></li>
     *   </ul>
     * </div>
     */
    .qlabs-submenu
    {
        background-color: #FFFFFF;
        color: #000000;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }
    .qlabs-submenu ul
    {
        background-color: #FFFFFF;
        line-height: 1;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }
    .qlabs-submenu li
    {
        box-shadow: -1px 0 1px 0 rgba(0, 0, 0, 0.2);
        margin: 0 0 0 2px;
        padding: 0;
    }
    .qlabs-submenu ul.left
    {
        float: left;
    }
    .qlabs-submenu ul.right
    {
        float: right;
    }
    .qlabs-submenu ul.left li
    {
        float: left;
        clear: right;
    }
    .qlabs-submenu ul.right li
    {
        float: right;
        clear: left;
    }
    .qlabs-submenu div
    {
        margin: 0;
        padding: 7px 11px;
        font-size: 120%;
        font-weight: normal;
        font-variant: small-caps;
        letter-spacing: 0;
        line-height: 1em;
    }
    .qlabs-submenu li a
    {
        text-decoration: none;
    }
    .qlabs-submenu li a div
    {
        background-color: #FFFFFF;
        border: 0 solid #FFFFFF;
        border-top: 1px solid #FFFFFF;
        box-sizing: border-box;
        color: #000000;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
     .qlabs-submenu li a:hover, .qlabs-submenu li a:hover div
    {
        background-color: whitesmoke;
        color: #000000;
    }
    .qlabs-submenu li div.selected, .qlabs-submenu li a:hover div.selected
    {
        background: #7d0f6e;
        border-top-color: #7d0f6e;
        color: #FFFFFF;
    }
    .qlabs-submenu li:first-child div.selected, .qlabs-submenu li:first-child a:hover div.selected
    {
        margin-left: 0;
    }

    /* qlabs-content-body is the container for actual page content */
    .qlabs-content-body
    {
        border-radius: 0px;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin: 0;
        padding: 0 2px;
    }


    /**
     * Qlabs Form Table
     *
     * <form>
     *   <table class="qlabs-form-table">
     *     <tr>
     *       <td class="key">
     *         Surname<br/>
     *         <span class="small">also known as Last Name</span>
     *       </td>
     *       <td class="val">
     *         <input type="text" name="surname"/>
     *       </td>
     *     </tr>
     *     ...
     *   </table>
     * </form>
    **/
    .qlabs-form-table
    {
        width: 100%;
    }

    .qlabs-form-table tr, .qlabs-form-table td, .qlabs-form-table th
    {
        margin: 0;
        padding: 3px;
    }

    .qlabs-form-table tr.padded td
    {
        padding: 1em 0;
    }

    .qlabs-form-table td
    {
        vertical-align: middle;
    }

    .qlabs-form-table td.val
    {
        vertical-align: top;
        line-height: 36px;
    }

    .qlabs-form-table td.val table
    {
        line-height: normal;
    }

    .qlabs-form-table .key
    {
        font-size: 110%;
        font-weight: bold;
        line-height: 36px;
        padding-left: 2em;
        text-align: right;
        vertical-align: top;
        white-space: nowrap;
    }
    .qlabs-form-table .key label
    {
        box-sizing: border-box;
        display: inline-block;
        height: 36px;
        line-height: 36px;
    }
    .qlabs-form-table .key.right
    {
        padding-left: 0;
        text-align: left;
    }

    .qlabs-form-table .key.nopad
    {
        padding-top: inherit;
    }

    /* Reset font size for nested form tables */
    .qlabs-form-table .qlabs-form-table .key
    {
        font-size: 100%;
    }

    .qlabs-form-table .key-nopad
    {
        font-weight: bold;
        text-align: right;
    }

    .qlabs-form-table .key.center
    {
        text-align: center;
    }
    .qlabs-form-table .key .small
    {
        font-size: 60%;
        font-weight: normal;
        font-style: italic;
    }
    .qlabs-form-table .val
    {
        text-align: left;
        width: 300px;
    }
    .qlabs-form-table .val p:first-child
    {
        /* No need for 3px buffer here as this is accounted for in the td.val */
        padding-top: calc(0.25rem + 1px);
    }

    .qlabs-form-table .centered-small-heading
    {
        font-weight: italic;
        text-align: center;
        font-size: 100%;
        padding-top: 5px; /* 2px more */
        padding-bottom: 5px; /* 2px more */
    }

    .qlabs-form-table .help-text
    {
        font-size: 90%;
        padding-right: 2em;
        text-align: left;
        vertical-align: middle;
        width: 80%;
    }
    .qlabs-form-table .help-text.block
    {
        padding-right: 25%;
        vertical-align: top;
    }

    /**
     * QLabs Form Policy Table - Usage Policies
     * Overrides some styles from qlabs-form-table, so must be defined after
    **/
    .qlabs-form-policy-table
    {
        table-layout: fixed;
        width: 100%;
    }

    .qlabs-form-policy-table td,
    .qlabs-form-policy-table th
    {
        text-align: center;
    }

    .qlabs-form-policy-table th:first-of-type
    {
        text-align: left;
        width: 10em;
    }

    .qlabs-form-policy-table input
    {
        width: 4.5em;
    }

    .qlabs-form-policy-label
    {
        border-style: none;
        text-align: center;
    }

    /**
     * QLabs Inline Form
    **/
    .qlabs-inline-form-container
    {
        display: inline-block;
    }

    .qlabs-inline-form-container span
    {
        padding-right: 0.5em;
    }

    .qlabs-inline-form
    {
        display: inline-block;
    }

    .qlabs-inline-form input,
    .qlabs-inline-form select
    {
    	margin: 0 0.25em;
    }

    .qlabs-inline-form input[type="submit"]
    {
        width: auto;
    }

    /**
     * QLabs Usage Rate Limiting Policy Table
    **/
    .qlabs-usage-rate-limiting-policy-table td
    {
        text-align: center;
    }

    .qlabs-usage-rate-limiting-policy-table input
    {
        width: 150px;
    }

    .qlabs-usage-rate-limiting-policy-table input[type="checkbox"]
    {
        margin-left: 0.5em;
    }

    .qlabs-usage-rate-limiting-policy-table select
    {
        width: auto;
    }

    /**
     * Backup Modules Table
    **/
    .qlabs-backup-modules-table td
    {
        padding: 0.1em 1em 0.1em 0;
    }

    /**
     * Network Roles
    **/
    table.network-roles
    {
        table-layout: fixed;
        width: 400px;
        text-align: center;
    }

    table.network-roles td
    {
        overflow:hidden;
        width:75px;
    }

    .hidden
    {
        display: none;
    }

    .no-wrap
    {
        white-space: nowrap;
    }

    /**
     * QLabs List Table
    **/
    .qlabs-list-table
    {
        width: 100%;
        table-layout: auto;
        text-align: center;
        overflow: hidden;
        word-wrap: break-word;
    }
    .qlabs-list-table.fixed-width
    {
        table-layout: fixed;
    }
    .qlabs-list-table.auto-width
    {
        width: auto;
    }
    .qlabs-list-table.align-left
    {
        text-align: left;
    }
    .qlabs-list-table.fixed-width th.wide,
    .qlabs-list-table.fixed-width td.wide
    {
        width: 20%;
        max-width: 20%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .qlabs-list-table.fixed-width th.narrow,
    .qlabs-list-table.fixed-width td.narrow
    {
        width: 10%;
    }

    .qlabs-list-table tr.deleted
    {
        background-color: #f8d7da;
        color: #721c24;
    }

    .qlabs-list-table th,
    .qlabs-list-table td
    {
        box-sizing: border-box;
        padding: 0.3em 0 !important;
    }
    .qlabs-list-table.auto-width th,
    .qlabs-list-table.auto-width td
    {
        padding: 0.3em 1em !important;
    }
    .qlabs-list-table th
    {
        height: 2.6em !important;
    }
    .qlabs-list-table td
    {
        height: 2.6em !important;
    }

    .qlabs-list-table:not(.nostripe) > tbody > tr:not(.deleted):nth-child(even) > td
    {
        background-color: whitesmoke;
    }

    .qlabs-list-table tbody tr td.stripe-override-bright
    {
        background-color: whitesmoke !important;
    }

    .qlabs-list-table tbody tr td.stripe-override-dark
    {
        background-color: transparent !important;
    }

    /**
     * QLabs Description Table
    **/
    .qlabs-description-table th,
    .qlabs-description-table td
    {
        height: 1.5em;
        padding: 0.3em 1.5em 0.3em 0;
        white-space: nowrap;
    }

    .qlabs-description-table td.help-area
    {
        white-space: normal;
    }

    /* Simulate table layout with divs */
    .presentation-table
    {
        box-sizing: border-box;
        display: table;
        padding: 0 1em;
    }
    .presentation-table-large
    {
        box-sizing: border-box;
        display: table;
        padding: 0 1em;
        width: 100%;
    }
    .presentation-row
    {
        display: table-row;
    }
    .presentation-title
    {
        display: table-cell;
        font-weight: bold;
        padding: 0.5em 0;
        text-align: right;
        vertical-align: top;
        white-space: nowrap;
    }
    .presentation-value
    {
        display: table-cell;
        padding: 0.5em 0 0.5em 1em;
        text-align: left;
    }
    .presentation-section
    {
        color: #28b905;
        display: table-cell;
        font-family: "Rajdhani", sans-serif;
        font-size: 1.5em;
        padding: 0.5em 0;
        text-align: right;
        white-space: nowrap;
    }

    .presentation-value input[type="submit"]
    {
        width: 100%;
    }

    /* top-level .list-bare remove list style, and removes margin and padding */
    ul.list-bare,
    ul.list-bare li
    {
        list-style-type: none !important;
        margin: 0 !important;
        padding: 0;
    }

    /* nested .list-bare have margin-left */
    ul.list-bare ul.list-bare,
    ul.list-bare ul.list-bare li
    {
        margin-left: 0.75em !important;
    }

    /* elements of .list-bare include a div with class "padded" to add vertical spacing */
    ul.list-bare li:not(:first-child) div.padded
    {
        padding-top: 0.25em;
    }
    ul.list-bare li:not(:first-child) div.extra-padded
    {
        padding-top: 0.5em;
    }

    /**
     * QLabs Info Box
    **/
    div.qlabs-info
    {
        padding-bottom: 0.75em !important;
        padding-left: 0.25em !important;
        padding-right: 0.25em !important;
        padding-top: 0.25em !important;
        text-align: justify;
        width: 55%;
    }
    div.qlabs-info p
    {
        margin-top: 0.75em;
        padding: 0 !important;
    }
    div.qlabs-info p:first-child
    {
        margin-top: 0;
    }
    div.qlabs-info ul
    {
        margin-top: 0.5em;
    }

    div.qlabs-info.node-info
    {
        border-left: 2px solid #000000;
        font-size: 1.2em;
        padding: 0.5em !important;
        margin: 0.25em;
    }

    /* Make the clickable area for an anchor take up 100% of its parent */
    a.fill-parent
    {
        display: block;
        height: 100%;
        width: 100%;
    }

    /* Make elements with floated children expand to fit their content */
    div.clearfix::after
    {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

    /* Styles for the paginator component */
    .paginator
    {
        height: 1.3rem;
        position: relative;
    }

    .paginator > *
    {
        height: 100%;
        line-height: 1.3rem;
        padding: 0 !important;
        position: absolute;
    }
    .paginator .pagesize
    {
        right: 0;
    }

    .paginator .pagesize *
    {
        height: 100%;
        line-height: normal;
    }
    .paginator .pagesize input,
    .paginator .pagesize select
    {
        font-size: inherit;
        padding: 0;
        width: auto;
        vertical-align: middle;
    }
    .paginator .pagesize input
    {
        margin-right: 0;
        padding: 0 0.5rem;
    }

    .paginator .pages
    {
        text-align: center;
        font-size: 1.3em;
        position: static;
        width: 100%;
    }

    .paginator .first::before
    {
        content: "«";
        padding: 0 0.4em;
    }

    .paginator .prev::before
    {
        content: "‹";
        padding: 0 0.4em;
    }

    .paginator .next::after
    {
        content: "›";
        padding: 0 0.4em;
    }

    .paginator .last::after
    {
        content: "»";
        padding: 0 0.4em;
    }

    .paginator .page-number
    {
        padding: 0 0.4em;
    }

    table.small-list-table tr td
    {
        text-align: left;
        height: auto !important;
        padding: 0 !important;
    }

    table.small-list-table.keys-right tr td:first-child
    {
        text-align: right !important;
    }

    table.small-list-table tr td:nth-child(2)
    {
        padding-left: 6px !important;
    }

    table.small-list-table.nested
    {
        /* Extra space since it's left-aligned in a table cell. */
        padding: 2px 2px 2px 12px !important;
    }

    table.qlabs-privileges-table tr td,
    table.qlabs-privileges-table tr th
    {
        text-align: left;
    }

    table.qlabs-privileges-table label
    {
        /* Add horizontal space to the checkbox-and-label elements. */
        margin: 0;
        padding: 0 1em;
    }
    table.qlabs-privileges-table label span
    {
        vertical-align: middle;
    }

    table.qlabs-privileges-table:not(.no-indent) tbody label
    {
        /* Additionally indent sub-elements of privilege sets. */
        padding-left: 2em !important;
    }

    table.qlabs-privileges-table tbody label input,
    table.qlabs-privileges-table tbody label span
    {
        vertical-align: middle;
    }

    table.qlabs-privileges-table > tbody > tr > td
    {
        /* There is only one body row in these tables; highlight it to make it
            stand out from the background. */
        background-color: whitesmoke;
    }

    table.qlabs-multicheckbox-table
    {
        padding-top: 0.3em;
    }
    table.qlabs-multicheckbox-table > tbody > tr > td
    {
        /* Remove padding except on the right side for column spacing. */
        height: 1.3em;
        line-height: 1.3em;
        padding: 0 1em 0 0;
    }

    table.qlabs-multicheckbox-table tbody label input,
    table.qlabs-multicheckbox-table tbody label span
    {
        vertical-align: middle;
    }
}
@media screen
{
    .box
    {
        background-color: #FFFFFF;
        border: 0px solid #FFFFFF;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
        margin: 0px;
        margin-bottom: 2px;
        padding: 6px;
    }

    .box.title
    {
        background-color: whitesmoke;
    }
    .box.title h1, .box.title h2, .box.title h3
    {
        padding: 0;
    }

    /* <div class="item"> within a box will be left aligned and visibly */
    /* separated by a border-right */
    .box .item
    {
        border: 1px solid #FFFFFF;
        border-right-color: #000000;
        display: inline;
        margin: 0;
        padding: 0;
        padding-left: 6px;
        /* 1px extra padding to compensate for border width */
        padding-right: calc(6px + 1px);
    }
    .box .item:first-child
    {
        padding-left: 0;
    }
    .box .item:last-child
    {
        border-right-color: #FFFFFF;
        padding-right: 0;
    }

    /* Error box */
    .box.error
    {
        background-color: #f8d7da;
        color: #721c24;
    }
    .box.error:first-of-type
    {
        margin-top: 2px;
    }

    /* Warning box */
    .box.warning
    {
        background-color: #fff3cd;
        color: #856404;
    }
    .box.warning:first-of-type
    {
        margin-top: 2px;
    }

    /* Equal-width boxes as columns.  e.g. <div class="box split half"> */
    /* This uses flexbox, and as such will not work properly in older browsers */
    /* In particular, IE < 11 */
    .box.split
    {
        background-color: transparent;
        display: flex;
        overflow: hidden;
        padding: 0;
    }
    .box.split.half div
    {
        width: 50%;
    }
    .box.split.third div
    {
        width: 33.33%;
    }
    .box.split.quarter div
    {
        width: 25%;
    }
    .box.split div
    {
        background-color: #FFFFFF;
        flex-grow: 1;
        margin-right: 2px;
        padding: 6px;
    }
    .box.split div:last-child
    {
        display: table-cell;
        margin-right: 0;
    }

    /* Full-width box styles */
    .box.top
    {
        border-top-style: solid;
    }

    .box.bottom
    {
        border-bottom-style: solid;
        margin-bottom: 0px;
    }

    .box.center
    {
        border-left-style: solid;
        border-right-style: solid;
        flex-grow: 0;
    }
    .box.center:nth-last-of-type(2)
    {
        flex-grow: 1;
    }

    .box.top.center
    {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .box.bottom.center
    {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    /* Other elements within a box */
    .box p, .box h1, .box h2
    {
        margin: 0px;
        padding: 0px;
        padding-bottom: 5px;
    }

    .box ul li
    {
        padding: 0px;
        margin: 3px;
        list-style-type: disc;
    }

    .box ol li
    {
        padding: 0px;
        margin: 3px;
        list-style-type: decimal;
    }

/**********************************************************************/

    /**
     * Formatting for pre tags.
     */
    .box pre
    {
        color: #000000;
        font-size: 100%;
        padding: 5px;
        margin: 0px;
    }
    /**
     * Wrapping long lines in pre tags.
     *
     * Reference:
     * http://labnol.blogspot.com.au/2006/10/html-css-trick-for-displaying-code.html
     */
    .box pre.wrap
    {
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

/**********************************************************************/

    .box table
    {
        font-size:100%;
    }
    .box table thead tr th
    {
        background-color: #E6E6E6;
        color: #000000;
        padding: 3px;
        margin: 0px;
    }
    .box table.data tbody tr td
    {
        color: #000000;
        padding: 3px;
        margin: 0px;
    }

    .break-word
    {
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word;
    }
}
@media screen
{
    input,
    select,
    textarea,
    label.button-label
    {
        background-color: whitesmoke;
        border: 1px solid gainsboro;
        border-radius: 0px;
        box-sizing: border-box;
        color: #000000;
        font-family: "proxima-nova", "Proxima Nova", sans-serif;
        font-size: 120%;
        margin: 0;
        padding: 0.25rem 0.5rem;
        width: 300px;
    }

    input[type='password'],
    input[type='submit'],
    input[type='text'],
    input[type='number'],
    input[type='color'],
    select:not([multiple]),
    label.button-label
    {
        height: 36px;
    }

    /* label.button-label - wrapper box around field input and label */
    label.button-label
    {
        display: inline-block;
        font-size: 110%;
        line-height: 36px;
        padding-bottom: 0;
        padding-top: 0;
        vertical-align: top;
        width: auto;
        white-space: nowrap;
    }

    label
    {
        white-space: nowrap;
    }

    label.block
    {
        display: block;
        margin-bottom: 0.1em;
    }
    label.block span
    {
        margin-left: 0.25em;
    }

    *.has-error input,
    *.has-error select,
    *.has-error textarea,
    *.has-error label
    {
        border-color: #d50000;
    }

    th.has-error,
    *.has-error label
    {
        color: #d50000;
    }

    /* The placeholder pseudo-element name varies between browsers! The
     * statement must be repeated because only one exists at a time... */
    input[type = 'text']::-moz-placeholder
    {
        opacity: 0.75;
    }

    input[type = 'text']::-webkit-input-placeholder
    {
        opacity: 0.75;
    }

    input[type = 'text']:-ms-input-placeholder
    {
        opacity: 0.75;
    }

    input[type = 'submit'].small
    {
        padding: 2px 2em;
        width: auto;
    }

    input[type = 'text'].small
    {
        font-size: 100% !important;
        height: 24px !important;
        padding: 0.2rem;
    }

    /* The placeholder pseudo-element name varies between browsers! The
     * statement must be repeated because only one exists at a time... */
    input[type = 'text'].small::-moz-placeholder
    {
        font-size: 85% !important;
    }

    input[type = 'text'].small::-webkit-input-placeholder
    {
        font-size: 85% !important;
    }

    input[type = 'text'].small:-ms-input-placeholder
    {
        font-size: 85% !important;
    }

    select.small
    {
        font-size: 100% !important;
        width: auto;
        height: 24px !important;
        padding: 0;
    }

    input.invisible
    {
        display: none;
    }

    input[type='checkbox'],
    input[type='radio']
    {
        margin: 0 0 1px 0;
        vertical-align: middle;
        width: auto;
    }

    /* Link Button - <button> styled to look like <a> */
    .link-button
    {
        background-color: transparent !important;
        border-width: 0;
    	cursor: pointer;
        line-height: 1rem;
    	margin: 0;
        padding: 0;
    }
    /* Remove unwanted padding (added by older versions of Firefox) */
    .link-button::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

    .link-button span
    {
        color: #7d0f6e;
        font-family: "proxima-nova", "Proxima Nova", sans-serif;
        font-size: 14px;
        text-decoration: underline;
    }

    .link-button:hover span
    {
        color: #28b905;
    }

    /* disabled/readonly input */
    input:disabled,
    select:disabled,
    input[readonly],
    input[readonly='readonly']
    {
        background-color: whitesmoke;
        border-color: gainsboro;
        color: #404040;
        opacity: 0.4;
        outline: none;
    }

    /* submit buttons */
    input[type='submit']
    {
        background-color: #7d0f6e;
        border: 1px solid #7d0f6e;
        border-radius: 3px;
        color: #FFFFFF;
        font-family: "Rajdhani", sans-serif;
        font-size: 120%;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
    }

    input[type='submit']
    {
        margin-right: 1em;
    }
    /* no right margin on buttons appearing to the right of other buttons */
    input[type='submit'] + input[type='submit']
    {
        margin-right: 0;
    }

    /* Element-level error messages */
    ul.help-block
    {
        margin: 0;
    	padding: 0;
        text-align: left;
    }
    ul.help-block.inline
    {
        margin: 0 0 3px 0;
        padding: 0.25rem 0.5rem;
    }
    ul.help-block li
    {
        color: #d50000;
        list-style: none;
        margin: 0;
    	padding: 0;
    }

    /* set the spacing between fields and field error messages */
    tr.has-error td
    {
        padding-bottom: 0;
    }
    tr.has-error + tr td
    {
        padding-top: 1px;
    }

    /* context information directly above a field */
    div.context-info
    {
        width: 300px;
    }

    /* full-width informational text taking a whole row of a form */
    div.context-info-wide
    {
        padding: 1em 0;
        width: 50%;
    }
}