* {box-sizing: border-box;}

    .wrapper {
        max-width: 1400px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }


    .wrapper > * {
        /*    border: 2px solid #f08c00; */
        border 0;
         padding: 5px;
    }

    .wrapper nav {
        padding: 0;
    }

    a {
        text-decoration: none;
        color: #1c75bc;
    }

    nav ul {
        list-style: none;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }



    footer ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        /* justify-content: flex-start; */
        flex-direction: row;
    }

    footer ul ul {
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 2em;
    }

    footer li {
        margin: 0;
        padding-bottom: 0.4em;
    }

    footer h1 {
        font-weight: bold;
        text-align: left;
        font-size: 1.0em;
    }

    header ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    aside ul {
        margin-bottom: 0;
        margin-top: 15px;
        margin-bottom: 15px;
        left: 15px;
        font-size: 1.0em;
    }

    aside h1 {
        font-weight: bold;
        text-align: left;
        font-size: 1.4em;
        /* color: #dddddd; */
        color: #f8f8ff;
        padding: 15px;
    }

    ad h1 {
        font-weight: bold;
        text-align: left;
        font-size: 1.4em;
        /* color: #dddddd; */
        color: #f8f8ff;
        padding: 15px;
    }

    aside h1 a {
        font-weight: bold;
        font-size: 1.4em;
        text-align: left;
        font-size: 1.0em;
        color: #f8f8ff;
/*        color: #dddddd; */
    }

    aside {
        color: #f8f8ff;
        padding: 5px;
        font-size: 1.0em;
    }

    aside ul label,
    aside ul a {
        padding-left: 15px;
    }

    aside ul ul label,
    aside ul ul a {
        padding-left: 30px;
    }

    aside ul ul ul label,
    aside ul ul ul a {
        padding-left: 45px;
    }

    aside ul ul ul ul label,
    aside ul ul ul ul a {
        padding-left: 60px;
    }

    aside li,
    aside a,
    aside ul label,
    aside ul li,
    aside ul a,
    aside ul ul label,
    aside ul ul li,
    aside ul ul a,
    aside ul ul ul label,
    aside ul ul ul li,
    aside ul ul ul a {
        list-style: none;
        margin: 0;
        background: #144f80;
/*        background: #35383d;   */
    }


    aside ul label:hover,
    aside ul a:hover,
    aside ul ul label:hover,
    aside ul ul a:hover,
    aside ul ul ul label:hover,
    aside ul ul ul a:hover {
        /*        background: #4d5158;  */
        background: #1c75bc;
    }


    aside a {
        color: #a0f6aa;
        text-decoration: none;
        padding: 0.2em 0em 0.2em 0em;
    }




    aside .cd-accordion-menu {
        width: 100%;
        max-width: 600px;
        /*        background: #35383d;   */
        background: #144f80;
    }

    aside .cd-accordion-menu ul {
        /* by default hide all sub menus */
        display: none;
    }

    aside .cd-accordion-menu li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    aside .cd-accordion-menu input[type=checkbox] {
        /* hide native checkbox */
        position: absolute;
        opacity: 0;
    }

    aside .cd-accordion-menu label,
    aside .cd-accordion-menu a {
        position: relative;
        display: block;
        color: #f8f8ff;
        /*         color: #dddddd; */
        font-size: 1.0em;
    }

    aside i {
        font-size: 1.0em;
    }

    aside a::before {
        content: '\00a0';
        width: 16px;
        height: 16px;
        display: inline-block;
        font-size: inherit;
        text-rendering: auto;
    }


    aside .cd-accordion-menu label::before
    {
        /* icons */
        font:  normal normal normal 1.0em/1 FontAwesome;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
        font-size: inherit;
        text-rendering: auto;
        content: '\f0da';
        display: inline-block;
        width: 16px;
        height: 16px;

        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform:  translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }

    aside .cd-accordion-menu label {
        cursor: pointer;
    }


    aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
        /* rotate arrow */
        -webkit-transform: translateY(20%) rotate(90deg);
        -moz-transform: translateY(20%) rotate(90deg);
        -ms-transform:  translateY(20%) rotate(90deg);
        -o-transform: translateY(20%) rotate(90deg);
        transform: translateY(20%) rotate(90deg);

    }


    aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
    aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
        /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
        /* show children when item is checked */
        display: block;
    }


    main .cd-accordion-menu {
        width: 100%;
        max-width: 600px;
    }

    main .cd-accordion-menu ul {
        /* by default hide all sub menus */
        display: none;
    }

    main .cd-accordion-menu li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    main .cd-accordion-menu input[type=checkbox] {
        /* hide native checkbox */
        position: absolute;
        opacity: 0;
    }

    main .cd-accordion-menu label {
        position: relative;
        display: block;
        font-size: 1.0em;
    }



    main .cd-accordion-menu ul,
    main .cd-accordion-menu li {
        list-style: none;
    }

    main .cd-accordion-menu label::before
    {
        /* icons */
        font:  normal normal normal 1.0em/1 FontAwesome;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        font-size: inherit;
        text-rendering: auto;
        content: '\f0da';
        display: inline-block;
        width: 16px;
        height: 16px;

        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform:  translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }

    main .cd-accordion-menu label {
        cursor: pointer;
    }


    main .cd-accordion-menu input[type=checkbox]:checked + label::before {
        /* rotate arrow */
        -webkit-transform: translateY(20%) rotate(90deg);
        -moz-transform: translateY(20%) rotate(90deg);
        -ms-transform:  translateY(20%) rotate(90deg);
        -o-transform: translateY(20%) rotate(90deg);
        transform: translateY(20%) rotate(90deg);

    }


    main .cd-accordion-menu input[type=checkbox]:checked + label + ul,
    main .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
        /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
        /* show children when item is checked */
        display: block;
    }



    user ul {
        list-style: none;
        margin: 0;
        padding: 0.2em 0.0em 0.2em 0.0em;
        display: flex;
        justify-content: flex-end;
    }

    user a i {
        color: #1c75c;
    }

    nav li {
        margin: 0;
        padding: 0.2em;
    }

    nav a {
        margin: 1em;
    }

    nav a,
    nav a i {
        color: white;
    }

    nav li:hover,
    nav li:hover a,
    nav li:hover a i {
        color: #1c75bc;
        background: white;
    }

    /*
    nav li.selected {
        color: #1c75bc;
        background: white;
    }
      */

    .nav-active,
    .nav-active a,
    .nav-active a i {
        color: #1c75bc;
        background: white;
    }



