@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

html, body {
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  height: 100%;
}

#wrapper {
  min-height: 100vh;
  max-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

#content {
  min-width: 0;
  min-height: 100vh;
  height: 100%;
  text-align: center;
  flex: 1 1 900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#content #center-content{
  margin-top: 1em;
  text-align: left;
  margin-bottom: 50px;
}

#footer {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
}

#footer div{
  opacity: 0.4;
  transition: all 0.3s;
}

#footer div:hover {
  opacity: 1;
}

#sidebar-wrapper {
  flex: 0 0 200px;
  min-height: 100%;
  background: #7386D5;
  color: #fff;
  transition: all 0.3s;
}

#center-content {
  transition: all 0.3s;
}

#center-content {
  min-width: 100%;
}

#sidebar {
  background: #7386D5;
  width: 200px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  box-shadow: 0px 0px 10px black;
}

#sidebar ul li.purplish {
  background: #a386D5;
}

@media only screen and (max-width: 950px) {
  #apts_foot {
    display: none;
  }
}

@media only screen and (min-height: 750px) and (min-width: 814px){
  #sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
  }
}

@media only screen and (max-height: 750px) {
  #sidebar ul:not(:first-child) {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 813px) {
  #sidebar {
    width: 100%;
    min-height: 0vh;
    box-shadow: none;
  }

  #sidebar-wrapper {
    flex: 0 0 auto;
    min-height: 0px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
  }

  #wrapper {
    flex-direction: column;
  }

  #sidebar ul:not(:first-child) {
    margin-top: 30px;
  }
}

.spacer{
  flex: 1 10 0px;
}

.vflex {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#sidebar ul {
  margin-bottom: 0px;
}

#sidebar>ul>li>a, #sidebar>ul>li>span {
  color: white;
  display: block;
  padding: 8px;
  padding-left: 15px;
  font-size: 1.2em;
  line-height: 1.3em;
  overflow-x: hidden;
}

#sidebar>ul>li>span>a {
  text-decoration: none;
  color: white;
}

#sidebar>ul>li>a {
  padding-left: 25px;
}

.pl-13 {
  padding-left: 35px !important;
}

.pl-14 {
  padding-left: 45px !important;
}

#sidebar>ul>li .small {
  font-size: 1em;
}

#sidebar>ul>li>a:hover {
  color: #7386D5;
  background: #fff;
  text-decoration: none;
}

a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

.card-header h4 {
  margin: 0px;
}

#github a {
  display: inline-block;
  text-decoration: none;
  padding: 10px;
}

.col-auto {
  max-width: 100% !important;
  word-wrap: break-word !important;
}

i.material-icons {
  vertical-align: middle !important;
}

.cgray {
  color: gray;
}

.cred {
  color: red;
}

/* Testing stage colors */
.sub_wait{
    background-color: #fa8af2;
}

.sub_public_testing{
    background-color: lightpink;
}

.sub_wait_nonpublic_testing{
    background-color: #ffff70;
}

.sub_nonpublic_testing{
    background-color: lightgreen;
}

/* Submission colors */
.cc{
    font-weight: bolder;
}

.cc_sub{
    font-weight: bolder;
}

.c_score{
    font-weight: bolder;
}

.c_OK{
    color: darkgreen;
}

.c_CE{
    color: RED;
}

.c_WAIT{
    color: black;
}

.c_TESTING{
    color: darkblue;
}

.c_IE1, .c_IE2, .c_UNKNOWN{
    color: purple;
}

.white {
  color: white;
}

.break-word {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
}

.private-result {
  background-color: #eff1f0;
}

td.message {
  overflow-x: auto;
  max-width: 1px; /* Why dis works */
}

.simple {
  overflow: visible;
}

.rectangle {
  width: 15px;
  height: 15px;
  display: inline-block;
}

.border {
  border: 3px dotted black;
}

.testresult tbody:before {
    content: "";
    display: block;
    margin: 0px;
    padding: 0px;
    line-height: 0px;
    height: 0px;
    color: transparent;
}

.testresult .initial {
  border-top: 2px solid purple;
}

.md-float-right {
  float: right;
}

@media only screen and (max-width: 800px) {
  .md-float-right{
    float: none;
  }
}

td pre {
  margin-bottom: 0px;
}

.tex2jax_process hr {
  overflow: auto !important;
}

img {
  max-width: 100%;
}