/// Slightly lighten a color
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

//**
pre code.hljs {
  background-color: #2f383d;
  color: white;

  .subst,
  .lisp .title,
  .clojure .built_in,
  .nginx .title {
    color: #5c666f;
  }

  .string,
  .title,
  .constant,
  .parent,
  .tag .value,
  .rules .value,
  .rules .value .number,
  .preprocessor,
  .ruby .symbol,
  .ruby .symbol .string,
  .aggregate,
  .template_tag,
  .django .variable,
  .smalltalk .class,
  .addition,
  .flow,
  .stream,
  .bash .variable,
  .apache .tag,
  .apache .cbracket,
  .tex .command,
  .tex .special,
  .erlang_repl .function_or_atom,
  .markdown .header {
    color: #00fbca; // green
  }

  .comment,
  .annotation,
  .template_comment,
  .diff .header,
  .chunk,
  .markdown .blockquote {
    color: #899fab; // oil light
  }

  .number,
  .title,
  .date,
  .regexp,
  .literal,
  .smalltalk .symbol,
  .smalltalk .char,
  .go .constant,
  .change,
  .markdown .bullet,
  .markdown .link_url {
    color: #42c7f4; // blue light
  }

  .label,
  .tag,
  .javadoc,
  .ruby .string,
  .decorator,
  .filter .argument,
  .localvars,
  .array,
  .attr_selector,
  .important,
  .pseudo,
  .pi,
  .doctype,
  .deletion,
  .envvar,
  .shebang,
  .apache .sqbracket,
  .nginx .built_in,
  .tex .formula,
  .erlang_repl .reserved,
  .prompt,
  .markdown .link_label,
  .vhdl .attribute,
  .clojure .attribute,
  .coffeescript .property {
    color: #ffa0e7; // pink
  }
    
  .id,
  .phpdoc,
  .built_in,
  .aggregate,
  .css .tag,
  .javadoctag,
  .phpdoc,
  .yardoctag,
  .smalltalk .class,
  .winutils,
  .bash .variable,
  .apache .tag,
  .go .typename,
  .tex .command,
  .markdown .strong,
  .request,
  .status,
  .tag .title,
  .keyword {
    color: #ff9a56; // orange
  }

  .coffeescript .javascript,
  .javascript .xml,
  .tex .formula,
  .xml .javascript,
  .xml .vbscript,
  .xml .css,
  .xml .cdata {
    opacity: 1;  
  }
}

// general
.output-box {
  margin-bottom: 0;
  min-height: 494px;
}

.js.output-box {
  min-height: 339px;
  padding: 20px;
}

.tab-pane.output-box {
  min-height: 0;
}

.help-block {
  margin-bottom: 0;
}

.modal {
  background: transparent;
}

.container {
  max-width: 1416px;
  position: relative;
  z-index: 3;
}

// paswordless styles
body {
  background-color: #fafafa;
}

.container-fluid {

  @media (min-width: 1200px) {
    padding-right: 30px;
    padding-left: 30px;
  }
}

.form-group {
  margin-bottom: 40px;


  @media (min-width: 768px) {

    .col-left {
      padding-right: 7.5px;
    }

    .col-right {
      padding-left: 7.5px;
    }
  }
}

