.pt50 {
   padding-top: 50px
}
.flex-top {
   align-items:flex-start !important;
}
.before, .after, .compression {
   font-weight: bold;
   font-size: 130%;
   margin-right: 20px;
}

.formbox {
   background-color: #efefef;
   box-shadow: 0 0 6px gray;
   padding: 40px;
   margin-bottom: 20px;
   border-radius: 20px;
}

#htmlUrl, .additionalUrls .additionalHtmlUrl {
   width: 300px;
   margin-left: 20px;
   margin-right: 20px;
}

.addUrl, .addCustomCode{
   margin-left:20px; font-size: 12px;
}

.additionalUrls {
   width: 300px;
}
.additionalUrls .additionalHtmlUrl {
   margin-top: 2px;
}

@media screen and (max-width: 770px) {
   #htmlUrl, .additionalUrls .additionalHtmlUrl {
      margin: 0 0 5px 0;
      width: 100%;
   }
   .addUrl, .addCustomCode {
      margin-left: 0;
      margin-bottom: 25px;
      display: block;
   }
   #webpageUrl br {display:none}

}

label {
   line-height: 35px;
}

.form-inline .form-control.code {
   width: 100%;
}

h3 span.total {
   font-size: 17px;
   font-weight: bold;
}

.css-item {
   margin-top: 10px;
   border-top: 1px solid #dedede;
   padding-top: 9px;
}
.css-item .stats {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
}
.css-item .stats .tab {
   width: 180px;
}

.css-item .purifiedcss {
   display:none;
}
.css-item .hide-code {
   display:none;
}
.css-item.expanded .show-code {
   display:none;
}
.css-item.expanded .hide-code {
   display:inline;
}
.css-item.expanded .purifiedcss {
   display:block;
   width: 100%;
}
.css-item .purifiedcss textarea{
   height: 120px;
   width: 100%;
   font-family: monospace;
   margin-top: 5px;

}
.purifiedCss {
   background-color: whitesmoke;
   border: 1px solid #e2e2e2;
   font-family: monospace;
   padding: 15px;
   width: 100%;
}

section#details, section#blog {
   background-color: #efefef;
}

.error {
   background-color: #fcc;
   border-color: #f99;
}