/*------------------------------------*\
  #OVERRIDES
\*------------------------------------*/


/**
 * Yesplan color scheme
 */

[data-md-color-scheme="yesplan"] {
  --md-default-fg-color: hsla(0, 0%, 0%, .92);
  --md-default-fg-color--light: hsla(0, 0%, 0%, .58);
  --md-default-fg-color--lighter: hsla(0, 0%, 0%, .36);
  --md-default-fg-color--lightest: hsla(0, 0%, 0%, .08);

  --md-default-bg-color: hsla(0, 0%, 100%, 1);
  --md-default-bg-color--light: hsla(0, 0%, 100%, .7);
  --md-default-bg-color--lighter: hsla(0, 0%, 100%, .4);
  --md-default-bg-color--lightest: hsla(0, 0%, 100%, .14);

  --md-primary-fg-color: hsla(216, 60%, 40%, 1);
  --md-primary-fg-color--light: hsla(0, 0%, 0%, 1);
  --md-primary-fg-color--dark: hsla(0, 0%, 0%, 1);

  --md-primary-bg-color: hsla(0, 0%, 100%, 1);
  --md-primary-bg-color--light: hsla(0, 0%, 100%, .7);

  --md-accent-fg-color: hsla(211, 94%, 28%, 1);
  --md-accent-fg-color--transparent: hsla(0, 0%, 0%, .1);
  --md-accent-bg-color: hsla(0, 0%, 100%, 1);
  --md-accent-bg-color--light: hsla(0, 0%, 100%, .7);

  --md-code-fg-color: hsla(345, 69%, 46%, 1);
  --md-code-bg-color: hsla(343, 37%, 96%, 1);
  --md-code-hl-color: hsla(0, 0%, 0%, .5);
  --md-code-hl-number-color: hsla(0, 67%, 50%, 1);
  --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
  --md-code-hl-function-color: hsla(291, 45%, 50%, 1);
  --md-code-hl-constant-color: hsla(250, 63%, 60%, 1);
  --md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
  --md-code-hl-string-color: hsla(150, 63%, 30%, 1);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);

  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: hsla(211, 94%, 38%, 1);
  --md-typeset-mark-color: hsla(0, 0%, 0%, .5);
  --md-typeset-del-color: hsla(6, 90%, 60%, .15);
  --md-typeset-ins-color: hsla(150, 90%, 44%, .15);
  --md-typeset-kbd-color: hsla(0, 0%, 98%, 1);
  --md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
  --md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);

  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-footer-fg-color: hsla(0, 0%, 100%, 1);
  --md-footer-fg-color--light: hsla(0, 0%, 100%, .86);
  --md-footer-fg-color--lighter: hsla(0, 0%, 100%, .5);
  --md-footer-bg-color: hsla(0, 0%, 0%, .87);
  --md-footer-bg-color--dark: hsla(0, 0%, 0%, .32);
}


/**
 * Resize the logo
 */

.md-header-nav__button.md-logo img,
.md-header-nav__button.md-logo svg {
  height: auto;
  width: 4.2rem;
}


/**
 * Custom link color in announce
 */

.md-announce a {
  color: #FFDC00;
  opacity: .9;
}

.md-announce a:focus,
.md-announce a:hover {
  color: #FFDC00;
  opacity: 1;
}


/**
 * Increase text size for admonitions
 */

.md-typeset .admonition {
  font-size: .7rem;
}


/**
 * Override default `tip` admonition colors
 */

.md-typeset .admonition.tip,
.md-typeset details.tip {
  background-color: hsla(84, 100%, 33%, .03);
  border-color: hsl(84, 100%, 33%);
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: hsla(84, 100%, 33%, .1);
  border-color: hsl(84, 100%, 33%);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: hsl(84, 100%, 33%);
}




/*------------------------------------*\
  #ADDITIONS
\*------------------------------------*/


/**
 * Language selection
 */

.yp-lang {
  color: var(--md-primary-bg-color);
  background-color: var(--md-primary-fg-color);
  transition: background-color 250ms;
  list-style: none;
  margin: 0 0 0 .6rem;
  padding: 0;
}

.yp-lang__item {
  display: inline-block;
  margin: 0 .1rem;
}

.yp-lang__link {
  font-size: .7rem;
  opacity: .7;
}