.main-head {
    grid-area: header;
    /*    background: #ededed; */
    background: #f8f8ff;
}



.main-user {
    grid-area: user;
/*    background: #ededed; */
    background: #f8f8ff;
}

.content {
  grid-area: content;
  padding:  1.2em 1.2em 1.2em 1.2em;
  font-size: 1.3rem;
}

.content h1 {
    font-size 1.3em;
    font-weight: normal;
}

.content h2 {
    font-size 1.2em;
    font-weight: normal;
}

.content h3 {
    font-size 1.1em;
    font-weight: bold;
}

.content em {
    font-style: italic;
}

.main-nav {
    grid-area: nav;
    /* background: #1c75bc; */
    background: #1c75bc;
    /* background: #144f80; */
}

.side-nav {
    grid-area: side-nav;
    background: #1c75bc;
    /*    background: #144f80; */
    /* background: #1c75bc; */
}

.side {
  grid-area: sidebar;
  /*  background: #35383d; */
  background: #144f80;
  /* border-top: 1px solid #dddddd; */
  padding: 0;
}

.sideheader {
    grid-area: side-header;
    color: #f8f8ff;
    /* color: #dddddd; */
  background: #144f80;
/*    background: #35383d; */
    padding: 0;
}

.side h2 {
        color: #f8f8ff;
        /*     color: #dddddd; */
    font-weight: bold;
    text-align: left;
    font-size: 1.0em;
    padding: 5px;
    margin: 0;
    margin-left: 30px;
    padding-bottom: 0;
}

.sideheader h1 {
    font-weight: bold;
    text-align: left;
    font-size: 1.4em;
    color: #f8f8ff;
    /* color: #dddddd; */
    padding: 5px;
    margin: 0;
    margin-left: 30px;
    padding-bottom: 0;
}