.form-group-aux {

  @media (min-width: 1200px) {
    width: 90%;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

// site header
.site-header {
  padding: 20px 0; 
}

header.site-header.site-header .dropdown .dropdown-menu {
  background-color: transparent;
  
  @media (min-width: 992px) {
    background-color: #fff;
  }
}

// page header
.page-header {
  border-bottom: 0;
  margin: 0 0 20px 0;
  padding-bottom: 0;
  overflow: hidden;

  @media (min-width: 768px) {}
  
  .breadcrumb {
    background-color: #fff;
    border-radius: 3px;
    margin-bottom: 0;
    text-align: center;
    
    @media (min-width: 768px) {
      text-align: left;
    }
    
    a {
      color: rgba(0, 0, 0, 0.5);

      &:hover,
      &:focus {
        color: shade(rgba(0, 0, 0, 0.5), 30%);
      }
    }
    
    > .active {
      color: rgba(0, 0, 0, 0.7);
    }
  }
  
  h2 {
    background-color: #fff;
    font-size: 16px;
    margin: 0;
    padding: 25px 15px 0 15px;
    text-align: center;
    
    @media (min-width: 768px) {
      float: right;
      padding-top: 24px;
    }

    img {
      width: 133px;
      margin-right: 10px;
    }
  }
}

// page content
.page-content {
  position: relative;

  @media (min-width: 768px) {

    .content-col-left {
      padding-right: 7.5px;
    }

    .content-col-right {
      padding-left: 7.5px;

      .nav > li > a {
        padding-top: 9px;
        padding-bottom: 28px;
      }
    }
  }

  @media (min-width: 992px) {

    .content-col-right {

      .nav > li > a {
        padding-top: 10px;
      }
    }
  }
  
  a {
    color: #4a90e2;

    &:hover,
    &:focus {
      color: shade(#4a90e2, 30%);
    }
  }
  
  // nav-tabs
  .nav.nav-tabs {
    font-size: 14px;
    margin: 0 -20px;
    padding-right: 20px;
    padding-left: 20px;

    @media (min-width: 992px) {
      font-size: 18px;
    }

    li {
      margin-top: 0;
    }
  }

  .nav > li > a {
    color: #9b9b9b;
    padding-top: 26px;
    padding-bottom: 24px;

    &:hover {
      color: shade(#9b9b9b, 30%);
    }
  }

  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 1px solid #000;
    color: #000;
    outline: 0;
  }
  
  // button "Open Me!"
  .btn.btn-primary,
  a.btn.btn-primary {
    background-color: rgba(255, 255, 255, 0.4);
    color: #797979;
    font-weight: normal;

    &:hover {
      background-color: rgba(255, 255, 255, .2);
    }
    
    &:focus {
      color: #797979;
    }
  }
  
  // button try
  .btn.btn-success, 
  a.btn.btn-success {

    &:focus {
      color: #fff;
    }
  }
}

// auxs
.wrapper-box {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;

  h2 {
    font-size: 18px;

    @media (min-width: 992px) {
      font-size: 22px;
    }
  }
}

.wrapper-box-header {
  border-bottom: 1px solid #f1f1f1;
  margin: 0 -20px;
  padding-right: 20px;
  padding-left: 20px;

  h2 {
    margin: 5px 0 25px 0;

    @media (min-width: 992px) {
      margin: 5px 0 25px 0;
    }
  }
}

.login-without-password {

  .wrapper-box-header {
    margin-bottom: 20px;
  }

  h2 {
    margin: 5px 0 25px 0;

    @media (min-width: 992px) {
      margin: 5px 0 25px 0;
    }
  }
}

.wrapper-customization {

  @media (min-width: 992px) {
    min-height: 775px;
  }
}

.panel {
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}

.panel-default > .panel-heading {
  background-color: #fff;
  border-color: #f1f1f1;
  color: #000;
  padding-top: 20px;
  padding-bottom: 20px;

  .panel-title {
    color: #000;
  }
}

// form styles
pre {
  background-color: #2f383d;
  border-radius: 3px;
}

.form-group-checkbox {
  padding-top: 12px;
  padding-bottom: 12px;

  @media (min-width: 768px) {
    margin-bottom: 28px;
  }

  @media (min-width: 992px) {
    margin-top: 0;
    margin-bottom: 0;
  }

  input[type="radio"],
  input[type="checkbox"] {
    float: right;

    @media (min-width: 768px) {
      float: left;
      margin-top: 2px;
      margin-right: 10px;
    }
  }

  .control-label {
    float: left;

    @media (min-width: 768px) {
      line-height: inherit;
    }
  }
}

.form-group-checkbox-inline {
  margin-top: 12px;
  margin-bottom: 5px;

  @media (min-width: 768px) {
    margin-top: 0;
    margin-bottom: 0;
  }

  input[type="radio"],
  input[type="checkbox"] {

    @media (min-width: 768px) {
      float: none;
      margin-top: 0;
      position: relative;
      top: -2px;
    }
  }

  .control-label {
    padding-right: 0;
    padding-left: 0;

    @media (min-width: 768px) {
      line-height: inherit;
      padding-right: inherit;
    }

    @media (min-width: 992px) {
      padding-left: inherit;
    }
  }
}

.form-group-checkbox-inline-aux {

  @media (min-width: 992px) {
    margin-top: -20px;
    margin-bottom: 20px;
  }
}

.form-group-last {
  margin-bottom: 0;
}

.control-label {
  color: #000;
  font-size: 12px;

  @media (min-width: 768px) {
    line-height: 46px;
    padding-top: 0 !important;
  }

  &.lines-2 {

    @media (min-width: 768px) {
      line-height: inherit;
    }

    @media (min-width: 1281px) {
      line-height: 46px;
    }
  }
}

.form-control {
  background-color: rgba(155, 155, 155, 0.05);
  border-color: transparent;
  border-radius: 3px;
  box-shadow: none;
  height: 46px;
  padding: 12px;

  &:focus {
    border-color: #00ADB5;
    box-shadow: none;
  }
}

.checkbox-wrapper {

  @media (min-width: 992px) {
    line-height: 46px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
    position: relative;
    top: -1px;

    @media (min-width: 992px) {
      float: left;
      margin-top: 20px;
      position: static;
      top: auto;
    }
  }
}

.lock-container-box {
  padding-top: 0; 
  padding-bottom: 0;
  
  @media (min-width: 768px) {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.output-box-result {
  background-color: #d5d7d9;
  border-radius: 3px;
  margin-top: -1px;
  margin-right: -35px;
  margin-left: -35px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  
  @media (min-width: 350px) {
    margin-right: -20px;
    margin-left: -20px;
  }
  
  @media (min-width: 768px) {
    margin-right: 0;
    margin-left: 0;
  }

  @media (min-width: 992px) {
    padding: 25px 0;  
  }
  
  .btn {
    margin: 0 auto;
    width: 300px;
    
    @media (min-width: 992px) {
      float: right;
      margin: 0 25px 0 0;
      width: 200px;
    }
  }
}

// footer
footer.site-footer {
  background-color: transparent;
}

// try free
.try-free {
  background-color: #f1f1f1;
  border-radius: 3px;
  margin-top: 15px;
  padding: 20px 0;
  text-align: center;
  
  @media (min-width: 568px) {
    padding: 80px 0;
  }
  
  @media (min-width: 768px) {
    margin-top: 0;
  }
  
  p {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
    vertical-align: middle;
    
    @media (min-width: 768px) {
      margin-bottom: 20px;
      margin: 0 20px 0 0;
      display: inline-block;
    }
  }
}
