/* Version.css */

.msp-version {
  margin:0 auto;
  width:100%;
  max-width:768px;
  padding: 0 20px;

  h1 {
    font-size: 35px;
    margin:0;
  }
  h2 {
    margin: 15px 0 25px 0;
    font-size: 20px;
    line-height: 26px;
  }
}
.releases {
  
}
.releases .releases__banner {
  border-bottom: 1px solid #ced4da;
  padding: 50px 0;
  margin-top:25px;
}
.releases .releases__banner .v {
  font-size: 22px;
  margin:0 0 5px 0;
}
.release .release__pre .v .v__num::before {
  background-color:#cdcdcd;
  color:black;
  width:30px;
}

.releases__banner .v-mod {
  display:block;
  position:relative;
  padding-left: 20px;
  font-size:23px;
}
.releases__banner .v-mod .v-mod__letter {
  font-weight:bold;
  color:black;
  position:absolute;
  top:0;
  left:0;
  width:25px;
  height:30px;
  font-size: 32px;
  line-height: 15px;
  font-family: "Times New Roman";
}
.releases__banner .v-mod .v-mod__num {
  color:grey;
  height:30px;
  line-height:30px;
  display: inline-block;
  vertical-align: top;
}

.v {
  display:block;
}
.v .v__num {
  color:grey;
  display:block;
  padding-left: 30px;
  position:relative;
  height:30px;
  line-height:30px;
}
.v .v__num::before {
  display:block;
  content: "-";
  font-weight:bold;
  color:black;
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:30px;
  font-size: 30px;
  line-height: 24px;
  font-family: "Times New Roman";
}
.v .v__num.v__num--gamma::before {
  content:"γ";
  font-size:23px;
  line-height: 24px;
}
.v .v__num.v__num--beta::before {
  content:"β";
  line-height: 27px;
  font-size:19px;
}
.v .v__num.v__num--alpha::before {
  content:"α";
  line-height: 25px;
  font-size: 24px;
}
.releases .releases__banner h1 {
  margin: 0;
  font-weight: normal;
}
.releases .releases__current {
  border-bottom: 1px solid #ced4da;
  padding:50px 0;
}

.release {
  display: block;
  position: relative;
  padding: 0 0 0 130px;
}
.release .release__pre {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: auto;
  display: block;
  white-space: nowrap;
}
.release .release__pre .v {
  background-color:#e7e7e7;
  border-radius:3px;
  overflow:hidden;
}
.release .release__pre .v .v__num {
  background-color:#e7e7e7;
  color:#282828;
  text-align:center;
  font-weight:bold;
}
.releases__current .release .release__pre .v .v__num.v__num--gamma,
.release.release--major .release__pre .v .v__num.v__num--gamma {
  background-color: #d0e7fa;  
}

.releases__current .release .release__pre .v .v__num.v__num--gamma::before,
.release.release--major .release__pre .v .v__num.v__num--gamma::before {
  background-color: #5facf1;
  line-height: 21px;
}
.release .release__pre .v .v__num.v__num--gamma::before {
  line-height:21px;
}

.releases__list .release.release--major .release__pre .v .v__num.v__num--beta {
  background-color: #fcf29a;
}

.releases__list .release.release--major .release__pre .v .v__num.v__num--beta::before {
  background-color: #ffe600;
  line-height: 27px;
}
.releases__list .release .release__pre .v .v__num.v__num--beta::before {
  line-height: 27px;
}

.releases__list .release.release--major .release__pre .v .v__num.v__num--alpha {
  background-color: #ffabab;
}

.releases__list .release.release--major .release__pre .v .v__num.v__num--alpha::before {
  background-color: #ff7676;
  
}


.release .release__main {
  display:block;
}
.rel-btn {
  cursor: pointer;
    outline: none;
    border: 0;
    transition: 0.4s;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    margin: 0;
    background-color: transparent;
  position:relative;
}
.rel-btn::after {
  position:absolute;
  top:0;
  right:0;
  width:30px;
  height:30px;
  background-color:transparent;
  content:"";
  background-image:url(/images/icons/chevron-down.svg);
  background-repeat:no-repeat;
  background-size:34px 34px;
  display:block;
  background-position: center top;
  border-radius: 50%;
}
.rel-btn:focus {
  outline: 0;
  background-color:transparent;
}
.rel-btn:hover::after {
  background-color:#dadada;
  transition: 0.5s ease;
}
.rel-btn.open::after {
  transform: rotate(-180deg);
  transition: 0.5s ease;
}
.rel-btn__title {
  display:block;
  color:#444;
  margin:0 0 5px 0;
  font-family: Roboto;
  font-size:22px;
  font-weight: bold;
  line-height: 30px;
}
.rel-btn__summary {
  display:block;
  color:grey;
  font-family: Roboto;
  font-size:18px;
}
.rel-panel {
  max-height:0px;
  background-color: transparent;
  overflow: hidden;
  transition: max-height 500ms ease-out;
}
.rel-panel.visible {
  max-height: 1000px;
  transition: max-height 1000ms ease-in;
}
.rel-panel > * {
  font-size: 17px;
  line-height: 23px;
  margin: 15px 0 0 0;
}
.rel-panel ul {
  list-style-type:square;
}

.releases .releases__list > .release {
  margin:50px 0;
}

.releases__list .release__pre .v .v__num::after {
  display:block;
  content: " ";
  background-color: white;
  outline:1px solid black;
  border-radius:50%;
  position:absolute;
  top:10px;
  left:25px;
  width:10px;
  height:10px;
}
.releases__list .release.release--major .release__pre .v .v__num::after {
  display:none;
}
.releases__list .release__pre .v .v__num.v__num--init::after {
  background-color:white;
}
.releases__list .release__pre .v .v__num.v__num--alpha::after {
  background-color:#ff7676;
}
.releases__list .release__pre .v .v__num.v__num--beta::after {
  background-color:#ffe600;
}
.releases__list .release__pre .v .v__num.v__num--gamma::after {
  background-color:#5facf1;
}

@media only screen and (max-width: 568px) {
  .releases .releases__banner {
    margin-top:0;
  }
  .release {
    padding:0;
  }
  .release .release__pre {
    position:static;
    margin-bottom:15px;
  }
}