/***************************
    TOP NAV BAR 
****************************/
:root > * {
    --md-primary-fg-color:        #011e41;
    --md-primary-fg-color--light: #0077a0;
    --md-primary-fg-color--dark:  #00053e;
}


/***************************
    LEFT NAV BAR 
****************************/


/*.md-sidebar--primary a.md-nav__link::before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    font-size: 0.5em;
}
.md-sidebar--primary a.md-nav__link--active::before {
    font-family: "Font Awesome 5 Free";
    content: "\f111";
    font-weight: 900;
    font-size: 0.5em;
}*/


/***************************
    RIGHT SIDE BAR 
****************************/

nav.md-nav--secondary ul.md-nav__list>li.md-nav__item {
    font-weight: bold;
    /* color: #546E7A; */
}

nav.md-nav--secondary ul.md-nav__list li.md-nav__item>nav.md-nav ul.md-nav__list li.md-nav__item {
    font-weight: normal;
    /* color: #5f97af; */
    filter: brightness(.8);
}


/***************************
    SYNTAX HIGHLIGHTING 
****************************/

.codehilite {
    font-weight: 600;
}


/* JavaScript Syntax */

.codehilite .k,
.codehilite .kd {
    /* variables */
    color: #0077AA;
}

.codehilite .mi,
.codehilite .mf {
    /* hard-coded values */
    color: #709F10;
}

.codehilite .p {
    /* curly braces */
    color: #9B9B9B;
}

.codehilite .o {
    /* operators */
    color: #9A6E3A;
}

.codehilite .c1 {
    /* comments */
    color: #B0B0B0;
}

.codehilite .nx {
    color: #990055;
    /* methods */
}


/* HTML Syntax */

.codehilite .nt {
    color: #990055;
    /* tags */
}

.codehilite .s {
    color: #0077AA;
    /* attribute values */
}

.codehilite .na,
.codehilite .s2 {
    color: #709F10;
    /* attributes & strings */
}

input {
    border: 1px solid gray;
}


/* tab banner */

html .md-typeset .superfences-tabs>label:hover {
    color: #f50057;
}

.md-typeset .superfences-tabs>input:checked+label {
    color: #f50057;
}


/***************************
        FORMS 
****************************/

.lecture_form {
    background: #F5F5F5;
    padding: .525rem .6rem
}

.lecture_form label {
    display: block;
}

.lecture_form input {
    margin-bottom: 1.5em;
}

.lecture_form input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-size: 16px;
    display: block;
    background: #0077AA;
    border: 0.16em solid #fff;
    border-radius: 0.7em;
    font-family: Arial;
    color: #ffffff;
    padding: 0.3em 1.2em;
    text-decoration: none;
    transition: all 0.2s;
}

.lecture_form input[type="submit"]:hover,
input[type="button"]:hover {
    border-color: rgb(21, 208, 214);
}


/***************************
        Sample Output 
        The div will wrap
****************************/

div.sampleOutput,
pre.sampleOutput {
    font-weight: bold;
    font-size: 1.3em;
    font-family: "Courier New", Courier, monospace;
    border: .15em solid #0082a7;
    border-radius: .3em;
    padding: .525rem .6rem;
    padding-left: 3rem;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
}


/***************************
        Colors for text 
****************************/

.dkred {
    color: rgb(116, 18, 51);
}


/***************************
        Tables styles
****************************/

table tr:nth-child(even) {
    background-color: #eee;
}

th,
td {
    border-right: 1px solid #eeeeef;
}

th:last-child,
td:last-child {
    border-right: none;
}

.md-typeset table:not([class]) {
    font-size: 16px;
}


/***************************
        Horizontal rule styles
****************************/

.md-typeset hr {
    border-bottom: .10em solid #0082a7;
}


/***************************
    Admonition font size
****************************/

.md-typeset .admonition,
.md-typeset details {
    font-size: initial;
}


/***************************
    Admonition settings
****************************/

.md-typeset .admonition.settings,
.md-typeset details.settings {
    border-left: .4rem solid #a0f;
}

.md-typeset .admonition.settings>.admonition-title,
.md-typeset details.settings>.admonition-title,
.md-typeset details.settings>summary {
    border-bottom: .1rem solid rgba(170, 0, 255, .1);
    background-color: rgba(170, 0, 255, .1);
}

.md-typeset .admonition.settings>.admonition-title:before,
.md-typeset details.settings>.admonition-title:before,
.md-typeset details.settings>summary:before {
    color: #a0f;
    content: "settings"
}