.ad {
  grid-area: ad;
  background: #144f80;
  /* background: #35383d; */
  color: #dddddd;
  padding: 1em 1em 1em 1em;
}

.ad img {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px;
}

.ad a {
    color: white;
}


.main-footer {
  grid-area: footer;
  /* background: #ededed; */
  background: #f8f8ff;
  padding:  1.2em 1.2em 1.2em 1.2em;
}

.wrapper {
  display: grid;
/*  grid-gap: 2px; */
  grid-template-areas:
  "header"
      "user"
      "nav"
   "content"
   "sidebar"
   "ad"
   "footer";
}

.main-content {
    list-style: none;
    margin: 0;
}


.main-content li {
    margin: 0;
    overflow-x: hidden;
}



.main-content li.grid_2 {
    grid-column-end: span 1;
}

.main-content li.grid_3 {
    grid-column-end: span 1;
}

.main-content li.grid_3 {
    grid-column-end: span 4;
}


.maxheight {
    max-height: 300px;
    overflow: scroll;
}

.maxheightwidth {
    position: relative;
    max-height: 300px;
    overflow: scroll;
}

.maxheightwidthcontent {
    position: relative;
    max-width: 700px;
    overflow: scroll;
}

.main-content li.grid_4 {
    grid-column-end: span 1;
}

.main-content li img {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px;
}



@media  only screen and (min-height: 600px) {
    .maxheight {
        max-height: 450px;
        overflow: scroll;
    }
}

@media only screen and (min-height: 600px) {
    .maxheight {
        max-height: 450px;
        overflow: scroll;
    }
}

@media only screen and (min-height: 800px) {
    .maxheight {
        max-height: 600px;
        overflow: scroll;
    }
}

@media only screen and (min-height: 1000px) {
    .maxheight {
        max-height: 800px;
        overflow: scroll;
    }
}


@media  only screen and (max-width: 600px) {
    nav a {
        font-size: 0px;
    }

    nav a i {
        font-size: 20px;
    }

    #theplot .bk-grid-column {
        display: none;
    }

    #theplot .bk-plot-layout {
        position: auto;
        width: 90%;
        height: auto;
        display: inline;
    }
}

h3 a {
    color: black;
}



@media only screen and (min-width: 450px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
    "header  header"
        "user user"
        "side-nav     nav"
        "sidebar content"
      "sidebar content"
      "ad      footer";
  }


  nav ul {
      display: flex;
      justify-content: space-between;
  }

  header ul {
/*      flex-direction: row;*/
      display: flex;
      justify-content: space-between;
  }

   .main-content {
       display: grid;
       grid-template-columns: repeat(2,1fr);
       grid-gap: 10px;
   }

   .main-content li.grid_2 {
       grid-column-end: span 2;
   }

   .main-content li.grid_3 {
       grid-column-end: span 2;
   }

   .main-content li.grid_4 {
       grid-column-end: span 2;
   }

}


@media only screen and (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
    "header header  user"
        "side-nav nav  nav"
        "sidebar content content"
        "sidebar     content content"
        "ad     content content"
        "ad  footer footer"
        "ad  footer footer"
  }


  nav ul {
      flex-direction: row;
  }

   header ul {
     flex-direction: row;
   }

   .main-content {
       display: grid;
       grid-template-columns: repeat(4,1fr);
       grid-gap: 10px;
   }

   .main-content li.grid_2 {
       grid-column-end: span 2;
   }

   .main-content li.grid_3 {
       grid-column-end: span 3;
   }

   .main-content li.grid_4 {
       grid-column-end: span 4;
   }

}

@media print {
    .wrapper {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-areas:
        "content content content content"
    }

    header, ad, user, nav, aside, footer {
        display: none;
    }

    * {
        -webkit-transition: none !important;
        transition: none !important;
    }


    body {
        color:#000;
        background: #fff;
    }

    body, content {
        width: 100%;
        display: block;
        min-height: 100%;
    }

    @page {
        margin: 2cm;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    ul, img, table {
        page-break-inside: avoid;
    }

    table tr td {
        vertical-align: middle;
    }
}

aside .cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}