:root{
  --p-d: #D34E24;
  --p-m: #F28123;

  --s-d: #2B8FF3;
  --s-m: #2B8FF3;
}
body{
  background: url('/img/bg.svg');
  background-attachment: fixed;
  background-size: cover;
}
a.class{
  display: grid;
}
.activity.card .activity-container{
  display: grid;
  grid-template-columns: 24px 24px auto 24px 24px;
  grid-template-rows: 24px min-content min-content min-content min-content;
  grid-gap: .5em;
}
.activity.card .favorite{
  grid-column: 1 / 2;
}
.activity.card .rate{
  grid-column: 2 / 4;
  grid-row: 1;
  justify-self: start;

  white-space: nowrap;
}
.activity.card .title{
  grid-column: 1 / 6;
  grid-row: 2;
  margin: 0;
  padding-left: 4px;
}
.activity.card .author{
  grid-column-end: 6;
  grid-row: 1;
  justify-self: end;
}
.activity.card .desc{
  grid-column: 1 / 6;
  grid-row: 4;
  margin:0;

  text-align: justify;
  word-break: break-word;
}
.activity.card .attributes{
  grid-column: 1 / 6;
  grid-row: 3;
  margin:0;
  padding-left: 4px;
}
.activity.card .skills{
  grid-column: 1 / 6;
  grid-row: 5;
  margin:0;
}
.q{
  padding-bottom: 8px;
  font-weight: bold;
  font-size: 22px;
}
.answer-block{
  padding: 8px;
  padding-inline-start: 40px;
}
.answer-block ul{
  padding-inline-start: 0;
}
.min-number{
  min-width:50px;
}
.card.loader{
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: transparent;
  border:none;
  box-shadow: none;
}
.process{
  width: 26px; opacity:0.5;
  left:-1px;
  height: 26px;
  border-radius: 13px;
  padding: 0; margin:0;
  background: #2B8FF3;
  -webkit-transition: width 2s ease, opacity 2s ease;
  transition: width 2s ease, opacity 2s ease;
}
.navbar .button{
  position: fixed;
  width: 126px; opacity:1;
  height: 42px;
  top: 8px; right: -100%;
  border-radius: 17px;
  padding: 0; margin:0;
  background: #126df9;
  color: white;
  border: none;
  -webkit-transition: right 1.5s ease;
  transition: right 1.5s ease;
  text-align: center;
}
.diagram{
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: white;
  box-shadow: 0 0 3px 2px rgba(0,0,0,0.2);
}
.diagram .line{
  height: 34px;
  margin: 8px 0px;
  padding:0;
  position: absolute;
  border-radius: 0px;
  display: inline-block;
}
.line.gt{background-color: #5cfbbc;}
.line.d{background-color: #2B8FF3;}
.line.al{background-color: #fb5c9b;}
.line.c{background-color: #fbbc5c;}

.gt{color:#06e089; text-shadow: 1px 1px rgba(0,0,0,.3);}
.d{color:#065de0; text-shadow: 1px 1px rgba(0,0,0,.3);}
.al{color:#e0065d; text-shadow: 1px 1px rgba(0,0,0,.3);}
.c{color:#e08906; text-shadow: 1px 1px rgba(0,0,0,.3);}

a.menu-item{
  color: black;
}
a.menu-item:after{
  content: '';
  position: relative;
  background-color: var(--p-d);
  height: 2px;
  left: 20%;
  width: 0%;
  top:4px;
  border-radius: 2px 0px 0px 2px;
  display: block;
}
a.menu-item.active{
  color: #D34E24;
}
a.menu-item.active:after{
  width: 60%;
}
a.menu-item.active:hover:after{
  top: 5px;
}
table.contents{
  width:100%;
  border-collapse: collapse;
  text-align: center;
}
.contents td{
  display:inline-block;
  font-weight: bold;
  padding: 8px;
  min-width: 22%;
}
.radio.red input:checked + span:before,
.checkbox.red input:checked + span:before {
  background: var(--p-d);
}
form table td{
  padding: 8px;
}
.large{
  padding: 8px;
  font-size: 110%;
}
.attribute.skills{
  display: block !important;
  margin: 16px;
  margin-bottom:0;
  text-align: center;
}
.attribute.skills .chip{
    font-size: 75%;
    cursor: default;
    box-shadow: none;
    background-color: #ffc666;
    color: black;
    padding: 3px 6px;
}
.chevron{
  height: 50px;
  transform: translate(20px,-20px) rotate(-45deg);
}
.chevron i{
  opacity: .5;
  transition: all .4s;
  font-size: 50px;
}
.card.pointer:hover .title{
  text-decoration: underline;
  transition: all .4s;
}
.card:hover .chevron i{
  opacity: 1;
}
a.recolor{
  color: inherit;
}
#activitysearch{
  margin-block-end: 0;
}
#searchcard{
  max-width: 700px;
  margin: auto;
}
#searchcard .desc{
  margin:0;
}
#searchcard table{
  width:100%;
  text-align: center;
}
#searchcard table ul{
  margin-block-end: 0;
}
.flex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.flex .card{
  width: 300px;
  display: inline-block;
}
#activitycards .card .attributes{
  width: 100%;
}
#activitycards .card .desc{
  padding: 8px;
  border-radius:3px;
}
#activitycards .card[id^=activity] .desc{
  /*border: 3px solid #21a000;*/
  border-left: 3px solid var(--p-d);
  border-radius: 0px;
  text-align: left;
}
#plays{
  padding-inline-start: 0;
}
#plays li{
  list-style-type: none;
}
#plays .date{
  font-weight: bold;
  margin: 12px 0px 4px 0px;
}
#plays .play{
  margin-left: 50px;
}
#plays .comment{
  max-width: 350px;
  margin: 8px;
  margin-left: 100px;
  background-color: #ddd;
  padding: 4px;
  border-radius: 3px;

}
.card.dark .desc {
  background-color: #fff !important;
  padding: 4px;
  border-radius: 3px;
}
.favorite{
  color: #cc2900;
  vertical-align: sub;
  padding-right: 8px;
  display: inline-block;
  cursor: pointer;
}
.favorite i{
  cursor: inherit;
}
.favorite i:after{
  transition: all .4s;
}
.favorite[value=false] i:after,
.favorite[value=true]:hover i:after{
  content: 'favorite_border';
}
.favorite[value=true] i:after,
.favorite[value=false]:hover i:after{
  content: 'favorite';
}
.g-logo{
  height: 80px;
  padding: 4px;
  position:relative;
  top:0;
  right:0;
}