.yp-lang__link--active {
  opacity: 1;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
}

.yp-lang__link:focus,
.yp-lang__link:hover {
  color: inherit;
  opacity: 1;
}


/*------------------------------*/
/* Styling specific to learning */
/*------------------------------*/

/* Two columns on homepage */
.left-column {
    float: left;
    margin-right: 0.938rem;
}
.left-column img {
    border-width: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 1.25rem 1.25rem;
    width: 12.75rem;
}
.right-column {
    margin-left: 13.75rem;
}

.two-columns::after {
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
}
.right-column h4 a {
    color: var(--md-typeset-color);
}
.right-column h4 a:hover {
    color: var(--md-typeset-color);
}
.right-column h4 a:focus {
    color: var(--md-typeset-color);
}
/* On small screens */
@media only screen and (max-width: 76.1875em) {
/* Remove float of left column*/
.left-column {
    float: none;
}
/* And margin-left of right column*/
.right-column {
    margin-left: 0;
}
}

/* Button for call to action on homepage */
.callToAction {
    background-color: #005AB8;
    background-image: linear-gradient(to bottom, #0c6ecf, #0059b8);
    border-color: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 0.188rem;
    box-shadow: 0 0.063rem 0 rgba(0, 0, 0, 0.05), inset 0 0.063rem 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: inline-block;
    margin: 0;outline: none;
    padding: 0.5rem 0.875rem;
    text-align: center;
    transition: background-color 300ms ease-in-out;
    white-space: nowrap;
    border-color: rgba(0, 0, 0, 0.25);
    font-size: 0.875rem;
    transition: background-color 300ms ease-in-out;
}
.callToAction:hover {
	background-image: linear-gradient(to bottom, #1274d5, #065fbe);
	color: rgba(255, 255, 255, 0.96);
}


/* Video and iframe
 * Aspect Ratio Box
 * Allows the online learning modules to resize with the window
 * src: https://kozmicluis.com/responsive-videos-javascript-jquery/
 *
 * 1. aspect ratio of Captivate generated #main_container
 *    (height + borders) / (width + borders) *100
 *    i.e. (685 + 2) / (1000 + 2) *100
 *
 * 2. use identical border color as .list-group-item
 *
 * 3. use rounded border cf. .list-group-item
 *
 */

.videoWrapper {
  position: relative;
  padding-bottom: 68.562874251%; /* [1] */
  height: 0;
  overflow: hidden;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.063rem solid #ddd !important; /* [2] */
  border-radius: 0.188rem; /* [3] */
}

/*----------------------------------*/
/* Below: Changes to Material theme */
/*----------------------------------*/
/* Make content wider to allow wide video*/
.md-content {
    max-width: calc(100% - 6.1rem * 2);
}
/****************************************************************************************/
/* Layout of playlist. Long selectors because the original css also uses long selectors */
/* Set margin and font-size for each item in "playlist"*/

/* Image in anchor of playlist */
.md-nav__link.video img  {
    margin-right: 0.625rem;
    float: left;
    width: 3.688rem;
}
.md-nav__link.video .video-info  { 
    display: block;
    font-size: 0.6rem;
    margin-top: 0.1rem;
}
.md-nav__link {
    color: #666;
}
.md-nav__link--active.video {
    border: 0.188rem solid var(--md-accent-fg-color);
}
.md-nav__link.video:hover {
    background-color: #eeeeff;
}
/*remove image from small screen and change behaviour for active items and on hover*/
@media only screen and (max-width: 76.1875em) {
.md-nav__link--active.video {
    border: none;
}
.md-nav__link.video:hover {
    background-color: white;
}
.md-nav__link.video img {
      display: none;
  }

/* Restore original value on small screen*/
.md-content {
    max-width: 100%;
}  
}

/***********************/
/* Video summary and toc */
div.video h1 {
    font-size: 1.75rem;
    font-weight: 500;
    margin: 0.5em 0 0.5em 0;
    padding-top: 0.25rem;
    border-top: 0.063rem solid #eee;
}

div.video p {
    font-size: 0.75rem;
    color: #666;
}
div.video ul li {
    font-size: 0.75rem;
    color: #666;
}

div.video ul li ul li {
    font-size: 0.75rem;
    color: #666;
}