/* Colors are taken from https://design-guidelines.web.cern.ch/guidelines/colours */

@media only screen and (min-width: 76.25em) {
  .md-main__inner {
    max-width: none;
  }
  .md-sidebar--primary {
    left: 0;
  }
  .md-sidebar--secondary {
    right: 0;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;
  }
  .md-header {
    background-image: url(cern_header.jpg);
    background-position: right;
    background-repeat: no-repeat;
    background-color: #fff !important;
  }

  .md-main {
    background-color: rgb(56, 92, 180);
    color: white;
  }

  .md-search__form ::-webkit-input-placeholder { /* Edge */
    color: rgb(54, 70, 78) !important;
  }

  .md-search__form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(54, 70, 78) !important;
    opacity: 1; /* Firefox */
  }

  .md-search__form :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(54, 70, 78) !important;
  }

  .md-search__form ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(54, 70, 78) !important;
  }

  .md-source{
    /* Use GitLab color */
    color: #e24329 !important;
  }
}

@media (max-width:76.25em){
  /* We replace header, icon and nav colors on small screens */
  .md-nav__button.md-logo img{
    background: url("LogoOutline_LogoOutline-White.svg") no-repeat 0 0;
    width: 0 !important;
    height: 0 !important;
    /* Same as material relative sizes */
    padding: 2.4rem 0 0 2.4rem;
  }

  .md-nav{
    background-color: var(--md-primary-fg-color) !important;
  }

  .md-header .md-header-nav{
    color: white !important;
  }
  .md-content {
    background-color: white;
    color: black;
    box-shadow: none !important;
  }

  .md-nav .md-nav__title{
    color: white !important;
  }

  .md-search__input + .md-search__icon {
    color: white !important;
  }
}

.md-header-nav__button.md-logo img {
  width: 1.5rem;
  height: 1.5rem;
}

.md-sidebar {
  scrollbar-color: #0033A0 #6B84C5;
}

.md-header {
  height: 3.4rem !important;
}

.md-header .md-header-nav {
  color: black;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.md-content {
  background-color: white;
  color: black;
  box-shadow: 0 0 2.2rem #0033A0,0 .2rem .4rem rgba(0,0,0,.2);
  width: 83%;
}

.md-footer {
  background-color: #0033A0 !important;
}

.md-content article.md-content__inner {
  padding-bottom: 2em;
  min-width: 800px;
}

.md-container .md-main .md-main__inner {
  height: initial !important;
}

:root {
  /* Primary color shades, ref. https://squidfunk.github.io/mkdocs-material/getting-started/#color-palette */
  --md-primary-fg-color: #0033A0;
	--md-primary-fg-color--light: #6B84C5;
	--md-primary-fg-color--dark: #0033A0;
	--md-primary-bg-color: #333333;
	--md-primary-bg-color--light: #CCCCCC;
}

.md-nav__link[data-md-state="blur"] {
  color: #9BAEDB;
}

.md-nav__item .md-nav__link--active {
  color: #9BAEDB;
}

/* Use this to alter the custom banner on the footer we add through theme partials*/

.notice_footer{
  font-size: large;
  background: #0033A0;
  text-align: center;
  color: white;
}

.notice_footer a{
  color: #9BAEDB;
  text-decoration: none; /* no underline */
}

.adv_s {
  color: #ff0000;
  font-weight: bold;
}

.adv_b {
  color: #0000ff;
  font-weight: bold;
}

.adv_e {
  color: #00ff00;
  font-weight: bold;
}


/* Float source link on custom footer */

.md-footer-nav__source{
  padding: 0 1em 0 1em;
  /* As for next/previous section */
  margin-right: auto;
  margin-left: auto;
  max-width: 61rem;
}

.md-footer-nav__source a{
  float: right;
}

.md-footer-nav__source a .md-source__repository{
  max-width: 100%;
}