/* See here for color palettes https://material.io/guidelines/style/color.html#color-color-palette
/* Try to make it follow the material style:  https://material.io/guidelines/ */

/* Based on color palettes (Lightest to darkest):
 *
 * #eceff1 Lightest
 * #cfd8dc
 * #b0bec5
 * #90a4ae
 * #78909c
 * #607d8b Main Color
 * #546e7a
 * #455a64
 * #37474f
 * #263238 Darkest
 *
 * Note that text can be #fff or #000 as appropriate for the background
 */

/* Make logo larger and at right level */
a.md-logo img {
    width: 45px;
    height: 45px;
}

a.md-logo {
    margin-top: .1rem;
    padding-top: .1rem;
}

/* Fix link color on table headers */
table thead tr th a:hover a {
    color: #ff1744 !important;
}

/* Show link icon on links in tables */
table a::after {
    content: "\f0c1";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: 0.25em;
}

/* hide horizontal rules */
hr {
    display: none;
}

/* Tweak h2s after hrs to have a blue box. */
hr+h2 {
    color: #fff;
    background-color: #90a4ae;
    padding-left: 1rem;
}

hr+h2::before {
    background-color: #fff;
    margin-left: -1rem;
}

/* Adjust font size */
.md-typeset {
    font-size: 16px;
}

/* Hide bottom of page (powered by) */
.md-footer-meta {
    display: none;
}

/* Make navigation footer smaller */
.md-footer-nav__link {
    padding: 10px;
    padding-bottom: 0px;
}

/* Style forms */
div.form_field {
    vertical-align: middle;
    margin-bottom: 6px;
}
div.form_field label {
    display: inline-block;
    width: 250px;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
}

div.openidcbut {
    font-size: 16px;
    background: #607d8b;
    color: #fff;
    padding-right: 8px;
    padding-left: 8px;
    margin-top:10px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    box-shadow: 0 3px 2px #263238;
    margin-left: 260px;
    width: 300px;
    text-align: center;
    display: inline-block;
}

/* change cursor to hand pointer for openidc auth, reset and submit buttons */
div.openidcbut:hover, input[type='reset']:hover, input[type='submit']:hover {
    cursor: pointer;
}


img.openidcimg {
    vertical-align: middle;
    margin: 0 0 3px 0;
    height: 26px;
    width: 26px;
}

span.openidctxt {
    vertical-align: top;
    display: inline-block;
}

div.form_field input, div.form_field select, div.form_field textarea, div.form_field input[type=file] {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    width: 300px;
    height: 37px;
    padding: 5px;
}

div.form_field input[type=file] {
    margin-left:10px;
}

div.form_field select {
    height: 42px;
}

div.form_field img {
    margin-left: 5px;
    margin-right: 5px;
    width: 300px;
    padding: 5px;
}

div.form_field img:hover {
    cursor: pointer;
}

div.form_field input, div.form_field textarea {
    border: 1px;
    border-color: lightgray;
    border-style: solid;
    box-shadow: inset 0 1px 3px #546E7A;
}

div.form_field textarea {
    vertical-align: middle;
    max-width: 300px;
    height: 110px;
}

div.aup {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 15px;
}

div.ugConfirmSupervisor {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 65px;
}

div.Githubaup {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 15px;
}

div.FormCheckbox {
    text-align: right;
    display: inline-block;
    vertical-align: middle;
/*    width: 575px; */
}

div.FormWrapper {
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    max-width: 600px;
    min-width: 320px;
}

div.captcha {
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    margin-bottom: 15px;
/*    margin-left: 256px; /* 250px width on label + 5px margin on input + 1px padding on input = 256px */
}

input.aup_checkbox {
    vertical-align: middle;
}

div.submit_box {
    float: right;
}

div.reset_box {
    float: left;
}

div#button {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    margin-right: 15px;
}

/* Style buttons to match material design style */
input#submitBtn, input#resetBtn {
    font-size: 14px;
    background: #607d8b;
    color: #fff;
    padding-right: 16px;
    padding-left: 16px;
    height: 36px;
    border-radius: 2px;
    box-shadow: 0 3px 2px #263238;
}

input#submitBtn:active, input#resetBtn:active {
    background: #455a64;
}

input#submitBtn:disabled, input#resetBtn:disabled {
    background: #b0bec5;
    box-shadow: none;
}

/* Styling for manpage list */
div.man_list_box {
    vertical-align: top;
    overflow: auto;
}

div.man_list {
    float: left;
    width: 33%;
}

@media screen and (max-width: 40em) {
    /* Switch to vertical display on small screens */
    div.man_list {
        float: none;
    }
}

