/* 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 */
#accountFormTable {
  max-width: 800px;
}

.secureFormBtn{
    font-size: 16px;
    background: #607d8b;
    color: #fff !important;
    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 reset and submit buttons */
input[type='reset']:hover, input[type='submit']:hover {
    cursor: pointer;
}

#accountFormTable input[type=select], #accountFormTable input[type=text], #accountFormTable input[type=file],
#accountFormTable select, #accountFormTable textarea, #accountFormTable span {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 16px;
    width: 400px;
    height: 37px;
    padding: 5px;
}

#accountFormTable select {
    height: 42px;
}

#accountFormTable img {
    margin-left: 5px;
    margin-right: 5px;
    width: 300px;
    padding: 5px;
}

#accountFormTable img:hover {
    cursor: pointer;
}

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

#accountFormTable textarea {
    vertical-align: middle;
    height: 110px;
}

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

input.aup_checkbox {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    font-size: 16px;
    margin-top: 10px;
    margin-left: 50px;
    width: 35px;
    height: 35px;
}

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#cancelBtn {
    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#cancelBtn:active {
    background: #455a64;
}

input#submitBtn:disabled, input#cancelBtn: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;
}