/* Fix asciicast formatting */
pre.asciinema-terminal {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Float no content images right with padding
 *
 * Intended to be used for images that aren't essential to the content,
 * pretty pics on index pages and hardware pics.
 *
 * Should not be used for screenshots
 *
 * */
img.nocontentimg {
    float: right;
    padding-left: 5px;
    padding-bottom: 5px;
    width: 280px;
}

/* Hide various things from printed view */
@media print {
    /* Hide asciicasts in print */
    asciinema-player {
        display: none;
    }
    /* Hide no content images from print */
    img.nocontentimg {
        display: none;
    }
}

/* Hide various things from small screens */
@media screen and (max-width: 60em) {
    /* Hide no content images from small screens */
    img.nocontentimg {
        display: none;
    }
}

/* Reduce table minimum width so a combo of short and long headers / values
 * doesn't look silly and waste space
 */
th,td,tr {
    min-width: 1em !important;
}

/* Make tables fill the content column */
div.md-typeset__table {
    min-width: 100%;
}

.md-typeset table:not([class]) {
    display: table;
}

/* Disable floating next to tables */
div.md-typeset__scrollwrap {
    clear: both;
}

/* Switch instead of check box
 *
 * Adapted from https://github.com/Dogfalo/materialize
 *
 * Usage:
 *
 *     <form>
 *      <!-- Switch -->
 *       <div class="switch">
 *         <label>
 *           Off
 *           <input type="checkbox">
 *           <span class="lever"></span>
 *           On
 *         </label>
 *       </div>
 *       <!-- Disabled Switch -->
 *       <div class="switch">
 *         <label>
 *           Off
 *           <input disabled type="checkbox">
 *           <span class="lever"></span>
 *           On
 *         </label>
 *       </div>
 *     </form>
 * */
div.switch,
div.switch * {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    display: inline-block;
}

div.switch label {
    cursor: pointer;
    text-align: center;
}

div.switch label input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

div.switch label input[type=checkbox]:checked + .lever {
    background-color: #78909c; /* Checked background color */
}

div.switch label input[type=checkbox]:checked + .lever:before,
div.switch label input[type=checkbox]:checked + .lever:after {
    left: 18px;
}

div.switch label input[type=checkbox]:checked + .lever:after {
    background-color: #455a64; /* Checked switch color */
}

div.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 36px;
    height: 14px;
    background-color: #cfd8dc; /* Unchecked background color */
    border-radius: 15px;
    margin-right: 10px;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 16px;
}

div.switch label .lever::after, div.switch label .lever::before {
   content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: 0;
    top: -3px;
    -webkit-transition: left 0.3s ease,
                        background .3s ease,
                        -webkit-box-shadow 0.1s ease,
                        -webkit-transform .1s ease;
    transition: left 0.3s ease,
                background .3s ease,
                -webkit-box-shadow 0.1s ease,
                -webkit-transform .1s ease;
    transition: left 0.3s ease,
                background .3s ease,
                box-shadow 0.1s ease,
                transform .1s ease;
    transition: left 0.3s ease,
                background .3s ease,
                box-shadow 0.1s ease,
                transform .1s ease,
                -webkit-box-shadow 0.1s ease,
                -webkit-transform .1s ease;
}

div.switch label .lever::before {
    background-color: #cfd8dc; /* Click on initial highlight color */
}

div.switch label .lever::after {
    background-color: #f1f1f1;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
                0px 2px 2px 0px rgba(0, 0, 0, 0.14),
                0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

/* Switch active style */
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
    transform: scale(2.4);
    background-color: #455a64; /* Click off highlight color */
}

input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
    transform: scale(2.4);
    background-color: #cfd8dc; /* Click on hold highlight color */
}

/* Disabled Styles */
.switch input[type=checkbox][disabled] + .lever {
  cursor: default;
  background-color: #eceff1; /* Disabled background color */
}

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
  background-color: #b0bec5; /* Disabled switch color */
}

/* Announcement footnotes */
span.footnote {
    margin-top:-50px;
    padding-top: 50px;
    display: block;
}

.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


div.gh_message {
    border-style: solid;
    border-width: 1px;
    border-color: #263238;
    vertical-align: middle;
    text-align: center;
    max-width: 100%;
    height: 250px;
    padding: 50px;
    margin-bottom: 20px;
}
.gh_message_link {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* General style for code blocks */
.md-typeset pre {
    background: #2d2d2d !important; /* Dark gray background */
    color: #f8f8f2; /* Light text */
    border-radius: 6px; /* Rounded corners */
    padding: 0.2rem; /* Padding */
    overflow-x: auto; /* Horizontal scrolling for long code */
    font-family: "Courier New", Courier, monospace; /* Monospace font */
    font-size: 0.9rem; /* Larger font size */
    border: 1px solid #44475a; /* Border color */
}

/* Override syntax highlighting to match dark background */
.md-typeset pre code {
    background: none !important; /* Remove inline background from syntax highlighter */
    color: inherit !important; /* Use parent color */
}

/* Subtle shading for inline code */
.md-typeset code:not(pre code) {
    background: #f5f5f5; /* Light gray shading */
    color: #333; /* Default dark text */
    border-radius: 2px; /* Slightly rounded corners */
    padding: 0.1rem 0.3rem; /* Padding for inline code */
    font-family: "Courier New", Courier, monospace; /* Monospace font */
    font-size: 0.70rem; /* Slightly smaller font size for inline code */
    border: 1px solid #e0e0e0; /* Optional: thin border for inline code */
}